🎓 CodeMastery

Landing page para un curso online de programación, con un instructor individual promocionando su propio contenido. Proyecto enfocado en demostrar dominio de HTML, CSS y JavaScript puro (sin frameworks), con diseño responsive y microinteracciones.

🔗 Ver demo en vivo

📌 Sobre el proyecto

CodeMastery simula el sitio web de un instructor que vende su propio curso de programación, incluyendo currículum del curso, sección de instructor, testimonios y dos modelos de precio (suscripción mensual/anual y pago único).

Este proyecto forma parte de mi portafolio como Full Stack Developer, un conjunto de proyectos donde cada uno demuestra una habilidad distinta — desde maquetación semántica y JavaScript vanilla (como este) hasta aplicaciones Full Stack con React y Spring Boot.

✨ Funcionalidades

• Diseño responsive (desktop, tablet y mobile)
• Toggle de precio Mensual/Anual con cálculo dinámico
• Acordeón de FAQ con animación suave
• Animaciones al hacer scroll con IntersectionObserver
• Micro-interacciones en cards y botones

🛠️ Tecnologías

• HTML5 semántico
• CSS3 (Custom Properties, Flexbox, Grid, BEM)
• JavaScript (Vanilla, sin librerías ni frameworks)

Important

El proyecto no utiliza frameworks ni librerías de JavaScript. Todas las interacciones y funcionalidades están implementadas con JavaScript Vanilla.

📂 Estructura del proyecto

code-mastery/
│
├── index.html
├── README.md
├── LICENSE
│
└── assets/
    ├── css/
    │   ├── normalize.css
    │   └── styles.css
    ├── js/
    │   └── main.js
    └── img/
        ├── instructor/
        └── testimonials/

🚀 Cómo verlo localmente

git clone https://github.com/tu-usuario/code-mastery.git
cd code-mastery

Abre index.html directamente en tu navegador, o usa Live Server para obtener recarga automática durante el desarrollo.

Tip

Para una mejor experiencia durante el desarrollo, se recomienda utilizar Live Server, ya que permite visualizar los cambios automáticamente al modificar los archivos.

🎨 Decisiones de diseño

• Se usó el enfoque font-size: 62.5% en html para que 1rem equivalga a 10px, simplificando el cálculo de tamaños.
• Las variables CSS (:root) centralizan colores, espaciados y tipografía para mantener consistencia y facilitar cambios futuros.
• Las fotos de testimonios usan generadores de avatares (randomuser.me) en vez de bancos de imágenes genéricos, para que se vean como perfiles reales de usuario.

📄 Licencia

Este proyecto está bajo la licencia MIT — ver el archivo LICENSE para más detalles.

👤 Autor

Paul Muñoz

Full Stack Developer — Java · Spring Boot · React · TypeScript

Note

Cualquier feedback o sugerencia es bienvenido.

⭐ Si este proyecto te resulta interesante, ¡no dudes en darle una estrella al repositorio!