01 / The opportunity
Give the work more room.
The earlier portfolio relied on project rows, small previews and repeated explanations. The visual review pointed to a clearer priority: show the work at a useful scale, then let the case study carry the detail.
For a hiring reviewer, the path should be simple: find a relevant project, understand my contribution and reach my résumé or contact details.
Find the work
Show the project and its status together.
Understand the role
Make my contribution clear in the case study.
Keep a way forward
Place contact and résumé links within reach.
02 / Design decisions
An introduction with a clear way forward.
The homepage pairs a large positioning statement with a substantial portrait. A short introduction leads directly to the work and résumé. This diagram examines those decisions within the current layout.
- Establish the focus. The two-line heading leads the left column without repeating the designer’s name.
- Make the next action visible. Work and résumé links sit immediately below the short introduction.
- Give the person room. A large rounded portrait balances the typography on desktop.
03 / Low to high fidelity
One layout, at two levels of detail.
The wireframes preserve the arrangement and controls of the real screens beside them. The homepage introduces the designer; selected work gives the project, its status and the next actions a consistent place.
Homepage: introduction and next actions
Selected work: browse and inspect
Retrospective reconstruction · Created from these interface captures after the website was built.
04 / The homepage
A personal introduction with a clear next step.
Condensed type, a real portrait and a short introduction establish who I am. The work and résumé links sit beside that introduction. Rounded image panels and soft section transitions carry the same visual language into the rest of the page.
The decision: keep the personality in the typography and imagery, while the copy gives people a direct route into the work.
05 / Selected work
See the project. Then look closer.
The rotating gallery brings one project forward at a time. Previous and next controls offer a direct route, and Pause keeps a project in view. A separate image viewer reveals the composition, main screen and detail screen without leaving the page.
Browse · A large composition sits beside a short description, status and case-study link.
Interactive screen walkthrough · Real captures from this portfolio. Choose a step or press Play.
The interaction decision: browsing images and opening a case study are separate, clearly labelled actions.
06 / The case study
Put a visual beside the decision.
Each case study follows the same reading pattern: context, design decisions, matched wireframes and interface evidence, outcome and next phase. The chapter index offers a shortcut, and full-image inspection lets the reader choose how closely to look.
The content decision: distinguish client work, independent concepts and prototypes. Screen-matched reconstructions explain structure alongside real interface evidence.
07 / Motion & access
Character, with a direct route alongside it.
Entrance reveals, the expanding pointer and a local background ripple add character. Buttons remain visible, and keyboard input restores the native cursor. Reduced-motion support keeps content and manual controls available without the animated sequence.
Keep the essentials available.
The site uses HTML, CSS and JavaScript with self-hosted fonts. Images reserve their space, pages share the visual system, and case-study content remains readable when optional animation is unavailable.
On touch screens, visible controls carry the interaction.
08 / Outcome & reflection
A more visual way to understand the work.
The delivered direction connects a concise homepage with detailed project stories. The main learning was to give imagery enough space, then make every decorative interaction optional.
Project stories
A consistent route into each project.
Image views
Composition, main screen and detail.
Shared language
Typography, spacing and interaction.
These describe the interface. Hiring outcomes and reviewer task success have not been measured.
What was checked, and what remains
Local checks cover navigation, image loading, responsive layout, keyboard focus, image enlargement, walkthrough playback and reduced-motion behavior. Browser checks complement the automated interaction tests.
Testing the implementation does not replace observing people use it. The next step is to watch hiring reviewers find a relevant project and explain my contribution without guidance.
09 / Next phase
Let reviewer behavior guide the next revision.
The next phase would test the information hierarchy with people reviewing design work, then use those observations to prioritise changes.
Personality invites a closer look.
Clarity makes it worthwhile.