feat(ui): redesign personal page with semantic structure, interactive navigation, and refined visual style

.gitignore

@@ -0,0 +1,34 @@
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Environment
+.env
+.env.*
+!.env.example
+
+# Dependencies
+node_modules/
+
+# Build output
+build/
+dist/
+out/
+coverage/
+
+# Editor/IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Temporary files
+*.tmp
+*.temp

estilo.css

@@ -1,49 +1,411 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    background-color: #f4f6f8;
-    color: #333;
+:root {
+    --bg: #f6f2ea;
+    --paper: #fffdfa;
+    --text: #1d221f;
+    --muted: #59645d;
+    --accent: #1f5a4e;
+    --line: #d8d1c5;
+    --shell: #ece5d8;
+    --ease-premium: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-header {
-    background-color: #2c3e50;
-    color: white;
-    padding: 20px;
-    text-align: center;
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+    font-family: "Manrope", sans-serif;
+    color: var(--text);
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    background:
+        radial-gradient(circle at 8% 10%, rgba(31, 90, 78, 0.12), transparent 35%),
+        radial-gradient(circle at 95% 85%, rgba(31, 90, 78, 0.08), transparent 42%),
+        var(--bg);
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    background-image: radial-gradient(rgba(29, 34, 31, 0.08) 0.4px, transparent 0.4px);
+    background-size: 3px 3px;
+    opacity: 0.25;
+    z-index: 1;
+}
+
+body::after {
+    content: "";
+    position: fixed;
+    inset: -20%;
+    pointer-events: none;
+    z-index: 0;
+    background:
+        radial-gradient(circle at 20% 30%, rgba(31, 90, 78, 0.08), transparent 42%),
+        radial-gradient(circle at 75% 70%, rgba(31, 90, 78, 0.06), transparent 45%);
+    animation: ambientDrift 22s ease-in-out infinite alternate;
+}
+
+.skip-link {
+    position: absolute;
+    top: -42px;
+    left: 12px;
+    z-index: 200;
+    padding: 0.7rem 1rem;
+    border-radius: 999px;
+    background: var(--accent);
+    color: #f5f5f5;
+    text-decoration: none;
+    transition: top 220ms var(--ease-premium);
+}
+
+.skip-link:focus-visible {
+    top: 12px;
+}
+
+.site-header,
+.container,
+.site-footer {
+    position: relative;
+    z-index: 2;
+}
+
+.topbar {
+    width: min(1120px, calc(100% - 2.4rem));
+    margin: 1.4rem auto 0;
+    padding: 0.65rem 1rem;
+    border: 1px solid rgba(216, 209, 197, 0.9);
+    border-radius: 999px;
+    background: rgba(253, 250, 244, 0.72);
+    backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.brand {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted);
+}
+
+.menu-toggle {
+    display: none;
+    border: 1px solid var(--line);
+    background: var(--paper);
+    border-radius: 999px;
+    padding: 0.5rem 0.9rem;
+    font: inherit;
+    font-size: 0.9rem;
+    color: var(--text);
+}
+
+.nav-links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 1.1rem;
+}
+
+.nav-links li {
+    padding-left: 0;
+}
+
+.nav-links li::before {
+    content: none;
+}
+
+.nav-links a {
+    position: relative;
+    color: var(--muted);
+    text-decoration: none;
+    font-size: 0.93rem;
+    letter-spacing: 0.04em;
+    border-radius: 999px;
+    padding: 0.3rem 0.7rem;
+    transition: color 240ms var(--ease-premium), background-color 240ms var(--ease-premium);
+}
+
+.nav-links a:hover,
+.nav-links a:focus-visible {
+    color: var(--accent);
+}
+
+.nav-links a.is-linked {
+    color: var(--accent);
+    background: rgba(31, 90, 78, 0.11);
+    box-shadow: inset 0 0 0 1px rgba(31, 90, 78, 0.16);
+}
+
+.nav-links a.is-linked::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: -0.35rem;
+    width: 0.38rem;
+    height: 0.38rem;
+    transform: translateX(-50%);
+    border-radius: 999px;
+    background: rgba(31, 90, 78, 0.6);
+}
+
+.hero {
+    width: min(1120px, calc(100% - 2.4rem));
+    margin: 2.8rem auto 0;
+    padding: 2.4rem 0 1rem;
+}
+
+.eyebrow {
+    margin: 0;
+    font-size: 0.72rem;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+    color: var(--muted);
+    font-weight: 600;
+}
+
+h1,
+h2 {
+    font-family: "Sora", sans-serif;
+    text-wrap: balance;
+}
+
+h1 {
+    margin: 0.75rem 0 0;
+    max-width: 16ch;
+    font-size: clamp(2.4rem, 6vw, 4.8rem);
+    line-height: 0.92;
+    letter-spacing: -0.03em;
+}
+
+.intro {
+    max-width: 60ch;
+    margin: 1.25rem 0 0;
+    color: var(--muted);
+    font-size: 1.02rem;
+    line-height: 1.75;
 }
 
 .container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 20px;
-    padding: 20px;
+    width: min(1120px, calc(100% - 2.4rem));
+    margin: 0 auto;
+    padding: 2rem 0 0;
+    flex: 1;
 }
 
-.card {
-    background-color: white;
-    border-radius: 10px;
-    padding: 20px;
-    width: 300px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+.editorial-grid {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 1rem;
+}
+
+.panel {
+    position: relative;
+    overflow: hidden;
+    grid-column: span 4;
+    padding: 0.5rem;
+    border: 1px solid rgba(216, 209, 197, 0.8);
+    border-radius: 2rem;
+    background: linear-gradient(150deg, var(--shell), #e6decf);
+    box-shadow: 0 16px 36px -28px rgba(56, 52, 44, 0.5);
+    transition: transform 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium), border-color 320ms var(--ease-premium);
+}
+
+.panel::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    background: radial-gradient(circle at 14% 16%, rgba(31, 90, 78, 0.2), transparent 44%);
+    opacity: 0;
+    transition: opacity 320ms var(--ease-premium);
+}
+
+.panel-inner {
+    height: 100%;
+    border-radius: calc(2rem - 0.5rem);
+    padding: 1.8rem 1.6rem 1.9rem;
+    background: var(--paper);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.panel:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 28px 36px -26px rgba(56, 52, 44, 0.45);
+}
+
+.panel-large {
+    grid-column: span 7;
+}
+
+.panel-wide {
+    grid-column: span 5;
 }
 
 h2 {
-    margin-top: 0;
-    color: #2c3e50;
+    margin: 0;
+    font-size: clamp(1.8rem, 2.9vw, 2.4rem);
+    line-height: 1;
+    letter-spacing: -0.02em;
 }
 
-ul {
-    padding-left: 20px;
+.meta {
+    margin: 0.8rem 0 1.1rem;
+    color: var(--muted);
+    font-size: 0.95rem;
+    letter-spacing: 0.02em;
 }
 
-li {
-    margin-bottom: 8px;
+.panel ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: 0.75rem;
 }
 
-@media (max-width: 600px) {
-    .card {
-        width: 100%;
+.panel li {
+    position: relative;
+    padding-left: 1.2rem;
+    line-height: 1.5;
+}
+
+.panel li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0.6rem;
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: 999px;
+    background: var(--accent);
+}
+
+.site-footer {
+    width: min(1120px, calc(100% - 2.4rem));
+    margin: 2.2rem auto 1rem;
+    border-top: 1px solid var(--line);
+    color: var(--muted);
+    font-size: 0.92rem;
+    padding-top: 1rem;
+    text-align: center;
+}
+
+.site-footer p {
+    margin: 0;
+}
+
+.footer-link {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 700;
+    transition: color 220ms var(--ease-premium), opacity 220ms var(--ease-premium);
+}
+
+.footer-link:hover,
+.footer-link:focus-visible {
+    color: #16443b;
+    opacity: 0.92;
+}
+
+.panel.is-linked-hover {
+    transform: translateY(-7px) scale(1.005);
+    box-shadow: 0 30px 40px -24px rgba(31, 90, 78, 0.25);
+    border-color: rgba(31, 90, 78, 0.45);
+}
+
+.panel.is-linked-hover::after {
+    opacity: 1;
+}
+
+.panel.is-linked-hover .panel-inner {
+    background:
+        linear-gradient(165deg, rgba(31, 90, 78, 0.08), rgba(31, 90, 78, 0.02) 42%),
+        var(--paper);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.95),
+        inset 0 0 0 1px rgba(31, 90, 78, 0.12);
+}
+
+.panel.is-linked-hover h2 {
+    color: #18453c;
+}
+
+.panel.is-linked-hover .meta {
+    color: #44524b;
+}
+
+.reveal {
+    opacity: 0;
+    transform: translateY(14px);
+    transition: opacity 800ms var(--ease-premium), transform 800ms var(--ease-premium);
+}
+
+.reveal.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+@keyframes ambientDrift {
+    0% {
+        transform: translate3d(-0.8%, 0.6%, 0) scale(1);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translate3d(1.2%, -0.8%, 0) scale(1.02);
+        opacity: 0.65;
+    }
+}
+
+@media (max-width: 860px) {
+    .menu-toggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .topbar {
+        border-radius: 1.4rem;
+        flex-wrap: wrap;
+    }
+
+    .nav-links {
+        display: none;
+        width: 100%;
+        flex-direction: column;
+        gap: 0.65rem;
+        padding-top: 0.45rem;
+    }
+
+    .nav-links[data-open="true"] {
+        display: flex;
+    }
+
+    .editorial-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .panel,
+    .panel-large,
+    .panel-wide {
+        grid-column: span 1;
+    }
+
+    .hero {
+        margin-top: 1.9rem;
     }
 }
 

index.html

@@ -3,41 +3,85 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mis Preferencias</title>
+    <meta name="description" content="Perfil personal de Facundo: trabajo, hobbies y deporte.">
+    <title>Un poco de mi</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="estilo.css">
 </head>
 <body>
-    <header>
-        <h1>Mis preferencias personales</h1>
+    <a class="skip-link" href="#contenido">Saltar al contenido</a>
+
+    <header class="site-header">
+        <div class="topbar">
+            <p class="brand">Un poco de mi</p>
+            <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="menu">
+                Menú
+            </button>
+            <nav>
+                <ul id="menu" class="nav-links" data-open="false">
+                    <li><a href="#trabajo">Trabajo</a></li>
+                    <li><a href="#hobbies">Hobbies</a></li>
+                    <li><a href="#deporte">Deporte</a></li>
+                </ul>
+            </nav>
+        </div>
+
+        <section class="hero reveal">
+            <p class="eyebrow">Actualizado en 2026</p>
+            <h1>Un poco de mi, a mi manera.</h1>
+            <p class="intro">
+                Soy Facundo, tengo 24 años, y acá resumo tres áreas que me definen hoy:
+                trabajo, hobbies y deporte.
+            </p>
+        </section>
     </header>
 
-    <div class="container">
-        <div class="card">
-            <h2>Deportes favoritos</h2>
-            <ul>
-                <li>Fútbol</li>
-                <li>Básquet</li>
-                <li>Natación</li>
-            </ul>
-        </div>
+    <main id="contenido" class="container">
+        <section class="editorial-grid" aria-label="Preferencias personales">
+            <article id="trabajo" class="panel panel-large reveal">
+                <div class="panel-inner">
+                    <h2>Trabajo</h2>
+                    <p class="meta">Desarrollo de software, consultoría y construcción de producto.</p>
+                    <ul>
+                        <li>Soy desarrollador semi senior en X Team, una consultora australiana.</li>
+                        <li>Este año empecé mi propio estudio de software junto a un amigo y socio, bajo la marca de Whitebyte.</li>
+                        <li>Nuestro proyecto más grande hasta la fecha es un SaaS para el Terciario Urquiza.</li>
+                    </ul>
+                </div>
+            </article>
 
-        <div class="card">
-            <h2>Comidas favoritas</h2>
-            <ul>
-                <li>Pizza</li>
-                <li>Asado</li>
-                <li>Empanadas</li>
-            </ul>
-        </div>
+            <article id="hobbies" class="panel reveal">
+                <div class="panel-inner">
+                    <h2>Hobbies</h2>
+                    <p class="meta">Aprender, experimentar y mantenerme creativo fuera del trabajo diario.</p>
+                    <ul>
+                        <li>Me encanta programar, experimentar con nuevas tecnologías y prototipar MVPs propios.</li>
+                        <li>Disfruto leer sobre finanzas y cultura; hace poco terminé Clean Code y en breve arranco Clean Architecture.</li>
+                        <li>También me gusta jugar, sobre todo juegos indie.</li>
+                    </ul>
+                </div>
+            </article>
 
-        <div class="card">
-            <h2>Pasatiempos favoritos</h2>
-            <ul>
-                <li>Leer</li>
-                <li>Programar</li>
-                <li>Escuchar música</li>
-            </ul>
-        </div>
-    </div>
+            <article id="deporte" class="panel panel-wide reveal">
+                <div class="panel-inner">
+                    <h2>Deporte</h2>
+                    <p class="meta">Mi base para tener energía, foco y constancia durante la semana.</p>
+                    <ul>
+                        <li>Me gusta salir a correr por la mañana; lo disfruto y me ayuda a ser más productivo.</li>
+                        <li>También ando en bici y combino gimnasio con entrenamiento en casa.</li>
+                        <li>Tengo mancuernas y equipo básico, así que entreno de lunes a viernes y corro todos los días al despertar.</li>
+                    </ul>
+                </div>
+            </article>
+        </section>
+    </main>
+
+    <footer class="site-footer reveal">
+        <p>&copy; <span id="currentYear"></span> Desarrollado por <a class="footer-link" href="https://whitebyte.dev" target="_blank" rel="noopener noreferrer">Whitebyte</a></p>
+    </footer>
+
+    <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -0,0 +1,73 @@
+const menuButton = document.querySelector('.menu-toggle');
+const navLinks = document.querySelector('.nav-links');
+
+if (menuButton && navLinks) {
+    menuButton.addEventListener('click', () => {
+        const isOpen = navLinks.dataset.open === 'true';
+        navLinks.dataset.open = String(!isOpen);
+        menuButton.setAttribute('aria-expanded', String(!isOpen));
+    });
+
+    navLinks.querySelectorAll('a').forEach((link) => {
+        link.addEventListener('click', () => {
+            navLinks.dataset.open = 'false';
+            menuButton.setAttribute('aria-expanded', 'false');
+        });
+
+        const highlightTarget = () => {
+            const targetId = link.getAttribute('href');
+            if (!targetId || !targetId.startsWith('#')) {
+                return;
+            }
+
+            const targetCard = document.querySelector(targetId);
+            if (targetCard) {
+                targetCard.classList.add('is-linked-hover');
+                link.classList.add('is-linked');
+            }
+        };
+
+        const clearTarget = () => {
+            const targetId = link.getAttribute('href');
+            if (!targetId || !targetId.startsWith('#')) {
+                return;
+            }
+
+            const targetCard = document.querySelector(targetId);
+            if (targetCard) {
+                targetCard.classList.remove('is-linked-hover');
+                link.classList.remove('is-linked');
+            }
+        };
+
+        link.addEventListener('mouseenter', highlightTarget);
+        link.addEventListener('mouseleave', clearTarget);
+        link.addEventListener('focus', highlightTarget);
+        link.addEventListener('blur', clearTarget);
+    });
+}
+
+const revealElements = document.querySelectorAll('.reveal');
+
+if ('IntersectionObserver' in window && revealElements.length > 0) {
+    const observer = new IntersectionObserver(
+        (entries, currentObserver) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('is-visible');
+                    currentObserver.unobserve(entry.target);
+                }
+            });
+        },
+        { threshold: 0.2 }
+    );
+
+    revealElements.forEach((element) => observer.observe(element));
+} else {
+    revealElements.forEach((element) => element.classList.add('is-visible'));
+}
+
+const yearElement = document.getElementById('currentYear');
+if (yearElement) {
+    yearElement.textContent = new Date().getFullYear();
+}