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 homepage<svelte:head>meta tags insrc/routes/(profile)/+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.
Linked tiles can expose memorable paths such as /telegram/ and aliases such as /tg/:
- icon: fab:telegram
title: Telegram
href: https://t.me/NeverBehave
shortlink:
slug: telegram
aliases: [tg]Slugs and aliases must be unique and contain only lowercase letters, numbers, and hyphens. The static build generates one redirect page for every slug and alias. Each page uses location.replace, with a zero-delay meta refresh and a visible destination link as fallbacks.
/hi/ is a lightweight contact page intended for the NFC tag. Links are selected from the same tile data with optional mobile metadata:
mobile:
order: 10
tier: primary
description: Message meOrders must be unique. Mobile links must have an href and cannot be deprecated.
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.