mirror of
https://github.com/morten-olsen/morten-olsen.github.io.git
synced 2026-02-08 01:46:28 +01:00
Compare commits
2 Commits
v1.1175512
...
v1.1180041
| Author | SHA1 | Date | |
|---|---|---|---|
|
5467979563 | ||
|
|
42952604e3 |
@@ -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;
|
||||
transform: rotateY(180deg);
|
||||
transition: all 1.2s;
|
||||
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) {
|
||||
setLoaded(imgRef.current.complete);
|
||||
if (imgRef.current && 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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user