contentfirstpart

app/assets/main.css

@@ -71,4 +71,11 @@
   100% {
     transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
   }
+}
+
+/* Classe pour agrandir le conteneur */
+.large-container {
+  max-width: 72rem; /* Largeur maximale de 72rem */
+  margin: 0 auto; /* Centrer horizontalement */
+  padding: 1.5rem; /* Padding de 1.5rem */
 }

app/layout.tsx

@@ -17,7 +17,10 @@ export default function RootLayout({ children }) {
     setNumElements(elementsCount);
 
     // Ajuster la largeur et la hauteur en fonction du nombre d'éléments
-    if (elementsCount > 5) {
+    if (elementsCount > 10) {
+      setContainerWidth("max-w-full");
+      setContainerHeight("min-h-[90vh]");
+    } else if (elementsCount > 5) {
       setContainerWidth("max-w-6xl");
       setContainerHeight("min-h-[80vh]");
     } else if (elementsCount > 3) {

app/portfolio/page.jsx

@@ -19,8 +19,18 @@ async function getAllprojects() {
 export default async function Page() {
   const projects = await getAllprojects();
 
+  // Déterminer la largeur du conteneur en fonction du nombre de projets
+  let containerWidth = "max-w-4xl";
+  if (projects.length > 10) {
+    containerWidth = "max-w-full";
+  } else if (projects.length > 5) {
+    containerWidth = "max-w-6xl";
+  } else if (projects.length > 3) {
+    containerWidth = "max-w-5xl";
+  }
+
   return (
-    <div>
+    <div className={`large-container mx-auto p-6 ${containerWidth}`}>
       {/* Titre de la page */}
       <h1 className="text-3xl mb-6 font-bold text-grey-700">Portfolio formation 42</h1>