UPDATE Portfolio

- Added summer 2025 details
- Updated summaries data to include just one summary
- Updated Portfolio component to show active portfolio tab
- Removed unused components from certifications folder

Author: rishikdev

components/custom/certifications/certification-carousel-card.tsx

@@ -1,9 +1,6 @@
 "use client";
 
 import certifications from "../../../public/data/certifications.json";
-import CertificationDetails from "./certification-details";
-import CertificationCarousel from "./certification-carousel";
-import { useState } from "react";
 import Card from "../card/card";
 import CardSubHeader from "../card/card-sub-header";
 import Link from "next/link";
@@ -50,12 +47,4 @@ const Certifications = () => {
   );
 };
 
-const CertificationsNew = () => {
-  return (
-    <div className="flex w-full">
-      <CertificationCarousel />
-    </div>
-  );
-};
-
 export default Certifications;

components/custom/certifications/certification-carousel.tsx

@@ -1,11 +1,17 @@
 import { GraduationCap } from "lucide-react";
 import PortfolioButton from "./portfolio-button";
 
-const AcademicProjectsButton = () => {
+interface AcademicProjectsButtonProps {
+  path: string;
+}
+
+const AcademicProjectsButton = ({ path }: AcademicProjectsButtonProps) => {
   return (
     <PortfolioButton
       symbol={<GraduationCap className="mr-2 h-4 w-4" />}
       text="Academic Projects"
+      href="/academic-projects"
+      path={path}
     />
   );
 };

components/custom/certifications/certification-details.tsx

@@ -1,11 +1,17 @@
 import { ScrollText } from "lucide-react";
 import PortfolioButton from "./portfolio-button";
 
-const ArticlesButton = () => {
+interface ArticlesButtonProps {
+  path: string;
+}
+
+const ArticlesButton = ({ path }: ArticlesButtonProps) => {
   return (
     <PortfolioButton
       symbol={<ScrollText className="mr-2 h-4 w-4" />}
       text="Articles"
+      href="/articles"
+      path={path}
     />
   );
 };

components/custom/certifications/certifications.tsx

@@ -1,11 +1,17 @@
 import { FileBadge } from "lucide-react";
 import PortfolioButton from "./portfolio-button";
 
-const CertificationsButton = () => {
+interface CertificationsButtonProps {
+  path: string;
+}
+
+const CertificationsButton = ({ path }: CertificationsButtonProps) => {
   return (
     <PortfolioButton
       symbol={<FileBadge className="mr-2 h-4 w-4" />}
       text="Certifications"
+      href="/certifications"
+      path={path}
     />
   );
 };

components/custom/portfolio/academic-projects-button.tsx

@@ -1,11 +1,17 @@
 import { LayoutGrid } from "lucide-react";
 import PortfolioButton from "./portfolio-button";
 
-const PersonalProjectsButton = () => {
+interface PersonalProjectsButtonProps {
+  path: string;
+}
+
+const PersonalProjectsButton = ({ path }: PersonalProjectsButtonProps) => {
   return (
     <PortfolioButton
       symbol={<LayoutGrid className="mr-2 h-4 w-4" />}
       text="Personal Projects"
+      href="/personal-projects"
+      path={path}
     />
   );
 };

components/custom/portfolio/articles-button.tsx

@@ -1,19 +1,33 @@
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
 
 interface PortfolioButtonProps {
   symbol: React.ReactNode;
   text: string;
+  href: string;
+  path?: string;
 }
 
-const PortfolioButton = ({ symbol, text }: PortfolioButtonProps) => {
+const PortfolioButton = ({
+  symbol,
+  text,
+  href,
+  path = "",
+}: PortfolioButtonProps) => {
   return (
-    <Button
-      variant="ghost"
-      className="w-full flex justify-start transition-all duration-500"
-    >
-      {symbol}
-      {text}
-    </Button>
+    <Link href={href}>
+      <Button
+        variant="ghost"
+        className={cn(
+          "w-full flex justify-start transition-all duration-500",
+          path === href && "bg-accent text-accent-foreground"
+        )}
+      >
+        {symbol}
+        {text}
+      </Button>
+    </Link>
   );
 };
 

components/custom/portfolio/certifications-button.tsx

@@ -5,25 +5,20 @@ import AcademicProjectsButton from "./academic-projects-button";
 import ArticlesButton from "./articles-button";
 import CertificationsButton from "./certifications-button";
 import PersonalProjectsButton from "./personal-projects-button";
+import { usePathname } from "next/navigation";
 
 const Portfolio = () => {
+  const path = usePathname();
+
   return (
     <div className="grid grid-cols-2 lg:flex gap-4">
-      <Link className="w-full" href="/academic-projects">
-        <AcademicProjectsButton />
-      </Link>
+      <AcademicProjectsButton path={path} />
 
-      <Link className="w-full" href="personal-projects">
-        <PersonalProjectsButton />
-      </Link>
+      <PersonalProjectsButton path={path} />
 
-      <Link className="w-full" href="/articles">
-        <ArticlesButton />
-      </Link>
+      <ArticlesButton path={path} />
 
-      <Link className="w-full" href="/certifications">
-        <CertificationsButton />
-      </Link>
+      <CertificationsButton path={path} />
     </div>
   );
 };