Pen Playground

A growing collection of creative web development experiments and UI components. This repository showcases various frontend techniques, interactive animations, and modern web technologies through daily coding challenges and explorations.

🎨 Current Projects

Card Flip Animation

Interactive 3D card flip animation showcasing a Tom Brady football card with modern CSS transforms and hover effects.

Custom Bullets

Creative CSS styling demonstrations for custom list bullets and typography enhancements.

Dynamic Color Palette Generator

Interactive tool for generating and exploring color palettes with real-time preview and color theory applications.

Flex Box Layouts

Comprehensive flexbox layout examples and responsive design patterns.

Grid Layout Experiments

Modern CSS Grid demonstrations with various layout configurations and responsive breakpoints.

Interactive CSS Loading Animations

Collection of smooth, engaging loading animations built with pure CSS and modern animation techniques.

Interactive Dashboard Components

Modern UI components for dashboards including charts, cards, and data visualization elements.

Interactive To-Do List

Feature-rich task management application with add, edit, delete, and completion tracking functionality.

Login UI

Modern login interface design with password visibility toggle, form validation, and responsive styling.

Output Tag Demo

HTML5 <output> element demonstrations with form calculations and dynamic content updates.

Silicon Valley Show Map

Interactive map visualization related to the Silicon Valley TV show with location markers and information.

Space Invaders Game

Classic arcade-style space invaders game built with HTML5 Canvas and JavaScript.

Tech Icons Flip

Interactive tech stack icons with flip animations and authentic brand colors for popular development tools.

🚀 Getting Started

Each project is self-contained in its own directory. To explore any project:

1. Navigate to the project directory
2. Open index.html in your web browser
3. Interact with the demo and explore the source code

🛠️ Technologies Used

• HTML5 - Semantic markup and modern web standards
• CSS3 - Advanced styling, animations, and responsive design
• JavaScript ES6+ - Interactive functionality and DOM manipulation
• CSS Grid & Flexbox - Modern layout techniques
• Canvas API - Game development and graphics
• Font Awesome - Icon libraries for enhanced UI

📈 Growth

This repository grows daily with new coding experiments, UI patterns, and creative web solutions. Each pen represents a focused exploration of specific web development concepts or creative challenges.

📝 License

MIT License - Feel free to use, modify, and learn from these projects.