Personal websites / narrative design
How to Make a Personal Website Tell a Story
A project grid can show what I made, but it rarely explains why the next thing happened.
By Ryan Vogel 4 minute read
Personal sites often turn a life into inventory: a name, a short bio, a grid of projects, and a row of social links. That structure is efficient, but it asks every visitor to reconstruct the person behind the list.
When I updated ryan.ceo, I wanted to do the reconstruction myself. Instead of treating each project as an isolated card, I rebuilt the page to literally tell my story.
Projects are more interesting in sequence
A portfolio item can answer a few basic questions. What is this? What technology did it use? Where is the link? The harder questions sit between the cards. What did this project teach me? What did it lead to? Why did I choose the next problem?
Chronology gives those relationships somewhere to live. A small early experiment can matter because it created the skill, connection, or frustration behind a later company. A job title can become part of a path instead of a disconnected credential. The site starts explaining movement rather than presenting a shelf of finished objects.
That became the central design decision for the new site. The page is a continuous narrative that a visitor can move through. The scroll itself does some of the storytelling: each section follows the one that gives it context.
This does not mean every event deserves equal space. A story needs selection. I want the milestones that explain a change in direction, reveal something about how I work, or make a later chapter easier to understand. The goal is not to reproduce a résumé sentence by sentence. It is to make the path legible.
Let the interface support the narrative
Once the content has an order, the visual system has a clearer job. Typography can distinguish the main thread from supporting detail. Logos and links can identify the people, products, and companies that appear along the way. Spacing can create pauses between chapters without turning every moment into a separate card.
The interface should not compete with the events. A personal site is especially vulnerable to decorative features that demonstrate taste while making the person harder to understand. I would rather use motion to guide attention through a transition than add an effect that exists only to announce itself.
The same restraint applies to copy. A project description written for a grid tends to compress everything into a pitch. Narrative copy can be more direct: this happened, it changed what I was doing, and the next thing grew from it. That voice feels closer to how I would explain the work to another person.
I did not benchmark visitor comprehension or compare analytics before and after the redesign. I only know that this format represents my own path more accurately than a collection of disconnected project tiles did. The page now reads in the order I would actually tell the story to another person.
A useful test for a personal site
The question I now use is simple: if someone reads the page from top to bottom, will the order teach them anything?
If rearranging every section would leave the meaning unchanged, the page is probably still a catalog. A story has dependencies. An early detail changes how a later one reads. The visitor understands not only that several things happened, but how one chapter opened the next.
That can work even on a very small site. The first section establishes where I started. A few carefully chosen milestones show changes in focus. The current work becomes the latest chapter rather than a floating headline. Projects can still have links, screenshots, and technical details; they simply serve a larger structure.
I still want the site to be useful to someone who scans. Clear headings and recognizable names matter. But the person who keeps scrolling should get more than an expanded résumé. They should leave with a sense of direction—where I came from, what I chose to build, and why those choices belong on the same page.
The original post