Design Engineering a Portfolio
I redesigned my portfolio, learned a new stack, and tried a handful of new tools throughout the journey. Here's what stuck, what didn't, and why.
- Next.js
- Storybook
- shadcn/ui
- Claude Code
Framer
I started my first portfolio redesign as a Framer site, coming from a background of working in Webflow. Despite how I feel in general about "no code" web platforms, I honestly felt Framer is good for what it's built for. It was an easy transition from Webflow and it provides you a great canvas editing view, something I feel a lot of designers really crave. The CMS is also really nice, and I see the value in it as a product...
But I struggled with having a mix of some components built from the Framer canvas and some code components built by Framers agent. Editing the code components inside Framer didn't work as easily as I wanted to, and that got frustrating fast. Sometimes it would render what I designed on the canvas when I wanted the code component, and then when I finally got it using the code component, I'd be fighting to get it back to the canvas version. I needed more control than the platform wanted to give me.
A second concept, for the about-me modal, went the opposite direction: designed in Figma first, then rebuilt in Framer by hand. That order was easier for me, but Framer doesn't have a clean way to bring a Figma design over, which was a bummer.
Astro and Cloudflare
Astro gave me the flexibility I needed from Framer right away and was great for creating static pages for my site. It felt easy to work with, and it let me lean into more React and actually strengthen my animation and bezier skills instead of working around a tool.
Next.js
When I was exploring other Design Engineer portfolios, I noticed a lot of those portfolios were Next.js apps, and naturally I wondered why. My vague understanding after some research: more server side rendering, faster, better for SEO. So my curiousity naturall led me to adopting it for my new portfolio.
No regrets. Next.js has been pretty intuitive for me. Learning it alongside a deeper dive into React has been smooth. I wouldn't say easy, but I haven't hit any real friction understanding how it all fits together. Big fan.
Storybook
For my portfolio, I built out a prototype demo of a support agent dashboard. I wanted a polished seamless way to embed my design and build within the case study, so I put the entire design system inside Storybook. It was super easy.
The payoff is huge. Having everything built in Storybook means I can display live, engineered versions of my design work right inside my portfolio case studies. Interactive, with a segmented picker to flip through states and variants. For the dashboard project I built out every region in Storybook and embedded them in the case study. It's a really clean way to show design work compared to static Figma screenshots.
The rapid fire reviews
Previously places I worked at self hosted everything for security reasons, so I never got to experiment with the big name platforms. This week I finally did. Here's every one, pros and cons.
21st.dev
Top of the list, my favorite thing right now. I became a member and I'll be posting my own component designs there.
- Pros: The best marketplace for design engineering components I've found. Beautifully crafted work, and a place to publish your own as a member.
- Cons: Some components are better looking than they are engineered, with way too many effects. That's fine, but it's there.
- Pros: Loved it. It's a really good starting kit that lets you turn your own design system into real code without reinventing every UI primitive. It provides the difficult parts of of UI while leaving a lot of flexibility in the visual design. As someone who has almost entirely designed products from systems I built myself, I liked how these didn't make me feel like it was locking in to someone elses design system.
- Cons: None yet.
I've been playing with this one for four or five months, but I used it more recently to explore my new portfolio design language, and I used it alongside shadcn themes when ideating the design system for my dashboard project.
- Pros: A real Figma alternative for design system building. You see your system live as you build it, and there's a Subframe MCP.
- Cons: No variables, so it can't handle complex token architectures. If you're building one of those, stay in Figma.
My best friend right now. Daily notes, task outlines, skill building plans all live here. Considering building a MOC or "Second Brain" in here
- Pros: Fits how I actually work day to day with little to no friction.
- Cons: Annoying how the title also serves as the file name.
- Pros: Genuinely good databases and knowledge bases. It's where my career index and project KBs live.
- Cons: I just don't work in it day to day at this point in time, so I only keep info in there that wont go stale.
snd.dev
A little platform with three UI sound libraries made by UX developers. I downloaded Sine, but Industrial and Piano are also awesome.
- Pros: The sounds are semantic, mapped to real states: disabled, notification, tap, swipe, toggle on, toggle off, celebration.
- Cons: Easy to overdo. I'll only use one or two, because a sound on every element would be sensory overload. That's a restraint problem, not a product problem.
Marketed as a hub where you can vibe code an app, generate design assets, make interface sounds, generate images. I didn't really like it.
- Pros: Genuinely good for mood boarding. I fed it inspiration photos in a few styles for a floral painting background, and it blended them into generated ideas based on my board. The interface is also nicely designed.
- Cons: The rest of the pitch didn't land for me. And take even the praise with a grain of salt, because I only used it for about two days.
I came here looking for a UI sound library.
- Pros: They have their own library, and a membership lets you modify sounds and mix in your own.
- Cons: Every marketplace preview plays at about 25 percent volume under a voiceover booming "ElevenLabs." I get that they're protecting their work, and I don't know how else they'd do it. But I came to hear the sounds before buying, and I couldn't hear the sounds. That killed it for me.
Recommended by my engineer boyfriend, and I liked it.
- Pros: Feels more modern and mature than VS Code. No complaints. I'll probably end up back on it.
- Cons: Unfamiliar, which mattered during a week where I was already learning so much at once.
This is where I gravitated back to this week.
- Pros: The classic. Familiar and dependable when everything else in my stack was new.
- Cons: I wouldn't say it's better than WebStorm, and it doesn't feel as modern.
- Pros: Really nice, no drama.
- Cons: None.