Merge pull request #6 from prince-63/version-0.0

mergi version-0.0

next.config.js

@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-
+const nextConfig = {   
     output: "export",
     images: {
         unoptimized: true,

package.json

@@ -25,6 +25,7 @@
     "next": "13.4.6",
     "next-themes": "^0.2.1",
     "postcss": "8.4.24",
+    "radix-ui": "^1.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-ga": "^3.3.1",

src/app/layout.tsx

@@ -6,7 +6,7 @@ import Header from '@/components/layout/header';
 import { Providers } from '@/lib/providers';
 import Footer from '@/components/layout/footer';
 
-const inter = Inter({ subsets: ["latin-ext"] });
+const inter = Inter({ subsets: ["latin"] });
 
 const title = 'Prince Kumar';
 const description =
@@ -27,9 +27,9 @@ export const metadata: Metadata = {
     { media: '(prefers-color-scheme: dark)', color: 'black' },
   ],
   icons: {
-    icon: '/favicon.ico',
-    shortcut: '/favicon-16x16.png',
-    apple: '/apple-touch-icon.png',
+    icon: '../public/favicon.ico',
+    shortcut: '../public/favicon-16x16.png',
+    apple: '../public/apple-touch-icon.png',
   },
 };
 

src/app/page.tsx

@@ -3,8 +3,6 @@ import HeroSection from '@/components/sections/hero';
 import ContactSection from '@/components/sections/contact';
 import AboutMeSection from '@/components/sections/about-me';
 import SkillsSection from '@/components/sections/skills';
-// import ExperienceSection from '@/components/sections/experiences';
-import TestimonialsSection from '@/components/sections/testimonials';
 import WorkSection from '@/components/sections/work';
 import { motion, useScroll } from "framer-motion";
 
@@ -19,9 +17,7 @@ export default function Home() {
       <HeroSection />
       <AboutMeSection />
       <SkillsSection />
-      {/*<TestimonialsSection />*/}
-      {/* <ExperienceSection /> */}
-      {/*<WorkSection />*/}
+      <WorkSection />
       <ContactSection />
     </>
   );

src/components/layout/header.tsx

@@ -6,9 +6,9 @@ import { Menu, X } from 'lucide-react';
 import {
   Drawer,
   DrawerTrigger,
-  DrawerContent,
   DrawerClose,
 } from '@/components/navigation/drawer';
+import { DrawerContent } from '@/components/navigation/drawer';
 import { NAV_LINKS } from '@/lib/data';
 import { mergeClasses } from '@/lib/utils';
 import useWindowSize from '@/hooks/use-window-size';
@@ -41,7 +41,7 @@ const Header = () => {
     <header id='header'
       className={mergeClasses(
         'sticky top-0 z-30 w-full border-b border-transparent bg-gray max-md:border-gray-100',
-        scrolled ? 'bg-gray/50 backdrop-blur-xl md:border-gray-100' : ''
+        scrolled ? 'bg-gray/20 backdrop-blur-xl md:border-gray-100' : ''
       )}
     >
       <div className="mx-auto flex w-full max-w-7xl items-center justify-between p-4 md:px-8">

src/components/navigation/drawer.tsx

@@ -13,8 +13,8 @@ const DrawerClose = DrawerPrimitive.Close;
 const DrawerPortal = ({
   className,
   ...props
-}: DrawerPrimitive.DialogPortalProps) => (
-  <DrawerPrimitive.Portal className={mergeClasses(className)} {...props} />
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <DrawerPrimitive.Portal {...props} />
 );
 DrawerPortal.displayName = DrawerPrimitive.Portal.displayName;
 
@@ -50,7 +50,7 @@ const drawerVariants = cva(
 
 interface DrawerContentProps
   extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>,
-    VariantProps<typeof drawerVariants> {}
+  VariantProps<typeof drawerVariants> { }
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,

src/components/sections/about-me.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import Image from "next/image";
 import PrinceKumar from "../../../public/images/prince_kumar.jpg";
 import Tag from "@/components/data-display/tag";
@@ -21,19 +23,15 @@ const AboutMeSection = () => {
             <div className="flex w-full flex-col justify-between gap-12 md:flex-row">
                 {/* Image */}
                 <div className="flex justify-center md:order-first md:justify-end">
-                    <ScrollAnimation>
-                        <Reavel>
-                            <div className="relative h-[380px] w-[320px] md:h-[460px] md:w-[380px] lg:h-[520px] lg:w-[440px]">
-                                <Image
-                                    src={PrinceKumar}
-                                    alt="Fullpose of Sagar"
-                                    className="absolute z-10 h-[360px] w-[280px] border-8 border-gray-50 max-md:left-5 md:right-0 md:top-0 md:h-[420px] md:w-[340px] lg:h-[480px] lg:w-[400px]"
-                                    style={{ objectFit: "cover" }}
-                                ></Image>
-                                <div className="absolute h-[360px] w-[320px] border-8 border-transparent bg-gray-200 max-md:top-5 md:bottom-0 md:left-0 md:h-[420px] md:w-[340px] lg:h-[480px] lg:w-[400px]"></div>
-                            </div>
-                        </Reavel>
-                    </ScrollAnimation>
+                    <div className="relative h-[380px] w-[320px] md:h-[460px] md:w-[380px] lg:h-[520px] lg:w-[440px]">
+                        <Image
+                            src={PrinceKumar}
+                            alt="Fullpose of Sagar"
+                            className="absolute z-10 h-[360px] w-[280px] border-8 border-gray-50 max-md:left-5 md:right-0 md:top-0 md:h-[420px] md:w-[340px] lg:h-[480px] lg:w-[400px] rounded-sm"
+                            style={{ objectFit: "cover" }}
+                        ></Image>
+                        <div className="absolute h-[360px] w-[320px] border-8 border-transparent bg-gray-200 max-md:top-5 md:bottom-0 md:left-0 md:h-[420px] md:w-[340px] lg:h-[480px] lg:w-[400px] rounded-sm"></div>
+                    </div>
                 </div>
 
                 {/* Content */}
@@ -57,9 +55,18 @@ const AboutMeSection = () => {
                                 >
                                     developer.
                                 </Link>{" "}
+
+                                who focuses on full-stack development, particularly
+                                using (Next js & Node js). I&apos;m excited about
+                                making digital products look great and work
+                                smoothly. I care about user experience, making
+                                designs look perfect, and writing code that&apos;s
+                                easy to read and runs really well
+
                                 who focuses on backend development, particularly
                                 using (Spring Boot). 
                                 I&apos;m passionate about creating visually appealing and seamlessly functioning digital products. I prioritize user experience, perfect designs, and writing clean, efficient code.
+
                             </Typography>
                         </Reavel>
                     </ScrollAnimation>

src/components/sections/hero.tsx

@@ -19,10 +19,10 @@ const HeroSection = () => {
                 <Image
                   src={PrinceProfile}
                   alt="Headshot of Sagar"
-                  className="absolute z-10 h-[280px] w-[240px] border-8 border-gray max-md:left-5 md:left-0 md:top-0 md:h-[320px] md:w-[280px]"
+                  className="absolute z-10 h-[280px] w-[240px] border-8 border-gray rounded-sm max-md:left-5 md:left-0 md:top-0 md:h-[320px] md:w-[280px]"
                   style={{ objectFit: 'cover' }}
                 ></Image>
-                <div className="absolute h-[280px] w-[280px] border-8 border-transparent bg-gray-200 max-md:top-5 md:bottom-0 md:right-0 md:h-[320px] md:w-[280px]"></div>
+                <div className="absolute h-[280px] w-[280px] border-8 border-transparent rounded-sm bg-gray-200 max-md:top-5 md:bottom-0 md:right-0 md:h-[320px] md:w-[280px]"></div>
               </div>
             </Reavel>
           </ScrollAnimation>
@@ -40,7 +40,12 @@ const HeroSection = () => {
               </Reavel>
               <Reavel>
                 <Typography className='mt-3'>
+
+                  I&apos;m a Full-Stack developer (Next js & Node js) with a focus
+                  on creating a user friendly websites, also i passionate about website design and OpenSource project contribution.
+
                 I specialize in backend development, proficient in technologies such as Spring Boot. My expertise includes designing and implementing robust server-side solutions, handling data storage, and ensuring the seamless functionality of web applications.
+
                 </Typography>
               </Reavel>
             </ScrollAnimation>

src/components/sections/skills.tsx

@@ -8,7 +8,7 @@ import ScrollAnimation from '@/hooks/scrollAnimation';
 
 const SkillsSection = () => {
   return (
-    <Container id='skills'>
+    <Container id='skills' className=''>
       <div className="flex flex-col items-center gap-4">
         <ScrollAnimation>
           <div className="self-center">
@@ -24,7 +24,7 @@ const SkillsSection = () => {
         </ScrollAnimation>
       </div>
 
-      <div className="grid grid-cols-3 gap-y-4 md:grid-cols-6 md:gap-y-8 lg:grid-cols-8 lg:gap-y-12">
+      <div className="grid grid-cols-3 gap-y-4 md:grid-cols-6 md:gap-y-8 lg:grid-cols-8 lg:gap-y-12 justify-center items-center pt-8">
         {TECHNOLOGIES.map((technology, index) => (
           <TechDetails {...technology} key={index} />
         ))}