The brief
Yusuf Hassan is a product generalist and head of design who also writes essays, investment memos and music. He wanted one personal site that held all of it, and he wanted to update it himself without asking a developer every time he published something.
What I built
A single-page React app with six sections, each fed by Contentful, a headless CMS:
About me: a bold hero and a Q&A written as a chat conversation.
Writings and Investments: two essay lists, each with a reading page and a newsletter sign-up.
Fun Projects: his side projects, such as Typestory and Tutlub, with their logos and links.
My Music: his world music and his religious music, with a built-in audio player.
Design Portfolio: case-study cards, some of them locked behind a password.
Every heading, paragraph, list and file on the site comes from the CMS. I modelled eleven content types so Yusuf can edit the page copy as well as the posts.
My role
I was the only developer. I built the site between June and December 2021: the layouts for desktop and mobile, the Contentful content model and integration, the audio player, the password gate, the newsletter form and the deploy pipeline.
An About page that reads like a conversation
Instead of a block of bio text, the About page is a list of questions and answers styled as chat bubbles. Each bubble is a CMS entry with an order and a flag for question or answer, and the answers support Markdown. Bubbles fade in as you scroll.
The Q&A section. Questions on the left, answers on the right.
Long reads with a table of contents
Essays are written in Markdown in Contentful. When a post loads, the page reads its headings, gives each one an anchor and builds a table of contents in the left column, with sub-headings indented. A subscribe box stays on the right and posts to Yusuf's Mailchimp list.
An essay with its generated table of contents.
A music player built from scratch
The music page lists two playlists, My World Music and My Religious Music. Hovering a track number turns it into a play button; playing one track pauses any other, and the row shows a countdown of the time left. I wrote this with plain audio elements rather than a player library.
The music page, with a track hovered.
Locked case studies
Not every case study is meant for everyone. Yusuf can set a password on any portfolio entry in the CMS. The card then shows a lock, and opening it asks for the password before the case study loads. Unlocked entries open straight away.
A locked case study asking for its password.
Mobile
Each page has its own mobile layout. The navigation folds into a slide-in side menu, and the chat bubbles, playlists and essays reflow to a single column.
The home page, the Q&A and the side menu on a phone.
Shipping
The site is a Create React App build on Firebase Hosting. I set up GitHub Actions to deploy every merge to main and to publish a preview for every pull request, so changes could be checked before they went live.