From 88413c35d309f2e41391f1b8b6da0fd45f072d0e Mon Sep 17 00:00:00 2001
From: Ladebeze66 <fgras.ca@gmail.com>
Date: Wed, 19 Feb 2025 14:24:50 +0100
Subject: [PATCH] responsive2

---
 app/layout.tsx | 80 ++++++++++++++++++++------------------------------
 1 file changed, 32 insertions(+), 48 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 0082f96..d864815 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -37,59 +37,43 @@ const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
           <div className="circle-one blur-3xl w-40 md:w-64 h-40 md:h-64 rounded-full bg-rose-400/60 top-0 right-10 md:right-28 absolute"></div>
           <div className="circle-two blur-3xl w-40 md:w-64 h-40 md:h-64 rounded-full bg-indigo-400/60 bottom-0 left-10 md:left-28 absolute"></div>
           </div>
-          <header className="z-10 bg-white/50 backdrop-blur rounded-lg border-2 font-orbitron-16-bold border-gray-500 px-4 py-2 md:px-6">
-            <div className="max-w-4xl mx-auto flex items-center justify-between">
-              <h2 className="text-xl md:text-2xl font-orbitron-24-bold-italic">Portfolio Gras-Calvet Fernand</h2>
-    
-          {/* Bouton menu burger */}
-          <button className="md:hidden p-2 bg-gray-300 rounded" onClick={toggleMenu}>
-            ☰
-          </button>
+        <header className="relative h-16 md:h-16 z-20 bg-white/50 backdrop-blur-md border-b-2 border-gray-500 px-4 py-2 md:px-6 fixed top-0 left-0 w-full shadow-md">
+                  <div className="max-w-4xl mx-auto flex items-center justify-between">
+           <h2 className="text-xl md:text-2xl font-orbitron-24-bold-italic">Portfolio Gras-Calvet Fernand</h2>
 
-          {/* Menu mobile */}
-          {isMenuOpen && (
-            <nav className="fixed inset-0 bg-black/95 backdrop-blur-2xl flex flex-col items-center justify-center space-y-10 z-50 md:hidden text-white font-orbitron-24-bold tracking-wide shadow-lg border-l border-gray-600">
+           {/* Bouton menu burger */}
+           <button className="md:hidden p-2 bg-gray-300 rounded" onClick={toggleMenu}>
+             ☰
+         </button>
+       {/* Menu desktop */}
+       <nav className="hidden md:flex">
+         <ul className="flex gap-x-4 text-black-500 font-orbitron-16-bold">
+           <li><NavLink text="Accueil" path="/" /></li>
+           <li><NavLink text="Portfolio" path="/portfolio" /></li>
+           <li><NavLink text="Compétences" path="/competences" /></li>
+           <li><NavLink text="Contact" path="/contact" /></li>
+         </ul>
+       </nav>
+     </div>
+ </header>
 
-              {/* Bouton de fermeture */}
-              <button className="absolute top-6 right-6 text-3xl text-white" onClick={toggleMenu}>
-                ✖
-              </button>
+ {isMenuOpen && (
+  <div className="fixed inset-0 bg-black/50 z-40 flex items-start justify-start p-4">
+    <nav className="w-[70%] max-w-md h-auto min-h-[60vh] max-h-[60vh] bg-gray-800/70 backdrop-blur-lg flex flex-col items-center justify-center space-y-6 z-50 md:hidden text-white font-orbitron-24-bold tracking-wide shadow-lg overflow-y-auto rounded-lg">
 
-              {/* Liens du menu */}
-              <NavLink text="Accueil"
-              path="/"
-              onClick={toggleMenu}
-              className="text-2xl text-white hover:text-gray-900 px-6 py-3 bg-gray-800/50 rounded-lg transition-all duration-300 hover:bg-white" />
-              <NavLink text="Portfolio"
-              path="/portfolio"
-              onClick={toggleMenu}
-              className="text-2xl text-white hover:text-gray-900 px-6 py-3 bg-gray-800/50 rounded-lg transition-all duration-300 hover:bg-white" />
-              <NavLink text="Compétences"
-              path="/competences"
-              onClick={toggleMenu}
-              className="text-2xl text-white hover:text-gray-900 px-6 py-3 bg-gray-800/50 rounded-lg transition-all duration-300 hover:bg-white" />
-              <NavLink text="Contact"
-              path="/contact"
-              onClick={toggleMenu}
-              className="text-2xl text-white hover:text-gray-900 px-6 py-3 bg-gray-800/50 rounded-lg transition-all duration-300 hover:bg-white" />
-            </nav>
-          )}
+      {/* Bouton de fermeture */}
+      <button className="absolute top-6 right-6 text-3xl text-white" onClick={toggleMenu}>
+       ✖
+     </button>
 
-
-
-    {/* Menu desktop */}
-    <nav className="hidden md:flex">
-      <ul className="flex gap-x-4 text-black-500 font-orbitron-16-b</nav>old">
-        <li><NavLink text="Accueil" path="/" /></li>
-        <li><NavLink text="Portfolio" path="/portfolio" /></li>
-        <li><NavLink text="Compétences" path="/competences" /></li>
-        <li><NavLink text="Contact" path="/contact" /></li>
-      </ul>
+     {/* Liens du menu */}
+     <NavLink text="Accueil" path="/" onClick={toggleMenu} className="text-2xl text-white hover:text-gray-900 px-6 py-3 bg-gray-800/50 rounded-lg transition-all duration-300 hover:bg-white" />
+      <NavLink text="Portfolio" path="/portfolio" onClick={toggleMenu} className="text-2xl text-white hover:text-gray-900 px-6 py-3 bg-gray-800/50 rounded-lg transition-all duration-300 hover:bg-white" />
+      <NavLink text="Compétences" path="/competences" onClick={toggleMenu} className="text-2xl text-white hover:text-gray-900 px-6 py-3 bg-gray-800/50 rounded-lg transition-all duration-300 hover:bg-white" />
+      <NavLink text="Contact" path="/contact" onClick={toggleMenu} className="text-2xl text-white hover:text-gray-900 px-6 py-3 bg-gray-800/50 rounded-lg transition-all duration-300 hover:bg-white" />
     </nav>
-  </div>
-</header>
-
-
+    </div>
+)}
 
           <main className="relative z-10">
             {children}