A single-page profile that lists my social/web links. The page detects your operating system once at boot and serves up an OS-appropriate "design time machine":
| OS detected | Look | Slider |
|---|---|---|
| macOS / iOS / iPadOS | macOS 26 Tahoe (Liquid Glass) by default; slider walks through Cheetah → Tiger → Leopard → Snow Leopard → Yosemite → Big Sur → Sonoma → Tahoe (2001–2025) | Yes |
| Windows | Windows 11 Mica by default; slider walks through 95 → 98 → XP → Vista → 7 → 8 → 10 → 11 (1995–2021) | Yes |
| Android | Android 15 Material You by default; slider walks through Cupcake → Gingerbread → Ice Cream Sandwich → KitKat → Lollipop → Nougat → 10 → 15 (2009–2024) | Yes |
| Linux / ChromeOS / anything else | Single Ubuntu (Yaru-inspired aubergine + orange) | No |
Drag the slider or tap any year tick to jump straight to an era. Touch on the icons (long-press on mobile) reveals the platform name.
There is intentionally no UI to switch between OS designs — you get the
one matching the device you're on. For testing/sharing, the URL accepts
?os=mac, ?os=windows, ?os=android, or ?os=linux as an override.
- Pure static: HTML + CSS, no build step.
- Zero external requests at runtime — every script, stylesheet, font, icon and the avatar is served from
assets/. - Alpine.js 3.14.1 for the small bit of reactive state (OS detection, era index, derived current era name).
- Tippy.js 6.3.7 + Popper 2.11.8 for hover tooltips on the social icons (long-press shows them on touch devices).
- All theming is driven by CSS custom properties on
<body data-os="…" data-era="0..7">. - Icons: Font Awesome 7 Free SVGs rendered via CSS
mask-imageso they inherit the current theme's--link-colorper era. - Mobile-first CSS. Deploys directly to GitHub Pages.
Any static server works. Easiest options:
# Option 1: Python (built-in on macOS/Linux, also works on Windows)
python -m http.server 8000
# Option 2: Node
npx serve .Open http://localhost:8000.
- Push to GitHub.
- Repo Settings → Pages → Build and deployment: pick Deploy from a branch, branch
main, folder/ (root). - Done. Your site is at
https://<user>.github.io/<repo>/.
.
├── index.html # markup, OS detection, Alpine component
├── README.md
└── assets/
├── css/
│ ├── profile.css # all 4×8 era themes + layout
│ ├── tippy.css # tooltip base styles
│ └── shift-away.css # tooltip animation
├── js/
│ ├── alpinejs.min.js
│ ├── popper.min.js
│ └── tippy.umd.min.js
├── icons/ # 9 monochrome SVGs, used via CSS mask-image
│ ├── website.svg facebook.svg snapchat.svg
│ ├── linkedin.svg instagram.svg x.svg
│ ├── github.svg telegram.svg teams.svg
└── img/
└── avatar.jpg
To add a social link, drop a new monochrome SVG into assets/icons/<slug>.svg and add a { slug, label, href } entry to the links array in index.html.