Construyendo este portafolio con SvelteKit

Este portafolio está construido con SvelteKit + TypeScript + TailwindCSS v4. Quería algo que se sintiera rápido, fuera fácil de mantener y me permitiera escribir contenido en Markdown sin complicaciones.

El stack

SvelteKit 2 y Svelte 5 (runes: $state, $props, $derived).
TypeScript con strict: true.
TailwindCSS v4 vía el plugin de Vite, con la configuración en CSS.
mdsvex para renderizar los posts del blog desde archivos .md.

La estructura

src/
├── lib/
│   ├── components/
│   ├── posts.ts
│   └── projects.ts
├── posts/
│   └── *.md
└── routes/
    ├── blog/
    └── projects/

Los datos de proyectos viven en un archivo tipado (src/lib/projects.ts) y los posts del blog son archivos Markdown con frontmatter en src/posts/. Las dos fuentes son fáciles de editar y se cargan con import.meta.glob.

Dark mode

Uso la estrategia class-based de Tailwind con un script inline antes del primer paint que aplica .dark a <html> según localStorage.theme o prefers-color-scheme. Eso evita el FOUC cuando luego conecte un toggle.

Próximos pasos

Conectar el campo de proyectos con un CMS ligero.
Añadir RSS al blog.
Lighthouse a 100 en mobile.

Si te interesa el código, está en GitHub.