syntax folio

Design-minded frontend development

An MRHTML sample portfolio

Interfaces,
with intention.

I’m Rowan, a frontend developer who cares about the small decisions that make the whole thing feel right.

Look around

Built for people.
Made of good details.

HTML / CSS / JAVASCRIPT
Fictional profile. Original concept work.

Selected studies / 01–03

3 concept studies. All projects are fictional.

01 / Interface engineering

Index bookshop

A browsing experience that gives the books some breathing room.

Semantic HTMLResponsive CSSProgressive enhancement
Read the decisions

The constraint

This fictional catalog starts with complete book descriptions in HTML. Readers should still be able to browse when JavaScript is unavailable or slow to load.

The tradeoff

Client-side category filters avoid a round trip, but only search the books already on the page. A large inventory would need server-rendered pagination and shareable category URLs. That is deliberately outside this small concept.

The next test

Compare a dense list with this spacious grid using actual book titles, keyboard navigation, and narrow screens. The artwork above is static; it does not claim a measured sales or usability result.

02 / Component systems

Loop UI

A small vocabulary for the moments between click and done.

State modelsCSS tokens
Read the decisions

The constraint

A sample component library needs more than a good default button. Focus, loading, success, and failure all deserve explicit behavior.

The tradeoff

Keep focus on the button while an action runs, announce the result in a status region, and prevent duplicate work without removing the focused element. A shared state model adds a little structure, but makes failures easier to explain.

The boundary

This is an original visual study, not a downloadable component library. Production work would also test screen-reader announcements and repeated actions against the real asynchronous service.

03 / Responsive experiences

Daypath

A little structure for a day with no particular hurry.

CSS GridContent orderSmall screens
Read the decisions

The constraint

An imagined itinerary needs to read in a sensible order on both a wide desk display and a small phone.

The tradeoff

A horizontal timeline looks natural on a wide screen, but horizontal dragging hides stops and competes with page scrolling. The narrow layout stacks stops in document order. It gives up the single-line overview so every destination remains easy to find.

The boundary

The places and route are sample content. There is no map service, geolocation, routing calculation, or booking flow. Real directions and opening hours need their own source of truth.

02 / A working practice

The details
are the work.

Good frontend work connects what a page says, how it behaves, and who can use it.

  1. 01

    Start with the content.

    Give the document a useful order before asking the layout to make it interesting.

  2. 02

    Design the awkward states.

    Long titles, empty results, missed clicks, and failed requests are part of the experience.

  3. 03

    Leave a clear handoff.

    Explain the choices, keep the parts understandable, and make the next change easier.

03 / The person behind the pixels

Hello, I’m Rowan.

I like clear language, resilient interfaces, and the moment a complicated thing starts to feel simple.

Rowan Ellis is a fictional frontend developer created for this template. These studies show how to explain decisions, constraints, and unfinished questions without inventing clients or results.

Make this introduction yours. Add a verified contact link when you publish.

Back to top