"use client"; import React, { useEffect, useState, useRef } from "react"; import Footer from "./components/Footer"; import "./assets/main.css"; import NavLink from "./components/NavLink"; export default function RootLayout({ children }) { // Référence pour observer la taille du conteneur const containerRef = useRef(null); const [containerWidth, setContainerWidth] = useState("max-w-4xl"); const [containerHeight, setContainerHeight] = useState("min-h-[50vh]"); useEffect(() => { const observer = new ResizeObserver((entries) => { for (let entry of entries) { const width = entry.contentRect.width; if (width > 1400) { setContainerWidth("max-w-full"); } else if (width > 1200) { setContainerWidth("max-w-6xl"); } else if (width > 1000) { setContainerWidth("max-w-5xl"); } else { setContainerWidth("max-w-4xl"); } } }); if (containerRef.current) { observer.observe(containerRef.current); } return () => observer.disconnect(); }, []); return ( {/* Conteneur principal avec image de fond */}

{/* Cercles de fond pour l'effet visuel */}

{/* En-tête avec navigation */}

Portofolio Gras-Calvet Fernand

{/* Conteneur principal avec ajustement dynamique et scroll horizontal si nécessaire */}

{children}

{/* Pied de page */}

); }