Minimalist Portfolio Template
Template de portfolio profesional y listo para producción con Astro 6, Tailwind CSS y Cloudflare Pages. Lighthouse 95–100, WCAG 2.2 AA, i18n ES/EN y configuración centralizada en un solo archivo.
Construido con
¿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 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
Capturas de pantalla
Descripción completa
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 6, 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.tscon helpert() - 100+ claves de traducción cubriendo todos los componentes, páginas y strings dinámicos
- Idioma controlado por
site.langensite-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 Transitionsblog— artículos con paginación, autor con avatar y tiempo de lecturaservices— páginas de servicio con sidebar y CTA estratégicotestimonials— testimonios de clientes en formato JSONfaq— preguntas frecuentes con JSON-LDFAQPageautomático
SEO & GEO avanzado
- JSON-LD —
Organization,WebSiteconSearchAction,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 6 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