updated & added projects section

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bio",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/globals.css

@@ -30,4 +30,25 @@
   --app-gray-800: 243 244 246;
   --app-gray-900: 249 250 251;
   --app-gray-950: 255 255 255;
-}
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(231, 231, 231);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(86, 86, 86);
+  border: 3px solid rgba(var(--app-gray-200), 1);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background-color: rgb(55, 65, 81);
+}
+
+.dark ::-webkit-scrollbar-track {
+  background: white;
+}

src/app/layout.tsx

@@ -1,10 +1,9 @@
 import { Metadata } from "next";
-
 import "./globals.css";
 import Header from "@/components/layout/header";
 import { Providers } from "@/lib/providers";
 import Footer from "@/components/layout/footer";
-import InterFont from "@/components/general/InterFont";
+import InterFont from "@/components/general/inter-font";
 import { GoogleAnalytics } from "@next/third-parties/google";
 
 const title = "Prince Kumar Prasad!";
@@ -31,6 +30,14 @@ export const metadata: Metadata = {
     "web developer",
     "web designer",
     "web development",
+    "Android Developer",
+    "Mobile Developer",
+    "Mobile Development",
+    "Flutter Developer",
+    "Jetpack Compose Developer",
+    "React Developer",
+    "Next Developer",
+    "Node Developer",
   ],
   creator: "Prince Kumar Prasad",
   icons: {

src/app/page.tsx

@@ -5,7 +5,7 @@ import ContactSection from "@/components/sections/contact";
 import AboutMeSection from "@/components/sections/about-me";
 import SkillsSection from "@/components/sections/skills";
 import { motion, useScroll } from "framer-motion";
-// import ProjectSection from '@/components/sections/project';
+import ProjectSection from "@/components/sections/project";
 
 export default function Home() {
   const { scrollYProgress } = useScroll();
@@ -18,7 +18,7 @@ export default function Home() {
       <HeroSection />
       <AboutMeSection />
       <SkillsSection />
-      {/* <ProjectSection />  */}
+      <ProjectSection />
       <ContactSection />
     </>
   );

src/components/data-display/project-details.tsx

@@ -5,7 +5,6 @@ import { PROJECTS } from "@/lib/data";
 import Image from "next/image";
 import spaceGrotesk from "../general/space-grotesk-font";
 import Tag from "@/components/data-display/tag";
-import Link from "next/link";
 
 export default function ProjectDetails() {
   return (
@@ -41,7 +40,7 @@ export default function ProjectDetails() {
                     onClick={() => window.open(project.url, "_blank")}
                     size={16}
                   />
-                  Github
+                  GitHub
                   <div className="hover:bg-gray-50 [&_svg]:stroke-gray-500">
                     <ExternalLink width={20} />
                   </div>

src/components/sections/about-me.tsx

@@ -3,8 +3,6 @@ import PrinceKumar from "../../../public/images/about_image.jpg";
 import Tag from "@/components/data-display/tag";
 import Container from "@/components/layout/container";
 import Typography from "@/components/general/typography";
-import Link from "@/components/navigation/link";
-import { EXTERNAL_LINKS } from "@/lib/data";
 import Reavel from "@/hooks/Reavel";
 import spaceGrotesk from "../general/space-grotesk-font";
 
@@ -32,66 +30,51 @@ const AboutMeSection = () => {
         </div>
 
         {/* Content */}
-        <div className="flex max-w-xl flex-col gap-6">
+        <div className="flex max-w-xl flex-col gap-3">
           <Reavel>
             <Typography
               variant="h5"
               className={`${spaceGrotesk.className} text-lg`}
             >
-              Curious about me? Here you have it:
+              Curious about me? Here&apos;s a bit of my journey:
             </Typography>
           </Reavel>
 
           <Reavel>
             <Typography className={`${spaceGrotesk.className} text-lg`}>
-              I&apos;m a{" "}
-              <Link
-                noCustomization
-                externalLink
-                withUnderline
-                href={EXTERNAL_LINKS.GITHUB}
-              >
-                Aspiring Developer.
-              </Link>{" "}
-              who focuses on development, particularly using (Spring Boot,
-              React.js & Android). I&apos;m passionate about creating visually
-              appealing and seamlessly functioning digital products. I
-              prioritize user experience, perfect designs, and writing clean,
-              efficient code.
+              I&apos;m a self-taught Web & App Developer with expertise in
+              Spring Boot, Microservices, REST APIs, Node.js, Express.js,
+              React.js, Next.js, Flutter, and Jetpack Compose. I&apos;m
+              passionate about creating scalable, high-performance mobile and
+              web applications with a focus on clean code, maintainable
+              architecture, and seamless user experiences.
             </Typography>
           </Reavel>
 
           <Reavel>
             <Typography className={`${spaceGrotesk.className} text-lg`}>
-              I began my journey as a developer in 2022, and since then,
-              I&apos;ve continued to grow and evolve as a developer, taking on
-              new challenges and learning the latest technologies along the way.
+              Since starting my development journey in 2022, I&apos;ve taken a
+              proactive approach to growth, consistently challenging myself with
+              complex projects and advancing my skills in frameworks like Spring
+              Boot and Jetpack Compose. My goal is to build solutions that not
+              only perform exceptionally but are polished and intuitive for
+              users. I prioritize creating high-quality applications, grounded
+              in clean, maintainable code and scalable design, always aiming for
+              visually engaging and user-centered experiences.
             </Typography>
           </Reavel>
 
           <Reavel>
             <Typography className={`${spaceGrotesk.className} text-lg`}>
-              I focus on my goals, value productivity, and aim for leadership. I
-              keep my social circle small to avoid distractions.
+              Driven by a continuous desire to grow, I prioritize productivity
+              and seek out projects that expand my skill set. Staying focused on
+              my goals, I embrace new opportunities to deepen my expertise while
+              minimizing distractions. This disciplined approach keeps me
+              adaptable, innovative, and ready to tackle complex
+              challenges—qualities I believe make me a valuable addition to any
+              team striving for excellence.
             </Typography>
           </Reavel>
-          {/*
-                    <Reavel>
-                        <Typography className={`${spaceGrotesk.className} text-lg`}>
-                            When I&apos;m not in full-on developer mode, you can
-                            find me on{" "}
-                            <Link
-                                noCustomization
-                                externalLink
-                                withUnderline
-                                href={EXTERNAL_LINKS.Linkedin}
-                            >
-                                Linkedin
-                            </Link>
-                            .
-                        </Typography>
-                    </Reavel>
-                    */}
           <Reavel>
             <Typography
               variant={"h6"}

src/components/sections/hero.tsx

@@ -40,10 +40,12 @@ const HeroSection = () => {
             </Reavel>
             <Reavel>
               <Typography className={`${spaceGrotesk.className} text-lg mt-3`}>
-                Aspiring Developer, focusing Spring Boot, Microservices, Rest
-                API, Docker, & React.js. My expertise includes designing,
-                implementing, structuring code and developing scalable,
-                high-performance applications.
+                Self-Taught Web & App Developer with Proficiency in Spring Boot,
+                Microservices, REST APIs, Node.js, Express.js, React.js,
+                Next.js, Flutter, and Jetpack Compose | Dedicated to Creating
+                Scalable, High-Performance Mobile and Web Applications with
+                Clean Code, Maintanable Architecture, and Seamless User
+                Experiences.
               </Typography>
             </Reavel>
           </div>

src/components/sections/project.tsx

@@ -4,7 +4,6 @@ import Tag from "@/components/data-display/tag";
 import Container from "@/components/layout/container";
 import ScrollAnimation from "@/hooks/scrollAnimation";
 import spaceGrotesk from "../general/space-grotesk-font";
-import Reavel from "@/hooks/Reavel";
 import Typography from "../general/typography";
 import ProjectDetails from "../data-display/project-details";