This portfolio

Result: a typed Next.js portfolio with MDX content, a skills matrix, a 3D project map, and client side demos. Lighthouse and bundle numbers are add the deployed audit.

Problem

Most portfolios list skills without proof. This site enforces the opposite: every skill resolves to a project, every missing metric is visible, and every demo carries an accuracy note.

Data

The content is JSON for structured facts and MDX for case studies and posts. The skills file, project file, and MDX files are checked by a validation script. The resume PDF is generated from a single JSON file.

Approach and why

Next.js App Router with Server Components by default.
TypeScript strict with noUncheckedIndexedAccess.
Tailwind with tokens in CSS variables.
Framer Motion for state transitions under 400 ms.
React Three Fiber loaded only after a user action.
Client side demos so there is no model API key and no per request cost.
Vitest and Testing Library for the matrix, filters, and utilities.
Metadata, canonical URLs, sitemap, robots, JSON-LD, and per project OG images.

The 3D map is optional because the static map already works. The demos are honest because the math is local and the accuracy note is visible.

Results

Check	Value	Notes
Lighthouse	add deployed audit	Target 95 or higher
Initial JS	add measured bundle	Target 180 KB or less
3D JS before interaction	0 KB	Loads on activation
Components under 150 lines	Yes	Checked by script
Skills with project proof	32 of 32	Checked by script

Evaluation

Content integrity: every skill maps to a project. Unconfirmed tools are excluded.
Honesty: missing metrics render as pending, not as numbers.
Accessibility: keyboard filters, focus states, reduced motion, and a text fallback for 3D.
Performance: no hero raster, self hosted fonts, lazy 3D, lazy Mermaid.
Reproducibility: pinned dependencies and a single check command.

A reviewer should challenge any performance claim without a deployed audit. That is why the Lighthouse row is pending.

Limitations

The public URL is pending. The content still has missing facts, which are tracked in MISSING_FACTS.md. The 3D scene is intentionally small and is not a data visualization.

Next steps

Deploy to Vercel, run Lighthouse and axe on the deployed URL, fill the missing facts, and add screenshots to the demos.