toine/mon-site-perso
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
mrtoine 2025-09-20 14:16:14 +02:00
parent b216a187bd
commit f73c77f548
119 changed files with 4504 additions and 4829 deletions
Download patch file Download diff file Expand all files Collapse all files

148
frontend/app/components/Header.tsx Normal file
View file

@ -0,0 +1,148 @@
"use client";
// app/components/Header.tsx
import Link from "next/link";
import { useEffect, useState } from "react";
export default function Header() {
const [theme, setTheme] = useState<"light" | "dark">("light");
const [isTop, setIsTop] = useState(true);
// Initialise le thème en fonction du localStorage ou de la préférence système
useEffect(() => {
const saved = typeof window !== "undefined" ? localStorage.getItem("theme") : null;
const prefersDark = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
const initial = (saved === "light" || saved === "dark") ? (saved as "light" | "dark") : (prefersDark ? "dark" : "light");
setTheme(initial);
document.documentElement.setAttribute("data-theme", initial);
}, []);
// Détecte si l'on est tout en haut de la page
useEffect(() => {
const onScroll = () => setIsTop(window.scrollY <= 0);
onScroll(); // état initial au chargement
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const toggleTheme = () => {
const next = theme === "dark" ? "light" : "dark";
setTheme(next);
document.documentElement.setAttribute("data-theme", next);
try {
localStorage.setItem("theme", next);
} catch {}
};
return (
<header className={isTop ? "minimalist-pro is-top" : "minimalist-pro"}>
<div className="logo">
<Link href="/">
<span className="name">Anthony Violet</span>
<span className="tagline">Développeur Freelance & Digital Nomad</span>
</Link>
</div>
<nav>
<ul>
<li><Link href="/projects" >Projets</Link></li>
<li><Link href="/competences">Compétences</Link></li>
<li><Link href="#blog">Blog Voyage</Link></li>
<li><Link href="/contact">Contact</Link></li>
<li><Link href="https://fr.malt.be/profile/anthonyviolet1" target="_blank">Malt</Link></li>
<li><Link href="https://www.linkedin.com/in/anthony-violet/" target="_blank">LinkedIn</Link></li>
</ul>
</nav>
<div className="cta">
<button
type="button"
className="theme-toggle__btn"
aria-label={theme === "dark" ? "Activer le thème clair" : "Activer le thème sombre"}
onClick={toggleTheme}
title={theme === "dark" ? "Mode clair" : "Mode sombre"}
>
{theme === "dark" ? "☀️" : "🌙"}
</button>
<Link href="mailto:tonemail@domaine.com" className="button">Travaillons ensemble</Link>
</div>
</header>
/*<header className="cyberpunk">
<div className="glitch-logo">
<Link href="/">
<span data-text="Anthony Violet">Anthony Violet</span>
<span className="subtitle">// Développeur Full Stack & Créateur de Jeux</span>
</Link>
</div>
<nav className="neon-nav">
<ul>
<li><Link href="#projets" className="neon-link">/projets</Link></li>
<li><Link href="#tech" className="neon-link">/tech-stack</Link></li>
<li><Link href="#blog" className="neon-link">/toine-traveller</Link></li>
<li><Link href="#contact" className="neon-link">/contact@terminal</Link></li>
</ul>
</nav>
<div className="status-bar">
<span>En ligne █</span>
<span>Disponible pour missions</span>
</div>
</header>
<header className="sidebar-header">
<div className="profile-pic">
<img src="ton-avatar.jpg" alt="Anthony Violet" />
</div>
<div className="profile-info">
<h1>Anthony Violet</h1>
<p>Freelance Dev | Digital Nomad | Builder de jeux & apps</p>
</div>
<nav>
<ul>
<li><Link href="#projets"><i className="icon-code"></i> Projets</Link></li>
<li><Link href="#about"><i className="icon-user"></i> À propos</Link></li>
<li><Link href="#blog"><i className="icon-globe"></i> Blog</Link></li>
<li><Link href="#contact"><i className="icon-mail"></i> contact</Link></li>
</ul>
</nav>
<div className="social-links">
<Link href="https://github.com/tonuser" target="_blank"><i className="icon-github"></i></Link>
<Link href="https://linkedin.com/in/anthony-violet" target="_blank"><i className="icon-linkedin"></i></Link>
</div>
</header>
<header className="interactive-header">
<div className="typewriter">
<h1>Bonjour, je suis <span className="typed-text">Anthony Violet</span></h1>
<p>Je code en <span className="tech-tag">JavaScript</span>, <span className="tech-tag">Python</span>, et j'explore le monde.</p>
</div>
<nav>
<ul>
<li><Link href="#projets">Mes réalisations</Link></li>
<li><Link href="#cv">Mon CV</Link></li>
<li><Link href="#blog">Mes aventures</Link></li>
</ul>
</nav>
<div className="language-switcher">
<button>FR</button>
<button>EN</button>
</div>
</header>
<header className="dark-header">
<div className="container">
<Link href="/" className="logo">
<img src="logo.svg" alt="Logo Anthony Violet" />
</Link>
<nav>
<ul>
<li><Link href="#projets">Projets</Link></li>
<li><Link href="#services">Services</Link></li>
<li><Link href="#blog">Blog</Link></li>
<li><Link href="#contact">Me contacter</Link></li>
</ul>
</nav>
</div>
<div className="theme-toggle">
<button id="theme-button"><i className="icon-moon"></i></button>
</div>
</header>*/
);
}