Portfolio Personnel & Blog - datanarch.dev

📋 Résumé du Projet

Site web personnel moderne construit à partir de zéro avec Astro, conçu pour présenter des projets professionnels, partager des connaissances techniques via un blog, et présenter ma trajectoire professionnelle de manière interactive. Le projet implémente un système complet d’internationalisation (i18n) supportant l’espagnol, l’anglais et le français.

🎯 Objectif du Projet

Créer une présence professionnelle en ligne qui sert de:

Portfolio de Projets: Présentation de travaux techniques avec descriptions détaillées
Blog Technique: Plateforme pour partager des apprentissages et tutoriels
CV Interactif: Présentation dynamique de l’expérience professionnelle
Point de Contact: Canal direct pour les opportunités professionnelles

⚙️ Caractéristiques Principales

1. Système Multilingue (i18n)

Support complet pour 3 langues: Espagnol (ES), Anglais (EN), Français (FR)
Système de traductions avec fichiers JSON
Détection automatique de langue par route
Contenu traduit: navigation, pages statiques et contenu dynamique
Routes localisées: /es/, /en/, /fr/

2. Blog avec Markdown

Système de Content Collections d’Astro
Coloration syntaxique avec thème Material Ocean
Temps de lecture calculé automatiquement
Marquage et catégorisation des posts
Filtrage par langue
Pages individuelles avec métadonnées SEO optimisées

3. Section de Projets

Cartes visuelles avec informations mises en avant
États de projet: FINISHED, UNDER-CONSTRUCTION, IN-REVIEW
Liens directs vers les dépôts GitHub et démos en direct
Badge de projets mis en avant (featured)
Grille responsive adaptable aux appareils
Tri intelligent (mis en avant d’abord, puis par date)

4. CV Multilingue

Timeline interactive d’expérience professionnelle
Éducation et certifications
Compétences principales visualisées
Composants réutilisables (TimeLineItem, SideBarCard)
Données centralisées dans des fichiers JSON par langue

5. Système de Design

Design tokens CSS personnalisés
Palette de couleurs cohérente
Variables pour l’espacement, la typographie et les rayons
Polices: IBM Plex Sans (texte) et IBM Plex Mono (code)
Composants modulaires et réutilisables

6. Architecture Évolutive

Structure de dossiers organisée
Séparation du contenu et de la présentation
Composants Astro réutilisables
Utilitaires partagés (i18n.ts, readingTime.ts)
Type-safe avec TypeScript

🛠️ Stack Technologique

Framework et Langages

Astro 4.x: Framework principal (SSG/SSR hybride)
TypeScript: Typage statique pour plus de robustesse
Markdown: Format de contenu pour le blog et les projets

Bibliothèques et Outils

Astro Content Collections: Système de gestion de contenu
Zod: Validation de schémas
Shiki: Coloration syntaxique pour les blocs de code
js-yaml: Parseur pour frontmatter

Styles

CSS Modules: Styles à portée locale
Design Tokens: Système de variables CSS personnalisé
Responsive Design: Approche mobile-first

DevOps

Git: Contrôle de version
GitHub: Dépôt et collaboration
npm: Gestion des dépendances

💻 Caractéristiques Techniques Remarquables

Content Collections avec 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')
  })
});

Système i18n Robuste

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;
  };
}

Détection de Langue par Route

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

📈 Méthodologie de Développement

Développement Progressif par Phases

Phase 1: Configuration initiale et contenu de base
Phase 2: Système de projets
Phase 3: Composants multimédias
Phase 4: Sélecteur de thème (sombre/clair) - En attente
Phase 5: Implémentation i18n basique ✅
Phase 6: i18n avancé du contenu - En cours
Phase 7: Automatisation réseaux sociaux - Planifié

Principes Appliqués

DRY (Don’t Repeat Yourself): Composants réutilisables
Separation of Concerns: Contenu séparé de la logique
Type Safety: TypeScript dans toute l’application
Progressive Enhancement: Fonctionne sans JavaScript
Mobile First: Design responsive dès le début

📚 Apprentissages Clés

Techniques

Astro Content Collections: Système robuste pour contenu typé
i18n sans bibliothèques: Implémentation custom d’internationalisation
Architecture CSS: Design tokens et variables CSS efficaces
TypeScript Patterns: Interfaces, types et validation avec Zod
Component Design: Création de composants modulaires et réutilisables

De Design

Équilibre entre simplicité et fonctionnalité
Importance de la cohérence visuelle
Accessibilité dès le départ
Performance d’abord (SSG avec Astro)

De Processus

Documentation comme partie du développement
Développement incrémental par phases
Contrôle de version avec commits descriptifs
Tests manuels exhaustifs

🌟 Caractéristiques Uniques

Triple Langue dès le Noyau: Pas un ajout, mais une partie fondamentale de l’architecture
Type-Safe Content: Zod valide tout le contenu au moment de la construction
Zero Client JS: Site statique généré, ultra rapide
Design System Propre: Sans dépendance de frameworks CSS
Markdown-First: Contenu portable et versionnable

📝 Métriques du Projet

Lignes de code: ~3,500 LOC
Composants Astro: 12+
Pages générées: 20+ (avec toutes les variantes de langue)
Posts de blog: 12 (4 par langue)
Projets documentés: 3+
Langues supportées: 3
Temps de développement: 2 semaines
Performance: Lighthouse 95+ sur toutes les métriques

🎓 Cas d’Usage

Développeur Cherchant un Emploi: Portfolio complet avec projets et expérience
Blogueur Technique: Plateforme pour partager des connaissances
Consultant Freelance: Présence professionnelle avec contact direct
Contributeur Open Source: Présentation de contributions et projets

📄 Licence

État actuel: En construction active Dernière mise à jour: Octobre 2025 Auteur: Henry Pérez (@datanarch) Technologie Principale: Astro + TypeScript