Seven months between CodePens. apullman/gwzEmd in October 2016, apullman/dWQjzZ in May 2017. Same person, same resume content, different understanding of what I was doing.
The first version was built to complete a task. The second was built because I looked at the first and thought I can do better than this. That distinction — building because you have to vs. building because you see the gap — is when a developer starts having opinions about their own code.
What Changed
The second pen kept the same 5-color palette from legacy.css. The hex values were identical: #0b1d51, #797596, #a1869e, #bbada0, #d1c6ad. I didn’t change them because I still liked them. Looking back, this was the first evidence that the palette had staying power — seven months of learning new things, and I still didn’t want different colors.
What did change:
Layout confidence. The first version used the Skeleton grid verbatim — 12 columns, float-based, copied wholesale. The second version still used floats (CSS Grid wouldn’t ship for another month), but the column math was my own. Less cargo-culting, more intentional decisions about how wide things should be and why.
Typography hierarchy. The first version had the heading scale defined twice, a copy-paste artifact I never cleaned up. The second version had a single, deliberate scale. I’d learned that typography isn’t about picking font sizes — it’s about the ratios between them. The jump from h1 to h2 tells the reader how the content is structured before they read a word.
Fewer vendor prefixes. Not zero — that wouldn’t happen until I discovered Autoprefixer. But fewer. I’d learned which prefixes were still necessary in mid-2017 and which were cargo cult from Stack Overflow answers written in 2014.
Cleaner transitions. The first version had transition: all 0.3s sprayed across multiple elements. The second was more targeted — specific properties, varied durations. I was starting to think about what should animate, not just that things should animate.
What Didn’t Change
The gradient hero. Still linear-gradient(135deg, ...) in the header. Still full viewport height. Still the same magenta-to-navy color stops. I wouldn’t question the gradient-as-identity pattern for another 7 years.
The content structure. Hero → About → Skills → Portfolio → Contact. The same five sections, the same order. It would take until the SvelteKit migration in 2025 to rethink the page as a “workbench” instead of a resume.
The progress bars for skills. Still percentage-based bars with the coral-to-teal gradient fill (#e55d87 → #5fc3e4). I hadn’t yet learned that skill bars are a design antipattern — they assign false precision to inherently fuzzy self-assessments. (How much CSS do you know? 80%? What does that mean?)
The Real Lesson
The most useful thing about having two versions of the same project, seven months apart, is the diff. Not a git diff — a design intent diff. The first version asked “does this work?” The second asked “does this work well?”
That’s not a progression from beginner to intermediate. It’s a progression from completing tasks to having standards. The code quality gap between the two pens is modest. The ambition gap is significant.
I didn’t know it at the time, but the second pen was the last thing I’d build with vanilla HTML/CSS for this project. The next version — created just one day earlier on May 20, 2017, somehow — would be my first encounter with React.
What Survived to 2026
Same answer as Part 1: the palette. #0b1d51 through #d1c6ad. Everything else was replaced. But the habit of iterating — of looking at working code and deciding it’s not good enough — that started here. The Stratos design system exists because I never stopped doing what I did between these two CodePens: looking at something that works and asking what it could be instead.
This is Part 2 of 7 in the Resume Evolution series.