Monograma DR
El símbolo combina las iniciales del nombre con una base verde lima. Se utiliza en el encabezado, el footer y como favicon.
David Rodriguez
Manual de construcción
Cómo está construido este portafolio.
Guía visual y técnica de la estructura, identidad, tipografía, componentes, animaciones y organización de archivos utilizados en la página.
Contenido
Identidad visual
La página utiliza una identidad oscura, contrastada y experimental, pensada para mostrar un perfil técnico con criterio visual.
Negro, blanco y lima
El fondo oscuro concentra la atención en el contenido. El blanco define la lectura y el lima marca acciones, estados y elementos interactivos.
Estructura de la página
La información está ordenada para que una empresa pueda conocer el perfil, revisar proyectos y contactar rápidamente.
Presentación y llamada a la acción
Incluye el nombre, el perfil Full Stack, el mensaje principal, los enlaces profesionales y el acceso al CV.
Contexto y capacidades
Explica la combinación entre desarrollo, negocio, finanzas, soporte y trabajo en equipo.
Trabajo visual seleccionado
Presenta Cintlami, Estampyx, Sanamu y Fondo de Bikini Dash con capturas, tecnologías y descripciones ampliadas.
Experiencia, estudios y certificaciones
Organiza el recorrido profesional y académico en líneas de tiempo independientes para facilitar la lectura.
Formulario y canales directos
Permite enviar un mensaje validado y muestra correo, teléfono, GitHub, LinkedIn y el CV descargable.
Tipografía y estilos
La tipografía Poppins se utiliza en todos los textos para mantener una lectura consistente, geométrica y contemporánea.
Poppins
Se cargan los pesos 400, 500, 600, 700 y 800 desde la carpeta local fonts/. Los archivos tienen font-display: swap para mejorar la carga inicial.
Lectura por jerarquías
Los titulares usan tamaños grandes y alto contraste. Los textos secundarios utilizan tonos grises para crear profundidad sin perder legibilidad.
Interacciones y movimiento
Las animaciones acompañan la navegación y hacen visibles los estados de la interfaz.
Revelado por desplazamiento
Los bloques aparecen cuando entran en el área visible. La animación se apoya en IntersectionObserver.
Hover y estados activos
Botones, enlaces, tarjetas, habilidades y certificaciones cambian color, posición o borde al interactuar con ellos.
Progreso y navegación activa
La barra superior muestra el avance de lectura y el menú destaca la sección actual.
Modal y filtros
Los proyectos abren una descripción detallada y la sección de habilidades filtra tecnologías por área.
Responsive y accesibilidad
La composición se adapta a pantallas grandes, tablets y móviles sin perder la jerarquía de la información.
Diseño por puntos de quiebre
Las columnas se convierten en una sola, el menú pasa a un panel móvil y las tarjetas reorganizan sus contenidos.
Interfaz utilizable
Incluye foco visible, enlace para saltar al contenido, etiquetas de formulario, textos alternativos y soporte para reducción de movimiento.
Archivos principales
La página está organizada para que el contenido pueda mantenerse y actualizarse sin depender de una herramienta externa.
index.htmlcontiene la estructura, el contenido y los enlaces.css/styles.csscontiene la identidad visual, el layout, los estados y las animaciones.js/scripts.jscontrola la navegación, filtros, modal, formulario, contadores y microinteracciones.images/david-mark.svgcontiene el símbolo de la marca y el favicon.images/contiene la composición del hero y las capturas de proyectos.fonts/contiene los pesos locales de Poppins.documents/contiene el CV y este manual.