Portfolio Minimal

Sobre Este Template

Portfolio Minimal es un portfolio brutalmente sobrio en negro y oro para creative developers, diseñadores y freelancers que quieren que la tipografía lleve el peso de la página. Una home de scroll largo recorre hero, selected work, about y contacto, más una ruta dinámica de proyecto que renderiza cada caso de estudio en Markdown. La tipografía display es enorme — el h1 escala de 64px a 144px con clamp() — en Cormorant Garamond peso 300 sobre un negro casi puro #0a0a0a con acento oro champán #d4af37. Los reveals de sección usan animation-timeline: view() nativo de CSS en lugar de un observer en JavaScript, así que la animación de scroll casi no cuesta nada. Un cursor orbe dorado sigue al puntero con easing lerp y crece sobre los links. Los proyectos viven en una colección de contenido tipada con Zod; Lenis y Astro View Transitions manejan la navegación.

Firma

El cursor del sistema se oculta en todo el sitio y se sustituye por un orbe de 40px con gradiente radial dorado que persigue al puntero con easing lerp de 0.15 dentro de un loop de requestAnimationFrame, compuesto con mix-blend-mode: screen para que realmente brille sobre el fondo casi negro. Al pasar sobre cualquier link o botón crece a 60px. Como se monta con transition:persist, sobrevive a la navegación con View Transitions sin reinicializarse, y se oculta y ni siquiera se inicializa en dispositivos de puntero grueso. Todo lo demás se anima con animation-timeline: view() nativo de CSS — los reveals de scroll van sin nada de JavaScript.

Características

• 2 rutas — una home de scroll único (Hero, Selected Work, About, Contacto) más una página dinámica de detalle de proyecto
• Cursor orbe dorado custom — gradiente radial de 40px que sigue al puntero con easing lerp de 0.15 en un loop de requestAnimationFrame
• El cursor usa mix-blend-mode: screen y crece de 40px a 60px sobre cualquier link, button o [role="button"]
• Animaciones scroll-driven nativas de CSS — animation-timeline: view() con animation-range entry 0% cover 40%, sin una sola línea de IntersectionObserver
• El cursor usa transition:persist para sobrevivir a la navegación con View Transitions sin reinicializarse, y se desactiva solo en dispositivos de puntero grueso
• Tipografía display fluida y enorme — h1 clamp(64px, 12vw, 144px), h2 clamp(48px, 8vw, 96px), h3 clamp(32px, 5vw, 56px)
• Colección de proyectos con schema Zod (title, year, role, description, order, featured) — 3 proyectos de ejemplo en Markdown
• Páginas de detalle generadas con getStaticPaths desde [...slug].astro — cabecera de rol/año, cuerpo Markdown renderizado y link de vuelta
• Lista Selected Work con indentado en hover y una flecha View Project que rota 45° y aumenta su gap al pasar el cursor
• Overlay de grano SVG a página completa — feTurbulence fractalNoise al 3% de opacidad, fixed y con pointer-events: none
• Smooth scroll con Lenis (duration 0.8) conectado a gsap.ticker con lagSmoothing(0) y ScrollTrigger.update
• Astro View Transitions con teardown completo de Lenis y ScrollTrigger en astro:before-preparation — sin instancias huérfanas entre páginas
• Contacto mailto sobredimensionado — email en clamp(32px, 6vw, 72px) con links a GitHub, Twitter, LinkedIn y Dribbble
• Sección About con tres grupos de skills editables — Development, Design y Creative
• Links seguros respecto al base path vía import.meta.env.BASE_URL — se despliega a un subdirectorio de GitHub Pages sin tocar nada
• TypeScript strict (astro/tsconfigs/strict), manejo de prefers-reduced-motion, responsive desde 375px — solo dos dependencias en runtime además de Astro (GSAP y Lenis)

Despliegue