julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor HeroSection component: Remove mouse tracking functionality and simplify gradient background styling for improved performance and clarity.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-11 06:45:42 +01:00
parent 7dbd044859
commit 6c08789555
1 changed files with 2 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/HeroSection.tsx
View File

@@ -2,34 +2,9 @@
import { useBackgroundImage } from "@/hooks/usePreferences";
import Link from "next/link";
import { useState, useEffect, useRef } from "react";
export default function HeroSection() {
const backgroundImage = useBackgroundImage("home", "/got-2.jpg");
const titleRef = useRef<HTMLSpanElement>(null);
const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (titleRef.current) {
const rect = titleRef.current.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
setMousePosition({
x: Math.max(0, Math.min(100, x)),
y: Math.max(0, Math.min(100, y)),
});
}
};
window.addEventListener("mousemove", handleMouseMove);
return () => window.removeEventListener("mousemove", handleMouseMove);
}, []);
// Calculer la position du gradient basée sur la souris avec plus d'amplitude
const gradientPosition = mousePosition.x;
const glowIntensity = 12 + mousePosition.x / 5;
const glowOpacity = 0.4 + mousePosition.y / 250;
return (
<section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
@@ -50,44 +25,19 @@ export default function HeroSection() {
<div className="w-full flex justify-center mb-4 overflow-hidden">
<h1 className="text-4xl sm:text-5xl md:text-8xl lg:text-9xl xl:text-9xl font-gaming font-black tracking-tight relative break-words">
<span
ref={titleRef}
className="title-animated inline-block relative z-10"
style={{
backgroundImage: `linear-gradient(90deg, #daa520 0%, #ffa500 ${Math.max(
10,
gradientPosition - 20
)}%, #ff8c00 ${gradientPosition}%, #ffa500 ${Math.min(
90,
gradientPosition + 20
)}%, #daa520 100%)`,
backgroundImage: `linear-gradient(90deg, #daa520 0%, #ffa500 30%, #ff8c00 50%, #ffa500 70%, #daa520 100%)`,
backgroundSize: "200% auto",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
color: "transparent",
transition: "background-image 0.15s ease-out",
filter: `drop-shadow(0 0 ${glowIntensity}px rgba(255, 140, 0, ${glowOpacity}))`,
filter: `drop-shadow(0 0 12px rgba(255, 140, 0, 0.4))`,
}}
>
GAME.OF.TECH
</span>
{/* Glow effect qui suit la souris */}
<span
className="absolute inset-0 pointer-events-none"
style={{
backgroundImage: `linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.3) ${gradientPosition}%, transparent 100%)`,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
filter: `blur(${10 + mousePosition.x / 20}px)`,
opacity: 0.5,
zIndex: 0,
transition: "all 0.15s ease-out",
}}
aria-hidden="true"
>
GAME.OF.TECH
</span>
</h1>
</div>