fahadaljobayer.com

My own site: a portfolio, a story and a personal archive behind a single link I can give to an employer, a new acquaintance or my family.

Two suns

The site is built around one continuous journey. The page starts in the warm, dusty light of Begumganj and Dhaka and cools, as you scroll, into the blue-grey of Melbourne. Background, type colour and accent all move together on a single scroll value. It isn't a theme toggle sitting in a corner — it's the argument of the whole page.

Making that readable was the hard part. A straight blend between a light and a dark palette passes through mid-grey, where no text colour can reach the 4.5:1 contrast minimum. So the palette runs as two continuous phases with one timed switch between them, and an automated test checks the result at 201 separate scroll positions. The page never becomes unreadable, and it pins to a fixed dark palette for anyone who has reduced motion turned on.

Designed by me, built with Claude Code

The design is mine. The logo is mine. The admin panel structure is mine. The photography and the grading are mine. Every idea on this site started as a decision I made.

Claude Code wrote the implementation, from a build specification I authored and then reviewed line by line. I treated it the way a designer treats a development team: I supplied the direction, the data model, the interaction rules and the accessibility standards, and I sent work back when it didn't match them.

Using an AI to write the code didn't make the site generic. Holding it to my own specification is what kept it specific.

The panel behind it

I planned an admin panel of fourteen sections before a line of code existed — profile and story, chapters, education, work history, projects, community, skills, life posts, media library, CV sections, messages, settings, security and audit log — so I can keep the site alive myself, indefinitely, without asking anyone for help.

What makes it different

1. Colour temperature that travels from Noakhali to Melbourne as you scroll, and stays readable at every point — proved by test, not by eye.

2. Two CVs, professional and personal, generated from the same records as the site, so they can't fall out of date with it.

3. A personal feed that can be public, unlisted or passcode-locked, with per-post visibility on top — open to a recruiter and closed to everyone else on the same afternoon.

4. An education chart on a real year axis, so the gaps and the 2024 fork stay visible instead of flattened into equal boxes.

5. Seven chapter frame shapes and five entrances, so no two chapters of the story arrive the same way.

6. The F-mark logo: a glazed ceramic tile, a private reference to the tiling trade.

Under the hood

Next.js and TypeScript, Drizzle with PostgreSQL, Auth.js, Cloudinary, deployed on Vercel. Covered by unit tests for the palette and the chart geometry, and browser tests on desktop and phone for readability, admin protection, upload validation and feed privacy.