Ladebeze66/devsite
1
0
Fork 0
mirror of https://github.com/Ladebeze66/devsite.git synced 2025-12-13 12:46:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

responsive1

Browse Source
This commit is contained in:
Ladebeze66 2025-02-19 13:07:04 +01:00
parent faff85e495
commit 16b51b1968
1 changed files with 45 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/layout.tsx
View File

@ -8,6 +8,10 @@ import NavLink from "./components/NavLink";
export default function RootLayout({ children }) {
const [visitCount, setVisitCount] = useState(0);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
useEffect(() => {
// Récupère le compteur de visites depuis localStorage
const visits = localStorage.getItem("visitCount");
@ -19,19 +23,42 @@ export default function RootLayout({ children }) {
return (
<html lang="fr">
<body>
<div className="relative bg-wallpaper min-h-[100dvh] w-full max-w-none grid grid-rows-[auto_1fr_auto]">
<div className="relative min-h-[100dvh] w-full grid grid-rows-[auto_1fr_auto]">
{/* Conserve le fond en plein écran */}
<div className="absolute inset-0 bg-wallpaper"></div>
{/* Contenu centré avec largeur contrôlée */}
<div className="relative z-10 max-w-5xl w-full mx-auto">
</div>
{/* Cercles animés */}
<div className="absolute z-0 inset-0 overflow-hidden">
<div className="circle-one blur-3xl w-64 h-64 rounded-full bg-rose-400/60 top-0 right-28 absolute"></div>
<div className="circle-two blur-3xl w-64 h-64 rounded-full bg-indigo-400/60 bottom-0 left-28 absolute"></div>
<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 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>
<header className="z-10 bg-white/50 backdrop-blur rounded-lg border-2 border-gray-500">
<div className="max-w-4xl mx-auto flex items-center justify-between p-4">
<h2 className="text-2xl font-orbitron-24-bold-italic">Portfolio Gras-Calvet Fernand</h2>
<nav>
<ul className="flex gap-x-7 text-black-500 font-orbitron-16-bold">
{/* Bouton menu burger */}
<button className="md:hidden p-2 bg-gray-300 rounded" onClick={toggleMenu}>
☰
</button>
{/* Menu mobile */}
{isMenuOpen && (
<nav className="absolute top-16 left-0 w-full bg-white shadow-md flex flex-col items-center space-y-3 py-4 md:hidden">
<NavLink text="Accueil" path="/" />
<NavLink text="Portfolio" path="/portfolio" />
<NavLink text="Compétences" path="/competences" />
<NavLink text="Contact" path="/contact" />
</nav>
)}
{/* 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>
@ -39,7 +66,9 @@ export default function RootLayout({ children }) {
</ul>
</nav>
</div>
</header>
</header>
<main className="relative z-10">
{children}