A Portfolio in Blue
Study: Keeping Density Readable
A previous version of my portfolio built as a blue, motion-led record of selected work and front-end practice.
The Japan Portfolio was about space. The Minimal Portfolio was about a single pixel rule and what it could hold. By the third version, I found myself asking a different question: how much can you put on the page before it stops being readable?
A Portfolio in Blue was my push toward organized density. More content visible at once, more sections, more projects surfaced at a glance. I brought in a blue accent palette as a way to anchor the whole composition without adding graphic weight everywhere. One saturated color, used consistently across the hero, navigation, and section dividers, gave the layout a spine without cluttering individual elements. Off-white background, compact monospace labels, large grotesk headings. The same few pieces, repeated.
GSAP and ScrollTrigger drive the section reveals, a sticky hero where the canvas graphic expands as surrounding text shifts, and the blue panel transitions between routes. I fed Lenis scroll updates into the GSAP ticker so ScrollTrigger stays perfectly synchronized. The site checks the reduced-motion preference and removes smooth scrolling and animated path drawing for users who request it, keeping the content fully accessible.
The canvas element in the about section responds to pointer movement and pauses when it leaves the viewport. Canvas-rendered circular typography was something I had been experimenting with earlier, and this was finally a context where it added something rather than just demonstrating a capability.
What this version taught me: density is not the enemy of readability if the typographic hierarchy is strong enough to carry it. The current notebook portfolio is quieter, but it inherited that conviction. The pacing changed. The underlying concern, clear structure under visual pressure, stayed.