Skip to content

Personal website system

The design and front-end system behind this portfolio, built to keep editorial rhythm, visual identity, and responsive behavior consistent across different page types.

personal-website-system.md

Client
Personal portfolio
Role
Design & development
Tags
front-end

One language, many pages

This portfolio has to hold different kinds of material without looking like a collection of unrelated templates. The home page introduces the work, list pages support scanning, and articles need enough quiet for sustained reading. I designed one layout language that can change pace across those formats while keeping the same identity.

The system begins with a paper-toned surface, ink for primary content, one accent color, shared borders, and a type scale that keeps its rhythm as the viewport changes. These are not theme details applied at the end. They are the constraints used to compose every page.

The rules that matter

  • Panels are separated by texture strips, not arbitrary whitespace.
  • Markdown marks (#, ##, –) are the only extra ornament.
  • Metadata always lives in the accent color, never in the ink.

Those rules reduce page-by-page decisions. A new section can change its content density without introducing another border style, decorative motif, or metadata treatment. The result stays recognizable because the relationships remain stable even when the content changes.

The page type changes the rhythm

Shared rules do not mean identical pages. The home page moves through short sections. A list page needs repeated rows that remain easy to scan. An article uses longer measures and clearer pauses between headings. Each format draws from the same visual vocabulary, then adjusts sequence and spacing for its reading task.

I review those page types together. When a type, color, or spacing decision changes, the question is not only whether one screen improves, but whether the full site still reads as a coherent system.

Design and development stay connected

Building the portfolio alongside designing it turns the rules into working constraints. A visual idea has to survive responsive widths, real content lengths, and repeated use. If it only works in one composed screen, it is not yet part of the system.

That loop keeps the language flexible without making it loose. Repetition reveals which choices belong in shared rules and which should remain specific to a page.

What the work demonstrates

The project demonstrates the value of treating a personal site as a publishing system rather than a sequence of isolated screens. A restrained palette and a small set of layout rules leave more attention for the work, while consistent implementation keeps the experience intact as the site grows.

Get in touch

Have a page, product, or interface that needs a clearer direction?

Send the idea, the rough brief, or the messy first version. I'll help shape the next step.

Start a conversation