diff --git a/components/Me.tsx b/components/Me.tsx
index bc3642d..09d8ec8 100644
--- a/components/Me.tsx
+++ b/components/Me.tsx
@@ -19,7 +19,7 @@ const ImageWrapper = styled.div<{loaded: boolean}>`
position: relative;
transition: all 1.2s;
opacity: ${({ loaded }) => loaded ? '1' : '0'};
- transform: rotateY(180deg);
+ transform: rotateY(180deg) translateZ(0);
`;
const Spacer = styled.div`
@@ -55,15 +55,6 @@ 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;
@@ -96,7 +87,6 @@ const Me: React.FC<{}> = () => {
Morten Olsen
“...One part genius, one part crazy”
-
);
};
diff --git a/components/Social.tsx b/components/Social.tsx
index 86032b7..29956e9 100644
--- a/components/Social.tsx
+++ b/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();
@@ -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%);
}
}
diff --git a/pages/index.tsx b/pages/index.tsx
index 9bfebee..fea33d4 100644
--- a/pages/index.tsx
+++ b/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 (
- <>
+
Morten Olsen
@@ -61,7 +74,7 @@ const Frontpage: React.FC<{}> = () => {
logo: linkedinLogo,
}]}
/>
-
+
);
};
diff --git a/public/images/logos/htb.svg b/public/images/logos/htb.svg
index a49bca4..2f31472 100644
--- a/public/images/logos/htb.svg
+++ b/public/images/logos/htb.svg
@@ -1,22 +1,9 @@
-