feat: add experience detail page with slug routing

src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router'
 import { computeDuration, formatDate, CONTACT_EMAIL } from '#/data/portfolio'
 import type { TExperience, TEducation, TSkill } from '#/types/strapi'
 import {
@@ -128,12 +128,16 @@ function ExperienceCard({
       {/* Card */}
       <div className="island-shell feature-card mb-6 flex-1 rounded-2xl p-5 pb-6">
         <div className="mb-2 flex flex-wrap items-start justify-between gap-2">
-          <div>
+          <Link
+            to="/experience/$slug"
+            params={{ slug: exp.slug }}
+            className="group min-w-0"
+          >
             <p className="island-kicker mb-0.5">{exp.company}</p>
-            <h3 className="m-0 text-base font-bold text-[var(--sea-ink)]">
+            <h3 className="m-0 text-base font-bold text-[var(--sea-ink)] transition group-hover:text-[var(--lagoon-deep)]">
               {exp.role}
             </h3>
-          </div>
+          </Link>
           {exp.type != null && (
             <span className="mt-0.5 flex-shrink-0 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-2.5 py-0.5 text-xs font-semibold text-[var(--sea-ink-soft)]">
               {EMPLOYMENT_TYPE_LABEL[exp.type]}