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

responsive3

Browse Source
This commit is contained in:
Ladebeze66 2025-02-19 15:32:56 +01:00
parent 88413c35d3
commit 62d93f5dcd
1 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/layout.tsx
View File

@ -1,16 +1,18 @@
"use client";
import React, { useEffect, useState } from "react";
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 }) {
const [visitCount, setVisitCount] = useState(0);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const menuRef = useRef(null); // Référence pour le menu burger
const [isMenuOpen, setIsMenuOpen] = useState(false);
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
useEffect(() => {
// Récupère le compteur de visites depuis localStorage
@ -28,23 +30,26 @@ const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
<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>
<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-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 */}
<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>
<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>
{/* Menu desktop */}
<nav className="hidden md:flex">
<ul className="flex gap-x-4 text-black-500 font-orbitron-16-bold">
@ -57,23 +62,23 @@ const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
</div>
</header>
{/* Menu mobile */}
{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">
<div ref={menuRef} className="fixed inset-0 bg-black/50 z-40 flex items-start justify-end p-4">
<nav className="w-[60%] max-w-sm h-auto min-h-[50vh] max-h-[50vh] bg-gray-800/90 backdrop-blur-lg flex flex-col items-center justify-center space-y-4 z-50 md:hidden text-white font-orbitron-24-bold tracking-wide shadow-lg overflow-y-auto rounded-lg p-6">
{/* Bouton de fermeture */}
<button className="absolute top-6 right-6 text-3xl text-white" onClick={toggleMenu}>
<button className="absolute top-4 right-4 text-2xl text-white" onClick={toggleMenu}>
✖
</button>
{/* 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" />
<NavLink text="Accueil" path="/" onClick={toggleMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-500" />
<NavLink text="Portfolio" path="/portfolio" onClick={toggleMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-500" />
<NavLink text="Compétences" path="/competences" onClick={toggleMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-500" />
<NavLink text="Contact" path="/contact" onClick={toggleMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-500" />
</nav>
</div>
)}
)}
<main className="relative z-10">
{children}