add animated background
Some checks failed
Frontend Build and Deploy / build (push) Failing after 12s

This commit is contained in:
José Henrique 2025-05-31 14:42:47 -03:00
parent 557a157226
commit 88afb7b453
7 changed files with 379 additions and 17 deletions

18
package-lock.json generated
View File

@ -18,6 +18,7 @@
"devDependencies": {
"@eslint/js": "^9.25.0",
"@heroicons/react": "^2.2.0",
"@types/node": "^22.15.29",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@types/react-router-dom": "^5.3.3",
@ -1675,6 +1676,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/node": {
"version": "22.15.29",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.29.tgz",
"integrity": "sha512-LNdjOkUDlU1RZb8e1kOIUpN1qQUlzGkEtbVNo53vbrwDg5om6oduhm4SiUaPW5ASTXhAiP0jInWG8Qx9fVlOeQ==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"undici-types": "~6.21.0"
}
},
"node_modules/@types/react": {
"version": "19.1.6",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
@ -3952,6 +3963,13 @@
"typescript": ">=4.8.4 <5.9.0"
}
},
"node_modules/undici-types": {
"version": "6.21.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
"devOptional": true,
"license": "MIT"
},
"node_modules/update-browserslist-db": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",

View File

@ -20,6 +20,7 @@
"devDependencies": {
"@eslint/js": "^9.25.0",
"@heroicons/react": "^2.2.0",
"@types/node": "^22.15.29",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@types/react-router-dom": "^5.3.3",

View File

@ -1,5 +1,17 @@
#root {
margin: 0 auto;
padding: 2rem;
padding: 0;
text-align: center;
position: relative;
min-height: 100vh;
width: 100%;
}
/* Ensure body and html have no margins/padding for full screen background */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
}

View File

@ -6,6 +6,7 @@ import StatisticsSection from './components/StatisticsSection';
import FeaturesSection from './components/FeaturesSection';
import Footer from './components/Footer';
import CandidatePage from './components/CandidatePage/CandidatePage';
import MatrixBackground from './components/MatrixBackground';
import './App.css';
// HomePage component
@ -19,13 +20,16 @@ const HomePage: React.FC = () => (
function App() {
return (
<div className="bg-gray-900 min-h-screen w-full flex flex-col">
<Navbar />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/candidato/:id" element={<CandidatePage />} />
</Routes>
<Footer />
<div className="min-h-screen w-full flex flex-col relative" style={{ backgroundColor: 'transparent' }}>
<MatrixBackground />
<div className="relative z-10">
<Navbar />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/candidato/:id" element={<CandidatePage />} />
</Routes>
<Footer />
</div>
</div>
);
}

View File

@ -2,7 +2,7 @@ import React from 'react';
const Footer: React.FC = () => {
return (
<footer className="bg-gray-900 text-gray-400 py-8 text-center">
<footer className="bg-gray-800/30 text-gray-400 py-8 text-center">
<div className="container mx-auto">
<p className="mb-2">
&copy; {new Date().getFullYear()} OpenCand. Todos os direitos reservados.

View File

@ -0,0 +1,334 @@
import React, { useEffect, useRef, useState } from 'react';
interface Dot {
x: number;
y: number;
vx: number;
vy: number;
connections: number[];
brightness: number;
targetBrightness: number;
}
interface Connection {
from: number;
to: number;
brightness: number;
targetBrightness: number;
thickness: number;
targetThickness: number;
}
const MatrixBackground: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const animationRef = useRef<number>(0);
const dotsRef = useRef<Dot[]>([]);
const connectionsRef = useRef<Connection[]>([]);
const mouseRef = useRef({ x: 0, y: 0 });
const [, setDimensions] = useState({ width: 0, height: 0 });
// Configuration
const config = {
dotCount: 300,
maxConnections: 3,
connectionDistance: 150,
dotSpeed: 0.3,
hoverRadius: 120,
baseBrightness: 0.25, // Reduced to 30% opacity (0.3 * 0.3)
hoverBrightness: 0.6, // Reduced hover brightness
baseThickness: 0.5,
hoverThickness: 1.5,
fadeSpeed: 0.08, // Slightly faster fade for better responsiveness
};
// Initialize dots
const initializeDots = (width: number, height: number) => {
const dots: Dot[] = [];
for (let i = 0; i < config.dotCount; i++) {
dots.push({
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * config.dotSpeed,
vy: (Math.random() - 0.5) * config.dotSpeed,
connections: [],
brightness: config.baseBrightness,
targetBrightness: config.baseBrightness,
});
}
return dots;
};
// Calculate connections between dots
const calculateConnections = (dots: Dot[]) => {
const connections: Connection[] = [];
for (let i = 0; i < dots.length; i++) {
const dot = dots[i];
dot.connections = [];
const distances: { index: number; distance: number }[] = [];
for (let j = 0; j < dots.length; j++) {
if (i === j) continue;
const dx = dot.x - dots[j].x;
const dy = dot.y - dots[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < config.connectionDistance) {
distances.push({ index: j, distance });
}
}
// Sort by distance and take closest connections
distances.sort((a, b) => a.distance - b.distance);
const maxConnections = Math.min(config.maxConnections, distances.length);
for (let k = 0; k < maxConnections; k++) {
const targetIndex = distances[k].index;
// Avoid duplicate connections
const existing = connections.find(
conn => (conn.from === i && conn.to === targetIndex) ||
(conn.from === targetIndex && conn.to === i)
);
if (!existing) {
dot.connections.push(targetIndex);
connections.push({
from: i,
to: targetIndex,
brightness: config.baseBrightness,
targetBrightness: config.baseBrightness,
thickness: config.baseThickness,
targetThickness: config.baseThickness,
});
}
}
}
return connections;
};
// Update hover effects
const updateHoverEffects = (dots: Dot[], connections: Connection[], mouseX: number, mouseY: number) => {
// Reset all targets to base values
dots.forEach(dot => {
dot.targetBrightness = config.baseBrightness;
});
connections.forEach(conn => {
conn.targetBrightness = config.baseBrightness;
conn.targetThickness = config.baseThickness;
});
// Check which dots are near the mouse
let hoveredCount = 0;
dots.forEach((dot, index) => {
const dx = dot.x - mouseX;
const dy = dot.y - mouseY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < config.hoverRadius) {
hoveredCount++;
const intensity = 1 - (distance / config.hoverRadius);
dot.targetBrightness = config.baseBrightness +
(config.hoverBrightness - config.baseBrightness) * intensity;
// Brighten connected lines
connections.forEach(conn => {
if (conn.from === index || conn.to === index) {
conn.targetBrightness = config.baseBrightness +
(config.hoverBrightness - config.baseBrightness) * intensity * 0.7;
conn.targetThickness = config.baseThickness +
(config.hoverThickness - config.baseThickness) * intensity;
}
});
}
});
// Smooth transitions
dots.forEach(dot => {
dot.brightness += (dot.targetBrightness - dot.brightness) * config.fadeSpeed;
});
connections.forEach(conn => {
conn.brightness += (conn.targetBrightness - conn.brightness) * config.fadeSpeed;
conn.thickness += (conn.targetThickness - conn.thickness) * config.fadeSpeed;
});
};
// Animation loop
const animate = () => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
const { width, height } = canvas;
// Clear canvas with dark blue background
ctx.fillStyle = '#0a0f1a';
ctx.fillRect(0, 0, width, height);
const dots = dotsRef.current;
const connections = connectionsRef.current;
// Update dot positions
dots.forEach(dot => {
dot.x += dot.vx;
dot.y += dot.vy;
// Bounce off edges
if (dot.x <= 0 || dot.x >= width) {
dot.vx *= -1;
dot.x = Math.max(0, Math.min(width, dot.x));
}
if (dot.y <= 0 || dot.y >= height) {
dot.vy *= -1;
dot.y = Math.max(0, Math.min(height, dot.y));
}
});
// Recalculate connections periodically for smooth movement
if (Math.random() < 0.02) {
connectionsRef.current = calculateConnections(dots);
}
// Update hover effects
updateHoverEffects(dots, connections, mouseRef.current.x, mouseRef.current.y);
// Draw connections
connections.forEach(conn => {
const fromDot = dots[conn.from];
const toDot = dots[conn.to];
if (!fromDot || !toDot) return;
ctx.strokeStyle = `rgba(100, 200, 255, ${conn.brightness * 0.3})`; // Changed to blue with 30% opacity
ctx.lineWidth = conn.thickness;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(fromDot.x, fromDot.y);
ctx.lineTo(toDot.x, toDot.y);
ctx.stroke();
});
// Draw dots
dots.forEach(dot => {
ctx.fillStyle = `rgba(100, 200, 255, ${dot.brightness * 0.3})`; // Changed to blue with 30% opacity
ctx.beginPath();
ctx.arc(dot.x, dot.y, 2, 0, Math.PI * 2);
ctx.fill();
// Add subtle glow
ctx.shadowColor = `rgba(100, 200, 255, ${dot.brightness * 0.15})`; // Reduced glow opacity
ctx.shadowBlur = 4;
ctx.beginPath();
ctx.arc(dot.x, dot.y, 1.5, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
});
animationRef.current = requestAnimationFrame(animate);
};
// Handle resize
const handleResize = () => {
const canvas = canvasRef.current;
if (!canvas) return;
// Set canvas size to window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.width = `${window.innerWidth}px`;
canvas.style.height = `${window.innerHeight}px`;
setDimensions({ width: window.innerWidth, height: window.innerHeight });
// Reinitialize dots for new dimensions
dotsRef.current = initializeDots(window.innerWidth, window.innerHeight);
connectionsRef.current = calculateConnections(dotsRef.current);
if (process.env.NODE_ENV === 'development') {
console.log(`MatrixBackground: Canvas resized to ${window.innerWidth}x${window.innerHeight}`);
}
};
// Handle mouse movement
const handleMouseMove = (event: MouseEvent) => {
mouseRef.current = {
x: event.clientX,
y: event.clientY,
};
};
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) {
if (process.env.NODE_ENV === 'development') {
console.log('MatrixBackground: Canvas not found');
}
return;
}
if (process.env.NODE_ENV === 'development') {
console.log('MatrixBackground: Canvas found, initializing...');
}
// Initial setup
handleResize();
// Start animation
const startAnimation = () => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
}
animationRef.current = requestAnimationFrame(animate);
};
startAnimation();
// Event listeners
window.addEventListener('resize', handleResize);
document.addEventListener('mousemove', handleMouseMove);
if (process.env.NODE_ENV === 'development') {
console.log('MatrixBackground: Animation started');
}
return () => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
}
window.removeEventListener('resize', handleResize);
document.removeEventListener('mousemove', handleMouseMove);
if (process.env.NODE_ENV === 'development') {
console.log('MatrixBackground: Cleanup completed');
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<canvas
ref={canvasRef}
className="fixed inset-0"
style={{
zIndex: 0,
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '100vh',
backgroundColor: '#0a0f1a', // Dark blue background
pointerEvents: 'none'
}}
/>
);
};
export default MatrixBackground;

View File

@ -105,18 +105,11 @@ const StatisticsSection: React.FC = () => {
];
return (
<section id="stats" className="py-20 bg-gray-900">
<section id="stats" className="py-20 bg-gray-800/30">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center text-white mb-12">
Dados em Números
</h2>
{error && !isLoading && (
<div className="text-center mb-8">
<p className="text-yellow-400 text-sm">
Usando dados de demonstração - {error}
</p>
</div>
)}
<div className="flex flex-wrap justify-center gap-8 mx-auto">
{statisticsData.slice(0, 3).map((stat, index) => (
<div key={index} className="w-full md:w-80 lg:w-96">