Contexto
Ejercicio de maquetación del máster en Conquer Blocks. El objetivo era coger un diseño de Figma de un portfolio ficticio y llevarlo a código respetando cada detalle del diseño original.
Objetivo
Demostrar capacidad de maquetación fiel al diseño original, aplicando buenas prácticas de CSS, arquitectura Sass modular y responsive design.
Un ejercicio que parece simple
En el máster de Conquer Blocks nos dieron un diseño de Figma de un portfolio ficticio y el objetivo era claro: llevarlo a código respetando cada detalle. Tipografías, espaciados, imágenes optimizadas.
Parece sencillo cuando lo describes así, pero la realidad es que maquetar un diseño de forma fiel requiere mucha más atención al detalle de lo que parece. Cada decisión de CSS importa.
Cómo lo construí
Monté el proyecto con Vite y organicé todos los estilos con la arquitectura 7-1 de Sass: variables, mixins, funciones y cada componente en su propio archivo. La tipografía personalizada con Space Grotesk, animaciones de scroll suaves con Lenis y validación del formulario de contacto en el frontend.
El diseño es completamente responsive y accesible, pensado para que funcione igual de bien en móvil que en escritorio.
Lo que me enseñó
Este tipo de ejercicios te entrenan para lo que luego necesitas en proyectos reales: ser capaz de coger un diseño y llevarlo a código sin que el resultado se aleje de la intención original. Parece básico, pero es una habilidad que marca la diferencia.
An exercise that looks simple
In the Conquer Blocks master we were given a Figma design for a fictional portfolio and the goal was clear: bring it to code while respecting every detail. Typography, spacing, optimised images.
It sounds straightforward when you describe it like that, but the reality is that building a layout faithfully requires far more attention to detail than it seems. Every CSS decision matters.
How I built it
I set the project up with Vite and organised all styles using the Sass 7-1 architecture: variables, mixins, functions and each component in its own file. Custom typography with Space Grotesk, smooth scroll animations with Lenis and frontend contact form validation.
The design is fully responsive and accessible, built to work just as well on mobile as on desktop.
What it taught me
These kinds of exercises train you for what you actually need in real projects: being able to take a design and bring it to code without the result drifting from the original intent. It sounds basic, but it’s a skill that makes a real difference.
Aprendizajes
El patrón 7-1 de Sass te obliga a pensar en la organización del código antes de escribir una sola línea. Eso se nota después cuando el proyecto crece.
Lograr una maquetación idéntica al diseño original parece un ejercicio rígido, pero te entrena el ojo para detectar inconsistencias que al usuario final sí le afectan.