Personal portfolio site for Alin Dan — a terminal-aesthetic, single-page SvelteKit application. The site presents a professional profile with animated text effects, a themeable background pattern system, and a keyboard-driven settings panel.
Live at alin-dan.dev.
| Layer | Choice |
|---|---|
| Framework | SvelteKit (SSR + static adapter) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 + CSS custom properties |
| Fonts | Roboto Mono Variable, Doto Variable |
| Analytics | Vercel Analytics + Speed Insights |
| Package manager | pnpm |
pnpm install
pnpm dev # start dev server at http://localhost:5173
pnpm build # production build
pnpm preview # preview production build locallyThe site is deliberately minimal. A single route (/) renders the profile block. The layout shell handles everything else: fonts, footer, social links, and the settings surface.
State lives in settings.svelte.ts — a single Svelte 5 rune-based module that owns theme and pattern, persists them to localStorage, and syncs data-theme / data-pattern attributes to <html>. Components read and write settings through this module directly; there is no store boilerplate.
Mobile vs desktop is decided once on the server via user-agent (see +layout.server.ts) and passed as data.isMobile to the layout. Desktop gets the SettingsDialog (⌘K) and mouse-tracking glow effect. Mobile gets the MobileSettingsBar fixed header instead.
Text effects are Svelte actions (scramble, type) applied directly to DOM nodes. They respect prefers-reduced-motion.
Background patterns (dots, lines, grid) are pure CSS — body::before (base) and body::after (mouse-driven glow) — toggled by the data-pattern attribute on <html>.
| Topic | File |
|---|---|
| Settings conventions | docs/settings.md |
| Style system | docs/style.md |
| Architectural decisions | docs/adr/ |
| Domain glossary | CONTEXT.md |