Portfolio

A cinematic, evidence-first portfolio for Yahia Abdeldjalil Benyahia — AI systems and telecom infrastructure engineer. Built with Next.js 16 (App Router), React 19, Tailwind CSS v4 and Framer Motion.

Live: https://yahiaa.vercel.app

Principles

1. Nothing is claimed without a source. Every project claim, metric and link in src/lib/projects.ts comes from that repository's README, docs or milestones. If a number cannot be traced, it is not on the site.
2. Missing media says so. Repositories without screenshots render a generated plate labelled generated plate, never a fake screenshot. See MEDIA_GUIDE.md.
3. The site works without JavaScript. All content is server-rendered; scripts add motion, filtering and case studies, never the content itself.
4. Accessible and verifiable. Real headings, a keyboard tab pattern, focus management in dialogs, reduced-motion support, and no third-party contribution graph proxy.

Getting started

Requires Node.js 20+ (developed on Node 26).

npm install
npm run dev        # http://localhost:3000

Command	Purpose
npm run dev	Development server
npm run build	Production build
npm run start	Serve the production build
npm run lint	ESLint
npm run typecheck	tsc --noEmit

No environment variables are required. The site renders fully offline from committed fallback data; the GitHub API is only used to refresh the build log.

Structure

src/
  app/            Layout, metadata, SEO routes, /api/github
  components/
    site/         Nav, theme, ambient background, section shell, tracking
    sections/     intro, identity, capabilities, work, systems, build-log, contact
    work/         Project cards, case-study dialog, media
    visuals/      System map, boot terminal, architecture diagrams
    ui/           Buttons, icons, semantic primitives
  hooks/          External-store media query, section visibility
  lib/            Profile, projects, capabilities, systems, GitHub, analytics
public/
  cv/             Resume PDF
  projects/<slug>/  Per-project media (see MEDIA_GUIDE.md)

Sections and anchors

#intro, #identity, #capabilities, #work, #systems, #build-log, #contact, plus deep-linkable case studies at #work/<slug> (for example /#work/sentinelops). Case studies are real URL states: the back button closes the dialog.

Editing content

• Profile, links, availability — src/lib/profile.ts
• Projects, metrics, case-study narratives — src/lib/projects.ts
• Capability groups and evidence links — src/lib/capabilities.ts
• Architecture diagrams — src/lib/systems.ts (each entry cites the repository it was transcribed from)
• Terminal readout — src/lib/terminal.ts (commands must be copy-pasteable and must match the repository README)

Add or change GitHub data through src/app/api/github/route.ts; keep src/lib/github-fallback.ts in sync so the build log still renders when the API is unreachable.

Theming

Tokens are semantic CSS custom properties in src/app/globals.css (--canvas, --ink, --accent, --line, …). Both themes ship; the visitor's OS preference wins unless they toggle, and the choice persists under the pi-theme key. A pre-paint bootstrap script applies the class before first paint so there is no flash.

Use the semantic tokens rather than raw colours, and never write light: variants — the theme is switched by a class on <html>.

Media

Per-project media contract, optimisation guidance and the no-placeholder rule: MEDIA_GUIDE.md.

Analytics

Umami, loaded only when the visitor has not enabled Do Not Track, with a buffered track() helper that can never throw into a click handler. No cookies, no cross-site tracking, no data in the build log beyond what GitHub already makes public.

Deployment

Deploys as a standard Next.js app (Vercel or any Node host). The build is fully static apart from /api/github, which is revalidated hourly. The CV is served from public/cv/ with an explicit download path.