Menu

ByCaitlin wordmark logo with a white leaf monogram on a muted teal background
ByCaitlin wordmark logo with a white leaf monogram on a muted teal background

Menu

ByCaitlin wordmark logo with a white leaf monogram on a muted teal background
ByCaitlin white leaf monogram logo on black

WEB DESIGN

PROJECT 3

PROJECT 3

ByCaitlin.co.uk

The Brief

Design and build my own portfolio site from the ground up, a site capable of holding the full range of what I do, photography, brand and social work, email marketing, website design, and motion and film, without flattening any of it into a generic template.

The Process

Research. Before writing or designing anything, I worked through a proper process to actually define my own tone, rather than guessing at it. That meant analysing real samples of my own writing across contexts, a work introduction, a text to a friend, an About page draft, a compliment response, an honest account of something that hadn't gone well, and working through a long set of direct and indirect questions about values, ambition, and self-perception. That research produced a genuine tone profile: growth as a near-unconditional value, competence stated as fact rather than claimed, warmth demonstrated through action rather than adjectives, and a preference for concrete nouns over vague category language. Everything written on the site afterwards was built against that profile, not guessed at fresh each time.


Brand & Visual Design. I made a deliberate choice to strip the site down to black and white, white text and hairlines on a black background, Josefin Sans as the only typeface, no accent colour competing with the actual work on display. That wasn't a default, it was a decision to let the projects themselves carry the visual interest rather than the site's own chrome. I designed the project browser's tab and grid system, the card layout for individual projects, and a consistent visual language, thin borders, generous spacing, uppercase micro-labels for categories, that repeats across every part of the site so it reads as one considered system rather than several different templates stitched together.


Development. I built every functional piece of the site as a custom component rather than relying on template defaults: a category-based project browser that filters cleanly across Photography, Brand & Social, Email, Website Design, and Motion & Film; a site search that matches on titles, descriptions, and near-misspellings so typos don't dead-end a search; a scrolling tagline for the homepage; PDF and PowerPoint viewers built directly into project pages so a real document or deck can be read in full without ever leaving the site or hitting a login wall; and an image carousel for landscape photography work. I gave particular attention to responsive behaviour across phone, tablet, laptop, and wide desktop, rebuilding layout logic more than once until it held up properly at every screen size rather than just the ones I happened to test first.


ByCaitlin logo mark on a purple background
ByCaitlin logo mark on a purple background
ByCaitlin wordmark and leaf monogram brand lockup
ByCaitlin wordmark and leaf monogram brand lockup

The Outcome

A site that represents the actual range of my work rather than presenting one skill as the whole story, and one built to keep expanding, new projects, new categories, new components, without ever needing a full rebuild.