Why I built it this way
"Learning the tools and making them work for me is the only path forward."

I opted to develop this portfolio using Claude by Anthropic for several reasons. First, I expected to have more creative control than if I used a platform like Squarespace or Adobe Portfolio (I do not know how to code, so one of these platforms would have been necessary). Second, I wanted to experience for myself the design and implementation capabilities of Claude. Most importantly, I wanted to prove my AI literacy through creation.

AI has already become an essential component of people's everyday lives. My mom uses it to develop recipes with items in her fridge; my friends use it for research on graduation dresses; my professors use it to grade my assignments (yes, really). I've used a variety of AI tools over the past few years, for everything from achieving personal goals and completing tasks at work. It is crystal clear how vital AI literacy is in the workforce, and I believe that AI is an incredible tool for productivity.

I also believe that while many fear AI and what it could do to their jobs, this is the wrong perspective. New technology is constantly developing, and people have always adapted. For example, during the first Industrial Revolution, skilled weavers were put out of work by the power loom; they adapted, and transitioned to factory jobs. Being afraid of AI makes it impossible to adapt to the new technology. Learning the tools and making them work for me is the only path forward.

Developing this portfolio with Claude was the perfect way to strengthen my AI literacy. In the several hours spent developing these pages, I learned how to prompt Claude most effectively, how to describe my vision in the clearest way, and how to problem solve when we ran into issues. Keep reading for a closer look at how this website came to be.

Where it started

The first iteration

The site didn't start looking like this. The first version had a hot pink accent color (#FFC2E6), a large "CWC" outline watermark centered on the hero, a scrolling marquee strip cycling through disciplines, and project cards with text labels beneath each image. It was structurally sound and typographically consistent — but it didn't feel like me yet. From there we iterated: swapped pink for navy, removed the marquee, moved to image-only hover cards, and redesigned the homepage layout entirely around the film landscape photo.

First iteration homepage — pink accent, CWC watermark, marquee scroller, card layout with text labels

First iteration — pink (#FFC2E6) accent color, "CWC" outline watermark, scrolling marquee strip, project cards with text labels below each image thumbnail.

How it happened
01
Brief and design discovery
I opened with a creative brief: a graduation portfolio for my Media Arts & Design minor at UChicago, four projects, a specific reference site, and a general aesthetic direction. Claude asked clarifying questions about typography preferences, color palette, interaction style, and page structure. We defined the design system — Playfair Display for display type, DM Sans for body, a restrained navy accent — before a single line of code was written.
02
Iterative prototyping and layout exploration
Claude generated multiple layout iterations for the homepage hero — different arrangements of name, tagline, photo, and CTAs. I evaluated each visually, selected what worked, and gave precise feedback. This feedback loop is what UI/UX practitioners call iterative prototyping: rapid generation, user evaluation, refinement. We cycled through several rounds before locking the layout for each page.
03
Technical problem solving
Not everything worked immediately. The squirrel logo for the Literati branding project had a black background that needed to be transparent — CSS blend modes failed twice before we solved it by writing a Python script using Pillow to programmatically remove pixels below a brightness threshold. This debugging loop, identifying the failure mode, proposing an alternative approach, and implementing it, is real engineering problem solving, even when done through natural language prompts.
04
Content integration and polish
All written content — the artist statement, project descriptions, audio notes, and this page — is entirely mine. Claude built the HTML containers; I supplied everything inside them. The final stretch focused on polish: consistent spacing across all project pages, standardized hero structures, full-width dividers, and navigation refinements across all eight files.
Prompting in practice
Best prompting example
Precise visual direction on the branding page layout
Cate
I like 2 the best. Let's try a version where we keep the decks under all of the text. So the left column is just the logo evolution (current → arrow → new), and the right column has all the prose. Then the full horizontal logo below both columns, and then the decks side by side below that.
Claude
Got it — restructuring the layout now. Left column: logo evolution stack (current logo → thick navy arrow → squirrel mark). Right column: all three prose paragraphs. Then full-width horizontal logo below, then the two PDF decks side by side at #zoom=33.
Cate
Yes, exactly. And can the arrow between the logos be thicker and have no label — just a visual indicator of direction?
Claude
Done — replaced the labeled arrow with a solid 3px navy vertical line capped with a triangle arrowhead. No text, just directionality.

What makes this effective: I gave a spatial description with clear column logic, specified the order of every element, and then followed up with a precise visual detail. Specific layout language — "left column," "below both columns," "side by side" — translates directly into CSS decisions without ambiguity.

Best problem solving example
Knowing when to scrap the approach entirely
Cate
Okay. It is unchanged still. Let's try this. Please just put the header from the home page onto ALL of the pages, every selected work page. Completely remove the redirect forward and backward.
Claude
Done — all four project pages now have the exact same fixed top nav as the homepage. The bottom redirect nav is completely gone.
Cate
Now, embed two buttons on the Literati Brand Refresh page. 1. Top left (fully aligned to the left): "All projects" with a small arrow pointing left. 2. Top right (fully aligned to the right): "audio engineering" with a small arrow pointing right.
Claude
Done — "← All Projects" flush left and "Audio Engineering →" flush right, small uppercase grey text that turns navy on hover.
Cate
1. Identical buttons on audio engineering. Left one says "Brand" and right one says "Video." 2. Identical buttons on video. Left one says "Audio Engineering" and right one says "Photography." 3. Identical buttons on photography. Left one says "Video" and right one says "All projects."
Claude
Done — the full chain is applied across all four pages.

This exchange has two parts. The first message is a problem-solving pivot: after several failed attempts at a custom bottom navigation bar, I stopped iterating on the broken approach and gave a completely different instruction — copy the existing homepage header, remove the complicated piece. Simple, decisive, and it worked immediately. The second part shows clean execution prompting: every page, every label, every direction specified up front, no back-and-forth needed.

What Claude contributed

What I contributed

Tools used
Claude Sonnet (Anthropic) HTML / CSS / JavaScript Python · Pillow Adobe Audition Adobe Illustrator Netlify Google Fonts