Improvements

components/Background/index.tsx

@@ -28,12 +28,16 @@ const setup = () => {
     renderer.domElement.style.width = '100%';
     renderer.domElement.style.height = '100%';
     renderer.domElement.style.zIndex = -1;
-    renderer.domElement.style.opacity = 1;
+    renderer.domElement.style.animationName = 'fadein';
+    renderer.domElement.style.animationDuration = '2s';
 
     document.body.appendChild(renderer.domElement);
     addParticles();
     addLights();
     render();
+    requestAnimationFrame(() => {
+      //renderer.domElement.style.opacity = 1;
+    })
   }
 
   const addParticles = () => {

components/Me.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import image from '../public/images/me.jpg';
 
@@ -10,14 +10,17 @@ const Wrapper = styled.div`
   padding: 80px;
 `;
 
-const ImageWrapper = styled.div`
+const ImageWrapper = styled.div<{loaded: boolean}>`
   border-radius: 50%;
   border: solid 10px rgba(255, 255, 255, .5);
   box-shadow: 0 0 35px rgba(0, 0, 0, .5);
   overflow: hidden;
   width: 100%;
-  max-width: 360px;
+  max-width: 300px;
   position: relative;
+  transition: opacity 1s;
+  transform: rotateY(180deg);
+  opacity: ${({ loaded }) => loaded ? '1' : '0'};
 `;
 
 const Spacer = styled.div`
@@ -34,6 +37,12 @@ const Title = styled.h1`
     0 0 5px rgba(255, 255, 255, .5);
     0 0 10px rgba(0, 0, 0, .5);
   margin-bottom: 0px;
+  letter-spacing: 1px;
+  letter-spacing: 7px;
+
+  &::first-letter {
+    font-size: 36px;
+  }
 `;
 
 const SubTitle = styled.h2`
@@ -66,10 +75,24 @@ const Image = styled.img<{blurDataURL: string}>`
   height: 100%;
 `
 
-const Me: React.FC<{}> = () => (
+const Me: React.FC<{}> = () => {
+  const imgRef = useRef<HTMLImageElement>();
+  const [loaded, setLoaded] = useState(false);
+  console.log('l', loaded);
+  useEffect(() => {
+    if (imgRef.current) {
+      setLoaded(imgRef.current.complete);
+    }
+  }, [imgRef]);
+  return (
     <Wrapper>
-    <ImageWrapper>
+      <ImageWrapper loaded={loaded}>
-      <Image src={image.src} blurDataURL={image.blurDataURL} />
+        <Image
+          ref={imgRef}
+          src={image.src}
+          blurDataURL={image.blurDataURL}
+          onLoad={() => setLoaded(true)}
+        />
         <Spacer />
       </ImageWrapper>
       <Title>Morten Olsen</Title>
@@ -77,5 +100,6 @@ const Me: React.FC<{}> = () => (
       <Divider />
     </Wrapper>
   );
+};
 
 export default Me;

pages/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createGlobalStyle } from 'styled-components';
 import Head from 'next/head';
 import Background from '../components/Background';
 import Me from '../components/Me';
@@ -8,6 +9,17 @@ import githubLogo from '../public/images/logos/github.svg';
 import linkedinLogo from '../public/images/logos/linkedin.svg';
 import stackOverflowLogo from '../public/images/logos/stackoverflow.svg';
 
+const Globals = createGlobalStyle`
+  body {
+    background: #03544e;
+  }
+
+  @keyframes fadein {
+    from {opacity: 0}
+    to {opacity: 1}
+  }
+`;
+
 const Frontpage: React.FC<{}> = () => {
   return (
     <>
@@ -17,6 +29,7 @@ const Frontpage: React.FC<{}> = () => {
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet" />
       </Head>
+      <Globals />
       <Background />
       <Me />
       <Social