Volver a Proyectos

🪪 Landing Page Personal

Tarjeta de visita digital que centraliza portafolio, currículum y redes profesionales

En producción Glassmorphism Sin dependencias

Escala del Proyecto

2Archivos
1.5kLíneas
0Dependencias

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

🚀 Acceso al portafolio

Enlace directo a la colección de proyectos y su código fuente.

📄 Acceso al currículum

Enlace a la trayectoria formativa y laboral detallada.

🛠️ Tecnologías principales

Resumen del perfil técnico: backend con PHP y Python, web con HTML, CSS y JavaScript, datos con SQL, y herramientas Linux y Git.

🔗 Redes profesionales

Enlaces a GitHub y LinkedIn.

✨ Animaciones

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.