A static personal homepage. Built with SvelteKit and styled with Tailwind CSS. All tile content lives in a single YAML file so it's easy to edit.
Tiles are defined in src/lib/tiles.yaml. The schema is in src/lib/schema.ts and is enforced at build time — a malformed tile fails the build.
Three tile shapes:
- Simple label — an icon + optional title + optional content, optionally a link.
- Group — a parent caption with a list of
items(each item is a label). - Rich content — a tile whose
content(ortitle) is an array of inline parts: text, icons, links, strikethrough.
Want this as your own homepage? Fork the repo and edit src/lib/tiles.yaml — that one file drives every tile on the page.
- Replace the
headerandidentitiessections with your own captions, links, and handles. - Icons use Font Awesome prefixes:
fas:(solid),far:(regular),fab:(brands). Browse names at fontawesome.com/icons. - Swap the avatar at
src/lib/assets/(orstatic/assets/images/current.png) and update the<svelte:head>meta tags insrc/routes/+layout.svelte. - Run
yarn testto validate the YAML against the schema, thenyarn devto preview.
Drop a tile by deleting its block; add one by copying a neighbour and tweaking it. Build errors point to the offending line.
Any tile or item can carry a history array of prior states. Use this when there's a real chronology — not for playful "I used to claim X" jokes (those still belong in inline strikethrough). Each history entry has the same shape as a label, plus an optional integer year.
- icon: fab:linux
content: Framework 13
year: 2024
history:
- year: 2019
icon: fab:windows
content: MSI GS65 (RTX 2060)The current value renders as the first carousel panel; history entries follow in document order (newest-first by convention). The icon, text, and year (rendered inline as · 2024 in muted grey) all scroll together as a unit; the tile itself stays put. Swipe horizontally on touch or trackpad to step through panels — snap-mandatory, so no half-states.
History entries cannot themselves carry history (one level deep). Use this for laptops you've replaced, server OSes you've migrated through, anything with a "what came before" worth keeping. Don't use it to encode "I tried X but went with Y" — that's what inline strike is for.
The site is currently statically prerendered with no client-side JavaScript, so the carousel is swipe-only — there's no clickable dot indicator yet. That's a deliberate trade-off; a JS-enhanced layer (clickable year dots, keyboard navigation, active-panel tracking, and a global year-rewind dropdown) can be added later by enabling CSR on the homepage route.
yarn install
yarn dev # http://localhost:5173
yarn test # schema validation tests
yarn build # static site → build/
yarn preview # serve the built site locallyPush to main. GitHub Actions builds and deploys to GitHub Pages.
Anything under static/ is served verbatim at the site root. Images and the keybase verification live there.
This branch is a fresh start for the SvelteKit + Tailwind rewrite. The previous incarnation of the site (vanilla HTML / Vercel / Gulp + SCSS, last touched in 2021) is preserved on the legacy-2021 branch.
The original layout and tile concept were forked from amphineko/atomicneko; the YAML-driven content model and the SvelteKit rewrite are this repository's additions.
MIT.