Projets - Site Portfolio — Renard Digital Projets

Le projet

Site portfolio centralisé pour présenter tous les projets de Renard Digital (clients, side projects, case studies, démos). L’objectif : montrer la diversité des réalisations et faciliter la découverte des projets par catégorie.

Fonctionnalités

Homepage avec grille de projets

Hero avec statistiques par catégorie (clients, side projects, case studies, démos)
Filtres par catégorie avec compteurs dynamiques
Grille responsive de cartes projets
Tri automatique : featured en premier, puis par date décroissante
URL params support : ?cat=category pour pré-filtrage

Page détail de projet

Breadcrumb de navigation
Hero avec badges (catégorie, statut, date, client)
Titre avec emoji
Liste de tags technologiques
CTA links (voir le site, code source GitHub)
Image/screenshot du projet
Contenu markdown complet
Sidebar avec résultats clés et informations
Projets connexes (même catégorie)
CTA contact

Composants réutilisables

Header: Navigation avec logo et menu mobile
Footer: Liens vers projets et site principal
ProjectCard: Card avec image, badges, tags et liens

Filtres dynamiques

JavaScript côté client pour filtrer les projets par catégorie avec animations fluides.

Tech Stack

Framework: Astro 5 (static site with dynamic routing)
Content Management: Astro Content Collections (schema Zod)
Styling: Tailwind CSS v4 avec thème personnalisé
Components: DaisyUI pour les composants UI
Type Safety: TypeScript strict mode
Dynamic Pages: getStaticPaths() pour les pages de détail
Markdown: Support du markdown pour le contenu des projets
Icons: Emoji pour simplicité

Architecture du contenu

Content Collections Schema

{
  title: string
  description: string
  category: 'client' | 'perso' | 'casestudy' | 'demo'
  tags: string[]
  image?: string
  url?: string
  github?: string
  date: string
  featured: boolean
  status: 'live' | 'wip' | 'archived'
  client?: string
  results?: string[]
  emoji: string
}

Statuts

Live: Sites en production
WIP: Work in progress
Archived: Projets archivés

Défis résolus

Organisation des projets

Utilisation d’Astro Content Collections avec schema Zod pour typage fort et validation des données de chaque projet.

Filtrage performant

Filtrage côté client avec JavaScript pour une expérience utilisateur fluide sans rechargement de page. Support des URL params pour partager des vues filtrées.

Pages dynamiques

Utilisation de getStaticPaths() pour générer automatiquement les pages de détail pour chaque projet, scalable à l’infini.

SEO optimisé

Chaque projet a sa propre page avec meta tags, og:image et contenu optimisé. Sitemap généré automatiquement via @astrojs/sitemap.

Ce qui distingue ce projet

Architecture extensible (ajout de nouveaux projets sans toucher au code)
Typage fort avec TypeScript + Zod schema
Filtrage dynamique côté client
Projets connexes automatiques
Support des URL params pour le partage
Design cohérent avec le site principal
Performance native d’Astro (static generation)
SEO optimisé par défaut

📂 Projets - Site Portfolio