Gabriel Kaszewski
8a921b0423
- Created "My 2023 Coding Edition" post detailing projects and experiences in Rust and game development. - Added "My 2024 and 2025 roadmap" outlining goals and projects for the upcoming years. - Introduced "Python Tutorial - Introduction" and "Python - Variables" posts to teach Python programming basics. - Published "ROADMAP for 2023" to outline initial goals for the year. - Added "My Rust little adventure" post summarizing various Rust projects undertaken. - Released "Spanish Inquisition - 3.0.1 UPDATE" detailing the latest game update and features. - Added multiple background images in AVIF format for website use. - Removed unused SVG files to clean up the public directory.
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
"use client"; // This must be a client component to use React hooks
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
|
|
// --- Configuration ---
|
|
// Add the paths to your 5 background images here.
|
|
// Make sure they are in the `public/backgrounds` directory.
|
|
const images = [
|
|
"/backgrounds/1.avif",
|
|
"/backgrounds/2.avif",
|
|
"/backgrounds/3.avif",
|
|
"/backgrounds/4.avif",
|
|
"/backgrounds/5.avif",
|
|
];
|
|
|
|
const SWITCH_INTERVAL = 60000; // 60 seconds
|
|
|
|
export default function SwitchingBackground() {
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
// Set up an interval to switch the image
|
|
const timer = setInterval(() => {
|
|
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
|
|
}, SWITCH_INTERVAL);
|
|
|
|
// Clear the interval when the component unmounts to prevent memory leaks
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="fixed inset-0 -z-10 h-full w-full">
|
|
{images.map((src, index) => (
|
|
<Image
|
|
key={src}
|
|
src={src}
|
|
alt={`Background image ${index + 1}`}
|
|
fill
|
|
className={`object-cover blur-md scale-105 transition-opacity duration-1000 ease-in-out ${
|
|
index === currentImageIndex ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
// Preload the next image for a smoother transition
|
|
priority={index === (currentImageIndex + 1) % images.length}
|
|
/>
|
|
))}
|
|
{/* Adds a subtle glossy overlay effect */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-transparent via-transparent to-white/10" />
|
|
</div>
|
|
);
|
|
}
|