diff --git a/public/images/battlesnake-neon-logo.jpg b/public/images/battlesnake-neon-logo.jpg new file mode 100644 index 0000000..c254f92 Binary files /dev/null and b/public/images/battlesnake-neon-logo.jpg differ diff --git a/public/images/grid-background-2.png b/public/images/grid-background-2.png new file mode 100644 index 0000000..6c46b05 Binary files /dev/null and b/public/images/grid-background-2.png differ diff --git a/public/images/grid-background-3.png b/public/images/grid-background-3.png new file mode 100644 index 0000000..2b33d05 Binary files /dev/null and b/public/images/grid-background-3.png differ diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 8eb0022..03fccee 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -1,34 +1,148 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import "../scss/components/Hero.scss"; -import Services from "./Services"; function Hero() { + const canvasRef = useRef(null); + + useEffect(() => { + // Create a cyberpunk cursor effect + const handleMouseMove = (e) => { + const cursor = document.querySelector(".cyberpunk-cursor"); + if (cursor) { + cursor.style.left = `${e.clientX}px`; + cursor.style.top = `${e.clientY}px`; + } + }; + + window.addEventListener("mousemove", handleMouseMove); + + return () => { + window.removeEventListener("mousemove", handleMouseMove); + }; + }, []); + + // Matrix digital rain effect + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext("2d"); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + + // Japanese katakana characters + some latin characters and numbers + const katakana = + "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + const nums = "0123456789"; + const alphabet = katakana + latin + nums; + + const fontSize = 16; + const columns = canvas.width / fontSize; + + // Array to store the y position of each column + const drops = []; + for (let i = 0; i < columns; i++) { + drops[i] = Math.random() * -100; + } + + // Function to get a random character from the alphabet + const getRandomChar = () => { + return alphabet[Math.floor(Math.random() * alphabet.length)]; + }; + + // Drawing the characters + const draw = () => { + // Black with opacity to create the fade effect + ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.fillStyle = "#0F0"; // Green text + ctx.font = `${fontSize}px monospace`; + + // Loop over each column + for (let i = 0; i < drops.length; i++) { + // Get a random character + const text = getRandomChar(); + + // Calculate x position (column * fontSize) + const x = i * fontSize; + + // Calculate y position (current drop position) + const y = drops[i] * fontSize; + + // Draw the character + ctx.fillText(text, x, y); + + // Randomly change the character's color to create a glowing effect + if (Math.random() > 0.975) { + ctx.fillStyle = "#FFF"; // White for glow effect + ctx.fillText(text, x, y); + ctx.fillStyle = "#0F0"; // Back to green + } + + // Reset the drop when it reaches the bottom or randomly + if (y > canvas.height && Math.random() > 0.975) { + drops[i] = 0; + } + + // Increment y coordinate for the drop + drops[i]++; + } + + // Call the draw function again on the next frame + requestAnimationFrame(draw); + }; + + // Handle window resize + const handleResize = () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + // Recalculate columns + const newColumns = canvas.width / fontSize; + // Adjust drops array + if (newColumns > drops.length) { + for (let i = drops.length; i < newColumns; i++) { + drops[i] = Math.random() * -100; + } + } + }; + + window.addEventListener("resize", handleResize); + + // Start the animation + draw(); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + return (
-
-

Welcome to Bytecamp!!!

-

Play for Fun!

-

- A competitive game where your code is the controller.
All you need is - a web server that responds to the Battlesnake API. -

- -
-
-
+ +
+
+ +
+
battle snake game +
+
+ +
+
- {/*
Battle
-
📈
-
👁️
-
Available for Freelance
*/} - {/*
- -
*/}
+ +
); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 7b94987..c7533cb 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,36 +1,93 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import "../scss/styles.scss"; import "../scss/components/_navbar.scss"; import { Link } from "react-router-dom"; const Navbar = () => { + const [glitchEffect, setGlitchEffect] = useState(false); + const [activeLink, setActiveLink] = useState("/"); + + useEffect(() => { + // Set active link based on current path + setActiveLink(window.location.pathname); + + // Random glitch effect + const glitchInterval = setInterval(() => { + setGlitchEffect(true); + setTimeout(() => setGlitchEffect(false), 200); + }, 3000); + + return () => clearInterval(glitchInterval); + }, []); + return ( -