Updated ui

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;

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<{}> = () => (
   <Wrapper>
-    <Image src="/images/me.jpg">
-      <Spacer />
-    </Image>
+    <ImageWrapper>
+      <Image src="/images/me.jpg">
+        <Spacer />
+      </Image>
+    </ImageWrapper>
+    <Title>Morten Olsen</Title>
+    <SubTitle>“...One part genius, on part crazy”</SubTitle>
+    <Divider />
   </Wrapper>
 );
 

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%);
     }
   }
 `;