Pride Month

Amaljithuk — Sat, 14 Jun 2025 17:47:19 +0000

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

What I Built
I created a vibrant and interactive Pride Month landing page that celebrates love, diversity, and LGBTQ+ history. The page features:

Interactive CSS Art Pride Flag - A clickable animated Pride flag that triggers colorful fireworks when clicked
Dynamic Animations - Floating hearts, stars, and rainbow elements with hover effects throughout the page
Comprehensive History Section - Timeline covering the Stonewall Riots (1969), first Pride March (1970), and creation of the Rainbow Flag (1978)
Pride Colors Explanation - Interactive cards showing the meaning behind each color of the Pride flag
Community Section - Emphasis on love, unity, and pride with animated hover effects
Functional Call-to-Actions - "Learn More" button linking to Wikipedia's Pride Month page and "Get Involved" button connecting to a Pride Discord community
The design uses a modern gradient background, CSS animations, and responsive design principles to create an engaging, celebratory experience.

Demo link:
https://june-pride-month.netlify.app/
github repo:
https://github.com/Amaljithuk/june-css-joy

Click the Pride flag in the hero section to see fireworks! 🎆
Hover over timeline items, color cards, and community sections for interactive animations
Responsive design that works on all devices
Smooth transitions and gradient effects throughout
Key Technologies:

React with TypeScript
Tailwind CSS for styling
Lucide React for icons
Custom CSS animations and keyframes
Responsive grid layouts
Journey
Process & Learning: This project was an exciting journey in combining meaningful content with engaging visual design. I focused on creating CSS art that wasn't just decorative but interactive and meaningful.

What I'm Proud Of:

Interactive Fireworks Animation - The clickable Pride flag that triggers a burst of colorful fireworks and sparkles
Comprehensive CSS Art - Multiple animated elements including floating shapes, rainbow hearts, and gradient backgrounds
Educational Content - Balancing celebration with historical education about Pride's origins
Accessibility - Maintaining good contrast ratios and semantic HTML structure
Performance - Smooth animations that don't compromise page performance
Technical Highlights:

Custom CSS keyframe animations for flag waving, heart beating, and firework explosions
Dynamic gradient backgrounds that shift and pulse
Hover effects that transform cards with scaling, rotation, and color changes
Responsive design using CSS Grid and Flexbox

Forem: Amaljithuk

Pride Month