DEV Community: Kiruthik Kumar

Perfect Landing: June Celebrations

Kiruthik Kumar — Fri, 27 Jun 2025 16:32:48 +0000

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations

What I Built

I made a simple website that shows all the special days in the month of June 📆.
Each day has its own card with a fun emoji, a short slogan, a theme color, and a helpful link to learn more about it. I created the card design myself because I feel cards are a fun and easy way to show information 💡.

Demo

Front UI

Card UI

Link to submission

https://rith1x.github.io/challenges/junecelebrations/

or click here

Journey

When I saw the June challenge prompt, I thought — why not show all the important days of June in one place? But I wanted to make it more than just a list.

I spent around 3 days thinking 💭 and then came up with this idea:
“What if each day had its own card with an emoji, slogan, and color, plus a link to learn more?”
That felt more fun and useful! 🎉

At first, my UI was very plain. Then I thought of using cards, but even those looked too simple. While thinking, I saw a deck of UNO cards on my table and got inspired! 😄
I tried to recreate that stacked look — it looked a bit weird at first, but then I added a bit of opacity to make it feel like an infinite stack. That made it way more interesting!

This was a fun little project. I was on a break since my last submission (Frontend Challenge v24.07.24), so I’m happy to be back 😊.

Let me know what you think!
It works best on desktop and also fits mobile screens well.
(Some devices may feel a bit slow because of the graphics.)

Thanks for checking it out! 🙌💜

Glam Up My Markup: Cricket League!

Kiruthik Kumar — Sun, 04 Aug 2024 11:42:53 +0000

Hello again!,

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

For the Frontend Challenge v24.07.24, I transformed the provided HTML markup into a visually appealing and interactive landing page for the New York Recreational Cricket League. I focused on enhancing the aesthetics and functionality using CSS and JavaScript, while keeping the original HTML structure intact, only modifying it through JavaScript when necessary.

Demo

Live link: https://rith1x.github.io/challenges/nyrcl/

Github Repository: https://github.com/rith1x/rith1x.github.io/tree/main/challenges/nyrcl

Note: Don't forget to interact with elements!!!

Screenshots

Journey

This challenge gave me the opportunity to explore broad DOM manipulation in JavaScript, which allowed me to add dynamic elements without altering the original HTML. I also learned how to style a timeline and create engaging entry animations that enhance the user experience. Additionally, I experimented with rise-up notes to highlight key information on the page. I'm particularly proud of how these elements came together to create a balanced design that is both functional and visually appealing. These new skills will definitely be useful in future projects.

Key Aspects

SVG CSS Animated Welcome Screen: A visually engaging welcome screen that draws users in with smooth, animated SVG graphics.
Animated Entry Header: An eye-catching entry header that animates as the page loads, setting the tone for an interactive experience.
Interactive Icon: A responsive and interactive icon that enhances user engagement through subtle animations and functionality.
CSS-Only Timeline: A sleek and informative timeline designed purely with CSS, providing a clean and accessible way to display chronological information.
Rise-Up Banner Animated to Scroll: A dynamic banner that animates as users scroll, highlighting important information in a visually appealing way.
Responsive Design: The entire page is designed to be fully responsive, ensuring a seamless experience across all devices.

Thank You💙

Glam Up My Markup: Beaches

Kiruthik Kumar — Sun, 09 Jun 2024 07:22:26 +0000

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

What I Built

For the Frontend Challenge v24.04.17, I transformed the provided HTML markup into a visually appealing and interactive website without modifying the given template. The aim was to showcase the best beaches in the world with enhanced aesthetics and functionality using CSS and JavaScript, while keeping the original HTML structure intact as much as possible.

Demo

Screenshots

Live Demo
Beach Challenge Demo

Repository Link
Github Repository

Journey

Embarking on this challenge, my primary goal was to breathe life into the static HTML by making it both beautiful and engaging. Here’s a glimpse into my process:

Design Concept:
I started by envisioning a serene, beach-themed design. I wanted users to feel like they were virtually visiting these amazing beaches.
CSS Enhancements:

I used a combination of modern CSS techniques, including flexbox and grid layouts, to create a responsive and visually appealing design.
To evoke a beach vibe, I chose a color palette reminiscent of sand, sea, and sky.
I incorporated smooth transitions and animations to make the interaction feel more natural and engaging.

JavaScript Interactivity:

I added interactive elements such as image carousels and effects to display additional information about each beach.

Challenges and Learnings:

One of the challenges was to add significant interactivity without altering the provided HTML directly. This required creative use of JavaScript to manipulate the DOM dynamically.
Through this project, I deepened my understanding of advanced CSS techniques and refined my JavaScript skills, particularly in DOM manipulation and event handling.

Key Aspects

For Accessibility, I chose Calm background Sand Color and Blue Color for the elements. I made the Beaches list as a interactive horizontal slider, so there are many elements changing according to the visibility ratio, Used some icons for Fun and accessibility
Responsiveness, I added some media queries in CSS to give some Responsible content ony any sized screens
I added a fun elements which responds to pageScroll & animation

Thank you 🩵