From 4530b6c762d26def3feb8945b3a955fa65cb1774 Mon Sep 17 00:00:00 2001
From: Ladebeze66 <fgras.ca@gmail.com>
Date: Sat, 1 Feb 2025 17:14:09 +0000
Subject: [PATCH] five

---
 app/Competences/page.jsx | 17 +++++++-------
 app/layout.tsx           | 48 +++++-----------------------------------
 app/page.tsx             |  6 ++---
 app/portfolio/page.jsx   | 16 +++++++-------
 4 files changed, 25 insertions(+), 62 deletions(-)

diff --git a/app/Competences/page.jsx b/app/Competences/page.jsx
index f7a6f7c..490f291 100644
--- a/app/Competences/page.jsx
+++ b/app/Competences/page.jsx
@@ -20,33 +20,34 @@ export default async function Page() {
   const competences = await getAllCompetences();
 
   return (
-    <div className="w-full p-6">
+    <main className="w-full p-6">
       <h1 className="text-3xl mb-6 font-bold text-gray-700">Mes Compétences</h1>
 
-      <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(250px,1fr))]">
+      {/* Grille dynamique pour un affichage équilibré */}
+      <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(280px,1fr))] max-w-6xl mx-auto">
         {competences.map((competence) => {
           const picture = competence.picture?.[0]; // Récupère la première image si elle existe
           const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
 
           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">
+            <div key={competence.id} className="bg-white rounded-lg shadow-md overflow-hidden w-72 h-96 flex flex-col">
               <Link href={`/competences/${competence.slug}`}>
-                <div className="overflow-hidden">
+                <div className="overflow-hidden w-full h-48">
                   <img
                     src={imageUrl}
                     alt={picture?.name || "Competence image"}
-                    className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
+                    className="w-full h-full object-cover object-center"
                   />
                 </div>
-                <div className="p-4">
+                <div className="p-4 flex-grow">
                   <p className="font-bold text-xl mb-2">{competence.name}</p>
-                  <p className="text-gray-700">{competence.description}</p>
+                  <p className="text-gray-700 text-sm line-clamp-3">{competence.description}</p>
                 </div>
               </Link>
             </div>
           );
         })}
       </div>
-    </div>
+    </main>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 83037d2..06480a6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,48 +1,11 @@
 "use client";
 
-import React, { useEffect, useState, useRef } from "react";
+import React from "react";
 import Footer from "./components/Footer";
 import "./assets/main.css";
 import NavLink from "./components/NavLink";
 
 export default function RootLayout({ children }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState("w-full"); // ✅ Par défaut pleine largeur
-  const [containerHeight, setContainerHeight] = useState("min-h-[50vh]");
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const childCount = containerRef.current.children.length; // 📌 Compte le nombre d'enfants
-
-    // 📌 Ajuster la largeur UNIQUEMENT si peu d'éléments
-    if (childCount <= 2) {
-      setContainerWidth("max-w-3xl"); // ✅ Rétrécir pour la home ou peu de contenu
-    } else {
-      setContainerWidth("w-full"); // ✅ Sinon pleine largeur
-    }
-
-    // 📌 Ajuster la hauteur dynamiquement
-    const observer = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        const contentHeight = entry.contentRect.height;
-
-        if (contentHeight > 800) {
-          setContainerHeight("min-h-[90vh]");
-        } else if (contentHeight > 600) {
-          setContainerHeight("min-h-[80vh]");
-        } else if (contentHeight > 400) {
-          setContainerHeight("min-h-[70vh]");
-        } else {
-          setContainerHeight("min-h-[50vh]");
-        }
-      }
-    });
-
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, [children]);
-
   return (
     <html lang="fr">
       <body>
@@ -61,11 +24,10 @@ export default function RootLayout({ children }) {
             </div>
           </header>
 
-          <div className="overflow-x-auto">
-            <main ref={containerRef} className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 transition-all duration-300`}>
-              {children}
-            </main>
-          </div>
+          {/* Ne pas forcer de largeur ici, chaque page gère son `main` */}
+          <main className="w-full mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 transition-all duration-300">
+            {children}
+          </main>
 
           <Footer />
         </div>
diff --git a/app/page.tsx b/app/page.tsx
index d3e2f3c..036f39f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -30,14 +30,14 @@ export default async function HomePage() {
   const imageUrl = photo?.url ? `${baseUrl}${photo.url}` : null;
 
   return (
-    <div className="flex flex-col items-center justify-center homepage-content p-6">
+    <main className="max-w-3xl mx-auto flex flex-col items-center justify-center p-6">
       {/* Texte court (title) */}
       <h1 className="text-3xl font-bold text-gray-800 mb-4">{title}</h1>
 
       {/* Photo en cadre ovale avec effet hover */}
       {imageUrl ? (
         <div className="relative w-64 h-64 rounded-full overflow-hidden shadow-lg border-4 border-gray-300 transition-transform duration-300 hover:scale-110">
-          <img src={imageUrl} alt="Photo de profil" className="w-full h-full object-cover" />
+          <img src={imageUrl} alt="Photo de profil" className="w-full h-full object-cover object-center" />
         </div>
       ) : (
         <div className="w-64 h-64 flex items-center justify-center bg-gray-500 text-gray-200 rounded-full shadow-md">
@@ -49,6 +49,6 @@ export default async function HomePage() {
       <div className="mt-6 text-lg text-black-700 max-w-2xl p-4 text-center">
         <ReactMarkdown>{cv}</ReactMarkdown>
       </div>
-    </div>
+    </main>
   );
 }
diff --git a/app/portfolio/page.jsx b/app/portfolio/page.jsx
index e1b39f4..4446267 100644
--- a/app/portfolio/page.jsx
+++ b/app/portfolio/page.jsx
@@ -20,36 +20,36 @@ export default async function Page() {
   const projects = await getAllprojects();
 
   return (
-    <div className="w-full p-6">
+    <main className="w-full p-6">
       {/* Titre de la page */}
       <h1 className="text-3xl mb-6 font-bold text-gray-700">Portfolio formation 42</h1>
 
       {/* Grille dynamique pour afficher les projets */}
-      <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(250px,1fr))]">
+      <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(280px,1fr))] max-w-6xl mx-auto">
         {projects.map((project) => {
           const picture = project.picture?.[0]; // Récupère la première image si elle existe
           const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
 
           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">
+            <div key={project.id} className="bg-white rounded-lg shadow-md overflow-hidden w-72 h-96 flex flex-col">
               {/* Lien vers la page de détail du projet */}
               <Link href={`/portfolio/${project.slug}`}>
-                <div className="overflow-hidden">
+                <div className="overflow-hidden w-full h-48">
                   <img
                     src={imageUrl}
                     alt={picture?.name || "Project image"}
-                    className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
+                    className="w-full h-full object-cover"
                   />
                 </div>
-                <div className="p-4">
+                <div className="p-4 flex-grow">
                   <p className="font-bold text-xl mb-2">{project.name}</p>
-                  <p className="text-gray-700">{project.description}</p>
+                  <p className="text-gray-700 text-sm line-clamp-3">{project.description}</p>
                 </div>
               </Link>
             </div>
           );
         })}
       </div>
-    </div>
+    </main>
   );
 }