Basic Structure

components/Buttons/Default/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Button = () => {
+  return (
+    <div className="relative hover:-translate-x-1 hover:-translate-y-1 active:translate-y-0 active:translate-x-0 transition-all ease-in-out">
+      <a
+        href="#"
+        className="px-12 py-6 tracking-widest bg-primary-black text-primary hover:bg-primary-black hover:text-primary "
+      >
+        Resume
+      </a>
+    </div>
+  );
+};
+
+export default Button;

components/Header/Navbar/index.tsx

@@ -5,7 +5,7 @@ const NavBar = () => {
     <>
       <div className="navbar bg-primary">
         <div className="flex-1">
-          <a className="btn text-primary-black btn-ghost hover:bg-primary-black hover:text-primary normal-case text-xl">
+          <a href="#" className=" text-primary-black uppercase text-xl">
             VK
           </a>
         </div>

components/HeroSection/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Button from '../Buttons/Default';
+
+const HeroSection = () => {
+  return (
+    <main className="relative  w-full h-full flex flex-col items-center">
+      <section className="ralative h-2/4 w-full flex flex-col items-center text-primary mix-blend-difference ">
+        <h1 className="relative top-4 font-black text-6xl tracking-wider">
+          Hi
+        </h1>
+        <h2 className="relative top-8 font-bold text-4xl tracking-widest">
+          I&apos;m Vishal Kumar
+        </h2>
+        <h3 className="relative top-8 text-4xl font-bold tracking-widest">
+          A Self Taught
+        </h3>
+        <h4 className="relative top-16 text-4xl font-semibold tracking-widest">
+          FullStack Developer
+        </h4>
+        <p className="relative top-16 tracking-[2.2px]">
+          on the way to become Senior of MySelf 🔥
+        </p>
+      </section>
+      <section className="relative w-full h-full flex flex-col justify-center items-center">
+        <Button />
+      </section>
+    </main>
+  );
+};
+
+export default HeroSection;

pages/index.tsx

@@ -1,6 +1,7 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import NavBar from '../components/Header/Navbar';
+import HeroSection from '../components/HeroSection';
 
 const Home: NextPage = () => {
   return (
@@ -10,8 +11,9 @@ const Home: NextPage = () => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="absolute top-0 left-0 w-full h-full bg-primary">
+      <main className="absolute top-0 left-0 w-screen h-screen bg-primary overflow-hidden">
         <NavBar />
+        <HeroSection />
       </main>
     </>
   );

styles/globals.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.js

@@ -6,6 +6,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: 'Josefin Sans',
+      },
       colors: {
         primary: '#E7E7E5',
         'primary-black': '#2A2A2A',