updates

components/Me.tsx

@@ -14,14 +14,12 @@ 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: 300px;
   position: relative;
-  transition: all .6s;
+  transition: all 1.2s;
-  transform: rotateY(180deg);
   opacity: ${({ loaded }) => loaded ? '1' : '0'};
-  transform: ${({ loaded }) => loaded ? 'rotateY(180deg)' : 'rotateY(90deg) translateX(-300px)'};
+  transform: rotateY(180deg) translateZ(0);
 `;
 
 const Spacer = styled.div`
@@ -57,19 +55,11 @@ const SubTitle = styled.h2`
     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 Image = styled.img<{blurDataURL: string}>`
   background: url("${({ blurDataURL }) => blurDataURL}");
   position: absolute;
   background-size: cover;
+  border-radius: 50%;
   top: 0;
   left: 0;
   width: 100%;
@@ -80,8 +70,8 @@ const Me: React.FC<{}> = () => {
   const imgRef = useRef<HTMLImageElement>();
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
-    if (imgRef.current) {
+    if (imgRef.current && imgRef.current.complete) {
-      setLoaded(imgRef.current.complete);
+      setLoaded(true);
     }
   }, [imgRef]);
   return (
@@ -97,7 +87,6 @@ const Me: React.FC<{}> = () => {
       </ImageWrapper>
       <Title>Morten Olsen</Title>
       <SubTitle>“...One part genius, one part crazy”</SubTitle>
-      <Divider />
     </Wrapper>
   );
 };

components/Social.tsx

@@ -15,11 +15,9 @@ const Outer = styled.div`
   align-items: center;
 `;
 
-const Image = styled.div<{ src: string }>`
+const Image = styled.img<{ src: string }>`
   width: 50px;
   height: 50px;
-  background: url('${({ src }) => src}');
-  background-size: cover;
   margin-right: 10px;
   transition: all .8s;
   filter: grayscale(100%) invert();
@@ -31,7 +29,7 @@ const Wrapper = styled.div`
   align-items: center;
   height: 100%;
   flex-wrap: wrap;
-  max-width: 1000px;
+  max-width: 1600px;
 `;
 
 const ItemWrapper = styled.a`
@@ -53,7 +51,7 @@ const ItemWrapper = styled.a`
     color: #000;
     box-shadow: 0 0 35px rgba(0, 0, 0, .3);
 
-    &> div {
+    &> img {
       filter: grayscale(100%);
     }
   }

data.json

@@ -12,6 +12,9 @@
     },{
       "name": "Github",
       "value": "https://github.com/morten-olsen"
+    }, {
+      "name": "Homepage",
+      "value": "https://mortenolsen.pro"
     }]
 }
 }, {
@@ -158,20 +161,25 @@
     "title": "Projects of interest",
     "description": "A list of projects I have worked with or am working on, for which the source is publicly available. Keep in mind that some of these projects are in early stages, and some are merely created for the training, and may not represent the actual way I think production code should be structured",
     "projects": [{
-      "name": "Clash of Robots",
+      "name": "Todoma",
-      "tagline": "AI vs AI game enginge and IDE",
+      "tagline": "GTD meets kanban in this mobile and web task manager",
-      "url": "github.com/clash-of-robots/core",
+      "url": "github.com/morten-olsen/todoma",
-      "description": "A game engine for creating AI vs. AI turn-based games, including an IDE (still work in progress). The project is built to be the base for a space drone vs. space drone AI game. Players are given control over a set of drones and have to traverse the solar system, fighting to prosper as selles bots, pirate bots, communication relays or whatever the player decides to do within the confines of the sandbox."
+      "description": "A task manager that merges GTD and Kanban into a system that I use for organising my day. The app is written in React Native and runs both on iOS, Android and web, all with the same codebase"
     }, {
       "name": "Curriculum Vitae",
       "tagline": "Automated CV building",
       "url": "github.com/morten-olsen/curriculum-vitae",
       "description": " Another small fun project is this resume, as it is created in \\LaTeX, versioned using _Git_ on _Github_ and set to automatically build and create multiple release versions using _Travis CI_ and _Docker "
     }, {
-      "name": "LifeFlow Mind",
+      "name": "React Native Debug Console",
-      "tagline": "Evernote meets \\LaTeX meets Jupyter",
+      "tagline": "Easily debug in-the-wild React Native apps",
-      "url": "github.com/lifeflow-mind",
+      "url": "github.com/morten-olsen/react-native-debug-console",
-      "description": "I love Evernote simple digital note storages, but as a developer and general nerd, its features often come up short. Which is why I am working on a project named Mind, which attempts to bridge the best aspect of Evernote, with a dynamic view system, so new views (for instance a calendar or a contact view) can be introduced. Also, it can render mathematical formulas using \\LaTeX and execute code snippets, to test and present code directly inside documents. A somewhat working demo can be found at https://morten-olsen.github.io/mind"
+      "description": "I needed a tool that allowed me to easily debug the JavaScript and network asspect of a React Native app after it has been push to testers. This tool adds a development menu inspired by Chrome Dev Tools to a React Native app, allowing for an easier debugging experience"
+    }, {
+      "name": "IoT (Name TBD)",
+      "tagline": "Developer focused IoT platform",
+      "url": "https://iot.mortenolsen.pro",
+      "description": "A lot of IoT platforms tries to be user friendly, sacrificing customizability and still staying to complicated for the general user. This project creates a developer focus that does not trade control for user friendliness, retaining focus on 'coding' your own home setup"
     }, {
       "name": "Redux App State",
       "tagline": "Advanced app like navigation on the web",

pages/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { createGlobalStyle } from 'styled-components';
 import Head from 'next/head';
 import Background from '../components/Background';
@@ -12,6 +13,10 @@ import codinGameLogo from '../public/images/logos/codingame.svg';
 import resumeLogo from '../public/images/logos/resume.svg';
 
 const Globals = createGlobalStyle`
+  html, body, #__next {
+    height: 90%;
+    margin: 0;
+  }
   body {
     background: #03544e;
   }
@@ -22,9 +27,17 @@ const Globals = createGlobalStyle`
   }
 `;
 
+const Wrapper = styled.div`
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
 const Frontpage: React.FC<{}> = () => {
   return (
-    <>
+    <Wrapper>
       <Head>
         <title>Morten Olsen</title>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -61,7 +74,7 @@ const Frontpage: React.FC<{}> = () => {
           logo: linkedinLogo,
         }]}
       />
-    </>
+    </Wrapper>
   );
 };
 

public/images/logos/htb.svg

@@ -1,22 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 176 33" style="enable-background:new 0 0 176 33;" xml:space="preserve">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 33 33" style="enable-background:new 0 0 176 33;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
 	.st1{fill:#000;}
 </style>
-<g>
-	<path class="st0" d="M48.2,22.4v-4.6c0-0.2-0.1-0.3-0.3-0.3h-4c-0.2,0-0.3,0.1-0.3,0.3v4.6c0,0.2-0.1,0.3-0.3,0.3h-2.4   c-0.2,0-0.3-0.1-0.3-0.3V10.6c0-0.2,0.1-0.3,0.3-0.3h2.4c0.2,0,0.3,0.1,0.3,0.3v4.1c0,0.2,0.1,0.3,0.3,0.3h4c0.2,0,0.3-0.1,0.3-0.3   v-4.1c0-0.2,0.1-0.3,0.3-0.3H51c0.2,0,0.3,0.1,0.3,0.3v11.9c0,0.2-0.1,0.3-0.3,0.3h-2.4C48.4,22.7,48.2,22.6,48.2,22.4z"/>
-	<path class="st0" d="M57.9,20.3l-0.7,2.2c0,0.1-0.2,0.2-0.3,0.2h-2.6c-0.2,0-0.3-0.2-0.3-0.4l4-11.9c0-0.1,0.2-0.2,0.3-0.2H62   c0.1,0,0.2,0.1,0.3,0.2l4,11.9c0.1,0.2-0.1,0.4-0.3,0.4h-2.6c-0.1,0-0.2-0.1-0.3-0.2l-0.7-2.2c0-0.1-0.2-0.2-0.3-0.2h-4.1   C58.1,20.1,58,20.2,57.9,20.3z M61.5,16.8c-0.5-1.5-0.9-3-1.3-4.5h0c-0.4,1.5-0.8,3-1.2,4.5l-0.1,0.5c-0.1,0.2,0.1,0.4,0.3,0.4h2.2   c0.2,0,0.3-0.2,0.3-0.4L61.5,16.8z"/>
-	<path class="st0" d="M79.2,14.8h-2.6c-0.1,0-0.3-0.1-0.3-0.2c-0.2-1.2-1-1.9-2.3-1.9c-1.6,0-2.7,1.5-2.7,3.9s1,3.9,2.6,3.9   c1.2,0,2.1-0.7,2.3-2c0-0.1,0.1-0.2,0.3-0.2h2.6c0.2,0,0.3,0.2,0.3,0.3c-0.4,2.9-2.4,4.5-5.5,4.5c-3.6,0-5.8-2.5-5.8-6.5   s2.2-6.5,5.8-6.5c3.1,0,5.1,1.7,5.4,4.4C79.5,14.6,79.4,14.8,79.2,14.8z"/>
-	<path class="st0" d="M93.4,22.7h-3.1c-0.1,0-0.2,0-0.2-0.1L86.3,17h0v5.4c0,0.2-0.1,0.3-0.3,0.3h-2.4c-0.2,0-0.3-0.1-0.3-0.3V10.6   c0-0.2,0.1-0.3,0.3-0.3H86c0.2,0,0.3,0.1,0.3,0.3v5.1h0l3.6-5.2c0.1-0.1,0.1-0.1,0.2-0.1H93c0.2,0,0.4,0.3,0.2,0.5l-4,5.2   c-0.1,0.1-0.1,0.2,0,0.4l4.4,5.9C93.7,22.4,93.6,22.7,93.4,22.7z"/>
-	<path class="st0" d="M101.8,12v10.4c0,0.2-0.1,0.3-0.3,0.3h-1c-0.2,0-0.3-0.1-0.3-0.3V12c0-0.2-0.1-0.3-0.3-0.3h-3.7   c-0.2,0-0.3-0.1-0.3-0.3v-0.9c0-0.2,0.1-0.3,0.3-0.3h9.5c0.2,0,0.3,0.1,0.3,0.3v0.9c0,0.2-0.1,0.3-0.3,0.3h-3.7   C101.9,11.7,101.8,11.8,101.8,12z"/>
-	<path class="st0" d="M117.3,22.4v-5.2c0-0.2-0.1-0.3-0.3-0.3h-5.8c-0.2,0-0.3,0.1-0.3,0.3v5.2c0,0.2-0.1,0.3-0.3,0.3h-1   c-0.2,0-0.3-0.1-0.3-0.3V10.6c0-0.2,0.1-0.3,0.3-0.3h1c0.2,0,0.3,0.1,0.3,0.3v4.7c0,0.2,0.1,0.3,0.3,0.3h5.8c0.2,0,0.3-0.1,0.3-0.3   v-4.7c0-0.2,0.1-0.3,0.3-0.3h1c0.2,0,0.3,0.1,0.3,0.3v11.9c0,0.2-0.1,0.3-0.3,0.3h-1C117.4,22.7,117.3,22.6,117.3,22.4z"/>
-	<path class="st0" d="M125.5,12v3.3c0,0.2,0.1,0.3,0.3,0.3h5.5c0.2,0,0.3,0.1,0.3,0.3v0.8c0,0.2-0.1,0.3-0.3,0.3h-5.5   c-0.2,0-0.3,0.1-0.3,0.3V21c0,0.2,0.1,0.3,0.3,0.3h6c0.2,0,0.3,0.1,0.3,0.3v0.9c0,0.2-0.1,0.3-0.3,0.3h-7.6c-0.2,0-0.3-0.1-0.3-0.3   V10.6c0-0.2,0.1-0.3,0.3-0.3h7.4c0.2,0,0.3,0.1,0.3,0.3v0.9c0,0.2-0.1,0.3-0.3,0.3h-5.8C125.7,11.7,125.5,11.8,125.5,12z"/>
-	<path class="st0" d="M141,10.3c3.1,0,4.5,1.3,4.5,3.2c0,1.5-0.7,2.3-2.1,2.8v0c1.6,0.4,2.4,1.3,2.4,2.9c0,2.1-1.7,3.5-4.5,3.5h-4.9   c-0.2,0-0.3-0.1-0.3-0.3V10.6c0-0.2,0.1-0.3,0.3-0.3H141z M139.1,15c0,0.2,0.1,0.3,0.3,0.3h1.3c1.3,0,1.9-0.4,1.9-1.4   s-0.6-1.3-1.8-1.3h-1.4c-0.2,0-0.3,0.1-0.3,0.3V15z M139.1,20.1c0,0.2,0.1,0.3,0.3,0.3h1.4c1.4,0,2-0.4,2-1.4c0-1-0.6-1.5-2-1.5   h-1.3c-0.2,0-0.3,0.1-0.3,0.3V20.1z"/>
-	<path class="st0" d="M160.8,16.5c0,4-2.3,6.5-6,6.5c-3.7,0-6-2.5-6-6.5s2.3-6.5,6-6.5C158.4,10,160.8,12.5,160.8,16.5z M151.9,16.5   c0,2.4,1,3.9,2.9,3.9c1.8,0,2.8-1.4,2.8-3.9s-1-3.9-2.8-3.9C152.9,12.6,151.9,14.1,151.9,16.5z"/>
-	<path class="st0" d="M173.4,22.7h-2.9c-0.1,0-0.2-0.1-0.3-0.2l-2.2-4.1h0l-2.2,4.1c-0.1,0.1-0.1,0.2-0.3,0.2h-2.9   c-0.2,0-0.4-0.2-0.2-0.4l3.5-5.8c0.1-0.1,0.1-0.2,0-0.3l-3.3-5.5c-0.1-0.2,0-0.4,0.2-0.4h2.8c0.1,0,0.2,0.1,0.3,0.2l2,4h0l2-4   c0-0.1,0.2-0.2,0.3-0.2h2.8c0.2,0,0.4,0.2,0.2,0.4l-3.3,5.5c-0.1,0.1-0.1,0.2,0,0.3l3.5,5.8C173.8,22.5,173.7,22.7,173.4,22.7z"/>
-</g>
-<desc>Created with Sketch.</desc>
 <path class="st1" d="M28.6,9.3C28.6,9.3,28.6,9.3,28.6,9.3c0-0.3-0.1-0.6-0.4-0.8c0,0,0,0,0,0c0,0,0,0-0.1-0.1c0,0-0.1,0-0.1-0.1  c0,0,0,0,0,0L15.6,1.2c0,0-0.1,0-0.1,0C15.3,1,15.1,1,14.9,1c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.1,0.1-0.2,0.1L2,8.3c0,0,0,0,0,0  c0,0,0,0,0,0c0,0,0,0,0,0C1.8,8.4,1.7,8.5,1.7,8.6c0,0,0,0,0,0C1.5,8.8,1.4,9,1.4,9.3c0,0,0,0,0,0c0,0,0,0,0,0v14.3  c0,0.4,0.2,0.8,0.6,1l12.4,7.2c0,0,0,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0c0.1,0,0.2,0,0.2,0s0.2,0,0.2,0  c0,0,0,0,0,0c0.1,0,0.1,0,0.2-0.1c0,0,0,0,0,0c0,0,0,0,0.1,0l12.4-7.2c0.4-0.2,0.6-0.6,0.6-1L28.6,9.3C28.6,9.4,28.6,9.3,28.6,9.3z   M6.3,8.9L14.7,4c0.2-0.1,0.4-0.1,0.5,0l8.4,4.9c0.4,0.2,0.4,0.7,0,0.9l-8.4,4.9c-0.2,0.1-0.4,0.1-0.5,0L6.3,9.8  C5.9,9.6,5.9,9.1,6.3,8.9z M13.5,27.4c0,0.4-0.4,0.7-0.8,0.5L4.3,23C4.1,22.9,4,22.7,4,22.5v-9.7c0-0.4,0.4-0.7,0.8-0.5l8.4,4.9  c0.2,0.1,0.3,0.3,0.3,0.5V27.4z M25.9,22.5c0,0.2-0.1,0.4-0.3,0.5l-8.4,4.9c-0.4,0.2-0.8-0.1-0.8-0.5v-9.7c0-0.2,0.1-0.4,0.3-0.5  l8.4-4.9c0.4-0.2,0.8,0.1,0.8,0.5V22.5z"/>
 </svg>