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!
Top comments (1)
Nice job!