Skip to content

felixicaza/codepen-concept

Repository files navigation

Codepen Concept Design

Lighthouse Performance Badge Lighthouse Accessibility Badge Lighthouse Best Practices Badge Lighthouse SEO Badge

✨ Codepen Concept Design

Este repositorio contiene el desarrollo de un concepto visual experimental inspirado en Codepen, basado en el diseño original de BlurSoul en Dribbble titulado Codepen Concept Design. El objetivo principal de este proyecto es recrear y adaptar una propuesta visual moderna y minimalista para la interfaz de Codepen, explorando nuevas formas de interacción y presentación de código en la web.

📷 Captura de Pantalla

Quadrants CSS Design

Enlace del diseño: https://dribbble.com/shots/25090422-Codepen-Concept-Design

🔥 Características

  • 💎 Diseño Moderno: Inspirado en el concepto de Codepen, con un enfoque en la simplicidad y la elegancia.
  • 🧑‍💻 Interactividad: Aunque el proyecto utiliza principalmente HTML y CSS, se han implementado algunos efectos visuales para mejorar la experiencia del usuario.
  • 🌿 Minimalista: Utiliza un enfoque de diseño limpio, lo que permite que el contenido destaque.
  • 🎨 Paleta de colores armónica: El diseño emplea una selección de colores coherente y agradable a la vista.

🚀 Stack de desarrollo

  • Astro: Este proyecto está construido con Astro, un generador de sitios estáticos que permite crear aplicaciones web rápidas y eficientes.
  • HTML y CSS: El diseño esencial se basa en HTML y CSS, utilizando técnicas modernas de diseño web.
  • TypeScript: Utilizado para mejorar la experiencia de desarrollo.
  • Firebase: Este proyecto se despliega automáticamente con GitHub Actions y está alojado en Firebase Hosting, lo que permite una implementación rápida y segura de aplicaciones web estáticas.

🌐 Soporte de navegador

Chrome Edge Firefox Safari
Latest ✅ Latest ✅ Latest ⚠️ Latest ⚠️
  • ⚠️ Firefox actualmente no soporta View Transitions ni Anchor Positioning, por lo que algunas animaciones y funcionalidades pueden no funcionar como se espera.
  • ⚠️ Safari no soporta Anchor Positioning, por lo que algunas funcionalidades pueden no funcionar como se espera.

⬇️ Desarrollo en local

  1. Clona el repositorio:
git clone https://github.com/felixicaza/codepen-concept.git
  1. Navega al directorio del proyecto:
cd codepen-concept
  1. Instala las dependencias:
pnpm install
  1. Inicia el servidor de desarrollo:
pnpm run dev
  1. Abre el navegador y ve a:
http://localhost:4321

🤝 Contribuir

Si deseas contribuir a este proyecto, por favor lee la Guía de Contribución.

📄 Licencia

Este proyecto utiliza la Licencia MIT. Consulte el Archivo de Licencia para obtener más información.


Desarrollado por Felix Icaza y Miguel Colmenarez. Diseñado por BlurSoul.

About

Este repositorio contiene el desarrollo del diseño experimental de Codepen, creado por https://dribbble.com/BlurSoul

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •