diff --git a/estilo.css b/estilo.css index 01d2854..532a33e 100644 --- a/estilo.css +++ b/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; } } diff --git a/index.html b/index.html index 6de662b..c6517db 100644 --- a/index.html +++ b/index.html @@ -3,41 +3,85 @@ - Mis Preferencias + + Un poco de mi + + + -
-

Mis preferencias personales

+ + +
+
+

Un poco de mi

+ + +
+ +
+

Actualizado en 2026

+

Un poco de mi, a mi manera.

+

+ Soy Facundo, tengo 24 años, y acá resumo tres áreas que me definen hoy: + trabajo, hobbies y deporte. +

+
-
-
-

Deportes favoritos

-
    -
  • Fútbol
    • -
  • Básquet
    • -
  • Natación
    • -
-
+
+
+
+
+

Trabajo

+

Desarrollo de software, consultoría y construcción de producto.

+
    +
  • Soy desarrollador semi senior en X Team, una consultora australiana.
    • +
  • Este año empecé mi propio estudio de software junto a un amigo y socio, bajo la marca de Whitebyte.
    • +
  • Nuestro proyecto más grande hasta la fecha es un SaaS para el Terciario Urquiza.
    • +
+
+
-
-

Comidas favoritas

-
    -
  • Pizza
    • -
  • Asado
    • -
  • Empanadas
    • -
-
+
+
+

Hobbies

+

Aprender, experimentar y mantenerme creativo fuera del trabajo diario.

+
    +
  • Me encanta programar, experimentar con nuevas tecnologías y prototipar MVPs propios.
    • +
  • Disfruto leer sobre finanzas y cultura; hace poco terminé Clean Code y en breve arranco Clean Architecture.
    • +
  • También me gusta jugar, sobre todo juegos indie.
    • +
+
+
-
-

Pasatiempos favoritos

-
    -
  • Leer
    • -
  • Programar
    • -
  • Escuchar música
    • -
-
-
+
+
+

Deporte

+

Mi base para tener energía, foco y constancia durante la semana.

+
    +
  • Me gusta salir a correr por la mañana; lo disfruto y me ayuda a ser más productivo.
    • +
  • También ando en bici y combino gimnasio con entrenamiento en casa.
    • +
  • Tengo mancuernas y equipo básico, así que entreno de lunes a viernes y corro todos los días al despertar.
    • +
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..16d5c8e --- /dev/null +++ b/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(); +}