# Six years coding for other people before finally coding for myself > The real story behind ao.dev and fui-content — from a hallway joke that never left the drawing board to an entire portfolio built from scratch, with a theming library along the way. Every company I've worked at had some version of the same conversation. At K13, with the designer: "you sketch it, I'll build it, we'll put both our photos on the site." At 3C, years later, with a different designer, the same idea. It never left the drawing board either time — I always wanted something of my own, but I always gave my full time to other people's work and never had anything left for myself. What finally unstuck it was, ironically, being out of work. I left 3C and started building something personal — a Lit component library for e-commerce. It was going well, until I stopped and thought: even if I finished it, how would I actually present it? Just ship a generic e-commerce site with zero context? That's when the old itch came back, and I decided: this time the portfolio actually happens. ## The problem the theming library solved first My e-commerce component library needed some form of styling. And I didn't want to install dependency on top of dependency — Bootstrap, Vuetify, Tailwind — I wanted something of my own, built the way I like to code. I opened up Bootstrap's docs (the one I have the most experience with, already modified and customized a few times) and started building my own version in SCSS, pulling a lot from it, but with zero JavaScript dependencies to start. Then I realized something else: I also needed to style the portfolio itself. So why not the same library? Once I finish [ao.dev](/projects/ao-dev) and go back to my Lit e-commerce components, I'll already have something ready to style them with my own look — the same visual identity between the portfolio and the e-commerce, without reinventing anything. ## I implement, but I don't always know why Here's the honest part: over six years of writing frontend code every single day, and I'd never studied design in depth. I know how to implement. I don't always know how to explain why a specific visual decision was made. So I decided to actually study it — I went after the differences between the design styles that exist, trying to decide which one to follow. I couldn't pick just one. They all pulled me in for a different reason:
Morphism Where I discovered (or rediscovered) it
Flat Childhood cartoons — little shadow, simple shapes
Skeuomorphism Pure nostalgia — Flash-era sites, Cartoon Network, iG, Ben 10
Neumorphism A Leve Mix client wanted something with more "bite" — I went digging and found the style
Glassmorphism The original version, before any Big Tech company repackaged the idea
Liquid Glass Apple's relaunch — I watched the announcement video and my jaw dropped
I decided to have all five. A toggle right on the site to switch between them live — not just to show off the options, but to literally tell the story of interface design's evolution, the way I discovered it myself. ```html ``` ## What never made it into a single line of the technical case study Some things only ever become a line like "fixed" in the case study, but at the time cost real days: - Getting every morphism to work correctly in dark mode without breaking contrast — just that, not even counting variants, took two to three days to get right. - Every bit of initial setup on a new project — I already knew the tools, but starting always takes more time than actually coding: going library by library reading docs, config options, deciding what makes sense. ### Nuxt Studio: an entire day that amounted to nothing I tried integrating Nuxt Studio as a visual content editor. Spent a whole day configuring it, knowing it might get reverted. It did — it needs SSR routes for authentication, and that doesn't fit the site's current architecture. Left it out for now. Once there's budget to invest in myself, I plan to set up SSR routes and test it again. ## What I don't like, but kept anyway Full honesty: on the home page, the "Featured" section with the five morphism cards should be much smaller — around 100px at most, in what I originally had in mind. But between that and keeping the HTML properly semantic, I chose semantic. Visually it didn't come out the way the wireframe planned, or the way I imagined it — but it solves the problem, and that matters more.
![ao.dev home page's "Featured" section, with the five morphism cards bigger than I originally planned](/images/pages/blog/why-i-built-my-own-portfolio/why-i-built-my-own-portfolio-home.png)
ao.dev home page's "Featured" section, with the five morphism cards bigger than I originally planned
## Rereading my own career to write 21 case studies To reach the level of detail the [project case studies](/en-us/projects) on this site have, I had to reread and rewrite the story of 21 real projects from my career — TriPagamentos, K13, Avanti, 3C, the freelance gigs, all of it. It was a strange process to go through: every project brought back a memory, some stronger than others. There was one project I rediscovered in the middle of the research — I was sure it existed, but I couldn't remember the name or the details anymore, and it was only by browsing the site again that it all came back: the maps, the technical spec sheets, the legacy bugs. Revisiting some of them brought back strong memories of coworkers and of a genuinely hard stretch of my career — it wasn't just good nostalgia, there was real weight in there too. ## The morphism that's the face of my childhood If you ask me which of the five I loved building the most, it's skeuomorphism, without a doubt. It reminds me of Flash-era sites, Cartoon Network, iG, Ben 10, Kids Next Door — the entire aesthetic of my childhood on the internet. The skeu card in particular came out looking like real ruled paper, and that made me genuinely proud. ## A letter to Allan from 2020 If I could go back and talk to the version of me who'd just started at Let's, knowing nothing about web development: > Don't give up, don't let go, keep your head up — you're stronger than you think. This fear you're feeling right now, you can get through it. Don't run from it, keep pushing hard, eventually it'll pay off. And don't lose touch with the people who helped you get here — they'll matter more than any new stack you'll ever pick up. ## What comes after deploy 1. I'm going to breathe a little — just a little. 2. There are already fixes and features queued up for fui-content and ao.dev, even before the site goes live from dev. 3. I'm going to open Workana and dig into freelance work for real — now that I can ship the front end and deploy it myself, that changes the kind of work I can take on. 4. And I'm also going to apply to company jobs — both fronts at once, not picking just one. As for fear of criticism once the site is public: none. Quite the opposite — I really want real feedback. --- And that's it. Six years after this idea first came up in a hallway conversation, it finally left the drawing board.