Feat: Add static hero section

package.json

@@ -14,5 +14,10 @@
     "next": "13.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/components/common/Layout/Layout.jsx

@@ -0,0 +1,12 @@
+import Navbar from "../Navbar";
+
+const Layout = ({ children }) => {
+  return (
+    <div>
+      <Navbar />
+      <main>{children}</main>
+    </div>
+  );
+};
+
+export default Layout;

src/components/common/Layout/index.js

@@ -0,0 +1 @@
+export { default } from "./Layout";

src/components/common/Navbar/NavItem.jsx

@@ -0,0 +1,15 @@
+import Link from "next/link";
+
+const NavItem = ({ text, link }) => {
+  return (
+    <Link
+      href={link}
+      className="group relative py-2 pl-4 pr-12 border-l-4 border-black bg-black text-white uppercase overflow-hidden"
+    >
+      {text}
+      <span className="absolute w-full h-full left-0 top-full bg-white mix-blend-difference duration-700 pointer-events-none group-hover:top-0" />
+    </Link>
+  );
+};
+
+export default NavItem;

src/components/common/Navbar/Navbar.jsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import NavItem from "./NavItem";
+
+const navigationList = [
+  { text: "About", link: "/" },
+  { text: "Projects", link: "/" },
+  { text: "Contact", link: "/" },
+];
+
+const Navbar = () => {
+  return (
+    <div className="hidden justify-between items-center sticky top-0 border-t-4 border-b-4 border-black bg-white text-3xl font-bold md:flex">
+      <Link href="/" className="ml-4 mr-12">
+        HFz
+      </Link>
+      <nav className="flex items-center">
+        {navigationList.map((navigationItem) => (
+          <NavItem
+            key={navigationItem.text}
+            text={navigationItem.text}
+            link={navigationItem.link}
+          />
+        ))}
+      </nav>
+    </div>
+  );
+};
+
+export default Navbar;

src/components/common/Navbar/index.js

@@ -0,0 +1 @@
+export { default } from "./Navbar";

src/components/ui/Hero/Hero.jsx

@@ -0,0 +1,63 @@
+import Image from "next/image";
+import styles from "./Hero.module.css";
+
+const Hero = () => {
+  return (
+    <section className={styles.hero}>
+      <div className="text-center z-30">
+        <h1 className={styles.hero__header}>I am Hafez Fahmi</h1>
+        <p className="mb-8 text-3xl font-medium md:text-5xl 2xl:mb-16">
+          A Full-Stack{" "}
+          <mark className={styles.hero__highlight}>JavaScript</mark>{" "}
+          <br className="md:hidden" />
+          <span>Developer</span>
+        </p>
+      </div>
+      <div className="flex justify-center relative">
+        <div className={styles.cat__container}></div>
+        <div className="relative block h-80 w-72 2xl:w-[480px] 2xl:h-[480px]">
+          <Image
+            src="/images/cat-wizard.png"
+            alt="Cat wizard"
+            fill
+            className="z-10 object-contain"
+          />
+          <div
+            className={
+              styles.bubble +
+              " -top-14 -left-6 bg-main-yellow md:-top-6 md:-left-48 lg:-top-20 lg:-left-[340px] xl:-top-48 xl:-left-[420px] 2xl:-top-56 2xl:-left-[320px]"
+            }
+          >
+            JavaScript
+          </div>
+          <div
+            className={
+              styles.bubble +
+              " top-4 left-8 bg-main-red md:-left-20 lg:top-4 lg:-left-40 xl:top-4 xl:-left-72 2xl:top-4 2xl:-left-56"
+            }
+          >
+            Express.js
+          </div>
+          <div
+            className={
+              styles.bubble +
+              " -top-14 -right-6 bg-main-green  md:-top-6 md:-right-48 lg:-top-20 lg:-right-[340px] xl:-top-36 xl:-right-[420px] 2xl:-top-44 2xl:-right-80"
+            }
+          >
+            Node.js
+          </div>
+          <div
+            className={
+              styles.bubble +
+              " top-4 right-8 bg-main-blue md:-right-20  lg:top-4 lg:-right-40  xl:-top-2 xl:-right-52 2xl:-top-8 2xl:-right-32"
+            }
+          >
+            React
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

src/components/ui/Hero/Hero.module.css

@@ -0,0 +1,52 @@
+.hero {
+  @apply flex flex-col justify-center relative px-4 border-b-4 border-black;
+
+  min-height: 100vh;
+}
+
+.hero__header {
+  @apply mb-1 mt-8 text-6xl text-white font-extrabold tracking-wider md:text-8xl md:mb-3 md:tracking-normal;
+
+  -webkit-text-stroke: 2px #000;
+  text-shadow: 3px 3px #000;
+}
+
+.hero__highlight {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 70%,
+    #ffe663 70%,
+    #ffe663 90%,
+    rgba(255, 255, 255, 0) 90%
+  );
+}
+
+.cat__container {
+  @apply absolute -bottom-1 h-40 w-64 bg-main-red border-4 border-black 2xl:h-56 2xl:w-96;
+
+  box-shadow: 4px 5px #000;
+}
+
+.bubble {
+  @apply flex justify-center items-center absolute w-[72px] h-[72px] rounded-full border-2 border-black text-xs font-bold z-20 md:w-24 md:h-24 md:text-base;
+
+  box-shadow: 3px 3px #000;
+}
+
+.cat__container::before {
+  @apply absolute -top-full -left-1 w-64 h-40 bg-main-red border-4 border-b-0 border-black rounded-t-full 2xl:h-56 2xl:w-96;
+
+  content: "";
+  box-shadow: 4px 0px #000;
+}
+
+@media (min-width: 768px) {
+  .hero {
+    min-height: calc(100vh - 56px);
+  }
+
+  .hero__header {
+    -webkit-text-stroke: 3px #000;
+    text-shadow: 4px 4px #000;
+  }
+}

src/components/ui/Hero/index.js

@@ -0,0 +1 @@
+export { default } from "./Hero";

src/pages/_app.jsx

@@ -0,0 +1,10 @@
+import Layout from "@/components/common/Layout";
+import "@/styles/globals.css";
+
+export default function App({ Component, pageProps }) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
+}

src/pages/_document.js → src/pages/_document.jsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }

src/pages/index.jsx

@@ -0,0 +1,12 @@
+import Hero from "@/components/ui/Hero/Hero";
+import React from "react";
+
+const Index = () => {
+  return (
+    <>
+      <Hero />
+    </>
+  );
+};
+
+export default Index;