Esta web no es un proyecto open source, por lo que me gustaría documentar a grandes rasgos la arquitectura de la misma aquí.
Stack Tecnológico
| Categoría |
Tecnología |
| Framework |
Next.js 16.2.1 (App Router) |
| UI Library |
React 19.2.4 |
| Animaciones |
Framer Motion 12.38.0 |
| Estilos |
CSS Modules (sin Tailwind) |
| Contenido |
Markdown via gray-matter, remark, remark-gfm, remark-html |
| Tipografía |
Google Fonts: Inter (sans) + JetBrains Mono (mono) |
| Lenguaje |
TypeScript 5 |
| Deployment |
Vercel/Netlify ready (static export) - Actualmente en Claudflare Pages |
Rutas y Páginas
| Ruta |
Tipo |
Descripción |
/ |
Static |
Single-page portfolio con scroll suave entre secciones |
/blog |
Static |
Listado de posts con filtros por tag (Tech, Personal, Otro) |
/blog/[slug] |
SSG |
Post individual generado desde Markdown |
Blog / CMS
Utilidades (lib/posts.ts)
getAllPosts(): Lista todos los posts ordenados por fechagetPost(slug): Obtiene post individual por sluggetPostsByTag(tag): Filtra posts por tag- Soporte para YouTube: URL en línea separada = embed automático
Decisiones de Arquitectura
- CSS Modules sobre Tailwind: Estilos scoped sin utility classes
- Markdown CMS: Contenido simple en archivos
.md, sin base de datos
- Static Generation: Blog pre-renderizado en build time
- Client Components: Componentes con 'use client' para animaciones
- Chile-focused: Dado que mi target de clientes es de Chile por ahora -> Precios en CLP, contacto WhatsApp, contenido en español
- Sin DB: Todo el contenido vive en
/content/posts/
- Geo-targeting: CountryBadge detecta país del visitante vía IP API