Enhance Hero and Navbar components with cyberpunk effects and animations. Implement matrix rain background in Hero, add glitch effect to Navbar, and update styles. Remove unused assignment page styles.
This commit is contained in:
Anton Kupriianov
parent
17f33651a6
commit
526b7bec18
12 changed files with 952 additions and 187 deletions
|
|
@ -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 (
|
||||
<section className="hero">
|
||||
<div className="hero-text">
|
||||
<p className="intro">Welcome to Bytecamp!!!</p>
|
||||
<h1>Play for Fun!</h1>
|
||||
<p className="desc">
|
||||
A competitive game where your code is the controller.<br /> All you need is
|
||||
a web server that responds to the Battlesnake API.
|
||||
</p>
|
||||
<button className="cta">Start Battle</button>
|
||||
</div>
|
||||
<div className="hero-image">
|
||||
<div className="hex-bg">
|
||||
<canvas ref={canvasRef} className="matrix-rain"></canvas>
|
||||
<div className="hero-cyberpunk-grid"></div>
|
||||
<div className="hero-glitch-lines"></div>
|
||||
|
||||
<div className="hero-content">
|
||||
<div className="hero-logo-container">
|
||||
<img
|
||||
src="https://static.battlesnake.com/play/releases/2.1.4/ui/img/game.gif"
|
||||
alt="battle snake game"
|
||||
src="/images/battlesnake-neon-logo.jpg"
|
||||
alt="BattleSnake Neon Logo"
|
||||
className="hero-logo"
|
||||
/>
|
||||
<div className="hero-logo-glow"></div>
|
||||
</div>
|
||||
|
||||
<div className="hero-cta-container">
|
||||
<button className="hero-cta">
|
||||
<span className="hero-cta-text">START BATTLE</span>
|
||||
<span className="hero-cta-glitch"></span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <div className="tag name-tag">Battle</div>
|
||||
<div className="icon top-left">📈</div>
|
||||
<div className="icon bottom-right">👁️</div>
|
||||
<div className="freelance-tag">Available for Freelance</div> */}
|
||||
{/* <div>
|
||||
<Services />
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className="cyberpunk-cursor"></div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<nav className="navbar">
|
||||
<div className="navbar__logo">MyApp</div>
|
||||
<nav className={`navbar ${glitchEffect ? "navbar--glitch" : ""}`}>
|
||||
<div className="navbar__logo">
|
||||
<div className="navbar__logo-scanner"></div>
|
||||
<span className="navbar__logo-text">
|
||||
BATTLE<span className="navbar__logo-text">SNAKE</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="navbar__links">
|
||||
<li>
|
||||
<Link to="/" className="navbar__link">
|
||||
Home
|
||||
<Link
|
||||
to="/"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">⚡</span>
|
||||
<span className="navbar__link-text">HOME</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/notebook" className="navbar__link">
|
||||
NoteBook
|
||||
<Link
|
||||
to="/notebook"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/notebook" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">📓</span>
|
||||
<span className="navbar__link-text">NOTEBOOK</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/assignment" className="navbar__link">
|
||||
Assignment
|
||||
<Link
|
||||
to="/assignment"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/assignment" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">🎯</span>
|
||||
<span className="navbar__link-text">ASSIGNMENT</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/editor" className="navbar__link">
|
||||
Editor
|
||||
<Link
|
||||
to="/editor"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/editor" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">💻</span>
|
||||
<span className="navbar__link-text">EDITOR</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/login" className="navbar__link">
|
||||
Login
|
||||
<Link
|
||||
to="/login"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/login" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">🔒</span>
|
||||
<span className="navbar__link-text">LOGIN</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue