mirror of
https://github.com/Spythere/spythere-portfolio.git
synced 2026-05-02 21:18:15 +00:00
chore: added animated bg scaffolding
This commit is contained in:
@@ -6,11 +6,13 @@ import LandingSection from './sections/LandingSection';
|
||||
import './i18n';
|
||||
import ProjectsSection from './sections/ProjectsSection';
|
||||
import AboutSection from './sections/AboutSection';
|
||||
import AnimatedBg from './components/AnimatedBg';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<>
|
||||
<AnimatedBg />
|
||||
<GlobalStyles />
|
||||
<Navbar />
|
||||
|
||||
|
||||
@@ -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;
|
||||
`;
|
||||
Reference in New Issue
Block a user