Portfolio

Published 4 min read

v2.0.0 — A design system and a real blog

The portfolio grows from a single page into a themed design system with a Markdown blog, a warm sunset light theme, and smoother navigation. Here is everything that shipped in the v2 base.

  • Changelog
  • Release
  • Design system

This release closes a long cycle of foundational work. Until now the site was a single animated page; v2.0.0 turns it into a small design system with a real blog behind it. From here on the project follows Semantic Versioning and every meaningful change lands in the changelog.

Think of this as the v2 base — the platform the next features build on.

Added

  • A design system foundation. Color now flows from a single set of semantic tokens — surface, foreground, muted, border, primary, accent — wired through Tailwind and CSS variables. One change in one place re-themes the whole site.
  • A real blog at /blog. Posts are Markdown, rendered through a dedicated Prose layer, with a scroll-spy table of contents and an EN/ES language switcher that only appears when both translations exist.
  • View transitions. Navigating between pages now feels like a single app instead of full reloads.
  • A livelier background. On desktop a cursor-following glow now coexists with an autonomous floating one.
Home in dark mode: the background stars bend around the glows like a glass lens.
The starfield is now drawn on canvas — the glows bend the nearby stars like a lens.
Blog index with a sticky sidebar on the left and the article list on the right.
The new blog index: a sticky sidebar with the intro, article count, and topics.
A blog article in dark mode: the article card on the left and a sticky 'On this page' table of contents on the right.
Inside a post: prose typography, a scroll-spy table of contents, and the EN/ES and share controls in the header.

Changed

  • A warm “sunset” light theme. The pale palette is gone. Light mode is now a warm, Gruvbox-inspired space: deep sand backgrounds, dark-brown text, and burnt-orange accents. Dark mode is untouched.
  • Everything themed through tokens. Cards, header, drawer, blog, and prose no longer hardcode greys — they read from the tokens, so theming stays consistent.
Home in light mode with the warm sunset palette: sand backgrounds, brown text, and orange accents.
The "sunset" light theme: deep sand backgrounds, dark-brown text, and burnt-orange accents.

Fixed

  • The theme no longer flips while navigating. With view transitions the stored theme is re-applied on every page swap, so light/dark stays put.

Accessibility

  • Blog cards are fully clickable. Using an accessible stretched-link pattern, the whole card is the target while tags and the call-to-action remain independent.
  • Consistent focus rings and checked contrast. Focus states come from the tokens, and the light-mode accent was tuned to meet WCAG AA for text.

What shipped since v2.0

The v2 base did its job — features stopped fighting the foundation. Two small releases followed.

v2.1 — Sharing & SEO

Posts now carry proper Open Graph and Twitter metadata, so a link finally unfurls with a title, description, and image on LinkedIn and X. Each post can set its own share image, and an in-page share button uses the native share sheet on mobile with a copy-link fallback on desktop. Projects got a refresh too: a card for this very site, and on phones the list now spotlights one project at a time — whichever sits closest to the middle of the screen.

Projects on desktop: hovering a card reveals its details over the screenshot. Projects on mobile: only the card closest to the middle of the screen shows its details.
Projects side by side: hover to reveal on desktop, one-at-a-time spotlight on mobile.

v2.2 — Bilingual (EN/ES)

The whole site now speaks English and Spanish. English lives at the root, Spanish under /es/, and a single switcher in the header swaps the entire site — landing, blog, and chrome — instead of the old per-post toggle that only appeared when a translation happened to exist.

The home page in Spanish on desktop, with the EN·ES switcher in the header. The home page in Spanish on mobile, with the language switcher beside the theme toggle.
One global EN·ES switcher in the header, paired with the theme toggle on every breakpoint.

What’s next

More written posts and continued polish. Versions from here stay small and frequent.