Una página web personal que muestra información sobre mí, mis estudios y mis proyectos.
Esta es mi página web personal donde muestro información sobre mí, mis habilidades, estudios y proyectos personales. Está diseñada para ser limpia, moderna y responsiva, adaptándose a diferentes tamaños de pantalla.
La página incluye varias secciones principales:
La página sigue una estructura organizada con HTML semántico, estilos CSS modernos y funcionalidad JavaScript para mejorar la experiencia del usuario.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Personal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#informacion">Información</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<!-- Resto del contenido -->
<script src="script.js"></script>
</body>
</html>/* Variables de colores */
:root {
--primary: #4a90e2;
--primary-dark: #357abd;
--bg: #1a1a1a;
--text: #ffffff;
--text-secondary: #b3b3b3;
}
/* Estilos generales */
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
}
/* Navegación */
nav {
background-color: rgba(0, 0, 0, 0.8);
padding: 1rem 2rem;
position: fixed;
width: 100%;
z-index: 1000;
backdrop-filter: blur(10px);
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
nav li {
margin: 0 1.5rem;
}
nav a {
color: var(--text);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
nav a:hover {
color: var(--primary);
}