refactor: Separate Experience and Education components in Combined co…

…mponent
thakurdotdev · Sep 3, 2024 · b60579e · b60579e
1 parent c0530bb
commit b60579e
Show file tree

Hide file tree

Showing 10 changed files with 4,393 additions and 104 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -83,4 +83,18 @@
     opacity: 1;
     transform: translateY(0);
   }
+}
+
+.scrollable-content {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+
+.scrollable-content::-webkit-scrollbar {
+  display: none;
+  /* For Chrome, Safari, and Opera */
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -11,7 +11,7 @@ const poppins = Poppins({
 });
 
 export const metadata: Metadata = {
-  title: "Portfolio: Pankaj Thakur | Software Developer",
+  title: "Portfolio: Pankaj Thakur",
   description:
     "Pankaj Thakur is a software developer based in India. He specializes in building web applications and websites using modern technologies.",
   keywords:
@@ -23,7 +23,7 @@ export const metadata: Metadata = {
     type: "website",
     locale: "en_IN",
     url: "https://thakur.dev",
-    title: "Pankaj Thakur | Software Developer",
+    title: "Pankaj Thakur - Software Developer",
     description:
       "Pankaj Thakur is a software developer based in India. He specializes in building web applications and websites using modern technologies.",
     siteName: "Pankaj Thakur's Portfolio",
@@ -84,7 +84,11 @@ export default function RootLayout({
         <link rel="me" href="https://linkedin.com/in/thakurdotdev" />
         <meta name="theme-color" content="#ffffff" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script defer src="https://cloud.umami.is/script.js" data-website-id="ce8f1102-baef-4791-a4c7-d0f1f3f396ed"></script>
+        <script
+          defer
+          src="https://cloud.umami.is/script.js"
+          data-website-id="ce8f1102-baef-4791-a4c7-d0f1f3f396ed"
+        ></script>
       </Head>
       <body className={poppins.className}>
         <ThemeProvider attribute="class">

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,36 +1,33 @@
 import dynamic from "next/dynamic";
 import Skills from "@/components/Skills";
-import Particles from "@/components/ui/particles";
 import ProjectsPage from "@/components/Projects";
 import Intro from "@/components/Intro";
 import Footer from "@/components/Footer";
 import Experience from "@/components/Experience";
 import Education from "@/components/Education";
+import { BackgroundBeamsWithCollision } from "@/components/ui/background-beams-with-collision";
+import "./globals.css";
 
 const DynamicContact = dynamic(() => import("@/components/Contact"), {
-	ssr: false,
+  ssr: false,
 });
 
 export default function Home() {
-	return (
-		<div className="relative mx-auto md:max-w-[70%] lg:max-w-[40%] px-5 pt-10 animate_in">
-			<Particles
-				className="fixed inset-0 pointer-events-none -z-10"
-				quantity={100}
-				ease={100}
-				refresh={true}
-				color="#ffffff"
-				size={0.4}
-			/>
-			<main>
-				<Intro />
-				<Skills />
-				<Experience />
-				<Education />
-				<ProjectsPage />
-				<DynamicContact />
-				<Footer />
-			</main>
-		</div>
-	);
+  return (
+    <BackgroundBeamsWithCollision className="fixed inset-0">
+      <div className="relative mx-auto md:max-w-[70%] lg:max-w-[40%] px-5 pt-10 h-full">
+        <div className="scrollable-content h-full">
+          <main>
+            <Intro />
+            <Skills />
+            <Experience />
+            <Education />
+            <ProjectsPage />
+            <DynamicContact />
+            <Footer />
+          </main>
+        </div>
+      </div>
+    </BackgroundBeamsWithCollision>
+  );
 }
diff --git a/components/Education.tsx b/components/Education.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import NextImage from "./NextImage";
 import { educationData } from "@/lib/Constant";
+import { Card } from "./ui/card";
 
 interface EducationItemProps {
   institution: string;
@@ -17,35 +17,32 @@ const EducationItem: React.FC<EducationItemProps> = ({
   duration,
   logo,
 }) => (
-  <div className="relative mb-12">
-    <div className="absolute left-0 top-0 bottom-0 w-px bg-gray-300"></div>
-    <div className="absolute -left-5 top-0 w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center">
-      <NextImage src={logo} className="w-11 h-11 rounded-full" />
-    </div>
-    <div className="ml-10">
-      <h1 className="font-medium text-gray-600 dark:text-neutral-300">
+  <Card className="mb-6 p-4">
+    <div>
+      <h1 className="font-medium text-gray-700 dark:text-neutral-300">
         {institution}
+        <span className="text-xs text-gray-600 dark:text-neutral-400 ml-2">
+          ( {duration})
+        </span>
       </h1>
-      <h3 className="text-base text-gray-600 dark:text-neutral-400">
-        {degree}
-      </h3>
-      {stream && (
+      <div className="flex items-center gap-2">
         <h3 className="text-sm text-gray-600 dark:text-neutral-400">
-          {stream}
+          {degree}
         </h3>
-      )}
-      <p className="text-sm text-gray-600 dark:text-neutral-400 mt-1">
-        {duration}
-      </p>
+        {stream && (
+          <span className="text-xs text-gray-600 dark:text-neutral-400">
+            ({stream})
+          </span>
+        )}
+      </div>
     </div>
-  </div>
+  </Card>
 );
 
 const Education: React.FC = () => (
-  <div className="">
-    <hr />
-    <h4 className="text-md md:text-xl font-medium my-4">Education</h4>
-    <div className="p-6">
+  <div>
+    <h4 className="text-lg font-medium my-4">Education</h4>
+    <div className="">
       {educationData.map((education, index) => (
         <EducationItem key={index} {...education} />
       ))}

diff --git a/components/Experience.tsx b/components/Experience.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { companiesData } from "@/lib/Constant";
-import NextImage from "./NextImage";
+import { Card } from "./ui/card";
 
 interface JobHistoryItemProps {
   position: string;
@@ -13,64 +13,56 @@ const JobHistoryItem: React.FC<JobHistoryItemProps> = ({
   duration,
   isCurrent,
 }) => (
-  <div className="relative">
-    <div
-      className={`ml-10 ${
+  <div className="">
+    <h3
+      className={`text-gray-700 dark:text-neutral-300 ${
         isCurrent ? "font-medium text-teal-200 dark:text-teal-400" : ""
       }`}
     >
-      <h3 className="text-gray-600 dark:text-neutral-400">{position}</h3>
-      <p className="text-sm text-gray-600 dark:text-neutral-400 mt-1">
-        {duration}
-      </p>
-    </div>
+      {position}
+    </h3>
+    <p className="text-xs text-gray-600 dark:text-neutral-400 mt-1">
+      {duration}
+    </p>
   </div>
 );
 
 interface CompanyExperienceProps {
   company: string;
-  companyLogo: string;
   location: string;
   jobs: JobHistoryItemProps[];
 }
 
 const CompanyExperience: React.FC<CompanyExperienceProps> = ({
   company,
-  companyLogo,
   location,
   jobs,
 }) => (
-  <div className="relative mb-12">
-    <div className="absolute left-0 top-0 bottom-0 w-px bg-gray-300"></div>
-    <div className="absolute -left-5 top-0 w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center">
-      <NextImage src={companyLogo} className="w-11 h-11 rounded-full" />
-    </div>
-    <div className="ml-10">
-      <h1 className="font-semibold text-gray-600 dark:text-neutral-300">
+  <Card>
+    <div className="p-4">
+      <h1 className="font-semibold text-gray-700 dark:text-neutral-300">
         {company}
       </h1>
       <h3 className="text-sm text-gray-600 dark:text-neutral-400">
         {location}
       </h3>
+      {jobs.map((job, index) => (
+        <JobHistoryItem key={index} {...job} />
+      ))}
     </div>
-    {jobs.map((job, index) => (
-      <JobHistoryItem key={index} {...job} />
-    ))}
-  </div>
+  </Card>
 );
 
 const Experience: React.FC = () => (
-  <>
-    <div className="mt-5">
-      <hr />
-      <h4 className="text-md md:text-xl font-medium my-4">Experience</h4>
-      <div className="p-6">
-        {companiesData.map((companyData, index) => (
-          <CompanyExperience key={index} {...companyData} />
-        ))}
-      </div>
+  <div className="mt-5">
+    <hr />
+    <h4 className="text-lg font-medium my-4">Experience</h4>
+    <div className="flex flex-col gap-3">
+      {companiesData.map((companyData, index) => (
+        <CompanyExperience key={index} {...companyData} />
+      ))}
     </div>
-  </>
+  </div>
 );
 
 export default Experience;
diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
@@ -1,7 +1,7 @@
 "use client";
 import * as React from "react";
 import { useTheme } from "next-themes";
-import {SunIcon, MoonIcon} from "@radix-ui/react-icons"
+import { SunIcon, MoonIcon } from "@radix-ui/react-icons";
 import { Button } from "@/components/ui/button";
 
 export default function ThemeSwitcher() {
@@ -15,7 +15,7 @@ export default function ThemeSwitcher() {
     <Button
       variant="outline"
       size="icon"
-      className="rounded-full"
+      className="rounded-full relative"
       onClick={toggleTheme}
     >
       <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />