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"