100 Days CSS Challenge
A Next.js-based showcase of CSS animation expertise with 11 completed challenges from the 100 Days CSS Challenge. Features complex keyframe animations (300+ animated stars, 3D CSS cubes, physics-based bouncing effects), heavily customized Tailwind CSS configuration, and TypeScript-based component architecture. Demonstrates advanced frontend skills including CSS transforms, animation timing, and performance optimization for hundreds of animated elements.
Project journey
Day 1 - Geometric Shapes
Foundation challenge featuring animated geometric shapes with gradient backgrounds. Demonstrates CSS animations and transforms with clean, minimalist design.
Day 42 - Starry Night Sky
Advanced animation challenge with 300+ twinkling stars and shooting star effects. Showcases complex keyframe animations and performance optimization for hundreds of animated elements.
Day 48 - 3D CSS Cube
3D transform mastery with a fully rotating cube built purely with CSS. Demonstrates perspective, transform-style, and 3D animation techniques.
Day 50 - Physics-Based Bouncing Egg
Complex 8-stage physics simulation using pure CSS. Features realistic bounce dynamics with squash-and-stretch effects, timing functions, and animation sequencing.