🦊 Renard Digital
Side project En ligne mars 2026

Projets - Site Portfolio

Site portfolio de Renard Digital présentant tous les projets web (clients, side projects, case studies, démos) avec filtrage par catégorie et pages de détail.

Astro Tailwind CSS DaisyUI TypeScript Portfolio Content Collections Dynamic Routing
Voir le site ↗

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
}

Catégories

  • Client: Sites livrés à des clients (💼)
  • Perso: Side projects personnels (🚀)
  • Casestudy: Études de cas détaillées (📊)
  • Demo: Démos et templates (🎯)

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 similaires