Skip to content

README.md

Latest commit

Β 

History

History
95 lines (72 loc) Β· 4.26 KB

README.md

File metadata and controls

95 lines (72 loc) Β· 4.26 KB
Raw

GenesisPixel

GenesisPixel Preview

A comprehensive Spanish-language educational platform for mastering modern web animation and creative coding techniques.

Overview

GenesisPixel is designed to help developers go from zero to mastery in CSS animations, 3D graphics, and shader programming. The platform features 90 lessons across 6 structured chapters, each with hands-on examples, interactive playgrounds, and real-world projects.

Learning Chapters

Preview Chapter Level Lessons Topics
CSS Transitions Beginner 15 transition-property, duration, timing-function, delay, shorthand, hover, focus, performance, microinteractions
CSS Transform Intermediate 15 translate, scale, rotate, skew, transform-origin, 3D transforms, perspective
CSS Keyframes Advanced 15 @keyframes syntax, timeline, animation properties, fill-mode, play-state, shorthand
Interactions Advanced 15 Microinteractions, loading states, modals, dropdowns, tooltips, form feedback
Three.js Advanced 15 Scenes, cameras, renderers, geometries, materials, lights, textures, animations, 3D models
Shaders Advanced 15 GLSL, vertex/fragment shaders, uniforms, varyings, UV coordinates, noise, procedural effects

Key Features

  • Interactive Code Playgrounds β€” Live HTML/CSS editors with real-time preview on every lesson
  • Animated Hero β€” GSAP-powered character-by-character title reveal with canvas gradient background
  • Floating Navbar β€” Pill-shaped navigation with animated indicator, dropdown menu, and mobile sidebar
  • Bento Grid Homepage β€” Visual course catalog with level badges and hover effects
  • Code Blocks β€” Terminal-style code display with copy functionality and tabbed HTML/CSS views
  • Canvas Backgrounds β€” Animated gradient blur and particle effects using custom noise algorithms
  • Responsive Design β€” Fully responsive across desktop, tablet, and mobile devices
  • Dark Theme β€” Custom dark UI with green accent colors and smooth transitions

Project Structure

src/
β”œβ”€β”€ components/        # 21 Astro components
β”‚   β”œβ”€β”€ Navbar.astro
β”‚   β”œβ”€β”€ Hero.astro
β”‚   β”œβ”€β”€ BentoCards.astro
β”‚   β”œβ”€β”€ Footer.astro
β”‚   β”œβ”€β”€ CodeBlock.astro
β”‚   β”œβ”€β”€ TabbedCodeBlock.astro
β”‚   β”œβ”€β”€ Playground.astro
β”‚   β”œβ”€β”€ GradientBlur.astro
β”‚   └── ...
β”œβ”€β”€ layouts/           # 7 layout files
β”‚   β”œβ”€β”€ Layout.astro
β”‚   β”œβ”€β”€ CourseLayout.astro
β”‚   β”œβ”€β”€ TransitionsLayout.astro
β”‚   β”œβ”€β”€ TransformLayout.astro
β”‚   β”œβ”€β”€ InteractionsLayout.astro
β”‚   β”œβ”€β”€ ThreejsLayout.astro
β”‚   └── ShadersLayout.astro
β”œβ”€β”€ pages/             # 12+ page entries (90 lesson pages)
β”œβ”€β”€ styles/            # Global CSS and fonts
β”œβ”€β”€ data/              # Categories, courses, projects
└── scripts/           # Code interaction handlers

Getting Started

# Clone the repository
git clone https://github.com/GenesisPixel/genesis-pixel.git
cd genesis-pixel

# Install dependencies
npm install

# Start development server
npm run dev

🀝 Contributing

Contributions are welcome! Please follow these steps:

πŸ‘₯ Meet the people who make this project possible in our Contributors file.

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes following Conventional Commits
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

❀️ Hecho con amor por SebastiÑn V.