mirror of
https://github.com/Spythere/spythere-portfolio.git
synced 2026-05-03 05:28:16 +00:00
chore: added animated bg scaffolding
This commit is contained in:
@@ -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 />
|
||||||
|
|
||||||
|
|||||||
@@ -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