My personal site needed to hold more than a short biography. It had to connect the businesses I had built, the decisions behind them, and the writing that came out of those experiences. A visitor should be able to understand the broad story in a quick scan, then spend time with a particular chapter.

I designed the homepage around a living timeline and a writing index. Together, they give the site two useful entry points: follow the sequence of my work, or start with an idea that catches your attention.

A long founder biography can become difficult to read when every detail receives the same emphasis. I gave dates a consistent position and made each timeline entry a distinct row. That creates a visible order before someone reads the full text.

The introduction establishes who I am and connects the personal site to Trueframe. The timeline then carries the history, while the adjacent writing column offers a shorter route into my thinking. Each part has its own job, so the homepage can carry a substantial amount of content without becoming one continuous wall of copy.

I chose a restrained visual system: a serif wordmark, small mono dates, fine dividing rules, and generous space around the text. Those choices make the site feel closer to a personal publication. The personality comes from the writing, the portrait, and the specific entries in the timeline.

The date rail gives the page rhythm. Thin rules keep neighbouring entries separate, and quiet hover states help identify links. I kept the visual hierarchy consistent across the homepage and writing pages, so opening an essay feels like continuing through the same publication.

The site uses a typewriter detail alongside ordinary scrolling and subtle row interactions. I kept that movement focused on a small part of the experience. The timeline remains readable while the interface adds a little character.

This balance mattered because the main content is text. The page needs to support both a quick visit and a longer reading session. The interaction layer gives the homepage a recognisable feel while allowing the chronology and essays to carry the story.

The first preserved version began in Replit as a React, Vite, and Express project. I carried its timeline, writing structure, and editorial direction into a Next.js and TypeScript build, with the production code maintained in version control and deployed on Vercel.

I also gave individual essays their own routes, page titles, descriptions, canonical links, and article metadata. A visitor can open a specific piece directly, share it, and return to the timeline. The website therefore works as both a personal homepage and a collection of standalone writing pages.

On desktop, the timeline and writing index sit beside one another. On smaller screens, they become a single reading flow. I kept the content available across both layouts rather than relying on the desktop composition to explain the site.

The essay layout uses a focused reading column with a clear title, introduction, and body. Links back to the timeline and about page give readers a natural next step after finishing a piece. That keeps the relationship between the person, the history, and the writing visible throughout the site.

The result is a live personal website that brings my profile, business history, and essays together in one place. The reusable timeline and writing structure leave room for new entries while preserving the original visual system.

This project covers the information architecture, visual design, responsive layouts, Replit origin, and Next.js production build. It gives my identity Benjamin Chua Yuu Zhe a public home that can grow with the story.