header, footer, home and about are working now

src/App.jsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import "./App.css";
 import { Header, Footer } from "./Components";
 import { Outlet } from "react-router-dom";

src/Components/About.jsx

@@ -1,11 +1,49 @@
-import React from 'react'
-
+import React from "react";
+import {BigButton} from "./index"
 const About = () => {
   return (
-    <div>
-
+    <div className="about w-full h-screen flex flex-col items-center justify-start">
+      <span className="pt-24 w-full">
+        <h1 className="name text-center w-full text-3xl font-bold  ">
+          About me
+        </h1>
+        <p className="subheading font-semibold text-center text-sm text-gray-700/70 p-4">
+          My Introduction
+        </p>
+      </span>
+      <div className="bottom w-full h-auto flex flex-col sm:flex-row ">
+        <div className=" left w-full  sm:w-1/2 h-full flex px-6 py-4  items-center justify-center">
+          <div className="img overflow-hidden w-[400px] h-[300px] min-h-[150px] rounded-[8%]">
+            <img
+              src="/imgMe.PNG"
+              alt="myimage"
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+        <div className=" right w-full  sm:w-1/2 h-full flex-col sm:px-10 py-4 gap-4">
+          <div className="cards w-full flex items-center justify-evenly my-4">
+            <div className="card flex flex-col gap-1 items-center justify-center border rounded-lg w-[150px]">
+              <span className="text-sm font-semibold"> Post graduated </span>
+              <p className="text-xs font-medium text-slate-800/80">
+              (MDU) 2022 - 2024
+              </p>
+            </div>
+            <div className="card flex flex-col gap-1 items-center justify-center border rounded-lg w-[150px]">
+              <span className="text-sm font-semibold"> Projects soled </span>
+              <p className="text-xs font-medium text-slate-800/80">
+                4+ mini projects
+              </p>
+            </div>
+          </div>
+          <div className="details py-4 px-2 w-[90%] text-slate-800/80 font-semibold text-justify">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum fugit eos, molestias aliquam sapiente mollitia accusantium ipsum iste! Veniam, quo nam. Nam itaque laboriosam quo ullam dolores consequuntur omnis ex deleniti reprehenderit architecto?
+          </div>
+          <BigButton Childrens={"Download CV "} className="rounded-lg duration-200 hover:bg-black" bgColor="bg-black/90" />
+        </div>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default About
+export default About;

src/Components/Container/Container.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Container = ({Childrens}) => {
+  return (
+    <div className='w-full h-screen overflow-x-hidden overflow-y-scroll scroll-smooth' >
+      {Childrens}
+    </div>
+  )
+}
+
+export default Container

src/Components/Footer/Footer.jsx

@@ -1,10 +1,35 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 const Footer = () => {
   return (
-    <div>
-
-    </div>
+    <footer className='w-full min-h-[50vh] flex-col items-center justify-evenly bg-gray-100 border-t'>
+      {/* <div className="footerbar"></div> */}
+      <span className="myname text-4xl font-mono font-semibold text-slate-800 block text-center pt-8 pb-4">Kuldeep kumar</span>
+      <span className="linkes w-full flex items-center justify-center gap-2 border-b ">
+        <Link to={'/about'} className=' text-sm text-slate-700/70 duration-200 hover:text-slate-700 px-2 py-2 font-semibold'>
+        About
+        </Link>
+        <Link to={'/skills'} className=' text-sm text-slate-700/70 duration-200 hover:text-slate-700 px-2 py-2 font-semibold'>
+        Skills
+        </Link>
+        <Link to={'/projects'} className=' text-sm text-slate-700/70 duration-200 hover:text-slate-700 px-2 py-2 font-semibold'>
+        Projects
+        </Link>
+      </span>
+      <span className="medialinks w-full flex items-center justify-center gap-2 my-4 py-4 ">
+        <Link to={"https://github.com/mrkuldeep01/"} className='bg-black/80 hover:bg-black duration-200 text-white px-2 py-1 font-medium rounded-md'>
+        Git
+        </Link>
+        <Link to={"https://linkedin.com/in/kuldeep-kumar-a4b71a258"} className='bg-black/80 hover:bg-black duration-200 text-white px-2 py-1 font-medium rounded-md'>
+        Lin
+        </Link>
+        <Link to={"mailto:kkharoliya20@gmail.com"} className='bg-black/80 hover:bg-black duration-200 text-white px-2 py-1 font-medium rounded-md'>
+        Mail
+        </Link>
+        </span>
+        <p className="copyright  text-sm text-slate-700/70 px-2 py-2 font-semibold text-center">@ mr-kumar . All rights reserved</p>
+    </footer>
   )
 }
 

src/Components/Header/Header.jsx

@@ -15,7 +15,7 @@ const Header = () => {
     setOnHam((pre) => !pre);
   };
   return (
-    <header className="w-full px-4 py-2 mt-0 mb-2 shadow-lg shadow-black-100/40 relative">
+    <header className="w-full backdrop-blur-md px-4 py-2 mt-0 mb-2 shadow-lg shadow-black-100/40 fixed top-0 left-0 z-40">
       <nav className="w-full flex items-center justify-between px-8 py-2">
         <Link to={"/"} className="logo outline-none ">
           <Logo />
@@ -31,7 +31,7 @@ const Header = () => {
           {" "}
           Hm{" "}
         </button>
-    {/* ================== ham content ===================== */}
+        {/* ================== ham content ===================== */}
         <ul
           className={`flex-col Ham z-10 px-2 py-2  bg-black/30 rounded-l-lg absolute top-2 right-2 inline-block md:hidden ${
             onHam ? "inline-block" : "hidden"
@@ -41,9 +41,9 @@ const Header = () => {
           {/* ============= close ham btn ============ */}
           <button
             className="px-2 py-1 my-1 w-full bg-black/80 text-white duration-200 hover:bg-black rounded-md"
-            onClick={(e)=>{
+            onClick={(e) => {
               e.stopPropagation();
-              toggleHamDisplay()
+              toggleHamDisplay();
             }}
           >
             close
@@ -60,14 +60,14 @@ const Header = () => {
             </Link>
           ))}
         </ul>
-          {/* ================ ham content finished================== */}
+        {/* ================ ham content finished================== */}
 
-          {/* -------------- nav items --------------- */}
+        {/* -------------- nav items --------------- */}
         <ul className="gap-1 w-auto hidden md:flex">
           {navItems.map((item) => (
-            <li key={item.url} className="px-2 py-2 font-semibold ">
-              {item.name}
-            </li>
+            <Link key={item.name} to={item.url}>
+              <li className="px-2 py-2 font-semibold text-slate-900/80 hover:text-slate-950 duration-200">{item.name}</li>
+            </Link>
           ))}
         </ul>
         {/* ---------------- nav done ----------------- */}

src/Components/Home.jsx

@@ -1,11 +1,35 @@
-import React from 'react'
+import React from "react";
+import BigButton from "./BigButton";
 
 const Home = () => {
   return (
-    <div>
+    <div className="w-full min-h-screen pt-20  px-2 sm:px-8 flex flex-col-reverse sm:flex-row items-center justify-center">
 
+      <div className="leftside w-full my-6 sm:my-4 sm:w-1/2 flex-col justify-center items-center gap-2 px-2 sm:px-8 relative">
+      <h2 className="name text-4xl font-extrabold capitalize py-4 ">Kuldeep kumar 👋</h2>
+      <span className="role flex items-center justify-start gap-2">
+      <p className="w-1/5 border"></p>
+      <p className="rolename text-lg w-auto text-gray-700/70 font-semibold">web dev.</p>
+      </span>
+      <p className="overview py-2 my-4 sm:w-[90%] w-full text-gray-700/70 font-semibold ">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam perspiciatis corporis ea, aspernatur asperiores.</p>
+      <BigButton  Childrens={"Say hello! ☕"} className=" rounded-xl" />  
+      {/* <button className="scroll text-sm font-semibold text-gray-700/70 px-4 py-2 rounded-lg bg-gray-400/10 mt-20 hidden sm:block"> scroll down 👇</button> */}
+      </div>
+
+
+
+      <div className="rightside w-full my-8  sm:w-1/2 sm:my-4 h-full flex items-center justify-center">
+        <div className="image w-[250px] h-[250px] bg-black/20 rounded-[40%] rotate-[35deg] p-4 border-8 border-black shadow-2xl shadow-slate-950 ">
+          <img
+            src="/vite.svg"
+            alt="kuldeep image"
+            className="w-full h-full object-cover -rotate-[35deg] p-2"
+          />
+        </div>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;