Base next js project with project structure setup

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,5 +1,46 @@
-dist
-.storybook
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+.next/
+/out/
+.next
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# IDEs
+.vscode
 .idea
-.vscode
+
+# Storybook
+storybook-static
+build-storybook.log

.prettier.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+
+# Ignore artifacts
+build
+coverage

.storybook/main.js

@@ -0,0 +1,25 @@
+module.exports = {
+  stories: ["../components/**/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-actions",
+    "@storybook/addon-links",
+    "storybook-addon-sass-postcss",
+    "@chakra-ui/storybook-addon"
+  ],
+  staticDirs: ["../public"],
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      type: "javascript/auto",
+      test: /\.mjs$/,
+      include: /node_modules/,
+    });
+
+    // Return the altered config
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,18 @@
+import * as NextImage from "next/image";
+
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, "default", {
+  configurable: true,
+  value: (props) => (
+    <OriginalNextImage
+      {...props}
+      unoptimized
+      blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAADAAQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAbEAADAAMBAQAAAAAAAAAAAAABAgMABAURUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAECEf/aAAwDAQACEQMRAD8Anz9voy1dCI2mectSE5ioFCqia+KCwJ8HzGMZPqJb1oPEf//Z"
+    />
+  ),
+});
+
+export const parameters = {
+  chakra: {},
+};

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/global/SocialIcon/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Image from "next/image";
+
+interface SocialIconProps {
+  src: string;
+  alt?: string;
+  size?: number;
+  href: string;
+}
+
+const SocialIcon = ({
+  src,
+  alt = "Social Icon",
+  size = 16,
+  href,
+}: SocialIconProps) => {
+  return (
+    <a href={href} target="_blank" rel="noreferrer">
+      <Image
+        src={src}
+        alt={alt}
+        height={size}
+        width={size}
+        objectFit="contain"
+      />
+    </a>
+  );
+};
+
+export default SocialIcon;

components/home/Header/index.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import "../../../styles/main.scss";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Header from ".";
+
+export default {
+  title: "Home/Header",
+  component: Header,
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {};

src/components/App/App.test.tsx → components/home/Header/index.test.tsx

@@ -1,11 +1,11 @@
 import { render } from "@testing-library/react";
 import React from "react";
-import { App } from "./App";
+import Header from ".";
 
-describe("<App/>", () => {
-  test("smoke", () => {
+describe("<Header/>", () => {
+  test("Header", () => {
     expect(() => {
-      render(<App pageId={"1234"} />);
+      render(<Header />);
     }).not.toThrowError();
   });
 });

components/home/Header/index.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import Image from "next/image";
+import { SocialMediaLinks, Navbar, WatchMyStory, NavWrapper } from "./styled";
+import SocialIcon from "../../global/SocialIcon";
+import YouTube from "react-youtube";
+import { Flex } from "@chakra-ui/react";
+
+interface HeaderProps {}
+
+const Header = ({}: HeaderProps) => {
+  return (
+    <Flex direction="column">
+      <NavWrapper>
+        <Image src="/logo.png" height={55} width={225} objectFit="contain" />
+        <SocialMediaLinks>
+          <SocialIcon
+            src="/icons/linkedin.svg"
+            href="https://linkedin.com"
+            size={22}
+            alt="LinkedIn"
+          />
+          <SocialIcon
+            src="/icons/github.svg"
+            href="https://github.com"
+            size={22}
+            alt="Github"
+          />
+          <SocialIcon
+            src="/icons/email.svg"
+            href="mail:contact@webaddress.com"
+            size={22}
+            alt="E-Mail"
+          />
+        </SocialMediaLinks>
+        <Navbar>
+          <ul>
+            <li>
+              <a href="#resume">Resume</a>
+            </li>
+            <li>
+              <a href="#codeMentor">CodeMentor</a>
+            </li>
+            <li>
+              <a href="#myStory">My Story</a>
+            </li>
+            <li>
+              <a href="#services">Services</a>
+            </li>
+            <li>
+              <a href="#hobbies">Hobbies</a>
+            </li>
+            <li>
+              <a href="#openSource">Open Source</a>
+            </li>
+            <li>
+              <a href="#portfolio">Portfolio</a>
+            </li>
+          </ul>
+        </Navbar>
+      </NavWrapper>
+      <WatchMyStory>
+        <h1>Watch My Story</h1>
+        <YouTube
+          videoId="z1VNwapOb8E"
+          opts={{
+            height: "540",
+            width: "100%",
+            playerVars: {
+              autoplay: 0,
+            },
+          }}
+        />
+      </WatchMyStory>
+    </Flex>
+  );
+};
+
+export default Header;

components/home/Header/styled.tsx

@@ -0,0 +1,70 @@
+import styled from "styled-components";
+
+interface NavWrapperProps {}
+export const NavWrapper = styled.div<NavWrapperProps>`
+  background-color: #ff652e;
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+interface SocialMediaLinksProps {}
+export const SocialMediaLinks = styled.div<SocialMediaLinksProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 24px;
+  margin: 16px 0;
+`;
+
+interface NavbarProps {}
+export const Navbar = styled.nav<NavbarProps>`
+  width: 820px;
+  height: 40px;
+
+  ul {
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    column-gap: 2px;
+    padding-left: 0;
+    display: grid;
+    height: 100%;
+    margin: 0;
+
+    li {
+      display: flex;
+      list-style: none;
+      align-items: center;
+      justify-content: center;
+
+      a {
+        width: 100%;
+        height: 100%;
+        color: #ff652e;
+        line-height: 40px;
+        text-align: center;
+        white-space: nowrap;
+        background-color: #272727;
+
+        &:hover {
+          background-color: #111111;
+        }
+      }
+    }
+  }
+`;
+
+interface WatchMyStoryProps {}
+export const WatchMyStory = styled.section<WatchMyStoryProps>`
+  background-color: #272727;
+  color: white;
+  text-align: center;
+  width: 100%;
+
+  h1 {
+    margin: 20px;
+    font-family: "PT Mono", monospace;
+  }
+`;

components/home/index.ts

@@ -0,0 +1,3 @@
+import Header from "./Header";
+
+export { Header };