Ironhack_DWEB_Final_Project_M1

Build and deploy first fully responsive website using the technologies we have learned so far: HTML, CSS and JavaScript. Final project Module 1.

Circle Agency

Página de proyectos desarrollada como parte del proyecto web para la agencia ficticia "Circle Agency".

🚀 Tecnologías utilizadas

• HTML para la estructura del contenido.
• CSS para los estilos visuales.
• JavaScript (vanilla) para simular la carga dinámica de contenido.
• Figma para tener un diseño predefinido sobre el que podamos trabajar.
• Git & GitHub para control de versiones.
• Netlify para despliegue del proyecto.
• Google Fonts (Roboto) para implementar la fuente que se nos proporcionaba.

🔧 Estructuración del proyecto

Ver la estructura

.
├── assets
│   ├── fonts
│   ├── images
│   │   ├── favicon
│   │   │   └── circle-icon.png
│   │   ├── hero-section
│   │   │   ├── card-1.png
│   │   │   ├── card-2.png
│   │   │   └── hero-image.png
│   │   ├── logos
│   │   │   ├── airbnb-logo.svg
│   │   │   ├── amazon-logo.svg
│   │   │   ├── circle.svg
│   │   │   ├── fedex-logo.svg
│   │   │   ├── google-logo.svg
│   │   │   └── microsoft-logo.svg
│   │   ├── newsletter
│   │   │   └── icon
│   │   │       └── mail.svg
│   │   ├── projects-section
│   │   │   ├── 1.jpg
│   │   │   ├── 2.jpg
│   │   │   ├── 3.jpg
│   │   │   ├── 4.jpg
│   │   │   ├── 5.jpg
│   │   │   └── 6.jpg
│   │   ├── scroll
│   │   │   └── scroll-up.png
│   │   ├── services-section
│   │   │   └── icons
│   │   │       ├── 1.svg
│   │   │       ├── 2.svg
│   │   │       └── 3.svg
│   │   └── testimonial-section
│   │       ├── memoji-1.png
│   │       ├── memoji-2.png
│   │       ├── memoji-3.png
│   │       ├── memoji-4.png
│   │       ├── orbit.png
│   │       └── profile.png
│   ├── project-assets-circle
│   │   ├── design-export
│   │   │   ├── Contac Us Page.png
│   │   │   ├── Design System.png
│   │   │   ├── Homepage
│   │   │   │   └── Captura desde 2025-07-07 11-06-46.png
│   │   │   ├── Homepage.png
│   │   │   ├── mid-term-project.zip
│   │   │   └── Project Page.png
│   │   └── mid-term-project.fig
│   └── web-demo
│       ├── Circle_Agency-Home.png
│       ├── Circle_Agency-Menu_Hamburger.png
│       └── Circle_Agency-Projects.png
├── components
│   ├── footer.html
│   └── header.html
├── contact.html
├── css
│   ├── responsive.css
│   └── style.css
├── index.html
├── js
│   ├── components.js
│   ├── contact.js
│   ├── main.js
│   ├── menu-hamburger.js
│   └── projects.js
├── projects.html
└── README.md

❗ Dificultades enfrentadas

• Organización en componentes: entender cómo separar el código de forma limpia aunque y sin usar frameworks.
• Preparación para contenido dinámico: aunque no hay backend, se ha planteado la carga de proyectos vía fetch.
• Implementación del responsive: adaptar la estructura del layout sin romper la jerarquía de estilos.

🖼️ Imágenes del proyecto

🌍 Enlaces

• Deploy del proyecto: Circle Agency