“This site is only the beginning, stay tuned for what’s next!”
In Summer 2025 I decided to challenge site-building AIs and build my own website. Although users these days primarily rely on tools such as WordPress to create their websites, I wanted to get in on some of the fun and try making it myself (with the help of YouTube, ChatGPT, and Gemini). Below is the stack, the lessons, and what else is in store.
♡ Why roll my own site?
Showcase front-end skills (not just content).
Hiring managers can view the source and see real code, not Wix widgets.End-to-end control over performance, accessibility & design.
I choose the fonts, colours, and load-time budget.Quarto’s Markdown → HTML pipeline lets me write posts in plain text,
render once and host anywhere (GitHub Pages today, Netlify tomorrow).
♡ Code & data
♡ Tech stack
| Layer | Choices & Rationale |
|---|---|
| Site generator | Quarto 1.5 — auto listings, search, built-in light/dark theme toggle |
| Styling | Custom CSS — frosted cards, pink cursor glow, theme-aware colours |
| Site generator | quarto 0.9 › renders posts, listing, search |
| Styling | Tailored CSS — glass-morphism cards, pink hover glows, three-layer banner |
| Interactivity | Vanilla JavaScript (≈ 140 LoC) • word-hover script • cursor spotlight • image lightbox |
| Assets | All images converted to WebP with ImageMagick (magick) and capped at 1600 px |
| Dev tools | RStudio for QMD editing • VS Code for CSS/JS • Homebrew on macOS |
| Hosting | GitHub Pages (gh-pages branch) |
♡ Features
One-click light / dark mode — theme switcher remembers your preference.
Animated banner — three translucent layers + radial spotlight that tracks
the cursor.Word-by-word hover — page headers and paragraphs bloom with a soft glow.
Glass cards — posts and call-outs float above the background, zooming &
tinting pink on hover.Lightbox avatar — click my profile photo to view a full-size version,
dismiss with one click.Instant search — Algolia Autocomplete powered, loads only on demand.