←all projects
// personal

Personal site · 2026 remaster

The site you're looking at. No framework, no build step — just HTML, CSS and vanilla JS served by nginx. Designed to present my sysadmin side in a coherent format: terminal-style, tidy, with a few animated details to give it character.

Statusongoing
Year2026
Roleconcept · design · dev
StackHTML · CSS · vanilla JS · nginx
HTML CSS Vanilla JS nginx Claude Code

context

I wanted my own online presence, not a prefab template. The "developer portfolio" templates all speak the same language, and none of those dialects sounded like mine: I'm a sysadmin, not a frontend dev, and the site had to look like one.

The idea was to build something light, fast, dependency-free, with a terminal aesthetic reflecting the world I spend my day in: prompts, logs, commands, high-contrast colors.

approach

No-build, static, vanilla. Everything is served directly by nginx: no bundler, no transpiler, no node_modules to maintain. Files are read from disk exactly as I wrote them.

  • Structure: two main HTML files (IT/EN) + a projects/ directory, one shared style.css, one shared main.js.
  • Dark/light theme: CSS Custom Properties for every token, overrides via [data-theme="light"]. The switch uses the View Transitions API where available for a smooth cross-fade.
  • Vertical rail on desktop + mobile hamburger, with JS scroll-spy to highlight the current section.
  • Command palette (⌘K) and a matrix-mode easter egg (M) for power users.
  • Accessibility: skip-link, aria-labels on every control, respects prefers-reduced-motion.

outcome

Add relevant metrics here: Lighthouse score (Perf / A11y / SEO), page weight, average TTFB, visitor count if you track analytics.

The site loads quickly even on slow connections, works without JavaScript for the essential content, and is fully keyboard-navigable.

constraints

Staying no-build has costs. Nav and footer are duplicated in every HTML file — updating them means touching multiple files (accepted trade-off: I update them rarely). No native templating: if I want to reuse a chunk, I copy it.

All the CSS lives in one 2000+ line file. It works because I know it well, but it demands discipline: commented sections, tokens at the top, no specificity wars.

lessons

  • Vanilla JS, written carefully, covers 95% of the cases people reach for a framework. At this site's scale, it's the right choice.
  • CSS Custom Properties with raw RGB triplets (e.g. --green-rgb: 74,222,128) make theming incredibly flexible: you can compose rgba() on the fly without a preprocessor.
  • The browser's View Transitions API is magic: for the theme switch it eliminated the stutter I had with classic CSS transitions.
  • Add a personal lesson here — maybe something about collaborating with Claude Code or a specific debugging moment.
matrix-mode · ON