Project Overview
I wanted a portfolio that actually represented how I think. The old Squarespace site showed work: it had projects and an about page… But it didn't reflect how I approach design. It was barely accessible. The layouts were constrained by template logic. And it was flat in a way I'd outgrown.
So I rebuilt it from scratch. I designed in Figma and built in Framer, and I treated my own site the way I'd treat any other design project: with my process, focus on information architecture, and a reason for every element that made the final cut. Nothing is there because it seemed like a good idea. Everything is there because I decided it should be.
What made this different from any other project: I was the designer, the client, and the stakeholder at once. There was no brief to align to, no one to approve the direction, and no one to push back when I went down a rabbit hole. Over 3 months, I went through multiple iterations, making changes live on the site, committing them, and checking the result across different monitors, browsers, a tablet, and my phone.
Timeline: 3 months, iterating live.
The Squarespace site before the redesign: homepage, project pages, and about. Functional, but constrained to a template.
Problem Space
The Squarespace site had three major constraints.
Accessibility. Squarespace gives you some basics, but not the ability to build actual accessibility controls into the experience. No high contrast mode or reduced motion. For someone whose work centers on inclusive design, a portfolio that couldn't model it was a problem.
Layout control. I had a clear picture of how I wanted things to look: layered, intentional, with visual depth. Squarespace templates worked against that. The gap between what I could imagine and what I could actually build was too wide.
Self-representation. The site showed work but didn't show thinking. There was no design philosophy visible, no way to orient different types of visitors, nothing that communicated who I actually am as a designer. It was a project list, not a perspective.
Expanding past these constraints became my brief and main decision poitns.
Tools
Adobe Acrobat
Adobe Illustrator
Adobe InDesign
Adobe Photoshop
Figma
Framer
GIF showing the high contrast feature on the website and how content appears.
Key Decisions
Conceptualize navigation on paper. I mapped out a Quick Orientation section as a direct IA response to the self-representation problem: letting people quickly find what they're looking for without assuming the path they'd take. A portfolio isn't linear for most visitors; the site shouldn't pretend otherwise.
Accessibility baked in. After debating different options, I settled on building a custom high contrast mode and enabling Framer's built-in reduced motion support for visitors who need it. Not for compliance: to expand my skillset and because accessible design is something I care about.
Making it feel like me. The illustrated avatar, the Braided Systems Thinking diagram on the About page, the voice in the copy: all deliberate. I wanted someone who came to this site to understand not just what I've worked on, but what I care about.
From rough concepts to testing screenshots, these images showcase some of the thought behind my work as I navigated building it.
Trial & Error
Choosing the tool. I tested a few website builders before landing on Framer. The question was whether I could build what I had in my head and get into the code if I needed to. Framer answered both.
Figma as a sandbox. Before touching Framer, I worked through rough layouts in Figma to test ideas. This is where the type system came together: Roboto as the primary, with IBM Plex Mono added as a complement. It was also where I figured out which sections were genuinely necessary and which were just filler. If I couldn't articulate why a section existed, it didn't make the cut.
What got cut. I originally designed three custom accessibility toggles: high contrast, large font size, and reduce motion. Large font size got pulled: it broke too many other design settings, and it overlaps with something users can already configure at the OS or browser level. A custom reduce motion toggle got pulled too: Framer has one built in, so I enabled that instead of duplicating it.
The footer card. The layered card in the footer, specifically keeping the peeker image clipped to the card and not bleeding out, was its own technical problem. Small in scope, stubborn in practice.
Manual to universal. A lot of the build started as individual manual edits. Once things were working, the job was making them consistent: setting site-wide styles so every H1 behaved the same way, every button matched, every breakpoint held. Going from "this works here" to "this works everywhere" is a different kind of work.
The things I figured out. Getting high contrast mode to work required custom code and more iteration than I expected. When it finally did work, it was one of the more satisfying moments of the whole build. I saw a typing effect on another site and built something similar for my own. Throughout, I brushed up on HTML and CSS, working in Framer's custom code panels when the visual editor couldn't get me where I needed to go.
Building the visuals. Several assets on the site are original: the Braided Systems Thinking diagram, the peeker character, the Relias communication pipeline diagram. These weren't decoration. Each one was there to make a point that copy alone couldn't carry.
Snapshots from April 2025. The site has evolved since then.
Did it meet my goals?
Yes. The three things I set out to fix: self-representation, accessibility, and creative freedom. The site reflects how I think, not just what I've done. The accessibility features I committed to are built in and working. The layouts do what I had in my head before I started.
What I take from this.
Being your own client is harder than it sounds. There's no brief, no stakeholder meeting, no scope document. Every decision is yours, and so is every moment of doubt. What I learned is that I can work through that: I can hold the question of whether something is necessary long enough to actually answer it, and I can ship something I'm proud of on the other side.
I also came out of this with more technical confidence than I went in with. Framer, custom CSS, high contrast implementation, typing effects: I learned most of this while building.