Updated the profile

package.json

@@ -16,7 +16,7 @@
     "react-icons": "^4.9.0",
     "react-router": "^6.11.2",
     "react-router-dom": "^6.11.2",
-    "react-scroll": "^1.8.9",
+    "react-scroll": "^1.9.0",
     "react-tsparticles": "^2.11.0",
     "react-typewriter-effect": "^1.1.0"
   },

src/App.jsx

@@ -1,15 +1,21 @@
+import About from './components/About'
+import Blog from './components/Blog'
+import Footer from './components/Footer'
 import Home from './components/Home'
 import Navbar from './components/Navbar'
-
-
-
+import Projects from './components/Projects'
+import './index.css'
 
 function App() {
 
   return (
-    <div>
+    <div className='bg-black font-mono'>
        <Navbar/>
        <Home/>
+       <About/>
+       <Projects/>
+       <Blog/>
+       <Footer/>
     </div>
   )
 }

src/components/About.jsx

@@ -1,9 +1,99 @@
-import React from 'react'
+import React from "react";
 
 const About = () => {
   return (
-    <div>About</div>
-  )
-}
+    <div className="h-96" id='about'>
+      <div className="text-center mb-10">
+        <span className="text-2xl md:text-5xl text-amber-500 font-extrabold">
+          My Skillsets
+        </span>
+      </div>
+      <div className="mx-8 md:mx-20">
+        <div className="text-md md:text-2xl text-green-500 mb-4">
+          {" "}
+          My skill-set include building responsive web apps in ReactJS and
+          projects using HTML, CSS and Vanilla JS. I am familiar with Git,
+          Github and Web Hosting. I have also created projects using MERN stack
+        </div>
+        <div className="text-md md:text-2xl text-green-500 mb-2">
+        Technoloies I know
+        </div>
+        <div className="flex flex-row md:gap-8 gap-1">
+          <a href="http://www.w3.org/html/logo/">
+            <img
+              src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png"
+              width="63"
+              height="64"
+              alt="HTML5 Powered"
+              title="HTML5 Powered"
+            />
+          </a>
+          <a href="https://getbootstrap.com" target="_blank" rel="noreferrer">
+            {" "}
+            <img
+              src="https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg"
+              alt="bootstrap"
+              width="63"
+              height="64"
+            />{" "}
+          </a>{" "}
+          <a
+            href="https://www.w3schools.com/css/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {" "}
+            <img
+              src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg"
+              alt="css3"
+              width="63"
+              height="64"
+            />{" "}
+          </a>{" "}
+          <a href="https://www.figma.com/" target="_blank" rel="noreferrer">
+            {" "}
+            <img
+              src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg"
+              alt="figma"
+              width="63"
+              height="64"
+            />{" "}
+          </a>{" "}
+          <a href="https://git-scm.com/" target="_blank" rel="noreferrer">
+            {" "}
+            <img
+              src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg"
+              alt="git"
+              width="63"
+              height="64"
+            />{" "}
+          </a>{" "}
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {" "}
+            <img
+              src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg"
+              alt="javascript"
+              width="63"
+              height="64"
+            />{" "}
+          </a>{" "}
+          <a href="https://reactjs.org/" target="_blank" rel="noreferrer">
+            {" "}
+            <img
+              src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg"
+              alt="react"
+              width="63"
+              height="64"
+            />{" "}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default About
+export default About;

src/components/Blog.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+const Blog = () => {
+  return (
+    <div className="h-screen md:h-screen mt-10 md:mt-15 " id='blog'>
+      <div className="text-center md:mb-20 mb-10">
+        <span className="text-2xl md:text-5xl text-amber-500 font-extrabold ">
+          Blog
+        </span>
+      </div>
+      <div className="flex flex-col gap-5 md:gap-8 items-center  md:flex-row md:justify-center">
+        <div className="relative">
+          <div className="bg-gray-400 shadow-md p-4 absolute top-4 left-4 z-0 w-full md:h-72 h-60 rounded-xl"></div>
+          <a href="https://dgsoftwaredev.hashnode.dev/optimizing-frontend-performance-techniques-for-faster-websites" className="text cursor-pointer">
+            <div className="text-black border-2 h-60 md:h-72 relative z-10 bg-blue-500 p-4 rounded-xl w-72">
+              <p className="text-2xl md:text-4xl font-bold">
+              Optimizing Frontend Performance Techniques for faster websites
+              </p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Blog;

src/components/Footer.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div className='h-10  bg-amber-400 mt-5 text-center hidden md:flex'>
+      <span className='my-auto'>Made with love by deepak</span>
+    </div>
+  )
+}
+
+export default Footer

src/components/Home.jsx

@@ -1,12 +1,29 @@
-import React, { useEffect, useState } from 'react';
-import resumePDF from '../assets/Resume.pdf';
+import React, { useEffect, useState } from "react";
 
-const Home = () => {
 
+const Home = () => {
   return (
-    <div>
-
-
+    <div className="flex  flex-col  items-center h-screen bg-black text-green-400 font-mono " id='home'>
+      <div className="my-3 md:my-6">
+        <div className="text-center">
+
+        <p className="text-3xl md:text-6xl text-blue-500 mb-5" >🙋‍♂️ Hello world!</p>
+        <span className="text-xl md:text-2xl">I'm Deepak gupta, a software engineer from India.</span>
+        </div>
+      </div>
+      <div className="flex flex-row mx-4 md:mx-32  gap-2 md:gap-12 ">
+        <div >
+        <p className="text-md md:text-2xl mb-10"> I'm a self-taught FrontEnd developer, deeply passionate about coding and creating cool projects.</p>
+        <p className="text-md md:text-2xl"> I am enthusiastic about learning new things.Like to deepdive into the world of open source and doing contribution. I'll be sharing some of my projects here.Feel free to explore,and don't hesitate to connect! 🚀✨</p>
+        <div className="text-md md:text-2xl mt-8 flex gap-5 ">
+          <a href="https://github.com/guptadeepak8" target="_blank"><span className="transition-all duration-300 hover:bg-amber-500 font-extrabold hover:text-black border-r-4 border-b-4 border p-2 rounded-lg text-amber-500">Github</span></a>
+          <a href="https://twitter.com/Deepakg0808"><span className="transition-all duration-300 hover:bg-amber-500 font-extrabold hover:text-black border-r-4 border-b-4 border p-2 rounded-lg text-amber-500" >Twitter</span></a>
+          <a href="https://www.linkedin.com/in/guptadeepakk8/"><span className="transition-all duration-300 hover:bg-amber-500 font-extrabold hover:text-black border-r-4 border-b-4 border p-2 rounded-lg text-amber-500">Linkdin</span></a>
+        </div>
+
+        </div>
+        {/* <div className="bg-red-300 w-48 h-48 rounded-full flex-shrink-0 sm:hidden"></div>  */}
+      </div>
     </div>
   );
 };

src/components/Navbar.jsx

@@ -1,23 +1,38 @@
 import React from 'react'
-
+import { Link, animateScroll as scroll } from 'react-scroll';
 const Navbar = () => {
+
+  const scrollToTop = () => {
+    scroll.scrollToTop({
+      smooth: true,
+      duration: 500,
+    });
+  };
+
   return (
-    <div className='px-2 py-4'>
-      <header className='flex flex-row justify-between'>
-          <div  className='ml-4' >
-          <span className='font-2xl '>Deepak G.</span>
-          </div>
-          <nav >
-            <ul className='flex flex-row '>
-              <li className='mr-4'>Home</li>
-              <li className='mr-4'>About</li>
-              <li className='mr-4'>Project</li>
-              <li className='mr-4'>Contact me</li>
-            </ul>
-          </nav>
-
-      </header>
+    <>
+    <nav className='md:sticky md:top-0 z-10 bg-black backdrop-filter backdrop-blur-lg bg-opacity-5'>
+    <div className="max-w-5xl mx-auto px-4 font-mono">
+      <div className="flex items-center justify-between h-16">
+        <span className="text-2xl text-amber-500 font-semibold">Deepak.dev</span>
+        <div className="hidden md:flex gap-10 text-lg text-amber-600 ">
+            <Link to="home" smooth={true} duration={500} className='hover:text-amber-900'>Home</Link>
+            <Link to="about" smooth={true} duration={500} className='hover:text-amber-900'>About</Link>
+            <Link to="projects" smooth={true} duration={500} className='hover:text-amber-900'>Projects</Link>
+            <Link to="blog" smooth={true} duration={500} className='hover:text-amber-900'>Blog</Link>
+        </div>
+      </div>
     </div>
+  </nav>
+  <div className='md:hidden fixed bottom-0 left-0 right-0  p-4 bg-black backdrop-filter backdrop-blur-lg bg-opacity-5'>
+  <div className="flex gap-8 flex-row text-lg text-amber-600 ">
+            <Link to="home" smooth={true} duration={500} className='hover:text-amber-900'>Home</Link>
+            <Link to="about" smooth={true} duration={500} className='hover:text-amber-900'>About</Link>
+            <Link to="projects" smooth={true} duration={500} className='hover:text-amber-900'>Projects</Link>
+            <Link to="blog" smooth={true} duration={500} className='hover:text-amber-900'>Blog</Link>
+        </div>
+</div>
+    </>
   )
 }
 

src/components/ProjectCard.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const Project = ({name,desc,link,code}) => {
+  return (
+    <div className='text-amber-300 border-2 md:h-96 h-80 md:w-72 w-72 rounded-xl '>
+      <div className='md:h-8 h-6 border-b-2 flex items-center '>
+        <div className='bg-red-500 rounded-full h-2 w-2 ml-3'></div>
+        <div className='bg-amber-400 rounded-full h-2 w-2 ml-3'></div>
+        <div className='bg-green-500 rounded-full h-2 w-2 ml-3'></div>
+      </div>
+
+      <div className='flex flex-col  '> 
+      <div className='text-center px-5 py-2'>
+        <span className='md:text-2xl text-xl font-extrabold'>{name}</span>
+        <p className='text-sm md:text-md mt-5'>{desc}</p>
+      </div>
+        <div className=' md:mt-5 mt-2 text-center '>
+        <a  href={link}><span className="transition-all duration-300 hover:bg-green-500 font-extrabold hover:text-black border-r-4 border-b-4 border px-5 py-2 rounded-lg text-green-500" >Live</span></a>
+        <a href={code}><span className="transition-all duration-300 hover:bg-blue-500 font-extrabold hover:text-black border-r-4 border-b-4 border px-5 py-2 rounded-lg ml-3 text-blue-500" >Code</span></a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Project

src/components/Projects.jsx

@@ -1,8 +1,52 @@
 import React from 'react'
+import Project from './ProjectCard'
 
 const Projects = () => {
+
+  const projectData=[
+    {
+      name:'Ecommerce',
+      desc:'Build a e-commerce platform using React for the frontend, Redux for state management, and Tailwind CSS for styling. The backend is powered by Node.js and Express, connected to a MongoDB database. This project includes features such as product listing, shopping cart and a checkout process.',
+      link:'https://ecommerce-web-mern.onrender.com/',
+      code:'https://github.com/guptadeepak8/ecommerce',
+   },
+    {
+      name:'Expense-mern',
+      desc:'Expense Tracker is a MERN stack application designed to help users manage their finances effectively. Record all your expenses, track your monthly expenditures, and features such as transaction editing and deletion. This app provides a user-friendly interface for financial tracking.',
+      link:'https://expanzer-mern.netlify.app/',
+      code:'https://github.com/guptadeepak8/expense-mern',
+   },
+    {
+      name:'Chatter',
+      desc:'Chatter is a real-time chatting application that enables users to communicate seamlessly. Built using React and Firebase, this app offers a dynamic and responsive chat interface. Stay connected with friends and colleagues through this intuitive and efficient chatting platform.',
+      link:'https://what-the-chat.netlify.app/',
+      code:'https://github.com/guptadeepak8/chatter',
+   },
+    {
+      name:'To-do app',
+      desc:'Take control of your daily tasks with this task manager application. Built using React and Typescript, the To-do app allows users to organize and manage their daily tasks efficiently. Enhance your productivity with features like task addition and completion tracking.',
+      link:'https://tasker-todo.netlify.app',
+      code:'https://github.com/guptadeepak8/todoApp',
+   },
+]
   return (
-    <div>Projects</div>
+    <div className="max-h-max md:h-screen" id='projects'>
+      <div className='text-center md:mb-20 mb-10'>
+      <span className='text-2xl md:text-5xl text-amber-500 font-extrabold '>Side-Projects</span>
+      </div>
+      <div className='flex flex-col gap-5 md:gap-8 items-center  md:flex-row md:justify-center'>
+        {
+          projectData.map((props,id)=>{
+            return(
+              <>
+                <Project key={id} name={props.name} desc={props.desc} link={props.link} code={props.code}/>
+              </>
+            )
+          }) 
+        }
+      </div>
+
+    </div>
   )
 }
 

vite.config.js

@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+
 })