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 ( -
+

Mes Compétences

-
+ {/* Grille dynamique pour un affichage équilibré */} +
{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 ( -
+
-
+
{picture?.name
-
+

{competence.name}

-

{competence.description}

+

{competence.description}

); })}
-
+
); } 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(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 ( @@ -61,11 +24,10 @@ export default function RootLayout({ children }) {
-
-
- {children} -
-
+ {/* Ne pas forcer de largeur ici, chaque page gère son `main` */} +
+ {children} +