From 6661a9c45cb5bc462a954100d5b8d2db84b3a1f6 Mon Sep 17 00:00:00 2001 From: Morten Olsen Date: Wed, 25 Aug 2021 23:58:42 +0200 Subject: [PATCH] Background --- components/Social.tsx | 1 - package.json | 1 + pages/index.tsx | 83 ++++++++++++++++++++++++++++--------------- yarn.lock | 5 +++ 4 files changed, 61 insertions(+), 29 deletions(-) diff --git a/components/Social.tsx b/components/Social.tsx index 920987b..7665aaf 100644 --- a/components/Social.tsx +++ b/components/Social.tsx @@ -38,7 +38,6 @@ const ItemWrapper = styled.a` display: flex; align-items: center; justify-content: flex-start; - background: #fff; margin: 20px; width: 220px; height: 100px; diff --git a/package.json b/package.json index baf43b5..c48acfa 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "next": "^11.1.0", + "particlesjs": "^2.2.3", "react": "^17.0.2", "react-dom": "^17.0.2", "styled-components": "^5.3.1" diff --git a/pages/index.tsx b/pages/index.tsx index c3bd7b8..5ed282e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,34 +1,61 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import styled from 'styled-components'; import Head from 'next/head'; import Me from '../components/Me'; import Social from '../components/Social'; -const Frontpage: React.FC<{}> = () => ( - <> - - Morten Olsen - - - - -); +const Canvas = styled.canvas` + position: fixed; + top: 0; + left: 0; + widht: 100%; + height: 100%; + z-index: -1; +`; + +const Frontpage: React.FC<{}> = () => { + useEffect(() => { + const run = async () => { + const { default: Particles } = await import('particlesjs'); + Particles.init({ + selector: '.background', + connectParticles: true, + color: '#dddddd', + maxParticles: 200, + }); + console.log(Particles); + }; + run(); + }); + + return ( + <> + + Morten Olsen + + + + + + ); +}; export default Frontpage; diff --git a/yarn.lock b/yarn.lock index 4cf031e..8c043cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1501,6 +1501,11 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.5: pbkdf2 "^3.0.3" safe-buffer "^5.1.1" +particlesjs@^2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/particlesjs/-/particlesjs-2.2.3.tgz#4d213ca740679fc1ccc772e8d864b884a091f37e" + integrity sha512-f0rL80Agqdsrnv/uhlLewv+LMdiXHu9MYPzMv0ZLPM06nLx3zmAXMH882fxqO6Uzb91csli8WlWaYd2XPN0d/Q== + path-browserify@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"