Este repositorio contiene el desarrollo de una web corporativa dinámica para la agencia Circle. El proyecto se centra en la integración de una interfaz moderna, validaciones de formularios en tiempo real y el consumo de datos externos mediante una API dinámica.
Este proyecto ha sido desarrollado por Noah Ramos González durante el transcurso de la "Formación Dual de Desarrolladores Web Full Stack de la Fundación Universitaria de Las Palmas" siendo esta impartida en el bootcamp "Desarrollo Web Full Stack + IA" por la empresa Ironhack.
Para la construcción de este proyecto, se ha utilizado un stack tecnológico enfocado en la eficiencia y la colaboración.
- Para la elaboración del frontend se ha utilizado HTML5, CSS3 y JavaScript Vanilla.
- Se ha utilizado la API Fetch con async/await para el renderizado dinámico de la información.
- Se ha llevado un control de las versiones del proyecto utilizando Git y GitHub.
- Para el despliegue del proyecto se ha utilizado Netlify.
- Como IA de apoyo se ha utilizado principalmente Gemini 3.1 pro y algo de Claude Sonnet 4.6.
El proyecto se ha completado en un periodo de 5 días intensivos, con una carga de trabajo estimada en 40 horas efectivas.
Durante los días 1 y 2 del proyecto se realizó la maquetación base y el diseño responsivo, en el día 3 la lógica de navegación y validación de formularios, durante el día 4 se realizó la conexión con la API y el renderizado dinámico de los proyectos y en el día 5 se pulieron efectos visuales y se realizó el testing y el despliegue del proyecto.
El resultado final ha sido una página totalmente funcional que incluye los siguientes elementos:
- Una página principal o landing page responsiva con diferentes secciones, entre las que destacan los proyectos recientes y servicios.
- Una página de formulario de contacto proactivo en el que se realizan validaciones en cada campo e incluye gestión de errores personalizada, además de la muestra de los datos introducidos.
- Una página de proyectos dinámica que utiliza un sistema de rutas mediante parámetros URL (?uuid=X) que permite cargar cualquier proyecto de la API de forma dinámica, incluyendo una sección de "Otros proyectos" que se auto-actualiza según el contenido actual.
Durante el desarrollo surgieron retos técnicos interesantes que ayudaron a mejorar el código, entre los que podemos destacar:
- Se encontró un conflicto entre los mensajes por defecto de HTML5 que interferían con el diseño de los mensajes de validación personalizados. Para ello se utilizó el atributo novalidate en el formulario.
- En la página dinámica de los proyectos se pretendía Lograr que la sombra de una imagen tuviera sus mismos colores. Como solución se realizón una implementación de una técnica de duplicación de imagen con filtros blur y escalado controlado mediante CSS y JS
- Con el cambio de resolución las imágenes se deformaban o perdían en el encuadre. Para solucinarlo se utilizó la propiedad object-fit: cover asegurando así que mantuviera su proporción original.
Como posibles futuras mejoras del proyecto podríamos implementar el modo oscuro con un switch de temas mediante variables CSS, implementar un sistema para que los datos de la API no se vuelvan a pedir si ya han sido descargados una vez y añadir pruebas con Jest para asegurar que las validaciones del formulario no se rompan con cambios futuros.