diff --git a/components/Background/index.tsx b/components/Background/index.tsx
new file mode 100644
index 0000000..daa8442
--- /dev/null
+++ b/components/Background/index.tsx
@@ -0,0 +1,96 @@
+// https://redstapler.co/cool-nebula-background-effect-three-js/
+
+import * as THREE from 'three';
+import React, { useEffect } from 'react';
+
+const setup = () => {
+ let scene, camera, renderer;
+ let cloudParticles = [];
+
+ function init() {
+ scene = new THREE.Scene();
+ camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);
+ camera.position.z = 1;
+ camera.rotation.x = 1.16;
+ camera.rotation.y = -0.12;
+ camera.rotation.z = 0.27;
+ let ambient = new THREE.AmbientLight(0x555555);
+ scene.add(ambient);
+ renderer = new THREE.WebGLRenderer();
+ renderer.setSize(window.innerWidth,window.innerHeight);
+ scene.fog = new THREE.FogExp2(0x03544e, 0.001);
+ renderer.setClearColor(scene.fog.color);
+ renderer.domElement.style.position = 'fixed';
+ renderer.domElement.style.top = '0';
+ renderer.domElement.style.left = '0';
+ renderer.domElement.style.width = '100%';
+ renderer.domElement.style.height = '100%';
+ renderer.domElement.style.zIndex = -1;
+ renderer.domElement.style.opacity = 1;
+
+ document.body.appendChild(renderer.domElement);
+ addParticles();
+ addLights();
+ render();
+ }
+
+ const addParticles = () => {
+ let loader = new THREE.TextureLoader();
+ loader.load("/images/smoke.png", (texture) => {
+ const cloudGeo = new THREE.PlaneBufferGeometry(500,500);
+ const cloudMaterial = new THREE.MeshLambertMaterial({
+ map:texture,
+ transparent: true
+ });
+ for(let p=0; p<50; p++) {
+ let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
+ cloud.position.set(
+ Math.random()*800 -400,
+ 500,
+ Math.random()*500-500
+ );
+ cloud.rotation.x = 1.16;
+ cloud.rotation.y = -0.12;
+ cloud.rotation.z = Math.random()*2*Math.PI;
+ cloud.material.opacity = 0.55;
+ cloudParticles.push(cloud);
+ scene.add(cloud);
+ }
+ });
+ }
+
+ const addLights = () => {
+ let directionalLight = new THREE.DirectionalLight(0xff8c19);
+ directionalLight.position.set(0,0,1);
+ scene.add(directionalLight);
+
+ let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
+ orangeLight.position.set(200,300,100);
+ scene.add(orangeLight);
+ let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
+ redLight.position.set(100,300,100);
+ scene.add(redLight);
+ let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
+ blueLight.position.set(300,300,200);
+ scene.add(blueLight);
+ };
+
+ function render() {
+ cloudParticles.forEach(p => {
+ p.rotation.z -=0.001;
+ });
+ renderer.render(scene,camera);
+ requestAnimationFrame(render);
+ }
+
+ init();
+};
+
+const Background: React.FC<{}> = () => {
+ useEffect(() => {
+ setup();
+ }, []);
+ return <>
+};
+
+export default Background;
diff --git a/components/Me.tsx b/components/Me.tsx
index be76a73..a194cec 100644
--- a/components/Me.tsx
+++ b/components/Me.tsx
@@ -3,16 +3,24 @@ import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
- display-direction: column;
+ flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
`;
-const Image = styled.div<{ src: string }>`
- border: 30px #efefef solid;
- width: 360px;
+const ImageWrapper = styled.div`
border-radius: 50%;
+ border: solid 15px rgba(255, 255, 255, .5);
+ box-shadow: 0 0 15px rgba(0, 0, 0, .5);
+ overflow: hidden;
+ margin: 0 40px;
+ width: 100%;
+ max-width: 360px;
+`;
+
+const Image = styled.div<{ src: string }>`
+ width: 100%;
background: url('${({ src }) => src}');
background-size: cover;
`;
@@ -21,11 +29,46 @@ const Spacer = styled.div`
padding-bottom: 100%;
`;
+const Title = styled.h1`
+ text-transform: uppercase;
+ color: #fff;
+ font-size: 28px;
+ font-family: 'Source Code Pro', monospace;
+ text-shadow:
+ 0 0 5px rgba(255, 255, 255, .5);
+ 0 0 10px rgba(0, 0, 0, .5);
+ margin-bottom: 0px;
+`;
+
+const SubTitle = styled.h2`
+ text-transform: uppercase;
+ color: #fff;
+ font-size: 14px;
+ font-family: 'Source Code Pro', monospace;
+ text-shadow:
+ 0 0 5px rgba(255, 255, 255, .5);
+ 0 0 10px rgba(0, 0, 0, .5);
+`;
+
+const Divider = styled.div`
+ margin-top: 70px;
+ width: 100%;
+ max-width: 800px;
+ height: 1px;
+ background: rgba(255, 255, 255, .5);
+ box-shadow: 0 0 30px rgba(255, 255, 255, .7);
+`;
+
const Me: React.FC<{}> = () => (
-
-
-
+
+
+
+
+
+ Morten Olsen
+ “...One part genius, on part crazy”
+
);
diff --git a/components/Social.tsx b/components/Social.tsx
index 7665aaf..78785d1 100644
--- a/components/Social.tsx
+++ b/components/Social.tsx
@@ -21,8 +21,8 @@ const Image = styled.div<{ src: string }>`
background: url('${({ src }) => src}');
background-size: cover;
margin-right: 10px;
- filter: grayscale(100%);
transition: all .8s;
+ filter: grayscale(100%) invert();
`;
const Wrapper = styled.div`
@@ -42,15 +42,19 @@ const ItemWrapper = styled.a`
width: 220px;
height: 100px;
text-decoration: none;
- color: #000;
+ font-weight: bold;
+ color: #fff;
+ font-family: 'Source Code Pro', monospace;
+ text-transform: uppercase;
+ text-shadow: 0 0 5px rgba(255, 255, 255, .5);
&:hover > div {
- background: #000;
- color: #fff;
+ background: #fff;
+ color: #000;
box-shadow: 0 0 35px rgba(0, 0, 0, .3);
&> div {
- filter: grayscale(100%) invert();
+ filter: grayscale(100%);
}
}
`;
diff --git a/package.json b/package.json
index c48acfa..823f0d2 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
"particlesjs": "^2.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
- "styled-components": "^5.3.1"
+ "styled-components": "^5.3.1",
+ "three": "^0.131.3"
},
"devDependencies": {
"@types/react": "^17.0.19",
"@types/styled-components": "^5.1.12",
+ "@types/three": "^0.131.0",
"babel-plugin-styled-components": "^1.13.2",
"typescript": "^4.3.5"
}
diff --git a/pages/index.tsx b/pages/index.tsx
index 5ed282e..9f9e038 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,40 +1,20 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
+import React from 'react';
import Head from 'next/head';
+import Background from '../components/Background';
import Me from '../components/Me';
import Social from '../components/Social';
-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
+
+
+
+
-
@@ -19,4 +19,4 @@
Created with Sketch.
-
\ No newline at end of file
+
diff --git a/public/images/logos/stackoverflow.svg b/public/images/logos/stackoverflow.svg
index 7a07930..76236f7 100644
--- a/public/images/logos/stackoverflow.svg
+++ b/public/images/logos/stackoverflow.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/public/images/smoke.png b/public/images/smoke.png
new file mode 100644
index 0000000..eb66eec
Binary files /dev/null and b/public/images/smoke.png differ
diff --git a/yarn.lock b/yarn.lock
index 8c043cd..94610fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -266,6 +266,11 @@
"@types/react" "*"
csstype "^3.0.2"
+"@types/three@^0.131.0":
+ version "0.131.0"
+ resolved "https://registry.yarnpkg.com/@types/three/-/three-0.131.0.tgz#98f59887b05f71e665cf2fbdf04e0e4ceb9f89b6"
+ integrity sha512-4VCtsDi6mIId96GcGKG91e2Y6VwU2T0u/YB7vCFJh1kXik93arxn7l9tVZHo1LXOtgCJJDdC+e1fwf2Vu/4ySw==
+
anser@1.4.9:
version "1.4.9"
resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"
@@ -1974,6 +1979,11 @@ supports-color@^8.0.0:
dependencies:
has-flag "^4.0.0"
+three@^0.131.3:
+ version "0.131.3"
+ resolved "https://registry.yarnpkg.com/three/-/three-0.131.3.tgz#406fd210c603ca9154937ae3582996fbfd3cb716"
+ integrity sha512-VkZAv8ZTJqiE/fyEmoWLxcNHImpVcjqW7RO0GzMu3tRpwO0KUvK9pjTmJzJcAbc51BOeB2G38zh80yjHTbP8gQ==
+
timers-browserify@2.0.12, timers-browserify@^2.0.4:
version "2.0.12"
resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"