One visual language
The BP monogram, brass frames, custom icons, typography, and electric-blue details carry through the pages. Shared components keep the identity consistent.
Inspect the brand kit ↗PERSONAL PROJECT / THE BRASS PIXEL
A distinctive identity.
A practical website.
My own website brings together the things I want a business website to do: introduce the person behind it, explain the offer, show the work, and make the next step clear.
Personal portfolio project by Damian Abbott. This is my own website, not a client commission. No client results or performance gains are claimed.
- Project type
- Independent designer’s portfolio
- Focus
- Identity, responsive design & inquiries
- What you can explore
- Working pages and interactive details
THE STARTING POINT
Make the work personal.
Make the offer clear.
I wanted a home for my work that reflected my interest in steampunk design while helping a potential client understand who I am and what I can help with.
The challenge was to give the brass, gears, and electricity a place without losing readable content, useful navigation, or a straightforward route to contact me.
Explore the homepage ↗A SHORT PROJECT WALKTHROUGH
Three decisions. Two screen sizes.
Explore real page previews, then open any page to try it yourself.
01 / A memorable first impression
The homepage pairs the engraved BP identity with a direct introduction to Damian and his work. The visual character supports a clear explanation of the offer.
Open the homepage ↗Scaled, non-interactive page preview. Use the link above to explore the full page.
DECISIONS YOU CAN SEE
More than a visual theme.
Room for every screen
Navigation collapses on smaller screens, cards stack, and the portfolio studies include phone-width previews. The content stays readable as space changes.
Try a responsive study ↗
A clear next step
Service options explain who each offer is for. Choosing an option carries it into the contact form, where visitors can send an inquiry or prepare an email draft.
Follow the service journey ↗TRY THE DETAILS
See how it behaves.
These are implemented features you can inspect yourself, rather than promised business results.
Motion with a choice
The gear turns independently of the lettering. Pause animations in the footer stops the effects, and the setting follows you between pages during your visit. Reduced-motion preferences are respected.
Keyboard-friendly navigation
Use Tab to find the skip link and move through page controls. Focus outlines help show where you are, and Escape closes the mobile menu.
A reviewable project brief
Prepare a brief on the contact page to see an editable-input, read-only preview workflow. Changing your details clears the old result. The email fallback stays local until you send from your mail app; Send inquiry submits through Formspree.
Explore the contact page ↗WHAT THIS PROJECT DEMONSTRATES
Character and clarity can coexist.
This project demonstrates a consistent identity, responsive page layouts, reusable interface components, and an inquiry journey. A different business would call for a different visual direction—the same attention to structure and usability can carry across.
The site is currently a local preview. Real-world traffic, inquiries, and business outcomes have not yet been measured.
Discuss your business website ↗