Minimalist Portfolio Template

Construido con

Astro 7 / Tailwind CSS / TypeScript / Cloudflare Pages / Fontsource

Qué incluye

• Lighthouse 95–100 en todas las categorías (Performance, A11y, SEO, Best Practices)
• ThemePicker Pro con +12 paletas premium, modo oscuro/claro adaptativo
• View Transitions cinematográficas y animaciones reveal con Intersection Observer
• Sistema i18n completo — ES/EN/PL/PL con diccionario en src/i18n.ts, 100% de la UI traducida
• Content Collections para proyectos, blog, servicios, testimonios y FAQs
• SEO avanzado: JSON-LD (FAQPage, Service), Open Graph, Twitter Cards, sitemap automático
• GEO optimizado con llms.txt para motores de búsqueda con IA (ChatGPT, Claude, Perplexity)
• Paginación de contenido (/projects/page/[page], /blog/page/[page]) configurable
• Formulario de contacto con backend real (Formspree / Cloudflare Forms), honeypot anti-spam
• Configuración centralizada en un solo archivo (src/site-config.ts)
• Headers de seguridad Cloudflare nativos: HSTS, CSP, X-Frame-Options, Permissions-Policy
• WCAG 2.2 AA compliant con soporte prefers-reduced-motion
• PWA-ready con manifest, iconos y soporte offline
• First Contentful Paint < 0.8s en el edge de Cloudflare
• Modo CMS opcional con Sanity (carpeta studio/ incluida)

El Minimalist Portfolio Template es una solución de portfolio profesional y lista para producción que combina rendimiento extremo, diseño limpio y configuración simplificada. Construido con Astro 7, Tailwind CSS y desplegado en el edge de Cloudflare Pages, alcanza Lighthouse 95–100 en todas las categorías con un First Contentful Paint menor a 0.8 segundos.

¿Para quién es este template?

Perfecto para desarrolladores, diseñadores, freelancers y agencias digitales que necesitan un portfolio de alto impacto. También funciona como base para proyectos de clientes que requieren blog, servicios y proyectos en una sola plataforma bien organizada.

Rendimiento y métricas

• Lighthouse Performance: 95–100 en todas las categorías
• First Contentful Paint < 0.8s en el edge de Cloudflare
• Total JS (homepage) < 15 KB gzipped — ~40% más liviano que equivalentes React/Next.js
• WCAG 2.2 AA compliant con soporte prefers-reduced-motion

Configuración centralizada

Todo el branding, SEO, navegación e integraciones se controlan desde un único archivo:

src/site-config.ts

Nombre, email, redes sociales, colores de marca, idioma, opciones de tema, items por página, endpoint del formulario de contacto, y más — sin tocar ningún componente.

Sistema de temas adaptativo

• ThemePicker Pro — interfaz flotante con +12 paletas premium para personalización en tiempo real
• Dual-mode — colores de marca diferentes para modo claro y oscuro via HSL en site-config.ts
• Zero FOUC — script bloqueante inline inyecta variables CSS antes del primer paint
• Botones Copy y Reset en el picker para extraer configuración exacta de HSL
• Production gate — el picker solo aparece en DEV o cuando showThemeStudio: true

Internacionalización (i18n)

Sistema de traducciones completo con cobertura del 100% de la UI visible:

• Diccionarios ES/EN/PL en src/i18n.ts con helper t()
• 100+ claves de traducción cubriendo todos los componentes, páginas y strings dinámicos
• Idioma controlado por site.lang en site-config.ts — sin configuración extra
• Fechas localizadas via siteConfig.site.locale

Content Collections

• projects — casos de estudio con soporte de imagen 16:9 y View Transitions
• blog — artículos con paginación, autor con avatar y tiempo de lectura
• services — páginas de servicio con sidebar y CTA estratégico
• testimonials — testimonios de clientes en formato JSON
• faq — preguntas frecuentes con JSON-LD FAQPage automático

SEO & GEO avanzado

• JSON-LD — Organization, WebSite con SearchAction, FAQPage, Service, BlogPosting
• Sitemap automático via @astrojs/sitemap
• llms.txt — manifiesto para rastreadores LLM con rutas, schemas y tech stack
• robots.txt dinámico con directivas allow para GPTBot, CCBot, Google-Extended, anthropic-ai
• Open Graph y Twitter Cards dinámicos por página
• Canonical URLs via Astro.url.canonical — sin query params

Infraestructura de seguridad

• _headers de Cloudflare Pages — HSTS, CSP, X-Frame-Options, Permissions-Policy
• security.txt en .well-known/ para reporte de vulnerabilidades
• Honeypot anti-spam en el formulario de contacto
• Fallbacks CSS para todas las variables de color — UI funcional sin JS

Tech Stack

• Astro 7 con View Transitions e Islands Architecture
• Tailwind CSS 3.x — utility-first styling
• TypeScript con exactOptionalPropertyTypes
• Cloudflare Pages — SSG por defecto, SSR-capable con swap de adapter
• Fontsource — fuentes variables self-hosted, sin Google Fonts (privacidad + velocidad)
• @astrojs/sitemap, astro-icon, @iconify-json/ph
• @vite-pwa/astro — PWA con soporte offline

Cerrar galería

Imagen anteriorImagen siguiente