A quiet website with a lot going on
BuildingBy Harlaksh Singh
Most of this website is finished before you arrive.
The words have been turned into pages. The links are in place. The fonts and styles are ready to download. Your browser doesn't have to assemble my biography before it can show you who I am.
I like that arrangement for a personal site. Reading is the main thing someone comes here to do. The more interesting question was how much personality I could put around it without making the reading wait.
Start with an ordinary page
The foundation is a Node.js build script. It takes Markdown posts and a few shared content files, then produces HTML. Tailwind handles the CSS. Plain JavaScript adds the interactions. Vercel serves the result.
There is no application framework in the middle. That suits this particular job: most visitors need the same writing, navigation and information. Preparing those things ahead of time leaves the browser less to work out.
It also keeps the writing fairly independent of the presentation. A post is a file I can read without running the website. The long biography on the home page and About page comes from the same source, so changing it doesn't require remembering every place I copied it.
The styles and scripts get filenames that change with their contents. That lets a browser keep using a downloaded file until there's a different one to fetch. A small build decision makes subsequent visits a little less wasteful.
Give the details something to do
The name at the top uses a variable font. Its letters get heavier as the pointer approaches them. The portrait tilts towards the cursor. On the blog list, an excerpt follows the pointer so you can get a sense of a piece before opening it.
These are small things, but I like how much character they can give an otherwise ordinary page. The excerpt also does a job: it helps someone decide whether to read.
There are different ways to move through the site. A search palette searches a locally downloaded index. Supported browsers can carry a post's title through the transition from the list to the article. Other browsers follow the same link normally.
The theme switch has its own bit of choreography: in browsers that support the transition, the new palette expands from the button. The choice is remembered for later visits.
Those details have conditions. A touch screen doesn't have a hovering cursor. Someone who asks their operating system for reduced motion should get a quieter page. An interaction earns its place partly by knowing when to stay out of the way.
The clock and weather give Bombay a small presence here too. They can change while the biography beneath them stays exactly where it belongs.
One piece of writing, several ways in
Each page also has a Markdown version. The site has a feed, a sitemap and a public API. The search index is another view of the same material.
I find this more satisfying than treating the page in a browser as the only useful form of a piece of writing. A reader may want it in a feed reader. A tool may need the text without the surrounding interface. Those uses don't require me to maintain separate versions of the essay.
The editing experience is separate again. There is a portable HTML writing desk with the drafts embedded inside it. I can edit Markdown, see a rendered preview and compare earlier versions. It works without a network connection. The public site can stay focused on reading while the desk does the untidy work of revision.
Check the thing a person receives
A successful build is useful evidence. It doesn't tell me whether a download actually downloads or whether a form tells someone what happened after they pressed the button.
The checks here look at the generated output: whether links reach real files, whether publication dates match the writing and whether unpublished pieces remain outside the public lists. The Press Kit bundles its assets from the same files offered individually, rather than relying on a separate collection that could drift out of date.
Those details are less visible than a moving portrait. They deserve at least as much attention. A playful page with a silent form gives someone a much stronger impression than the animation ever will.
What I enjoy about this site is how much of it is made from ordinary pieces. Files, links, a font with a little range and a browser that can already do quite a lot. The work is in deciding where a small detail helps someone, where it adds character and where leaving the page alone is the better choice.
H.
Letters from Bombay
Occasional notes on what I'm building, what's working and what I got wrong.