feat: add experience detail page with slug routing

src/data/loaders/portfolio.ts

@@ -10,7 +10,7 @@ const buildHeaders = (): Record<string, string> => {
 
 export const fetchExperiences = createServerFn({ method: 'GET' }).handler(
   async (): Promise<TExperience[]> => {
-    const url = `${STRAPI_BASE}/api/experiences?populate[objectives]=*&populate[technologies]=*`
+    const url = `${STRAPI_BASE}/api/experiences?populate=*&populate[objectives]=*&populate[technologies]=*`
     console.log(`[Strapi] → GET ${url}`)
     const res = await fetch(url, { headers: buildHeaders() })
     if (!res.ok)
@@ -21,6 +21,21 @@ export const fetchExperiences = createServerFn({ method: 'GET' }).handler(
   },
 )
 
+export const fetchExperience = createServerFn({ method: 'GET' })
+  .inputValidator((slug: string) => slug)
+  .handler(async ({ data: slug }): Promise<TExperience> => {
+    const url = `${STRAPI_BASE}/api/experiences?filters[slug][$eq]=${slug}&populate=*&populate[objectives]=*&populate[technologies]=*`
+    console.log(`[Strapi] → GET ${url}`)
+    const res = await fetch(url, { headers: buildHeaders() })
+    if (!res.ok)
+      throw new Error(`Strapi request failed: ${res.status} ${res.url}`)
+    const json = (await res.json()) as { data: TExperience[] }
+    const item = json.data[0]
+    if (!item) throw new Error(`Experience not found: ${slug}`)
+    console.log(`[Strapi] ← GET ${url} OK (${item.company})`)
+    return item
+  })
+
 export const fetchEducations = createServerFn({ method: 'GET' }).handler(
   async (): Promise<TEducation[]> => {
     const url = `${STRAPI_BASE}/api/educations?populate=*`

src/routeTree.gen.ts

@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ExperienceSlugRouteImport } from './routes/experience/$slug'
 
 const AboutRoute = AboutRouteImport.update({
   id: '/about',
@@ -22,31 +23,40 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ExperienceSlugRoute = ExperienceSlugRouteImport.update({
+  id: '/experience/$slug',
+  path: '/experience/$slug',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/experience/$slug': typeof ExperienceSlugRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/experience/$slug': typeof ExperienceSlugRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/experience/$slug': typeof ExperienceSlugRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/about'
+  fullPaths: '/' | '/about' | '/experience/$slug'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about'
+  to: '/' | '/about' | '/experience/$slug'
-  id: '__root__' | '/' | '/about'
+  id: '__root__' | '/' | '/about' | '/experience/$slug'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AboutRoute: typeof AboutRoute
+  ExperienceSlugRoute: typeof ExperienceSlugRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -65,12 +75,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/experience/$slug': {
+      id: '/experience/$slug'
+      path: '/experience/$slug'
+      fullPath: '/experience/$slug'
+      preLoaderRoute: typeof ExperienceSlugRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AboutRoute: AboutRoute,
+  ExperienceSlugRoute: ExperienceSlugRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/routes/experience/$slug.tsx

@@ -0,0 +1,134 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { fetchExperience } from '#/data/loaders/portfolio'
+import { computeDuration, formatDate } from '#/data/portfolio'
+import type { TExperience } from '#/types/strapi'
+
+export const Route = createFileRoute('/experience/$slug')({
+  loader: ({ params }) => fetchExperience({ data: params.slug }),
+  errorComponent: ExperienceErrorPage,
+  component: ExperienceDetailPage,
+})
+
+// ── Error page ────────────────────────────────────────────────────────────
+
+function ExperienceErrorPage() {
+  return (
+    <div className="page-wrap flex min-h-[60vh] flex-col items-center justify-center gap-4 text-center">
+      <p className="island-kicker">Not Found</p>
+      <h1 className="display-title text-4xl">Experience not found</h1>
+      <Link to="/" className="nav-link">
+        ← Back to portfolio
+      </Link>
+    </div>
+  )
+}
+
+// ── Shared primitives ─────────────────────────────────────────────────────
+
+const EMPLOYMENT_TYPE_LABEL: Record<'full-time' | 'part-time', string> = {
+  'full-time': 'Full-time',
+  'part-time': 'Part-time',
+}
+
+function TechChip({ label }: { readonly label: string }) {
+  return (
+    <span className="inline-block rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-2.5 py-0.5 text-xs font-semibold text-[var(--lagoon-deep)]">
+      {label}
+    </span>
+  )
+}
+
+// ── Detail page ───────────────────────────────────────────────────────────
+
+function ExperienceDetailPage() {
+  const exp: TExperience = Route.useLoaderData()
+
+  const startIso = exp.startDate.slice(0, 7)
+  const endIso = exp.endDate?.slice(0, 7)
+  const duration = computeDuration(startIso, endIso)
+  const startLabel = formatDate(startIso)
+  const endLabel = endIso ? formatDate(endIso) : 'Present'
+
+  return (
+    <main className="page-wrap px-4 pb-16 pt-10">
+      {/* ── Back link ─────────────────────────────────────── */}
+      <div className="mb-6">
+        <Link
+          to="/"
+          className="nav-link inline-flex items-center gap-1.5 text-sm"
+        >
+          <span aria-hidden="true">←</span> Back
+        </Link>
+      </div>
+
+      {/* ── Header ────────────────────────────────────────── */}
+      <section className="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-12">
+        <div className="pointer-events-none absolute -left-20 -top-20 h-64 w-64 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.25),transparent_65%)]" />
+        <div className="pointer-events-none absolute -bottom-20 -right-20 h-64 w-64 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.15),transparent_65%)]" />
+
+        <p className="island-kicker mb-2">{exp.company}</p>
+        <h1 className="display-title mb-4 text-4xl font-bold leading-tight text-[var(--sea-ink)]">
+          {exp.role}
+        </h1>
+
+        {/* Meta row */}
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+          {exp.type != null && (
+            <span className="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]}
+            </span>
+          )}
+          <span className="text-sm text-[var(--sea-ink-soft)]">
+            {startLabel} — {endLabel}
+          </span>
+          <span className="h-1 w-1 rounded-full bg-[var(--lagoon)]" />
+          <span className="text-sm text-[var(--sea-ink-soft)]">{duration}</span>
+        </div>
+
+        {/* Technologies */}
+        {exp.technologies.length > 0 && (
+          <div className="mt-5 flex flex-wrap gap-1.5">
+            {exp.technologies.map((tech) => (
+              <TechChip key={tech.id} label={tech.name} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* ── Objectives ────────────────────────────────────── */}
+      {exp.objectives.length > 0 && (
+        <section className="mt-10">
+          <h2 className="island-kicker mb-4">Responsibilities</h2>
+          <div className="island-shell feature-card rounded-2xl p-6">
+            <ul className="ml-0 list-none space-y-3 p-0">
+              {exp.objectives.map((obj) => (
+                <li
+                  key={obj.id}
+                  className="flex gap-3 text-sm leading-relaxed text-[var(--sea-ink-soft)]"
+                >
+                  <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-[var(--lagoon)]" />
+                  {obj.description}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+      )}
+
+      {/* ── Body (markdown) ───────────────────────────────── */}
+      {exp.body != null && exp.body.trim().length > 0 && (
+        <section className="mt-10">
+          <div className="island-shell feature-card rounded-2xl p-6 sm:p-8">
+            <article className="prose prose-sm max-w-none prose-headings:font-bold prose-headings:text-[var(--sea-ink)] prose-p:text-[var(--sea-ink-soft)] prose-li:text-[var(--sea-ink-soft)] prose-strong:text-[var(--sea-ink)] prose-a:text-[var(--lagoon-deep)]">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {exp.body}
+              </ReactMarkdown>
+            </article>
+          </div>
+        </section>
+      )}
+    </main>
+  )
+}

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]}

src/types/strapi.ts

@@ -126,6 +126,8 @@ export type TExperience = {
   readonly documentId: string
   readonly company: string
   readonly role: string
+  readonly slug: string
+  readonly body: string | null
   readonly startDate: string
   readonly endDate: string | null
   readonly type: 'full-time' | 'part-time' | null