xFrightfull Portfolio
This website: a multilingual, themeable personal portfolio built as a static Astro site with TypeScript.
Overview
A personal portfolio that I fully control, built to grow in phases. Phase 1 is the foundation: a design system, three themes, three languages, a project showcase and a GitHub section.
The problem
A profile page on someone else’s platform cannot be shaped freely, cannot be fully translated and cannot hold the long-term record of what I build. I wanted one place that is mine, fast to load and easy to extend.
Implementation & design decisions
Every colour, size and spacing value lives in CSS custom properties, so the three themes are only different sets of tokens. All text comes from one typed dictionary and each language is pre-rendered as its own set of static pages, so there is no translation code running in the browser.
Content (projects, skills, tools, links) is plain typed data. Components render whatever the data describes, which means adding a project never requires touching a component.
Technologies & tools
- Astro
- TypeScript
- CSS
- Vercel (planned hosting)
Challenges & solutions
-
Challenge
Three languages without a runtime i18n library.
Solution
Language-prefixed static routes generated from one typed dictionary. Missing keys fail at compile time, and each page ships fully translated HTML.
-
Challenge
Switching themes without a flash of the wrong colours.
Solution
A tiny inline script in the document head applies the saved theme before the first paint.