
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.
Enlace del diseño: https://dribbble.com/shots/25090422-Codepen-Concept-Design
- 💎 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.
- 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.
Latest ✅ | Latest ✅ | Latest |
Latest |
⚠️ Firefox actualmente no soportaView Transitions
niAnchor Positioning
, por lo que algunas animaciones y funcionalidades pueden no funcionar como se espera.⚠️ Safari no soportaAnchor Positioning
, por lo que algunas funcionalidades pueden no funcionar como se espera.
- Clona el repositorio:
git clone https://github.com/felixicaza/codepen-concept.git
- Navega al directorio del proyecto:
cd codepen-concept
- Instala las dependencias:
pnpm install
- Inicia el servidor de desarrollo:
pnpm run dev
- Abre el navegador y ve a:
http://localhost:4321
Si deseas contribuir a este proyecto, por favor lee la Guía de Contribución.
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.