Personal Website
HTML · CSS · JavaScript · GitHub · Vercel
A quiet home for my books, essays, journal and projects, written by hand and shipped from GitHub to my own domain.
1. Context
This is the website you're reading. I wanted one place for the things I think about: notes on the books that changed how I think, essays, a journal of trips, and the projects I build when an idea won't leave me alone.
- Books: a shelf of what I'm reading, with my ratings and notes
- Essays: 10 so far, on habits, money, the mind and character
- Journal: trips and days worth remembering, with photos
- Projects: case studies like this one
2. How It Ships
The site lives in a GitHub repository connected to Vercel. Every change pushed to main deploys itself, and the domain stays attached to the Vercel project the whole time.
Content is plain files: an HTML page per essay or trip, and one books-data.js for the whole shelf. I can edit them anywhere, even in the GitHub web editor.
A commit to main on GitHub is the only step I take by hand. The repository keeps the full history, so any change can be rolled back.
Vercel sees the push and publishes the new version. There's no build step, so it serves the files as they are.
The domain is bought from Billur and points at Vercel. It belongs to the project, not to a deploy, so it survives every update.
3. The Bookshelf
The books page is the most playful part of the site: a shelf of spines where the selected book turns to face you. This one is live, so try the arrows, the slider, or hover a spine.
- One source of truth. A single data file drives the shelf, the reading list, the collection and every book page
- Spines from covers. Each spine's colour comes from its cover's dominant colour, sampled in the browser and cached
- Every input. Arrows, slider, keyboard, swipe on phones and sideways trackpad scroll
4. Design Decisions
I wanted it to feel like paper rather than an app: warm, quiet and easy to read for a long time.
#f8f5eepaper#e8ddc9line#8a7358muted#c4703faccent#3f3122ink- Three typefaces, three jobs. Fraunces for headings, Inter for reading and IBM Plex Mono for navigation and small details
- A narrow column. Text sits in a 640 px column, so lines stay a comfortable length
- No framework, no build. Plain HTML, CSS and JavaScript. Pages load fast, and anything can be fixed with a text editor
5. What This Project Demonstrates
Small, careful craft: building something personal end to end, from the writing and the interactions to hosting, a custom domain and a deploy pipeline that makes changing it effortless.