Personal Portfolio & Blog - datanarch.dev

📋 Project Summary

Modern personal website built from scratch with Astro, designed to showcase professional projects, share technical knowledge through a blog, and present my professional trajectory interactively. The project implements a complete internationalization (i18n) system supporting Spanish, English, and French.

🎯 Project Objective

Create a professional online presence that serves as:

Project Portfolio: Showcasing technical work with detailed descriptions
Technical Blog: Platform to share learnings and tutorials
Interactive CV: Dynamic presentation of professional experience
Contact Point: Direct channel for professional opportunities

⚙️ Key Features

1. Multi-language System (i18n)

Complete support for 3 languages: Spanish (ES), English (EN), French (FR)
Translation system with JSON files
Automatic language detection by route
Translated content: navigation, static pages, and dynamic content
Localized routes: /es/, /en/, /fr/

2. Markdown Blog

Astro Content Collections system
Syntax highlighting with Material Ocean theme
Automatically calculated reading time
Post tagging and categorization
Language-based filtering
Individual pages with optimized SEO metadata

3. Projects Section

Visual cards with featured information
Project states: FINISHED, UNDER-CONSTRUCTION, IN-REVIEW
Direct links to GitHub repositories and live demos
Featured projects badge (featured)
Responsive grid adaptable to devices
Smart sorting (featured first, then by date)

4. Multilingual CV

Interactive work experience timeline
Education and certifications
Visualized core skills
Reusable components (TimeLineItem, SideBarCard)
Centralized data in JSON files per language

5. Design System

Custom CSS design tokens
Consistent color palette
Variables for spacing, typography, and radii
Fonts: IBM Plex Sans (text) and IBM Plex Mono (code)
Modular and reusable components

6. Scalable Architecture

Organized folder structure
Separation of content and presentation
Reusable Astro components
Shared utilities (i18n.ts, readingTime.ts)
Type-safe with TypeScript

🛠️ Technology Stack

Framework and Languages

Astro 4.x: Main framework (hybrid SSG/SSR)
TypeScript: Static typing for greater robustness
Markdown: Content format for blog and projects

Libraries and Tools

Astro Content Collections: Content management system
Zod: Schema validation
Shiki: Syntax highlighting for code blocks
js-yaml: Frontmatter parser

Styling

CSS Modules: Locally scoped styles
Design Tokens: Custom CSS variable system
Responsive Design: Mobile-first approach

DevOps

Git: Version control
GitHub: Repository and collaboration
npm: Dependency management

💻 Featured Technical Characteristics

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

Robust i18n System

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

Language Detection by Route

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

📈 Development Methodology

Progressive Development by Phases

Phase 1: Initial setup and basic content
Phase 2: Projects system
Phase 3: Multimedia components
Phase 4: Theme switcher (dark/light) - Pending
Phase 5: Basic i18n implementation ✅
Phase 6: Advanced content i18n - In progress
Phase 7: Social media automation - Planned

Applied Principles

DRY (Don’t Repeat Yourself): Reusable components
Separation of Concerns: Content separated from logic
Type Safety: TypeScript throughout the application
Progressive Enhancement: Works without JavaScript
Mobile First: Responsive design from the start

📚 Key Learnings

Technical

Astro Content Collections: Robust system for typed content
i18n without libraries: Custom internationalization implementation
CSS Architecture: Effective design tokens and CSS variables
TypeScript Patterns: Interfaces, types, and validation with Zod
Component Design: Creating modular and reusable components

Design

Balance between simplicity and functionality
Importance of visual consistency
Accessibility from the start
Performance first (SSG with Astro)

Process

Documentation as part of development
Incremental development by phases
Version control with descriptive commits
Thorough manual testing

🌟 Unique Features

Triple Language from Core: Not an add-on, but a fundamental part of the architecture
Type-Safe Content: Zod validates all content at build time
Zero Client JS: Static generated site, ultra-fast
Own Design System: No dependency on CSS frameworks
Markdown-First: Portable and versionable content

📝 Project Metrics

Lines of code: ~3,500 LOC
Astro components: 12+
Pages generated: 20+ (with all language variants)
Blog posts: 12 (4 per language)
Documented projects: 3+
Supported languages: 3
Development time: 2 weeks
Performance: Lighthouse 95+ on all metrics

🎓 Use Cases

Developer Seeking Employment: Complete portfolio with projects and experience
Technical Blogger: Platform to share knowledge
Freelance Consultant: Professional presence with direct contact
Open Source Contributor: Showcase of contributions and projects

📄 License

Current status: Under active construction Last updated: October 2025 Author: Henry Pérez (@datanarch) Main Technology: Astro + TypeScript