Personal Portfolio
An editorial portfolio built to feel restrained and deliberate rather than showy. Content lives as typed data objects that drive routes, sitemap, and related links automatically, and the entire design system is one file of CSS tokens — so both the writing and the look change in one place, not scattered through markup. (This site.)
- Role
- Sole designer & engineer
- Year
- 2026
- Status
- In progress
- Category
- Design
- Tools & technologies
- Next.jsReactTypeScriptTailwind CSSFramer Motion
- Links
- GitHub
The problem
Most portfolio templates tangle content into markup and scatter styling across components, so every edit is archaeology. This one treats the site as a small product: typed content as the source of truth, a single-file design system, and reusable case-study and article templates.
Context
A personal project extending a Figma foundation, structurally complete and typed but still pre-deploy.
Key decisions
Content decoupled from presentation
Typed data objects (projects, articles, experience, site) drive routes, sitemap, and related links, so adding a project or article is a single data append rather than a markup edit.
One-file design system
Every visual token — colour, fluid type scale, spacing, radii, shadows, motion — is defined once in globals.css under Tailwind v4’s @theme, so a full retheme is a single-file change.
Outcomes
- A complete, statically-rendered site (six sections plus per-slug case-study and article templates) where adding an entry is a single data append.
- Accessibility and SEO handled at the source: reduced-motion support, ARIA-wired forms, Open Graph, sitemap/robots, and JSON-LD structured data.
Lessons learned
- Deferring an unavailable input by isolating it behind one file turned an unknown into a single-line reconciliation rather than a blocker — the decision that kept the build moving.
Related work
Room of Horror
A VR “room of horrors” where nursing trainees hunt for care errors in a virtual hospital room, while an instructor configures and monitors each session live from the browser.
AOG Moldova
A production landing site for 24/7 emergency aviation-parts logistics in Moldova, with a trilingual interface and a serverless quote form that routes urgent requests straight to the ops team.