🪪 Landing Page Personal
Tarjeta de visita digital que centraliza portafolio, currículum y redes profesionales
Escala del Proyecto
Descripción General
Cuando alguien busca tu nombre, encuentra piezas dispersas: un GitHub, un LinkedIn, un CV en PDF que alguien te pidió por email. Esta landing existe para ser el punto único al que apuntar: una tarjeta de visita digital que lleva a los dos sitios que importan, el portafolio y el currículum.
El diseño usa glassmorphism — superficies translúcidas con desenfoque de fondo — con animaciones sutiles como puntos que laten y efectos al pasar el cursor. Está resuelto con CSS moderno: Flexbox, Grid y variables CSS para la gestión del tema.
Es un proyecto pequeño y consciente de serlo. Su valor no es técnico sino de criterio: decidir qué se enseña, en qué orden y qué se deja fuera para que el visitante llegue en dos clics a lo que ha venido a ver.
Tecnologías Utilizadas
HTML5 semántico
CSS3
Glassmorphism
Flexbox y Grid
Font Awesome
Contenido del Sitio
Enlace directo a la colección de proyectos y su código fuente.
Enlace a la trayectoria formativa y laboral detallada.
Resumen del perfil técnico: backend con PHP y Python, web con HTML, CSS y JavaScript, datos con SQL, y herramientas Linux y Git.
Enlaces a GitHub y LinkedIn.
Puntos que laten y efectos al pasar el cursor, resueltos solo con CSS.
Arquitectura
Un HTML y una hoja de estilos. No hay JavaScript propio, no hay build y no hay dependencias más allá de la iconografía. El tema se gestiona con variables CSS.
WEB/ ├── index.html # página completa ├── css/ # estilos y variables └── img/ # YO.png
Retos Técnicos y Decisiones de Diseño
Menos es más cuando el objetivo es redirigir
La tentación en una landing personal es contarlo todo. Pero si el visitante tiene que leer para encontrar el portafolio, la página ha fallado. Todo el diseño está subordinado a dos llamadas a la acción claras; el resto del contenido es contexto, no protagonista.
Glassmorphism sin sacrificar legibilidad
Las superficies translúcidas quedan bien y arruinan el contraste con facilidad. El truco es controlar la opacidad de la capa y el desenfoque del fondo para que el texto siga siendo legible sobre cualquier zona de la imagen que hay detrás.
Cero JavaScript, a propósito
Las animaciones — los puntos que laten, los efectos al pasar el cursor — están hechas solo con CSS. Para una página de presentación, cargar JavaScript para animar un punto es coste sin beneficio: el navegador anima CSS de forma más eficiente y la página funciona aunque el script falle.
Mi Rol
Diseño y desarrollo completos — autor único.
Estado del Proyecto
En producción en valentindg.com, funcionando como
punto de entrada a mi presencia profesional.