Dhrutisundar Sahoo

Posted on Jun 1

Take me to a Beach! T-T

#devchallenge #frontendchallenge #css #javascript

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 1024x532.

Keyboard Inputs are also supported:

SpaceBar: To begin exploring.
Left and Right Arrows: To navigate the gallery.
Escape: To exit the gallery and move to landing page.

Edit: I am facing some issues with applying a hosted font on codepen. Make sure you check out netlify site as well :)

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

Top comments (19)

Hikolakita • Jun 2

This is awesome. Very creative and responsive. VERY impressive. The only apparent problem is that in the "postcards" the text which describes the beach is too close to the title. But it's very simple to fix, and not even serious. In any case, I wish you good luck in the competition!

Hikolakita • Jun 2

oh nvm, It only happens when the screen is too small, but it's still readable so it's not a problem. excuse me.

Dhrutisundar Sahoo • Jun 2

Thanks for pointing out! The overall design could have been a lot more responsive. I'll try making things more responsive next time :')

Hikolakita • Jun 3

Oh don't worry! It's already very responsive :)
Especially for something as complex as this, bro there are images, drawing, and a lot of stuff!
The arrows make it easy to use on phone, and for computer, it's good to use right and left key. I love this feature!
Well keep up this work man, it's very helpful and useful for community!

Dhrutisundar Sahoo • Jun 3

Means a lot! Thanks! 🙌

Hikolakita • Jun 4

Also, if you still didn't, you should send a message on the DEV post of the contest to introduce your submission. It'll maximise your chances to win :)

Dhrutisundar Sahoo • Jun 4

I posted it in the comments to fish some reactions and views🐟😁

Hikolakita • Jun 4

👍

Hikolakita • Jun 5

Btw, I don't know if you want, but adding a different highlight color would definately be fun!

Dhrutisundar Sahoo • Jun 5

Just added it. I'm not sure about if the colors look good, but I loved adding the little detail into the product! Thanks for the idea! 😊

Hikolakita • Jun 5

Hehe, that's perfect :)
I'm currently working on my portfolio. Since yours is awesome, could you tip me some stuff when mine is out?

Dhrutisundar Sahoo • Jun 5

Sure thing. I'd try my best to help you out. (Do take my suggestions with a pinch of salt, I'm a newbie😅)

Hikolakita • Jun 6

Thanks :D

Hikolakita • Jun 11

Weird to comment it here but my website is out :)
hikolakita.github.io/hikolakita.dev/
(sorry for advertising lol, i just want feedback and sorry in advance cuz my website is big flex 💀)

Dhrutisundar Sahoo • Jun 11

Well-tried for the first time! I won't be critical about everything, yet I'll point out a few things you should improve upon!

Try to keep all the text's grammar and spelling correct. (Spelling and grammar errors make it look unprofessional). For, e.g., the spelling of "developer" on the landing page, capitalisation and punctuation in paragraphs.
The different columns in your about section should not be scrollable, rather they should fit all the content they have. I would about suggest you to point out your skills in lesser words, as no one would invest much time in reading long paragraphs.
You should try to remove pointer cursor from places that don't open a link. For eg. The box in the landing page that tells you are 12y/o is set to cursor Pointer, but doesn't seem to open a link or cause any side effects.
(This suggestion is optional, and is very much towards creative freedom) You could try to keep the nav bar sticky on the top so that I can click on any option while viewing different sections in your portfolio.

It's a pretty cool website for a young developer like you! You could try reading about web layouts to add a little more consistency among different sections on the site. But at the same time, you can't move mountains in one go, so I would suggest you keep building more things and learn things step by step.

Hikolakita • Jun 12

Wow. Thank you so much! All your advice is professional, simple, and clear. I have absolutely nothing to complain about, you would make an excellent teacher! I was worried I'd seem like a stalker, just looking for advice, but I'm glad to see that's not what you thought. I really appreciate your advice, so thank you.
(also, I'm really sorry for flexing so much in the site, because my brother helped me a lot so my age doesn't mean much, I think I'll remove it).
Possibly, for further feedback, we could contact each other on discord.
Good day!