This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Beaches

What I Built

i set out to build a page that felt worth sharing with a friend, neighbor, or even stranger! imagining the beach always evokes a sense of happiness and freedom for me, and i really enjoyed what i was able to build!

(shameless plug!)
this month’s theme is also serendipitously aligned with Travelpass Guides, a new product feature my team and i’ve been passionately exploring and developing, making this Challenge entry a natural extension to explore some creative experiences on web!

Demo

Online demo
glam-up-my-markup repo on GitHub

Journey

i found that i starting having fun once i got to work on some features that i'd never implemented before. a few highlights stand out:

• technical : i started with what i thought was going to be the hardest feature - the animated background. the subtle changing colors remind me of how waves come and go out of view. the pattern comes from https://heropatterns.com/ (CC BY 4.0). i thought i would need js for this, but using an external svg file + embedded style sheet is all this is.
• technical : i sourced most images from Wikimedia Commons so as to avoid licensing issues.
• creative : i also enjoyed the extra challenge of not modifying the html at all. i created a class-less theme by composing unocss/tailwind classes together into a html-only selectors. pretty powerful!
• creative : the hover effect had a couple of iterations to figure out. i had considered hue-shifting, desaturation and blurring/glassmorphism but ultimately a simple color gradient gave me a better way to have the text over the photo. its still very imperfect though and i suspect would not pass WCAG rigor.
• creative : the border is a little reminiscent of a postcard or polariod frame
• other: the script font is called seaweed script 🤣
• accessibility : if you're sensitive to motion, then enabling your browsers "prefers reduced motion" will make the cards taller, preventing as much of the bg image from growing!
• todo : because the html uses non-interactive elements, i was puzzling how i could make for a more interesting mobile experience where hovering. i think it would be cool to setup an intersectionobserver that would expand the card when its title is visible. perhaps a exercise for the reader!