Skip to main content

The website / 03

Everything has its place.

My name is at the front. Writing and work give the site its substance. Personal products have a place alongside them.

  1. 01 / Read

    Follow a question.

    Articles are the notebook: a way to work through React, JavaScript, and the systems underneath the interface.

  2. 02 / Explore

    Look at the work.

    Project pages connect the problem to the implementation. Actual project images sit with the work they describe.

  3. 03 / Try

    Use something I made.

    Prism is one personal product. Its quiz and results have their own space, reached from a feature on the homepage.

One identity, different pages

The frame stays familiar.

The navigation, typography and colors stay consistent as you move between writing, work and the story behind the identity. Each page gets the layout its content needs.

A long article needs room to read. A project needs context and images. A product needs a clear way to try it. The homepage introduces those paths without turning the whole website into any one of them.

A few decisions you can see.

Reading comes before decoration.

Article covers introduce an idea. The diagrams and text explain it. Technical illustrations keep their captions and supporting context.

Read the articles

The work keeps its evidence.

Project pages show their own interfaces. The identity adds a consistent frame around them, without replacing the work with a brand illustration.

Explore the projects

Motion has an endpoint.

Transitions show a change and settle. With reduced motion enabled, the content and controls remain available without the animated movement.

Products have their own boundaries.

Prism has a dedicated quiz and result flow at /taste. Your result is saved in a link you can reopen; the product pages do not load the site analytics.

One interactive example

Try a layout decision.

This small workbench shows how spacing, structure and motion affect the same pieces. It is one experiment from the website. If you want to continue, its result link carries those three choices into Prism; other categories use supporting defaults.

An idea you can try

Same pieces. A different feeling.

Change a decision and watch the design respond.

Composition studyLive preview
The palette stays fixed so you can compare the layout.
Your decisions
Space
Structure
Movement

More space gives each element time to register. One larger element gives the eye a clear starting point.

Explore this direction

Prism carries these three decisions into your result. Color and type start with defaults you can review.

Take it into your next projectBuild with this identity