Every portfolio site has an origin. Mine is a CodePen from October 11, 2016, created during an internship at xentientlabs. The pen ID is apullman/gwzEmd — a string I can still type from memory because I checked it so many times while building it.
I was learning web development. Not in a bootcamp, not from a tutorial series, but from the kind of trial-and-error that happens when you’re given a task at work and you figure it out. The task was simple enough: make a personal resume page. What I built tells me more about where the industry was in 2016 than anything I could write from memory.
The Five Colors
The CSS started with something that, looking back, was surprisingly forward-thinking:
:root {
--blue: #0b1d51;
--purple: #797596;
--pink: #a1869e;
--beige: #bbada0;
--tan: #d1c6ad;
}CSS custom properties in 2016. Browser support was partial — Chrome 49 had shipped them in March, Firefox 31 had them behind a flag, Safari was at 9.1. Edge didn’t support them yet. I was using them anyway, probably because I’d seen a blog post about them and thought they were cool without understanding the browser support implications.
Those five hex values would outlast every other decision I made in this file. Eight years later, they became the seed for the Stratos design system’s two-layer OKLCH palette:
| 2016 Hex | 2016 Name | 2024 OKLCH | Stratos Name |
|---|---|---|---|
#0b1d51 | blue | H:252 | Navy |
#797596 | purple | H:290 | Lavender |
#a1869e | pink | H:330 | Rose |
#bbada0 | beige | H:65 | Stone |
#d1c6ad | tan | H:87 | Sand |
I didn’t pick these colors with any color theory in mind. They were just colors I liked together. The fact that they naturally span the hue wheel with reasonable perceptual spacing — navy through warm neutrals, with a muted pink accent in the middle — was accidental. But accidental palettes that survive years of use tend to have some underlying harmony that the eye recognizes even if the brain doesn’t articulate it.
The CSS That Tells the Story
The rest of the stylesheet is a time capsule of 2016 web development:
nav a:hover {
color: color(var(--pink) tint(20%));
background: color(var(--blue) shade(20%));
}The CSS color() function with tint() and shade() modifiers. This was from the CSS Color Level 4 spec draft — it never shipped in this form. I was using a PostCSS plugin (probably postcss-color-function) to compile it. The modern equivalent would be color-mix(in oklch, ...) or oklch() with adjusted lightness, which I now use across the Stratos system. Same impulse — “I want to derive lighter/darker variants from a base color” — separated by a decade of spec evolution.
header {
display: flex;
justify-content: center;
width: 100%;
height: 100vh;
background: linear-gradient(-45deg, #A11692 0%, #17183B 100%);
}A full-viewport gradient hero. 100vh (not 100dvh — that wouldn’t exist for another 6 years). The gradient goes from #A11692 (a vivid magenta) to #17183B (near-black navy). I would later ban decorative gradients from the Stratos design system as an “AI slop pattern” — but in 2016, this gradient felt like a statement. It was the most visually confident thing I’d built.
The Skeleton Grid
The file includes a complete 12-column grid system — not CSS Grid (which wouldn’t land until March 2017), but a float-based column system clearly derived from Skeleton CSS:
.six.columns { width: 48%; }
.column, .columns { width: 100%; float: left; box-sizing: border-box; }Twelve named column widths, each hand-calculated. Offset utilities. A clearfix. This was how everyone built layouts before Grid. You’d pick a framework like Skeleton or Bootstrap’s grid, copy the column CSS, and build your page by counting columns. The entire responsive strategy was a single @media (min-width: 550px) breakpoint that switched from stacked to side-by-side.
Things I Got Wrong
The file has transition: all 0.3s — twice. On the sticky nav, on the header. I didn’t understand that all forces the browser to watch every property for changes, creating unnecessary work. The Stratos motion system now explicitly lists every transition property.
The typography scale is defined twice — identical heading sizes appear in two separate blocks, probably from a copy-paste that never got cleaned up. There’s a font-size: 1.6em on body with font-size: 62.5% on html — the old “10px base” trick that makes 1.6rem equal 16px. Clever but fragile and confusing to anyone who didn’t know the pattern.
Vendor prefixes everywhere: -webkit-transform, -moz-transform, -webkit-animation, -moz-animation, and even progid:DXImageTransform.Microsoft.gradient for IE gradient support. I was generating these manually, not through Autoprefixer. Each animation is written three times.
The Progress Bars
The skills section has something interesting — a gradient-filled progress bar:
.progressBarValue {
height: 8px;
float: left;
background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
}#e55d87 — a coral pink. This specific hex value would appear again years later when I was deriving the Stratos semantic color system. When I converted the legacy palette to OKLCH and needed an error/danger color, #e55d87 mapped to approximately H:350 at high chroma. I shifted it to H:4 to exit the AI slop range (H:20-30) while keeping the warmth of the original coral. The color survived 8 years by changing its role — from “skill bar fill” to “error state.”
What Survived
Looking at this file in 2026, what lasted?
The palette. Those five CSS custom property values — #0b1d51, #797596, #a1869e, #bbada0, #d1c6ad — are the DNA of every color in the current site. They were converted to OKLCH, expanded into 11-step scales, split into base and vivid chroma layers, and given semantic roles. But the hue relationships are the same.
The impulse to derive colors. color(var(--pink) tint(20%)) is the same instinct as oklch(L C var(--hue)). I wanted colors that relate to each other systematically, not just a bag of hex values.
The content structure. Hero → About → Skills → Portfolio → Contact. The current site is Hero → Experience → Projects → Contact. The bones are the same.
Nothing else. The gradient, the float grid, the vendor prefixes, the 62.5% font trick, the transition: all, the 100vh — all gone. The tools changed completely. The eye didn’t.
This is Part 1 of 7 in the Resume Evolution series.