chore: added animated bg scaffolding

This commit is contained in:
2025-04-01 01:50:42 +02:00
parent ae2bb88d01
commit 3bb386fdda
3 changed files with 63 additions and 0 deletions
+2
View File
@@ -6,11 +6,13 @@ import LandingSection from './sections/LandingSection';
import './i18n'; import './i18n';
import ProjectsSection from './sections/ProjectsSection'; import ProjectsSection from './sections/ProjectsSection';
import AboutSection from './sections/AboutSection'; import AboutSection from './sections/AboutSection';
import AnimatedBg from './components/AnimatedBg';
function App() { function App() {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<> <>
<AnimatedBg />
<GlobalStyles /> <GlobalStyles />
<Navbar /> <Navbar />
+52
View File
@@ -0,0 +1,52 @@
import { useEffect, useRef } from 'react';
import { StyledAnimatedBg } from './styles/AnimatedBg.styled';
class AnimatedBgCanvas {
private canvasElement: HTMLCanvasElement;
private ctx: CanvasRenderingContext2D | null;
private width = 0;
private height = 0;
constructor(canvasElement: HTMLCanvasElement) {
this.canvasElement = canvasElement;
this.ctx = canvasElement.getContext('2d');
}
clear() {
this.ctx!.clearRect(0, 0, this.width, this.height);
}
init() {
const canvasClientRect = this.canvasElement.getBoundingClientRect();
this.width = canvasClientRect.width;
this.height = canvasClientRect.height;
this.canvasElement.width = this.width;
this.canvasElement.height = this.height;
}
draw() {
this.clear();
this.ctx!.fillStyle = 'white';
this.ctx!.beginPath();
this.ctx!.arc(100, 100, 10, 0, Math.PI * 2);
this.ctx!.fill();
}
}
export default function AnimatedBg() {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
if (canvasRef.current != null) {
const animatedCanvas = new AnimatedBgCanvas(canvasRef.current);
animatedCanvas.init();
animatedCanvas.draw();
}
}, []);
return <StyledAnimatedBg ref={canvasRef}></StyledAnimatedBg>;
}
@@ -0,0 +1,9 @@
import styled from 'styled-components';
export const StyledAnimatedBg = styled.canvas`
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
`;