comok

app/Competences/page.jsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 
+// Fonction pour récupérer toutes les compétences depuis l'API Strapi
 async function getAllCompetences() {
   try {
     const response = await fetch("http://localhost:1337/api/competences?populate=*");
@@ -14,12 +15,15 @@ async function getAllCompetences() {
   }
 }
 
+// Composant principal de la page des compétences
 export default async function Page() {
   const competences = await getAllCompetences();
 
   return (
     <div>
+      {/* Titre de la page */}
       <h1 className="text-3xl mb-6 font-bold text-grey-700">Mes Compétences</h1>
+      {/* Grille pour afficher les compétences */}
       <div className="grid grid-cols-2 gap-6">
         {competences.map((competence) => {
           const picture = competence.picture?.[0]; // Récupère la première image si elle existe
@@ -33,8 +37,10 @@ export default async function Page() {
 
           return (
             <div key={competence.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100">
+              {/* Lien vers la page de détail de la compétence */}
               <Link href={`/competences/${competence.slug}`}>
                 <div className="overflow-hidden">
+                  {/* Affichage de l'image de la compétence */}
                   {imageUrl ? (
                     <img
                       src={imageUrl}
@@ -48,7 +54,9 @@ export default async function Page() {
                   )}
                 </div>
                 <div className="p-4">
+                  {/* Affichage du nom de la compétence */}
                   <p className="font-bold text-xl mb-2">{competence.name}</p>
+                  {/* Affichage de la description de la compétence */}
                   <p className="text-gray-700">{competence.description}</p>
                 </div>
               </Link>

app/admin/messages/page.tsx

@@ -1,18 +1,27 @@
+// Composant principal de la page des messages
 export default async function MessagesPage() {
+    // Récupération des messages depuis l'API Strapi
     const res = await fetch("http://localhost:1337/api/messages");
     const { data } = await res.json();
   
     return (
       <div className="max-w-3xl mx-auto p-6">
+        {/* Titre de la page */}
         <h1 className="text-3xl font-bold text-center mb-6">📬 Messages reçus</h1>
+        
+        {/* Affichage d'un message si aucun message n'est reçu */}
         {data.length === 0 ? (
           <p className="text-center text-gray-600">Aucun message reçu.</p>
         ) : (
           <ul className="space-y-4">
+            {/* Boucle sur les messages pour les afficher */}
             {data.map((msg: any) => (
               <li key={msg.id} className="p-4 border rounded shadow">
+                {/* Affichage du nom et de l'email de l'expéditeur */}
                 <p><strong>👤 {msg.name}</strong> ({msg.email})</p>
+                {/* Affichage de la date de réception du message */}
                 <p>📅 {new Date(msg.createdAt).toLocaleString("fr-FR")}</p>
+                {/* Affichage du contenu du message */}
                 <p className="mt-2">{msg.message}</p>
               </li>
             ))}
@@ -21,4 +30,3 @@ export default async function MessagesPage() {
       </div>
     );
   }
-  

app/assets/main.css

@@ -1,3 +1,4 @@
+/* Importation des polices Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@@ -5,62 +6,69 @@
 @import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
 
+/* Importation des styles de base, des composants et des utilitaires de Tailwind CSS */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* Classe pour définir l'image de fond */
 .bg-wallpaper {
-  background-image: url('./images/wallpapersite.png');
+  background-image: url('./images/wallpapersite.png'); /* Chemin de l'image de fond */
-  background-size: cover;
+  background-size: cover; /* L'image couvre toute la zone */
-  background-position: center;
+  background-position: center; /* L'image est centrée */
-  background-repeat: no-repeat;
+  background-repeat: no-repeat; /* L'image ne se répète pas */
 }
 
+/* Classe pour définir la hauteur minimale et maximale du contenu de la page d'accueil */
 .homepage-content {
   min-height: 50vh; /* Hauteur minimale de 50% de la hauteur de la fenêtre */
   max-height: 80vh; /* Hauteur maximale de 80% de la hauteur de la fenêtre */
 }
 
+/* Classe pour animer le premier cercle */
 .circle-one {
-  animation: move1 10s linear infinite;
+  animation: move1 10s linear infinite; /* Animation infinie avec une durée de 10s */
 }
 
+/* Classe pour animer le deuxième cercle */
 .circle-two {
-    animation: move2 10s linear infinite;
+  animation: move2 10s linear infinite; /* Animation infinie avec une durée de 10s */
 }
 
+/* Définition de l'animation pour le premier cercle */
 @keyframes move1 {
   0% {
-    transform: translate(0, 0) scale 1;
+    transform: translate(0, 0) scale(1); /* Position et échelle initiales */
   }
   25% {
-    transform: translate(200px, 200px) scale(1);
+    transform: translate(200px, 200px) scale(1); /* Déplacement et échelle */
   }
   50% {
-    transform: translate(100px, 400px) scale(1.2);
+    transform: translate(100px, 400px) scale(1.2); /* Déplacement et échelle */
   }
   75% {
-    transform: translate(-100px, -200px) scale(1.1);
+    transform: translate(-100px, -200px) scale(1.1); /* Déplacement et échelle */
   }
   100% {
-    transform: translate(0, 0) scale(1);
+    transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
   }
 }
 
+/* Définition de l'animation pour le deuxième cercle */
 @keyframes move2 {
   0% {
-      transform: translate(0, 0) scale 1;
+    transform: translate(0, 0) scale(1); /* Position et échelle initiales */
   }
   25% {
-      transform: translate(-30px, -300px) scale(1);
+    transform: translate(-200px, -200px) scale(1); /* Déplacement et échelle */
   }
   50% {
-      transform: translate(-200px, -100px) scale(1.2);
+    transform: translate(-100px, -400px) scale(1.2); /* Déplacement et échelle */
   }
   75% {
-      transform: translate(30px, 70px) scale(1.1);
+    transform: translate(100px, 200px) scale(1.1); /* Déplacement et échelle */
   }
   100% {
-      transform: translate(0, 0) scale(1);
+    transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
   }
 }

app/components/Carousel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { createPortal } from "react-dom"; // 🟢 Import du Portal
+import { createPortal } from "react-dom"; // Importation de createPortal pour les modals
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import "swiper/css";
@@ -9,26 +9,27 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 
 interface CarouselProps {
-  images: Array<{ url: string; alt: string }>;
+  images: Array<{ url: string; alt: string }>; // Propriétés des images du carrousel
-  className?: string;
+  className?: string; // Classe CSS optionnelle pour personnaliser le style
 }
 
 export default function Carousel({ images, className }: CarouselProps) {
-  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null); // État pour l'image sélectionnée
 
   return (
     <>
       {/* Carrousel principal */}
       <div className={`relative w-full ${className || "h-64"} rounded-md shadow-md`}>
         <Swiper
-          modules={[Navigation, Pagination, Autoplay]}
+          modules={[Navigation, Pagination, Autoplay]} // Modules Swiper utilisés
-          spaceBetween={10}
+          spaceBetween={10} // Espace entre les slides
-          slidesPerView={1}
+          slidesPerView={1} // Nombre de slides visibles en même temps
-          navigation
+          navigation // Activation de la navigation
-          pagination={{ clickable: true }}
+          pagination={{ clickable: true }} // Activation de la pagination cliquable
-          autoplay={{ delay: 3000 }}
+          autoplay={{ delay: 3000 }} // Activation de l'autoplay avec un délai de 3 secondes
           className={`w-full ${className || "h-64"}`}
         >
+          {/* Boucle sur les images pour les afficher dans le carrousel */}
           {images.map((img, index) => (
             <SwiperSlide key={index} className="flex items-center justify-center h-full">
               {/* Image cliquable pour affichage en plein écran */}
@@ -36,25 +37,25 @@ export default function Carousel({ images, className }: CarouselProps) {
                 src={img.url}
                 alt={img.alt}
                 className="w-full h-full object-cover rounded-md cursor-pointer transition-transform duration-300 hover:scale-105"
-                onClick={() => setSelectedImage(img.url)} // 🟢 Ouvre l’image en plein écran
+                onClick={() => setSelectedImage(img.url)} // Ouvre l’image en plein écran
               />
             </SwiperSlide>
           ))}
         </Swiper>
       </div>
 
-      {/* 🟢 Modal plein écran inséré DANS `<body>` grâce à `createPortal` */}
+      {/* Modal plein écran inséré dans <body> grâce à createPortal */}
       {selectedImage &&
         createPortal(
           <div
             className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black bg-opacity-10 backdrop-blur-2xl transition-opacity duration-300 z-[1000]"
-            onClick={() => setSelectedImage(null)} // 🔴 Fermer au clic
+            onClick={() => setSelectedImage(null)} // Fermer au clic
           >
             <div className="relative w-full max-w-6xl p-6 bg-transparent">
               {/* Bouton de fermeture */}
               <button
                 className="absolute top-6 right-6 text-white text-3xl bg-gray-900/70 p-2 rounded-full"
-                onClick={() => setSelectedImage(null)}
+                onClick={() => setSelectedImage(null)} // Fermer au clic
               >
                 ✖
               </button>
@@ -63,11 +64,11 @@ export default function Carousel({ images, className }: CarouselProps) {
               <img
                 src={selectedImage}
                 alt="Agrandissement"
-                className="w-full max-h-[90vh] object-contain rounded-lg shadow-lg"
+                className="w-full h-full object-cover rounded-md"
               />
             </div>
           </div>,
-          document.body // 🟢 Place le `modal` en dehors de `<main>` dans `<body>`
+          document.body
         )}
     </>
   );

app/components/CarouselCompetences.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { createPortal } from "react-dom";
+import { createPortal } from "react-dom"; // Importation de createPortal pour les modals
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import "swiper/css";
@@ -9,33 +9,35 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 
 interface CarouselProps {
-  images: Array<{ url: string; alt: string }>;
+  images: Array<{ url: string; alt: string }>; // Propriétés des images du carrousel
-  className?: string;
+  className?: string; // Classe CSS optionnelle pour personnaliser le style
 }
 
 export default function CarouselCompetences({ images, className }: CarouselProps) {
-  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null); // État pour l'image sélectionnée
 
   return (
     <>
       {/* Carrousel compétences */}
       <div className={`relative w-full ${className || "h-64"} rounded-md shadow-md`}>
         <Swiper
-          modules={[Navigation, Pagination, Autoplay]}
+          modules={[Navigation, Pagination, Autoplay]} // Modules Swiper utilisés
-          spaceBetween={10}
+          spaceBetween={10} // Espace entre les slides
-          slidesPerView={1}
+          slidesPerView={1} // Nombre de slides visibles en même temps
-          navigation
+          navigation // Activation de la navigation
-          pagination={{ clickable: true }}
+          pagination={{ clickable: true }} // Activation de la pagination cliquable
-          autoplay={{ delay: 3000 }}
+          autoplay={{ delay: 3000 }} // Activation de l'autoplay avec un délai de 3 secondes
           className={`w-full ${className || "h-64"}`}
         >
+          {/* Boucle sur les images pour les afficher dans le carrousel */}
           {images.map((img, index) => (
             <SwiperSlide key={index} className="flex items-center justify-center h-full">
+              {/* Image cliquable pour affichage en plein écran */}
               <img
                 src={img.url}
                 alt={img.alt}
                 className="w-full h-full object-cover rounded-md cursor-pointer transition-transform duration-300 hover:scale-105"
-                onClick={() => setSelectedImage(img.url)}
+                onClick={() => setSelectedImage(img.url)} // Ouvre l’image en plein écran
               />
             </SwiperSlide>
           ))}
@@ -47,19 +49,22 @@ export default function CarouselCompetences({ images, className }: CarouselProps
         createPortal(
           <div
             className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black bg-opacity-10 backdrop-blur-2xl transition-opacity duration-300 z-[1000]"
-            onClick={() => setSelectedImage(null)}
+            onClick={() => setSelectedImage(null)} // Fermer au clic
           >
             <div className="relative w-full max-w-6xl p-6 bg-transparent">
+              {/* Bouton de fermeture */}
               <button
                 className="absolute top-6 right-6 text-white text-3xl bg-gray-900/70 p-2 rounded-full"
-                onClick={() => setSelectedImage(null)}
+                onClick={() => setSelectedImage(null)} // Fermer au clic
               >
                 ✖
               </button>
+
+              {/* Image affichée en grand */}
               <img
                 src={selectedImage}
                 alt="Agrandissement"
-                className="w-full max-h-[90vh] object-contain rounded-lg shadow-lg"
+                className="w-full h-full object-cover rounded-md"
               />
             </div>
           </div>,

app/components/ContactForm.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { sendMessage } from "../utils/sendMessage";
 
 export default function ContactForm() {
+  // États pour gérer les valeurs des champs de formulaire
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");

app/components/ContentSection.tsx

@@ -1,34 +1,40 @@
-import { fetchData } from "../utils/fetchData";
+import { fetchData } from "../utils/fetchData"; // Importation de la fonction fetchData pour récupérer les données depuis l'API
-import Carousel from "./Carousel";
+import Carousel from "./Carousel"; // Importation du composant Carousel pour afficher les images
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown from "react-markdown"; // Importation de ReactMarkdown pour rendre le texte riche en Markdown
 
+// Définition des propriétés du composant ContentSection
 interface ContentSectionProps {
   collection: string; // Nom de la collection (projects, events, blog, etc.)
-  slug: string;
+  slug: string; // Identifiant unique pour récupérer les données spécifiques
   titleClass?: string; // Permet de modifier le style du titre
   contentClass?: string; // Permet de modifier le style du contenu
 }
 
+// Composant principal ContentSection
 export default async function ContentSection({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
+  // Récupération des données depuis l'API en utilisant la fonction fetchData
   const data = await fetchData(collection, slug);
 
+  // Affichage d'un message si les données ne sont pas disponibles
   if (!data) {
     return <div>Contenu introuvable.</div>;
   }
 
+  // Déstructuration des données récupérées
   const { name, Resum: richText, picture, link, linkText } = data;
 
-  // Transformer les images de Strapi en format attendu par le carrousel
+  // Transformation des images de Strapi en format attendu par le carrousel
   const images = picture?.map((img: any) => ({
-    url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`,
+    url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`, // Utilisation de l'URL de l'image en format large ou originale
-    alt: img.name || "Image",
+    alt: img.name || "Image", // Texte alternatif pour l'image
   })) || [];
 
   return (
     <div className="max-w-3xl mx-auto p-6">
+      {/* Titre de la section */}
       <h1 className={titleClass || "text-3xl mb-6 font-bold text-gray-700"}>{name}</h1>
 
-      {/* Carrousel réutilisable */}
+      {/* Carrousel réutilisable pour afficher les images */}
       <Carousel images={images} className="w-full h-64" />
 
       {/* Contenu en Markdown */}

app/components/ContentSectionCompetences.tsx

@@ -6,6 +6,7 @@ import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw"; // ✅ Permet d'interpréter le HTML dans ReactMarkdown
 import ModalGlossaire from "./ModalGlossaire";
 
+// Définition des propriétés du composant ContentSectionCompetences
 interface ContentSectionProps {
   competenceData: any;
   glossaireData: any[];
@@ -22,6 +23,7 @@ interface GlossaireItem {
   images?: any[];
 }
 
+// Composant principal ContentSectionCompetences
 export default function ContentSectionCompetences({ competenceData, glossaireData, titleClass, contentClass }: ContentSectionProps) {
   const [selectedMot, setSelectedMot] = useState<GlossaireItem | null>(null);
 
@@ -29,8 +31,10 @@ export default function ContentSectionCompetences({ competenceData, glossaireDat
     return <div className="text-red-500 text-center">❌ Compétence introuvable.</div>;
   }
 
+  // Déstructuration des données de la compétence
   const { name, content, picture } = competenceData;
 
+  // Transformation des images de Strapi en format attendu par le carrousel
   const images = picture?.map((img: any) => ({
     url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`,
     alt: img.name || "Image de compétence",
@@ -74,9 +78,12 @@ export default function ContentSectionCompetences({ competenceData, glossaireDat
   }, [glossaireData]);
 
   return (
+    // ✅ Affichage de la compétence
     <div className="max-w-3xl mx-auto p-6">
+      {/* Titre de la section */}
       <h1 className={titleClass || "text-3xl mb-6 font-bold text-gray-700"}>{name}</h1>
 
+      {/* Carrousel pour afficher les images */}
       <CarouselCompetences images={images} className="w-full h-64" />
 
       {/* 🔥 Affichage du texte riche avec mots-clés cliquables */}

app/components/ContentSectionCompetencesContainer.tsx

@@ -1,6 +1,7 @@
 import { fetchDataCompetences, fetchDataGlossaire } from "../utils/fetchDataCompetences";
 import ContentSectionCompetences from "./ContentSectionCompetences";
 
+// Définition des propriétés du composant ContentSection
 interface ContentSectionProps {
   collection: string;
   slug: string;
@@ -8,6 +9,7 @@ interface ContentSectionProps {
   contentClass?: string;
 }
 
+// Composant principal ContentSection
 export default async function ContentSectionCompetencesContainer({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
   const competenceData = await fetchDataCompetences(collection, slug);
   const glossaireData = await fetchDataGlossaire();

app/components/Footer.jsx

@@ -1,18 +1,26 @@
 "use client"
 
-import {useState} from "react"
+import { useState } from "react"; // Importation du hook useState pour gérer l'état
 
 export default function Footer() {
-    const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0); // État pour suivre le nombre de clics
+
+  // Fonction pour gérer les clics sur le bouton
   function handleClick() {
-      setCount(count + 1)}
+    setCount(count + 1); // Incrémente le compteur de clics
+  }
 
   return (
     <footer className="bg-white/50 backdrop-blur rounded-lg">
       <div className="max-w-4xl mx-auto flex flex-col items-center py-6 text-sm text-gray-400">
+        {/* Affichage de l'année actuelle */}
         <p>&copy; {new Date().getFullYear()} Our Company.</p>
-      <p>Vous avez cliqué {count} fois sur le boutton.<button onClick={handleClick}>Click Me</button></p>
+        {/* Affichage du compteur de clics et du bouton */}
+        <p>
+          Vous avez cliqué {count} fois sur le bouton.
+          <button onClick={handleClick}>Click Me</button>
+        </p>
       </div>
     </footer>
-    )
+  );
 }

app/components/ModalGlossaire.tsx

@@ -1,18 +1,20 @@
 import { useEffect } from "react";
-import { createPortal } from "react-dom"; // ✅ Insère la modale dans <body>
+import { createPortal } from "react-dom"; // Insère la modale dans <body>
-import CarouselCompetences from "./CarouselCompetences";
+import CarouselCompetences from "./CarouselCompetences"; // Importation du composant CarouselCompetences pour afficher les images
 
+// Définition des propriétés du composant ModalGlossaire
 interface ModalGlossaireProps {
   mot: {
-    mot_clef: string;
+    mot_clef: string; // Mot-clé du glossaire
-    description: string;
+    description: string; // Description du mot-clé
-    images?: any[];
+    images?: any[]; // Images associées au mot-clé
   };
-  onClose: () => void;
+  onClose: () => void; // Fonction pour fermer la modale
 }
 
+// Composant principal ModalGlossaire
 export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
-  // 🔥 Désactiver le scroll du `body` quand la modale est ouverte
+  // Désactiver le scroll du `body` quand la modale est ouverte
   useEffect(() => {
     document.body.classList.add("overflow-hidden");
     return () => {
@@ -20,10 +22,10 @@ export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
     };
   }, []);
 
-  // ✅ Debug : Vérifier les images reçues
+  // Debug : Vérifier les images reçues
   console.log("🖼️ Images reçues dans la modale :", mot.images);
 
-  // ✅ Vérifier si `mot.images` est bien un tableau et contient des images
+  // Vérifier si `mot.images` est bien un tableau et contient des images
   const images = mot.images?.map((img: any) => {
     return {
       url: `http://localhost:1337${img.formats?.large?.url || img.url}`,
@@ -45,14 +47,14 @@ export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
         {/* Description */}
         <p className="text-gray-700 mb-6">{mot.description}</p>
 
-        {/* 🚀 Carrousel d'images si disponible */}
+        {/* Carrousel d'images si disponible */}
         {images.length > 0 ? (
           <CarouselCompetences images={images} className="w-full h-80" />
         ) : (
-          <p className="text-gray-500 text-center">Aucune image disponible</p>
+          <p className="text-gray-500">Aucune image disponible.</p>
         )}
       </div>
     </div>,
-    document.body // ✅ Fixe la modale au `body` pour qu'elle couvre toute la page
+    document.body
   );
 }

app/components/NavLink.jsx

@@ -1,14 +1,18 @@
 "use client"
 
-import Link from "next/link"
+import Link from "next/link"; // Importation du composant Link de Next.js pour la navigation
-import {usePathname} from "next/navigation"
+import { usePathname } from "next/navigation"; // Importation du hook usePathname pour obtenir le chemin actuel
 
 export default function NavLink(props) {
-    const pathname = usePathname()
+  const pathname = usePathname(); // Obtention du chemin actuel
-    const active = pathname === props.path
+  const active = pathname === props.path; // Vérification si le lien est actif
+
   return (
-        <Link className={active ? "opacity-100" : "opacity-50 hover:opacity-65"} href={props.path}>
+    <Link
-            {props.text}
+      className={active ? "opacity-100" : "opacity-50 hover:opacity-65"} // Classes CSS pour le style du lien
+      href={props.path} // Chemin de navigation
+    >
+      {props.text} {/* Texte du lien */}
     </Link>
-    )
+  );
 }

app/contact/page.js

@@ -1,9 +1,12 @@
-import ContactForm from "../components/ContactForm";
+import ContactForm from "../components/ContactForm"; // Importation du composant ContactForm
 
 export default function ContactPage() {
   return (
     <div className="max-w-3xl mx-auto p-6">
+      {/* Titre de la page */}
       <h1 className="text-3xl font-bold text-center mb-6">Contactez-moi</h1>
+      
+      {/* Texte d'introduction */}
       <p className="text-lg text-center mb-4">
         Vous pouvez me contacter via ce formulaire ou sur mes réseaux sociaux.
       </p>

app/globals.css

@@ -1,37 +1,42 @@
+/* Importation des styles de base, des composants et des utilitaires de Tailwind CSS */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* Définition des variables CSS pour les couleurs de fond et de premier plan */
 :root {
-  --background: #ffffff;
+  --background: #ffffff; /* Couleur de fond par défaut (clair) */
-  --foreground: #171717;
+  --foreground: #171717; /* Couleur de premier plan par défaut (foncé) */
 }
 
+/* Définition des variables CSS pour le mode sombre */
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
+    --background: #0a0a0a; /* Couleur de fond pour le mode sombre */
-    --foreground: #ededed;
+    --foreground: #ededed; /* Couleur de premier plan pour le mode sombre */
   }
 }
 
+/* Styles globaux pour le corps de la page */
 body {
-  color: var(--foreground);
+  color: var(--foreground); /* Utilisation de la couleur de premier plan définie */
-  background: var(--background);
+  background: var(--background); /* Utilisation de la couleur de fond définie */
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif; /* Police de caractères par défaut */
 }
 
+/* Définition d'une animation de fondu en entrée */
 @keyframes fade-in {
   from {
-    opacity: 0;
+    opacity: 0; /* Opacité initiale à 0 (invisible) */
-    transform: translateY(-10px);
+    transform: translateY(-10px); /* Déplacement initial vers le haut */
   }
   to {
-    opacity: 1;
+    opacity: 1; /* Opacité finale à 1 (visible) */
-    transform: translateY(0);
+    transform: translateY(0); /* Position finale */
   }
 }
 
+/* Classe utilitaire pour appliquer l'animation de fondu en entrée */
 .animate-fade-in {
-  animation: fade-in 0.5s ease-out;
+  animation: fade-in 0.5s ease-out; /* Animation de 0.5s avec une courbe de transition */
 }
-

app/layout.tsx

@@ -6,16 +6,17 @@ import "./assets/main.css";
 import NavLink from "./components/NavLink";
 
 export default function RootLayout({ children }) {
+  // États pour gérer la largeur et la hauteur du conteneur principal
   const [numElements, setNumElements] = useState(0);
   const [containerWidth, setContainerWidth] = useState("max-w-4xl");
   const [containerHeight, setContainerHeight] = useState("min-h-[50vh]");
 
   useEffect(() => {
-    // Supposons que children soit un tableau d'éléments
+    // Compter le nombre d'éléments enfants
     const elementsCount = React.Children.count(children);
     setNumElements(elementsCount);
 
-    // Ajustez la largeur en fonction du nombre d'éléments
+    // Ajuster la largeur et la hauteur en fonction du nombre d'éléments
     if (elementsCount > 5) {
       setContainerWidth("max-w-6xl");
       setContainerHeight("min-h-[80vh]");
@@ -31,11 +32,14 @@ export default function RootLayout({ children }) {
   return (
     <html lang="fr">
       <body>
+        {/* Conteneur principal avec image de fond */}
         <div className="bg-wallpaper min-h-[100dvh] grid grid-rows-[auto_1fr_auto]">
+          {/* Cercles de fond pour l'effet visuel */}
           <div className="absolute z-0 inset-0 overflow-hidden">
             <div className="circle-one blur-3xl w-64 h-64 rounded-full bg-rose-400/60 top-0 right-28 absolute"></div>
             <div className="circle-two blur-3xl w-64 h-64 rounded-full bg-indigo-400/60 bottom-0 left-28 absolute"></div>
           </div>
+          {/* En-tête avec navigation */}
           <header className="z-10 bg-white/50 backdrop-blur rounded-lg border-2 border-gray-500">
             <div className="max-w-4xl mx-auto flex items-center justify-between p-4">
               <h2 className="text-2xl font-bold">Portofolio Gras-Calvet Fernand</h2>
@@ -57,9 +61,11 @@ export default function RootLayout({ children }) {
               </nav>
             </div>
           </header>
+          {/* Conteneur principal pour le contenu */}
           <main className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 overflow-hidden`}>
             {children}
           </main>
+          {/* Pied de page */}
           <Footer />
         </div>
       </body>

app/portfolio/[slug]/page.tsx

@@ -1,5 +1,7 @@
-import ContentSection from "../../components/ContentSection";
+import ContentSection from "../../components/ContentSection"; // Importation du composant ContentSection
 
+// Composant principal de la page de détail du projet
 export default function Page({ params }: { params: { slug: string } }) {
+  // Rendu du composant ContentSection avec les paramètres de la collection et du slug
   return <ContentSection collection="projects" slug={params.slug} />;
 }

app/portfolio/page.jsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 
+// Fonction pour récupérer tous les projets depuis l'API Strapi
 async function getAllprojects() {
   try {
     const response = await fetch("http://localhost:1337/api/projects?populate=*");
@@ -14,13 +15,18 @@ async function getAllprojects() {
   }
 }
 
+// Composant principal de la page des projets
 export default async function Page() {
   const projects = await getAllprojects();
 
   return (
     <div>
+      {/* Titre de la page */}
       <h1 className="text-3xl mb-6 font-bold text-grey-700">Portfolio formation 42</h1>
+      
+      {/* Grille pour afficher les projets */}
       <div className="grid grid-cols-2 gap-6">
+        {/* Boucle sur les projets pour les afficher */}
         {projects.map((project) => {
           const picture = project.picture?.[0]; // Récupère la première image si elle existe
           const largeImageUrl = picture?.formats?.large?.url; // Vérifie que le format "large" existe
@@ -31,8 +37,10 @@ export default async function Page() {
 
           return (
             <div key={project.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100">
+              {/* Lien vers la page de détail du projet */}
               <Link href={`/portfolio/${project.slug}`}>
                 <div className="overflow-hidden">
+                  {/* Affichage de l'image du projet */}
                   {imageUrl ? (
                     <img
                       src={imageUrl}
@@ -46,7 +54,9 @@ export default async function Page() {
                   )}
                 </div>
                 <div className="p-4">
+                  {/* Affichage du nom du projet */}
                   <p className="font-bold text-xl mb-2">{project.name}</p>
+                  {/* Affichage de la description du projet */}
                   <p className="text-gray-700">{project.description}</p>
                 </div>
               </Link>

app/utils/fetchData.ts

@@ -1,23 +1,29 @@
-import qs from "qs";
+import qs from "qs"; // Importation de qs pour construire des requêtes de chaîne de requête
 
+// Fonction pour récupérer des données spécifiques depuis l'API Strapi
 export async function fetchData(collection: string, slug: string) {
+  // Construction de la requête avec des filtres et des relations à peupler
   const query = qs.stringify({
-    filters: { slug },
+    filters: { slug }, // Filtre basé sur le slug
-    populate: "picture",
+    populate: "picture", // On garde les images associées
   });
 
   try {
+    // Envoi de la requête à l'API Strapi
     const response = await fetch(`http://localhost:1337/api/${collection}?${query}`, {
-      cache: "no-store",
+      cache: "no-store", // Désactivation du cache pour obtenir les données les plus récentes
     });
 
+    // Vérification de la réponse de l'API
     if (!response.ok) {
       throw new Error("Failed to fetch data");
     }
 
+    // Récupération des données de la réponse
     const data = await response.json();
-    return data.data[0] || null;
+    return data.data[0] || null; // Retourne la première entrée ou null si aucune donnée n'est trouvée
   } catch (error) {
+    // Gestion des erreurs et log des erreurs
     console.error(`Error fetching ${collection} data:`, error);
     return null;
   }

app/utils/fetchDataCompetences.ts

@@ -1,7 +1,8 @@
-import qs from "qs";
+import qs from "qs"; // Importation de qs pour construire des requêtes de chaîne de requête
 
-// ✅ Fonction pour récupérer une compétence spécifique
+// Fonction pour récupérer une compétence spécifique
 export async function fetchDataCompetences(collection: string, slug: string) {
+  // Construction de la requête avec des filtres et des relations à peupler
   const query = qs.stringify({
     filters: {
       slug: { $eq: slug },
@@ -9,46 +10,58 @@ export async function fetchDataCompetences(collection: string, slug: string) {
     populate: "picture", // On garde les images des compétences
   });
 
+  // Log de la requête API pour le débogage
   console.log(`🛠️ Requête API Compétence : http://localhost:1337/api/${collection}?${query}`);
 
   try {
+    // Envoi de la requête à l'API Strapi
     const response = await fetch(`http://localhost:1337/api/${collection}?${query}`, {
       cache: "no-store",
     });
 
+    // Vérification de la réponse de l'API
     if (!response.ok) {
       throw new Error(`Failed to fetch competences data: ${response.status}`);
     }
 
+    // Récupération des données de la réponse
     const data = await response.json();
     console.log("✅ Données reçues (Compétence) :", data);
 
+    // Retourne la première compétence ou null si aucune donnée n'est trouvée
     return data.data[0] || null;
   } catch (error) {
+    // Gestion des erreurs et log des erreurs
     console.error("❌ Erreur lors de la récupération des compétences :", error);
     return null;
   }
 }
 
+// Fonction pour récupérer les données du glossaire
 export async function fetchDataGlossaire() {
   try {
+    // Log de la requête API pour le débogage
     console.log("🛠️ Requête API Glossaire : http://localhost:1337/api/glossaires?populate=images");
 
+    // Envoi de la requête à l'API Strapi
     const response = await fetch("http://localhost:1337/api/glossaires?populate=images", {
       cache: "no-store",
     });
 
+    // Vérification de la réponse de l'API
     if (!response.ok) {
       throw new Error(`Failed to fetch glossaire data: ${response.status}`);
     }
 
+    // Récupération des données de la réponse
     const data = await response.json();
     console.log("✅ Données reçues (Glossaire) :", data);
 
+    // Retourne les données du glossaire ou un tableau vide si aucune donnée n'est trouvée
     return data.data || [];
   } catch (error) {
+    // Gestion des erreurs et log des erreurs
     console.error("❌ Erreur lors de la récupération du glossaire :", error);
     return [];
   }
 }
-

app/utils/sendMessage.ts

@@ -1,10 +1,15 @@
+// Fonction pour envoyer un message à l'API Strapi
 export async function sendMessage(name: string, email: string, message: string) {
+  // Formatage de la date et de l'heure en français
   const dateTime = new Date().toLocaleString("fr-FR", { timeZone: "Europe/Paris" }); // ✅ Date formatée en français
 
+  // Ajout de la date à la fin du message
   const messageWithDate = `${message}\n\n📅 Envoyé le : ${dateTime}`; // ✅ Ajout de la date à la fin du message
 
+  // Log des informations du message avant l'envoi
   console.log("📨 Envoi du message...", { name, email, messageWithDate });
 
+  // Envoi du message à l'API Strapi
   const res = await fetch("http://localhost:1337/api/messages", {
     method: "POST",
     headers: {
@@ -19,14 +24,16 @@ export async function sendMessage(name: string, email: string, message: string)
     }),
   });
 
+  // Récupération de la réponse de l'API
   const responseData = await res.json();
 
+  // Gestion des erreurs de l'API
   if (!res.ok) {
     console.error("❌ Erreur API Strapi :", responseData);
     throw new Error(`Échec de l'envoi du message: ${responseData.error.message}`);
   }
 
+  // Log de la réussite de l'envoi du message
   console.log("✅ Message envoyé avec succès !", responseData);
   return responseData;
 }
-