Case Study: lynnandtonic.com 2025 refresh

4 days ago

The author wanted a simple and stress-free portfolio refresh for 2025, focusing on responsive design and stretching content.
They explored the idea of a fixed-width website that stretches elastically when resized, bouncing back to its original size when stopped.
JavaScript was used to create the squash and stretch effect, utilizing `scale()` transforms and dynamically updating values based on browser width.
A `ResizeObserver` was implemented to track browser resizing, with calculations to ensure the content doesn't flip or become unreadable.
The site resets to its original width after resizing, with a bounce transition for a playful effect.
The content width was fixed at 436px for optimal stretching, switching to full-width responsiveness below 500px for mobile.
The design drew inspiration from paperback books, featuring paper textures in light mode and dust in dark mode, with custom fonts.
Special attention was given to focus states for inline links, using `outline` and `box-shadow` to avoid text shifting.
The author reflected on the challenges of maintaining archived pages and the simplicity of focusing on key pages each year.
They pondered the future of their annual portfolio refreshes, considering when they might stop but ensuring the last one is special.

Hasty Briefsbeta