Update styles and links in components

thakurdotdev · May 3, 2024 · 32d1d01 · 32d1d01
1 parent 1611bfc
commit 32d1d01
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 130 deletions.
diff --git a/app/(sections)/contact/page.tsx b/app/(sections)/contact/page.tsx
@@ -40,7 +40,7 @@ export default function page() {
     <div className="w-full flex animate_in flex-col min-h-full justify-center items-center">
       <h1 className="text-3xl font-semibold text-center my-10">Contact</h1>
       <div className="flex flex-col md:flex-row lg:w-[70%] items-center justify-around">
-        <Card className="w-[90vw] lg:w-[500px] drop-shadow-md">
+        <Card className="w-[90vw] lg:w-[500px]">
           <CardHeader className="text-center font-semibold">
             Feel Free To Write Anything
           </CardHeader>
@@ -76,7 +76,7 @@ export default function page() {
               <div>
                 <Button
                   disabled={isSubmitting}
-                  variant="default"
+                  variant="secondary"
                   className="w-full"
                   type="submit"
                 >

diff --git a/app/(sections)/experience/Education.tsx b/app/(sections)/experience/Education.tsx
@@ -5,33 +5,41 @@ import NextImage from "@/components/NextImage";
 
 const Education = () => {
   return (
-    <div className="flex animate_in flex-col my-20 ">
-      <div className="max-w-[32rem] flex justify-center items-center mx-auto">
-        <ol className="relative border-s  border-gray-200 dark:border-gray-700">
+    <div className="flex flex-col items-center my-20">
+      <div className="max-w-3xl mx-auto">
+        <ol className="relative border-l-2 border-gray-200 dark:border-gray-700">
           {Data.map((data) => (
-            <li key={data.name} className="mb-10 ms-6">
-              <span className="absolute flex items-center justify-center w-10 h-10 rounded-full -start-5 md:-start-6  ring-2">
-                <NextImage
-                  src={data.logo}
-                  width={40}
-                  height={40}
-                  className="rounded-full"
-                  alt={data.name}
-                />
-              </span>
-              <h3 className="flex flex-col md:flex-row mb-2 ml-3 text-lg font-semibold">
-                {data.name}
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className=" max-w-fit md:ms-3"
-                >
-                  {data.timeSpan}
-                </Button>
-              </h3>
-              <time className="block ml-3 mb-2 text-base font-normal leading-none text-blue-400-200 ">
-                {data.course}
-              </time>
+            <li className="mb-10 ml-6 " key={data.name}>
+              <div className="flex items-center">
+                <span className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 ring-2 ring-white dark:ring-gray-800 shadow-md">
+                  <NextImage
+                    src={data.logo}
+                    width={40}
+                    height={40}
+                    className="rounded-full"
+                    alt={data.name}
+                  />
+                </span>
+                <div className="ml-4">
+                  <h3 className="flex flex-col lg:flex-row text-lg font-semibold">
+                    {data.name}
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      className="max-w-fit max-md:my-1 md:ml-3 px-3 py-1 rounded-full"
+                    >
+                      {data.timeSpan}
+                    </Button>
+                  </h3>
+                  <p className="text-base mt-2 font-medium text-gray-600 dark:text-gray-400">
+                    {data.department}
+                     <span className="text-base ml-2 font-mono text-gray-600 dark:text-gray-400">
+                    ({data.course})
+                  </span>
+                  </p>
+
+                </div>
+              </div>
             </li>
           ))}
         </ol>
@@ -47,12 +55,14 @@ const Data = [
     name: "Marwadi University",
     logo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbKRZ3cXcWn67pqykFC3pBO7F-ESU96o5wLVWy7QrlDHslvAe9ifAE&s",
     timeSpan: "2020 - 2024",
-    course: "Bachelor of Engineering in Computer Science",
+    department: "Computer Engineering",
+    course: "B.Tech",
   },
   {
     name: "Samastipur College Samastipur",
     logo: "https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/BSEB_LOGO.svg/100px-BSEB_LOGO.svg.png",
     timeSpan: "2018 - 2020",
+    department: "Science",
     course: "Intermediate",
   },
-];
+];
diff --git a/app/(sections)/experience/Experience.tsx b/app/(sections)/experience/Experience.tsx
@@ -4,37 +4,48 @@ import { Button } from "@/components/ui/button";
 
 const Experience = () => {
   return (
-    <div className="flex animate_in flex-col my-20 gap-10">
-      <div className="max-w-[32rem] flex justify-center items-center mx-auto">
-        <ol className="relative border-s  border-gray-200 dark:border-gray-700">
+    <div className="flex flex-col items-center my-20">
+      <div className="max-w-3xl mx-auto">
+        <ol className="relative border-l-2 border-gray-200 dark:border-gray-700">
           {Data.map((data) => (
-            <li className="mb-10 ms-6" key={data.name}>
-              <span className="absolute flex items-center justify-center w-10 h-10 rounded-full -start-4 md:-start-6  ring-2">
-                <NextImage
-                  src={data.logo}
-                  width={40}
-                  height={40}
-                  className="rounded-full"
-                  alt={data.name}
-                />
-              </span>
-              <h3 className="flex flex-col md:flex-row mb-2 ml-3 text-lg font-semibold">
-                {data.name}
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="max-w-fit md:ms-3"
-                >
-                  {data.timeSpan}
-                </Button>
-              </h3>
-              <time className="block mb-2 ml-3 text-base font-normal leading-none text-blue-400-200 ">
-                {data.role}
-                <ul className="list-disc font-sans text-sm mt-3 ml-5 ">
-                  <li className="my-1">{data?.about1}</li>
-                  <li className="my-1">{data?.about2}</li>
-                </ul>
-              </time>
+            <li
+              className="mb-10 ml-6"
+              key={data.name}
+            >
+              <div className="flex items-center">
+                <span className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 ring-2 ring-white dark:ring-gray-800 shadow-md">
+                  <NextImage
+                    src={data.logo}
+                    width={40}
+                    height={40}
+                    className="rounded-full"
+                    alt={data.name}
+                  />
+                </span>
+                <div className="ml-4">
+                  <h3 className="flex flex-col lg:flex-row text-lg font-semibold">
+                    {data.name}
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      className="max-w-fit max-md:my-1 md:ml-3 px-3 py-1 rounded-full"
+                    >
+                      {data.timeSpan}
+                    </Button>
+                  </h3>
+                  <p className="text-base font-medium text-gray-600 dark:text-gray-400">
+                    {data.role}
+                  </p>
+                  <ul className="list-disc font-sans text-sm mt-2 ml-5">
+                    <li className="my-1 text-gray-700 dark:text-gray-300">
+                      {data?.about1}
+                    </li>
+                    <li className="my-1 text-gray-700 dark:text-gray-300">
+                      {data?.about2}
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </li>
           ))}
         </ol>
@@ -62,4 +73,4 @@ const Data = [
     about1: "Worked on various projects using MERN stack.",
     about2: "Developed a website for a startup using MERN stack.",
   },
-];
+];
diff --git a/app/(sections)/experience/page.tsx b/app/(sections)/experience/page.tsx
@@ -6,9 +6,9 @@ function page() {
   return (
     <div className="flex justify-center mt-20">
       <Tabs defaultValue="experience" className="w-[400px] md:w-[500px]">
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="experience">Experience</TabsTrigger>
-          <TabsTrigger value="education">Education</TabsTrigger>
+        <TabsList className="grid w-full rounded-full grid-cols-2">
+          <TabsTrigger className="rounded-full" value="experience">Experience</TabsTrigger>
+          <TabsTrigger className="rounded-full" value="education">Education</TabsTrigger>
         </TabsList>
         <TabsContent value="experience">
           <Experience />

diff --git a/app/(sections)/skills/constant.tsx b/app/(sections)/skills/constant.tsx
@@ -81,7 +81,7 @@ function SkillCategory({ skills }: { skills: any[] }) {
         <div key={index}>
           <Button
             variant="secondary"
-            className="p-3 h-12 flex justify-center drop-shadow-sm items-center gap-2"
+            className="p-3 h-12 rounded-full flex justify-center drop-shadow-sm items-center gap-2"
           >
             <NextImage
               src={skill?.icon}

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -33,8 +33,8 @@ export default function RootLayout({
             <div className="hidden md:block absolute top-0 right-4 size-[500px] bg-fuchsia-200 mix-blend-multiply rounded-full filter blur-2xl opacity-50 animate-blob animation-delay-2000 -z-10"></div>
             <div className="absolute bottom-20 left-20 size-[500px] bg-pink-200 rounded-full mix-blend-multiply filter blur-2xl opacity-50 animate-blob animation-delay-4000 -z-10"></div>
             <div className=" hidden md:block absolute -bottom-8 right-1/4 size-[500px] bg-green-200 rounded-full mix-blend-multiply filter blur-2xl opacity-50 animate-blob animation-delay-4000 -z-10"></div>
-            <Analytics/>
             {children}
+            <Analytics/>
             <Navigation />
             <Social />
             <Toaster position="top-center" />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,60 @@
-import Hero from "@/components/Hero";
+import Link from "next/link";
+import { File, User } from "lucide-react";
+import NextImage from "@/components/NextImage";
+import { Button } from "@/components/ui/button";
+import ThemeSwitcher from "@/components/ThemeSwitcher";
+import { PhoneSocial } from "@/components/Social";
+
+
 
 export default function Home() {
-  return <Hero />;
+  return (
+    <div className="py-16 min-h-[80vh] animate_in  md:min-h-[85vh] flex items-center flex-col-reverse lg:flex-row gap-10 justify-center">
+      <div className="flex flex-col gap-4 text-left lg:w-1/2 2xl:w-1/3 mx-6 xl:mx-0 ">
+        <p className="text-2xl font-bold text-light-blue-700">Hey,</p>
+        <p className="text-3xl md:text-5xl font-bold relative">
+          I'm
+          <span className="text-blue-500 ml-4 uppercase">Pankaj Kumar</span>
+        </p>
+        <p className="text-3xl md:text-4xl font-bold text-light-blue-500">
+          Full Stack Developer
+        </p>
+        <p className="text-lg md:text-xl font-medium relative">
+          I'm a Full Stack Developer based in India. I have a passion for web
+          development and love to create for web apps.
+        </p>
+
+          <PhoneSocial />
+
+        <div className="flex flex-row justify-center md:justify-normal gap-4 md:gap-6 mt-5">
+          <Link href={"/about"}>
+            <Button variant="secondary" className="flex rounded-full gap-2 items-center">
+              <User className="text-lg" />
+              About Me
+            </Button>
+          </Link>
+          <Link
+            href="https://drive.google.com/file/d/1Yd3Z6GO8-vxHOldYckjj42sf8mjP2SgP/view?usp=drive_open"
+            target="_blank"
+          >
+            <Button variant="secondary" className="flex rounded-full gap-2 items-center">
+              <File className="text-lg" />
+              Resume
+            </Button>
+          </Link>
+          <ThemeSwitcher />
+        </div>
+      </div>
+
+      <div>
+        <NextImage
+          src="/pk.webp"
+          width={""}
+          height={""}
+          alt="Pankaj Kumar"
+          className="rounded-full w-52 h-52 md:w-72 md:h-72 shadow-lg"
+        />
+      </div>
+    </div>
+  )
 }
diff --git a/components/Hero.tsx b/components/Hero.tsx
diff --git a/public/pk.jpg b/public/pk.jpg
diff --git a/public/pk.webp b/public/pk.webp