Attempted to fix iOS bug

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,6 +1,5 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
-import Image from 'next/image'
 import image from '../public/images/me.jpg';
 
 const Wrapper = styled.div`
@@ -11,14 +10,16 @@ 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: all 1.2s;
+  opacity: ${({ loaded }) => loaded ? '1' : '0'};
+  transform: rotateY(180deg);
 `;
 
 const Spacer = styled.div`
@@ -35,6 +36,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`
@@ -57,10 +64,34 @@ const Divider = styled.div`
   box-shadow: 0 0 30px rgba(255, 255, 255, .7);
 `;
 
-const Me: React.FC<{}> = () => (
+const Image = styled.img<{blurDataURL: string}>`
+  background: url("${({ blurDataURL }) => blurDataURL}");
+  position: absolute;
+  background-size: cover;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`
+
+const Me: React.FC<{}> = () => {
+  const imgRef = useRef<HTMLImageElement>();
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    if (imgRef.current && imgRef.current.complete) {
+      setLoaded(true);
+    }
+  }, [imgRef]);
+  return (
     <Wrapper>
-    <ImageWrapper>
+      <ImageWrapper loaded={loaded}>
-      <Image layout="fill" src={image.src} blurDataURL={image.blurDataURL} />
+        <Image
+          ref={imgRef}
+          src={image.src}
+          blurDataURL={image.blurDataURL}
+          onLoad={() => setLoaded(true)}
+        />
         <Spacer />
       </ImageWrapper>
       <Title>Morten Olsen</Title>
@@ -68,5 +99,6 @@ const Me: React.FC<{}> = () => (
       <Divider />
     </Wrapper>
   );
+};
 
 export default Me;

components/Social.tsx

@@ -31,7 +31,7 @@ const Wrapper = styled.div`
   align-items: center;
   height: 100%;
   flex-wrap: wrap;
-  max-width: 1000px;
+  max-width: 1600px;
 `;
 
 const ItemWrapper = styled.a`

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';
@@ -7,6 +8,19 @@ import htbLogo from '../public/images/logos/htb.svg';
 import githubLogo from '../public/images/logos/github.svg';
 import linkedinLogo from '../public/images/logos/linkedin.svg';
 import stackOverflowLogo from '../public/images/logos/stackoverflow.svg';
+import codinGameLogo from '../public/images/logos/codingame.svg';
+import resumeLogo from '../public/images/logos/resume.svg';
+
+const Globals = createGlobalStyle`
+  body {
+    background: #03544e;
+  }
+
+  @keyframes fadein {
+    from {opacity: 0}
+    to {opacity: 1}
+  }
+`;
 
 const Frontpage: React.FC<{}> = () => {
   return (
@@ -17,6 +31,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
@@ -32,6 +47,14 @@ const Frontpage: React.FC<{}> = () => {
           title: 'Stack Overflow',
           link: 'https://stackoverflow.com/users/1689055/morten-olsen',
           logo: stackOverflowLogo,
+        }, {
+          title: 'Codingame',
+          link: 'https://www.codingame.com/profile/8b34b1812baa75715c972bfe190c0aed4552622',
+          logo: codinGameLogo,
+        }, {
+          title: 'Resumè',
+          link: 'https://github.com/morten-olsen/morten-olsen.github.io/releases/',
+          logo: resumeLogo,
         }, {
           title: 'Linkedin',
           link: 'https://www.linkedin.com/in/mortenolsendk',

public/images/logos/codingame.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 2083 2083" xmlns="http://www.w3.org/2000/svg" width="2500" height="2500"><path d="M0 0h2083v2083H0z" fill="transparent"/><g fill="#1f2528"><path d="M0 1636c411.554-97.771 692.897-283.177 724-637 10.714-131.212 67.364-243.777 216-319 207.675-80.617 305.728-52.164 390-10 92.668 81.722 119.468 199.94 50 371.5-31.914 100.266-291.001 223.867-410 258.5-392.539 175.893-595.504 430.282-561 783H0z"/><ellipse cx="1666.5" cy="408" rx="196.5" ry="192"/></g></svg>

public/images/logos/resume.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 370.123 370.123" style="enable-background:new 0 0 370.123 370.123;" xml:space="preserve">
+<path d="M321.321,18.74H310.78c0-10.352-8.39-18.74-18.74-18.74H78.083c-10.352,0-18.74,8.389-18.74,18.74H48.802
+	c-10.351,0-18.74,8.389-18.74,18.74c0,10.351,8.39,18.74,18.74,18.74h12.279l22.132,296.557c0.73,9.781,8.879,17.346,18.688,17.346
+	h166.322c9.809,0,17.957-7.564,18.686-17.346l22.133-296.557h12.279c10.351,0,18.74-8.39,18.74-18.74
+	C340.061,27.129,331.672,18.74,321.321,18.74z M119.297,332.643l-7.47-100.061h34.125c8.242,17.324,22.939,28.11,39.109,28.11
+	c16.17,0,30.867-10.786,39.109-28.11h34.125l-7.471,100.061H119.297z M263.007,169.469h-38.836
+	c-8.242-17.324-22.939-28.114-39.109-28.114c-16.17,0-30.867,10.79-39.109,28.114h-38.836L98.665,56.221h172.793L263.007,169.469z"
+	/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>