Add session icons and portfolio link across the site.

Map each session to a distinct icon on card covers, add nav and footer links to the portfolio, and surface About Me in the hero.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 7oSkaaa

website/scripts/generate-content.ts

@@ -288,6 +288,7 @@ async function main() {
       youtubeChannelId: YOUTUBE_CHANNEL_ID,
       links: {
         templates: "https://7oskaaa.github.io/CP-Templates/",
+        portfolio: "https://7oskaaa.github.io/Portfolio/",
         juniorSheet:
           "https://docs.google.com/spreadsheets/d/1iJZWP2nS_OB3kCTjq8L6TrJJ4o-5lhxDOyTaocSYc-k/edit#gid=84654839",
         juniorSheetAddon: "https://github.com/Waelahmed99/junior-sheet-add-on",

website/src/components/Hero.tsx

@@ -3,9 +3,11 @@ import {
   ArrowRight,
   BookOpen,
   ClipboardList,
+  ExternalLink,
   Play,
   Sparkles,
   Target,
+  User,
 } from "lucide-react";
 import siteData from "@/data/site-data.json";
 import type { SiteData } from "@/types";
@@ -35,8 +37,16 @@ export default function Hero() {
             </h1>
             <p className="mt-6 text-lg leading-relaxed text-slate-400">
               {data.config.description} Curated by{" "}
-              <span className="text-slate-200">{data.config.author}</span> —
-              videos, problem sheets, articles, and everything you need to level up.
+              <a
+                href={data.config.links.portfolio}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 font-medium text-slate-200 transition-colors hover:text-accent-light"
+              >
+                {data.config.author}
+                <ExternalLink className="h-3.5 w-3.5 opacity-70" />
+              </a>{" "}
+              — videos, problem sheets, articles, and everything you need to level up.
             </p>
             <div className="mt-8 flex flex-wrap gap-4">
               <a href="#youtube-sessions" className="btn-primary">
@@ -50,6 +60,15 @@ export default function Hero() {
               <Link to="/youtube" className="btn-ghost">
                 All Videos
               </Link>
+              <a
+                href={data.config.links.portfolio}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-ghost"
+              >
+                <User className="h-4 w-4" />
+                About Me
+              </a>
             </div>
           </div>
 

website/src/components/Layout.tsx

@@ -1,10 +1,13 @@
 import { Link, Outlet, useLocation } from "react-router-dom";
 import {
+  BookOpen,
+  ExternalLink,
+  FileCode2,
   Github,
   Menu,
+  User,
   X,
   Youtube,
-  ExternalLink,
 } from "lucide-react";
 import { useState } from "react";
 import ScrollRestoration from "@/components/ScrollRestoration";
@@ -14,9 +17,14 @@ import type { SiteData } from "@/types";
 const data = siteData as SiteData;
 
 const NAV = [
-  { to: "/", label: "Sessions" },
-  { to: "/youtube", label: "YouTube" },
-];
+  { to: "/", label: "Sessions", icon: BookOpen },
+  { to: "/youtube", label: "YouTube", icon: Youtube },
+] as const;
+
+const EXTERNAL_LINKS = [
+  { href: data.config.links.portfolio, label: "About Me", icon: User },
+  { href: data.config.links.templates, label: "Templates", icon: FileCode2 },
+] as const;
 
 export default function Layout() {
   const [mobileOpen, setMobileOpen] = useState(false);
@@ -47,28 +55,33 @@ export default function Layout() {
           </Link>
 
           <nav className="hidden items-center gap-1 md:flex">
-            {NAV.map(({ to, label }) => (
+            {NAV.map(({ to, label, icon: Icon }) => (
               <Link
                 key={to}
                 to={to}
-                className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
+                className={`inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
                   pathname === to
                     ? "bg-accent/20 text-accent-light"
                     : "text-slate-300 hover:bg-white/5 hover:text-white"
                 }`}
               >
+                <Icon className="h-4 w-4" />
                 {label}
               </Link>
             ))}
-            <a
-              href={data.config.links.templates}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="ml-2 btn-ghost !py-2 !text-xs"
-            >
-              Templates
-              <ExternalLink className="h-3.5 w-3.5" />
-            </a>
+            {EXTERNAL_LINKS.map(({ href, label, icon: Icon }) => (
+              <a
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="ml-1 inline-flex items-center gap-2 btn-ghost !py-2 !text-xs"
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {label}
+                <ExternalLink className="h-3 w-3 opacity-60" />
+              </a>
+            ))}
           </nav>
 
           <button
@@ -83,16 +96,30 @@ export default function Layout() {
 
         {mobileOpen && (
           <nav className="border-t border-white/5 px-4 py-4 md:hidden">
-            {NAV.map(({ to, label }) => (
+            {NAV.map(({ to, label, icon: Icon }) => (
               <Link
                 key={to}
                 to={to}
                 onClick={() => setMobileOpen(false)}
-                className="block rounded-lg px-4 py-3 text-sm font-medium text-slate-200 hover:bg-white/5"
+                className="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-200 hover:bg-white/5"
               >
+                <Icon className="h-4 w-4 text-slate-400" />
                 {label}
               </Link>
             ))}
+            {EXTERNAL_LINKS.map(({ href, label, icon: Icon }) => (
+              <a
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => setMobileOpen(false)}
+                className="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-200 hover:bg-white/5"
+              >
+                <Icon className="h-4 w-4 text-slate-400" />
+                {label}
+              </a>
+            ))}
           </nav>
         )}
       </header>
@@ -111,40 +138,64 @@ export default function Layout() {
               <p className="mt-2 text-sm text-slate-400">
                 {data.config.description}
               </p>
+              <a
+                href={data.config.links.portfolio}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-accent-light transition-colors hover:text-white"
+              >
+                <User className="h-4 w-4" />
+                View my portfolio
+                <ExternalLink className="h-3.5 w-3.5 opacity-70" />
+              </a>
             </div>
             <div>
               <h4 className="text-sm font-semibold uppercase tracking-wider text-slate-500">
                 Resources
               </h4>
               <ul className="mt-3 space-y-2 text-sm">
-                <FooterLink href={data.config.links.juniorSheet} label="Junior Sheet" />
-                <FooterLink href={data.config.links.assiutSheet} label="Assiut Materials" />
-                <FooterLink href={data.config.links.arabicCpChannel} label="Arabic CP Channel" />
+                <FooterLink
+                  href={data.config.links.templates}
+                  label="CP Templates"
+                  icon={FileCode2}
+                />
+                <FooterLink
+                  href={data.config.links.juniorSheet}
+                  label="Junior Sheet"
+                />
+                <FooterLink
+                  href={data.config.links.assiutSheet}
+                  label="Assiut Materials"
+                />
+                <FooterLink
+                  href={data.config.links.arabicCpChannel}
+                  label="Arabic CP Channel"
+                />
               </ul>
             </div>
             <div>
               <h4 className="text-sm font-semibold uppercase tracking-wider text-slate-500">
                 Connect
               </h4>
-              <div className="mt-3 flex gap-3">
-                <a
+              <div className="mt-3 flex flex-wrap gap-3">
+                <SocialLink
+                  href={data.config.links.portfolio}
+                  label="Portfolio"
+                  icon={User}
+                  className="text-accent-light"
+                />
+                <SocialLink
                   href={data.config.youtubeChannel}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="glass-hover rounded-xl p-3 text-red-400"
-                  aria-label="YouTube"
-                >
-                  <Youtube className="h-5 w-5" />
-                </a>
-                <a
+                  label="YouTube"
+                  icon={Youtube}
+                  className="text-red-400"
+                />
+                <SocialLink
                   href={data.config.links.github}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="glass-hover rounded-xl p-3 text-slate-300"
-                  aria-label="GitHub"
-                >
-                  <Github className="h-5 w-5" />
-                </a>
+                  label="GitHub"
+                  icon={Github}
+                  className="text-slate-300"
+                />
               </div>
             </div>
           </div>
@@ -163,17 +214,51 @@ export default function Layout() {
   );
 }
 
-function FooterLink({ href, label }: { href: string; label: string }) {
+function FooterLink({
+  href,
+  label,
+  icon: Icon,
+}: {
+  href: string;
+  label: string;
+  icon?: typeof User;
+}) {
   return (
     <li>
       <a
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-slate-400 transition-colors hover:text-accent-light"
+        className="inline-flex items-center gap-2 text-slate-400 transition-colors hover:text-accent-light"
       >
+        {Icon && <Icon className="h-3.5 w-3.5 shrink-0" />}
         {label}
       </a>
     </li>
   );
 }
+
+function SocialLink({
+  href,
+  label,
+  icon: Icon,
+  className,
+}: {
+  href: string;
+  label: string;
+  icon: typeof User;
+  className?: string;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`glass-hover rounded-xl p-3 ${className ?? "text-slate-300"}`}
+      aria-label={label}
+      title={label}
+    >
+      <Icon className="h-5 w-5" />
+    </a>
+  );
+}

website/src/components/SessionCard.tsx

@@ -1,17 +1,14 @@
 import { Link } from "react-router-dom";
-import { ArrowRight, Code2, FileText, Play } from "lucide-react";
+import { ArrowRight, FileText, Play } from "lucide-react";
 import type { Session } from "@/types";
-import { CATEGORY_META } from "@/types";
 import PracticeStats from "@/components/PracticeStats";
-import { getSessionThumbnail } from "@/lib/utils";
+import SessionCardCover from "@/components/SessionCardCover";
 
 interface SessionCardProps {
   session: Session;
 }
 
 export default function SessionCard({ session }: SessionCardProps) {
-  const category = CATEGORY_META[session.category];
-  const thumbnail = getSessionThumbnail(session);
   const hasYouTube =
     session.youtubeChannelVideos.length > 0 ||
     session.sessionRecordings.some((v) => v.type === "youtube");
@@ -25,51 +22,15 @@ export default function SessionCard({ session }: SessionCardProps) {
       to={`/sessions/${session.id}`}
       className="group glass-hover flex flex-col overflow-hidden rounded-2xl"
     >
-      <div className="relative h-36 overflow-hidden">
-        {thumbnail ? (
-          <>
-            <img
-              src={thumbnail}
-              alt=""
-              loading="lazy"
-              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-surface-raised via-surface-raised/20 to-transparent" />
-          </>
-        ) : (
-          <div
-            className={`flex h-full items-center justify-center bg-gradient-to-br ${category.color}`}
-          >
-            <div className="absolute inset-0 bg-grid-pattern bg-grid opacity-20" aria-hidden />
-            <Code2 className="relative h-14 w-14 text-white/90 drop-shadow-lg" strokeWidth={1.5} />
-          </div>
-        )}
-        <span
-          className={`absolute left-4 top-4 inline-flex rounded-full bg-gradient-to-r ${category.color} px-3 py-1 text-xs font-semibold text-white shadow-lg`}
-        >
-          {category.label}
-        </span>
-        {hasYouTube && (
-          <span className="absolute right-4 top-4 inline-flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white backdrop-blur-sm">
-            <Play className="h-3 w-3 fill-current" />
-            Video
-          </span>
-        )}
-      </div>
+      <SessionCardCover
+        session={session}
+        hasYouTube={hasYouTube}
+        hasDrive={hasDrive}
+      />
 
       <div className="flex flex-1 flex-col p-6">
         <div className="mb-3 flex flex-wrap gap-1.5">
           <PracticeStats stats={session.stats} variant="badges" />
-          {hasDrive && (
-            <span className="rounded-md bg-blue-500/10 px-2 py-0.5 text-[10px] font-medium text-blue-400">
-              Drive
-            </span>
-          )}
-          {session.folder.includes("ICPC SCU") && (
-            <span className="rounded-md bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-400">
-              ICPC SCU
-            </span>
-          )}
           {partCount > 1 && (
             <span className="rounded-md bg-violet-500/10 px-2 py-0.5 text-[10px] font-medium text-violet-400">
               {partCount} parts