This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches
What I Built
I was trying to build a table on a beach that would show different beaches in the form of cards. I wanted to give it a relaxed and “beachy” look with the help of textures and warm colors.
Demo
I have made this for PC screens only(Pardon me for being lazy). Best viewed in 1024×532.
Keyboard Inputs are also supported:
Left and Right Arrows: To navigate the gallery.
Escape: To exit the gallery and move to landing page.
View the full code here
Hosted on Netlify as well
Journey
I was excited to participate in the frontend challenges(Yes! This is the first time :P). When I saw the topic, I started diving deep into all kinds of illustrations(Freepik) and fonts(Google Fonts and Google Search :P) I could collect to get something into shape.
I thought showing different beaches on paper cards would be simple and cool. So, I dived into Figma and built a desktop screen for the landing page.
Given that beaches are filled with shuttle movements of nature(waves, wind and creatures), I wanted to add some transitions and animations with the help of GSAP. I was also dreaming of putting a crab that would randomly crawl in and out, but I decided to be happy with being able to imagine it.(Laziness-2 Me-0)
Credits
Illustrations: Freepik
Beach Images: Google Images
Fonts: Beach, Josefin Sans
Transitions: GSAP
