Portfolio Personal & Blog - datanarch.dev

📋 Resumen del Proyecto

Sitio web personal moderno construido desde cero con Astro, diseñado para mostrar proyectos profesionales, compartir conocimientos técnicos mediante un blog, y presentar mi trayectoria profesional de forma interactiva. El proyecto implementa un sistema completo de internacionalización (i18n) soportando español, inglés y francés.

🎯 Objetivo del Proyecto

Crear una presencia profesional en línea que sirva como:

Portafolio de Proyectos: Showcasing de trabajos técnicos con descripciones detalladas
Blog Técnico: Plataforma para compartir aprendizajes y tutoriales
CV Interactivo: Presentación dinámica de experiencia profesional
Punto de Contacto: Canal directo para oportunidades profesionales

⚙️ Características Principales

1. Sistema Multiidioma (i18n)

Soporte completo para 3 idiomas: Español (ES), Inglés (EN), Francés (FR)
Sistema de traducciones con archivos JSON
Detección automática de idioma por ruta
Contenido traducido: navegación, páginas estáticas, y contenido dinámico
Rutas localizadas: /es/, /en/, /fr/

2. Blog con Markdown

Sistema de Content Collections de Astro
Syntax highlighting con Material Ocean theme
Tiempo de lectura calculado automáticamente
Tags y categorización de posts
Filtrado por idioma
Páginas individuales con metadata SEO optimizada

3. Sección de Proyectos

Cards visuales con información destacada
Estados de proyecto: FINISHED, UNDER-CONSTRUCTION, IN-REVIEW
Links directos a repositorios GitHub y demos en vivo
Badge de proyectos destacados (featured)
Grid responsive adaptable a dispositivos
Ordenamiento inteligente (destacados primero, luego por fecha)

4. CV Multiidioma

Timeline interactiva de experiencia laboral
Educación y certificaciones
Skills principales visualizadas
Componentes reutilizables (TimeLineItem, SideBarCard)
Datos centralizados en archivos JSON por idioma

5. Sistema de Diseño

Design tokens CSS personalizados
Paleta de colores consistente
Variables para espaciado, tipografía y radios
Fuentes: IBM Plex Sans (texto) e IBM Plex Mono (código)
Componentes modulares y reutilizables

6. Arquitectura Escalable

Estructura de carpetas organizada
Separación de contenido y presentación
Componentes Astro reutilizables
Utilidades compartidas (i18n.ts, readingTime.ts)
Type-safe con TypeScript

🛠️ Stack Tecnológico

Framework y Lenguajes

Astro 4.x: Framework principal (SSG/SSR híbrido)
TypeScript: Tipado estático para mayor robustez
Markdown: Formato de contenido para blog y proyectos

Librerías y Herramientas

Astro Content Collections: Sistema de gestión de contenido
Zod: Validación de schemas
Shiki: Syntax highlighting para bloques de código
js-yaml: Parser para frontmatter

Estilos

CSS Modules: Estilos con scope local
Design Tokens: Sistema de variables CSS personalizado
Responsive Design: Mobile-first approach

DevOps

Git: Control de versiones
GitHub: Repositorio y colaboración
npm: Gestión de dependencias

💻 Características Técnicas Destacadas

Content Collections con Zod

const projects = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()).optional(),
    git: z.string().url().optional(),
    demo: z.string().url().optional(),
    featured: z.boolean().default(false),
    projectStatus: z.enum(['UNDER-CONSTRUCTION', 'FINISHED', 'IN-REVIEW']),
    lang: z.enum(['es', 'en', 'fr']).default('es')
  })
});

Sistema i18n Robusto

export function useTranslations(lang: 'es' | 'en' | 'fr' = 'es') {
  return function t(key: string) {
    const keys = key.split('.');
    let value: any = translations[lang];
    for (const k of keys) {
      value = value?.[k];
    }
    return value || key;
  };
}

Detección de Idioma por Ruta

export function getLanguageFromPath(currentPath: string) {
  if (currentPath.startsWith('/en')) return 'en';
  if (currentPath.startsWith('/fr')) return 'fr';
  return 'es';
}

📈 Metodología de Desarrollo

Desarrollo Progresivo por Fases

Fase 1: Setup inicial y contenido básico
Fase 2: Sistema de proyectos
Fase 3: Componentes multimedia
Fase 4: Theme switcher (dark/light) - Pendiente
Fase 5: Implementación i18n básico ✅
Fase 6: i18n avanzado de contenido - En progreso
Fase 7: Automatización redes sociales - Planificado

Principios Aplicados

DRY (Don’t Repeat Yourself): Componentes reutilizables
Separation of Concerns: Contenido separado de lógica
Type Safety: TypeScript en toda la aplicación
Progressive Enhancement: Funciona sin JavaScript
Mobile First: Diseño responsive desde el inicio

📚 Aprendizajes Clave

Técnicos

Astro Content Collections: Sistema robusto para contenido tipado
i18n sin librerías: Implementación custom de internacionalización
CSS Architecture: Design tokens y variables CSS efectivas
TypeScript Patterns: Interfaces, types y validación con Zod
Component Design: Creación de componentes modulares y reutilizables

De Diseño

Balance entre simplicidad y funcionalidad
Importancia de la consistencia visual
Accesibilidad desde el inicio
Performance primero (SSG con Astro)

De Proceso

Documentación como parte del desarrollo
Desarrollo incremental por fases
Version control con commits descriptivos
Testing manual exhaustivo

🌟 Características Únicas

Triple Idioma desde el Core: No es un agregado, sino parte fundamental de la arquitectura
Type-Safe Content: Zod valida todo el contenido en build time
Zero Client JS: Sitio estático generado, ultra rápido
Design System Propio: Sin dependencia de frameworks CSS
Markdown-First: Contenido portable y versionable

📝 Métricas del Proyecto

Líneas de código: ~3,500 LOC
Componentes Astro: 12+
Páginas generadas: 20+ (con todas las variantes de idioma)
Posts de blog: 12 (4 por idioma)
Proyectos documentados: 3+
Idiomas soportados: 3
Tiempo de desarrollo: 2 semanas
Performance: Lighthouse 95+ en todas las métricas

🎓 Casos de Uso

Desarrollador Buscando Empleo: Portfolio completo con proyectos y experiencia
Blogger Técnico: Plataforma para compartir conocimientos
Consultor Freelance: Presencia profesional con contacto directo
Open Source Contributor: Showcase de contribuciones y proyectos

📄 Licencia

Estado actual: En construcción activa Última actualización: Octubre 2025 Autor: Henry Pérez (@datanarch) Tecnología Principal: Astro + TypeScript