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.
Built with
Tailwind
The journey
01
Day 1 - Geometric Shapes
Foundation challenge featuring animated geometric shapes with gradient backgrounds. Demonstrates CSS animations and transforms with clean, minimalist design.
02
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.
03
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.
04
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.
More projects
Cantaloupe AI - Recruitment Platform
Enterprise-grade AI-powered recruitment platform with voice interviews, resume screening, multi-channel communication, and seamless ATS/HRIS integrations. Automates hiring workflows for Quick Service Restaurants, healthcare, and construction industries.
Hand Sign Detection Model
A production-ready computer vision model that detects and classifies hands, arms, and non-hand objects in real-time with 96% accuracy.
BrainLayer — Persistent Memory for AI Agents
12 MCP tools, 335K+ indexed chunks, hybrid semantic+keyword search with MMR dedup, knowledge graph with entity resolution, Gemini enrichment. 1,848 Python + 54 Swift tests. pip install brainlayer.