Portfolio Site
Rebuilding my portfolio from the ground up — replacing Webflow with hand-coded Astro to gain full control over accessibility, performance, and component architecture.
The Problem
My original portfolio was a Webflow site. It had case studies and presented my work, but I had limited control over the underlying code. Webflow's generated markup loaded six font families, offered no dark mode, no skip links, no semantic landmarks, and no support for reduced-motion preferences. For a designer whose core claim is accessibility expertise, the site itself was undermining the message. I needed to own every line of HTML and CSS so the portfolio could be proof of the skills it describes.
Design Decisions
Every decision was guided by one question: does this make the recruiter's job easier while demonstrating the skills I claim to have?
Move from Webflow to Astro — a static site generator that gives me full control over markup, performance, and accessibility while producing zero-JS pages by default.
Embed full case studies on-site with side navigation, so recruiters never leave the page to evaluate my work.
Use CSS custom properties as design tokens so every color, spacing value, and radius is defined once and inherited everywhere — including per-project theme colors.
Neo-brutalist visual language with thick borders, pill buttons, and bold accent colors — playful enough to be memorable, structured enough to be scannable.
Reduce font families from six to two (Bricolage Grotesque for headings, Commissioner for body), cutting load time and visual noise.
Design Process
I prioritized the case study reading experience first — that is where recruiters spend the most time — and worked outward to the homepage, navigation, and visual polish.
Architecture (Week 1)
Webflow generates monolithic HTML with inline styles and platform-specific class names, making it difficult to enforce accessibility standards or build a true component system. I restructured into a component-based Astro project: a shared BaseLayout, reusable components (Header, Footer, SideNav, ProjectCard, PrevNextNav), and dedicated pages for each case study. This gave me full control over semantic markup, ARIA attributes, and a CSS custom property system that Webflow could not provide.
Visual Design (Week 2–3)
I chose a neo-brutalist style to stand out in a sea of minimal portfolios. Thick offset borders, pill-shaped buttons, and bold project accent colors give each case study its own identity while a shared design token system keeps everything consistent. The color palette assigns each project a theme color — teal for ComBoard, green for Budget App, yellow for this portfolio — that cascades through headings, badges, card backgrounds, and interactive elements via a single CSS custom property.
Before & After
The Webflow site had the content, but the code underneath was working against me. The rebuild keeps the same case study depth while replacing the entire technical foundation.
Before (Webflow)
- 6 font families loaded via WebFont loader
- Webflow-generated markup, no semantic control
- No skip links, landmarks, or ARIA
- Inline styles, no design tokens
- No dark mode or reduced-motion support
- No reusable component system
After (Astro)
- 2 font families, optimized loading
- Hand-written semantic HTML throughout
- Skip links, landmark regions, ARIA labels
- CSS custom properties as design tokens
- Full dark mode + prefers-reduced-motion
- Reusable Astro components with typed props
Accessibility
Accessibility is the core claim of my portfolio, so the site itself must be the proof. Every decision was tested against WCAG 2.2 AA, with several elements reaching AAA.
Color contrast: All text meets AAA requirements (7:1+). Project accent colors were tested against both light and dark backgrounds to ensure readability in both themes.
Semantic structure: Every page uses proper heading hierarchy, landmark regions, and ARIA labels. Screen readers can navigate the full site without confusion.
Keyboard navigation: Skip links on every page. Focus-visible outlines on all interactive elements. Dropdown menus respond to Escape and arrow keys.
Motion & theming: Scroll-triggered animations are suppressed when the user has prefers-reduced-motion enabled. Dark mode respects the OS setting and persists across sessions.
Dev Handoff
Because I both designed and built this site, I had the opportunity to practice what dev handoff looks like from both sides. The component spec below documents the ProjectCard component — its props, design tokens, spacing, and interaction states — in the format a developer would need to implement it from a design file.
Every reusable element on this site — ProjectCard, SideNav, PrevNextNav, Header, Footer — follows this same pattern: clearly typed props, consistent use of design tokens, and predictable interaction states. This structure means a new case study page can be added by writing content and passing props to existing components, with no new CSS required.
Outcomes
The redesign transformed a static single-page Webflow site into a fully accessible, component-driven portfolio that puts the work front and center.
What I Learned
Building my own portfolio from design to deployment taught me what it actually feels like to be on both sides of a handoff. Naming a Figma component is one thing; writing the CSS that implements it and realizing your naming was ambiguous is another. I now approach design system work with a much sharper eye for what a developer will need versus what looks organized in a design file. I also learned that accessibility is not a checklist you run at the end — it is an architectural decision you make at the beginning. Retrofitting skip links and ARIA onto a finished page is painful; building with semantic HTML from the start makes it effortless. Finally, using Claude Code as a development partner taught me how to communicate design intent precisely enough for an AI to implement it, which turns out to be the same skill needed to write a good design spec for a human engineer.