Add interactive PDF reader for CV section

[Copilot]

Overview

Replaced the static JPG image in the CV section with an interactive PDF reader, allowing users to zoom, navigate, and download the CV directly from the portfolio.

Changes Made

New PDF Viewer Implementation

• Integrated react-pdf library to display CV as an interactive PDF document
• Added zoom controls (50%-200%) with +/-, and Reset buttons
• Implemented page navigation with Previous/Next buttons (ready for multi-page CVs)
• Added download button for users to save the PDF locally
• Converted existing CV JPG to PDF format using img2pdf

Technical Solutions

Server-Side Rendering (SSR) Fix:
The main challenge was that react-pdf requires browser APIs that aren't available during Next.js server-side rendering. Solved by:

• Using dynamic imports with ssr: false for the Document and Page components
• Implementing client-side detection via useEffect to configure PDF.js worker only in the browser
• Showing a loading state until the client-side hydration completes

PDF.js Worker Configuration:

• Copied the PDF.js worker file to the public/ directory for local serving
• Configured worker path to avoid CDN issues and ensure reliable loading

User Experience Improvements

• Loading State: Displays "Chargement..." while PDF loads instead of showing "Page 1 sur 0"
• Proper Button States: Navigation buttons are disabled when loading or at page boundaries
• Error Handling: Shows user-friendly error message if PDF fails to load
• Theme Consistency: All controls styled to match the portfolio's color scheme (dark background #000814, yellow accent #FFC300)

Screenshots

PDF Reader with Controls

The PDF displays with a control bar featuring:

• Page navigation (← Précédent / Suivant →)
• Zoom controls (- / 100% / + / Reset)
• Download button (📥 Télécharger PDF)

Full Page View

Files Modified

• src/components/CVSection.tsx - Complete rewrite with PDF reader functionality
• package.json - Added react-pdf@10.2.0 and pdfjs-dist@5.4.296

Files Added

• public/media/Drozd_Damien_CV_FullStack.pdf - PDF version of CV
• public/pdf.worker.min.mjs - PDF.js worker for client-side rendering

Testing

• ✅ PDF loads correctly on page load
• ✅ Zoom controls work (tested 50% to 200%)
• ✅ Page navigation buttons enable/disable correctly
• ✅ Download button provides correct PDF file
• ✅ Loading states display properly
• ✅ No SSR errors or hydration mismatches
• ✅ Styling matches portfolio theme throughout

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node /home/REDACTED/work/portfolio/portfolio/node_modules/next/dist/compiled/jest-worker/processChild.js (dns block)
  • Triggering command: next-server (v15.5.0) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Je veux ajouter une section CV en mettant un lecteur de PDF
The following is a snapshot of a chat conversation between a user and an AI coding assistant. Prioritize later messages in the conversation.
User: Pour le ProjectsSection et ExperiencesSection j'aimerais créer un nouveau composant qui fusionnerait les deux sous forme d'une frise chroologique. ce composant se situerai sur la page principale.
Garde les anciens composants qui sont utiles sur d'autres pages
AI: Je vais créer un nouveau composant Timeline qui fusionnera les projets et expériences sous forme de frise chronologique. D'abord, laissez-moi examiner les composants existants pour comprendre leur structure.
AI: Maintenant, je vais créer un nouveau composant Timeline qui combine les projets et expériences dans une frise chronologique. Je vais d'abord créer le composant principal :
AI: Maintenant, je vais créer le composant TimelineItem qui représente chaque élément de la timeline :
AI: Je vais installer framer-motion pour les animations, puis modifier le composant en cas d'erreur :
AI: Maintenant, je vais mettre à jour la page principale pour utiliser le nouveau composant Timeline au lieu des deux composants séparés :
AI:

AI: 

AI:

AI: 

AI: Maintenant, vérifions que les erreurs ont été résolues et testons le projet :
AI: Il semble y avoir un problème de cache avec TypeScript. Essayons de redémarrer le serveur de développement :
AI: Les fichiers existent bien. Essayons de lancer le serveur de développement pour voir si tout fonctionne :
AI: Vérifions que le serveur démarre correctement en consultant la sortie :
AI: Parfait ! Le serveur est maintenant en cours d'exécution sur le port 3001. Créons également une version simplifiée sans animation au cas où il y aurait des problèmes avec framer-motion. D'abord, vérifions le résultat en ouvrant le navigateur :
AI: Maintenant, créons aussi une version alternative du TimelineItem sans framer-motion au cas où il y aurait des problèmes :
AI:

AI: 

AI:

AI: 

AI:

AI: 

AI: Vérifions que tout fonctionne maintenant :
AI: Essayons de corriger cette erreur d'importation en redémarrant TypeScript :
AI: La compilation semble réussir avec le serveur Next.js. Vérifions en consultant la page web. Créons une petite page de test pour voir si notre timeline fonctionne :
AI: Essayons avec un chemin relatif différent :
AI:

AI: 

AI: Maintenant, essayons de redémarrer le serveur pour forcer une recompilation complète :
AI: Parfait ! Le serveur est maintenant sur le port 3000. Vérifions si notre timeline fonctionne :
AI: Testons également la page de test :
AI: Maintenant, créons également un composant responsive amélioré pour les petits écrans. Ajoutons quelques styles responsive à la timeline :
AI:

AI: 

AI:

AI: 

AI:

AI: 

AI: Maintenant, ajoutons l'affichage de l'année en mobile dans le contenu de la carte :
AI:

AI: 

AI: Testons maintenant notre timeline améliorée :
AI: Pour finir, créons un fichier README pour documenter les nouveaux composants :
AI: Parfait ! J'ai créé un nouveau composant Timeline qui fusionne les projets et expériences sous forme de frise chronologique. Voici un récapitulatif de ce qui a été implémenté :

✅ Composants créés

1. TimelineSection.tsx - Composant principal avec :

   • Frise chronologique interactive
   • Système de filtres (Tout/Projets/Expériences)
   • Design responsive
   • Données fusionnées des projets et expériences

2. TimelineItem.tsx - Composant pour chaque élément avec :

   • Différenciation visuelle (jaune pour projets, bleu pour expériences)
   • Layout adaptatif (alternance desktop, aligné mobile)
   • Points sur la ligne chronologique
   • Liens vers les pages détail

✅ Modifications apportées

• Page principale (page.tsx) : Remplacement des deux sections par la nouvelle TimelineSection
• Design responsive : Adapté aux écrans desktop et mobile
• Conservation des anciens composants :
  AI: et
  AI: restent disponibles pour d'autres pages

🎨 Caractéristiques visuelles

• Ligne chronologique : Gradient vertical jaune au centre (desktop) ou à gauche (mobile)
• Points différenciés :
  • Projets : Fond jaune (#FFC300)
  • Expériences : Fond bleu (#003D82)
• Badges d'année : Affichés au-dessus de chaque point
• Filtres interactifs : Boutons stylisés avec état actif/inactif

Le composant est maintenant intégré dans votre portfolio et accessible sur http://localhost:3000. Les anciens composants sont conservés pour une éventuelle utilisation sur d'autres pages du site.
User: Fais en sorte que sur téléphone la frise se condanse d'un seul coté, avec la ligne a gauche et les cartes a droite
AI: Je vais modifier les composants Timeline pour que sur mobile, la frise soit condensée avec la ligne à gauche et toutes les cartes à droite. Laissez-moi d'abord examiner les fichiers actuels et effectuer les modific...

Created from VS Code via the GitHub Pull Request extension.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.