morten/morten-olsen.github.io
1
0
Fork 0
mirror of https://github.com/morten-olsen/morten-olsen.github.io.git synced 2026-02-08 01:46:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Morten Olsen
2021-08-26 14:40:51 +02:00
parent 315fb5721c
commit 0cc7078b1b
21 changed files with 4051 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/Me.tsx
View File

@@ -1,28 +1,24 @@
import React from 'react';
import styled from 'styled-components';
import Image from 'next/image'
import image from '../public/images/me.jpg';
const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
padding: 80px;
`;
const ImageWrapper = styled.div`
border-radius: 50%;
border: solid 15px rgba(255, 255, 255, .5);
box-shadow: 0 0 15px rgba(0, 0, 0, .5);
border: solid 30px rgba(255, 255, 255, .5);
box-shadow: 0 0 35px rgba(255, 255, 255, .5);
overflow: hidden;
margin: 0 40px;
width: 100%;
max-width: 360px;
`;
const Image = styled.div<{ src: string }>`
width: 100%;
background: url('${({ src }) => src}');
background-size: cover;
position: relative;
`;
const Spacer = styled.div`
@@ -31,6 +27,7 @@ const Spacer = styled.div`
const Title = styled.h1`
text-transform: uppercase;
text-align: center;
color: #fff;
font-size: 28px;
font-family: 'Source Code Pro', monospace;
@@ -42,6 +39,7 @@ const Title = styled.h1`
const SubTitle = styled.h2`
text-transform: uppercase;
text-align: center;
color: #fff;
font-size: 14px;
font-family: 'Source Code Pro', monospace;
@@ -62,12 +60,11 @@ const Divider = styled.div`
const Me: React.FC<{}> = () => (
<Wrapper>
<ImageWrapper>
<Image src="/images/me.jpg">
<Spacer />
</Image>
<Image layout="fill" {...image} />
<Spacer />
</ImageWrapper>
<Title>Morten Olsen</Title>
<SubTitle>“...One part genius, on part crazy”</SubTitle>
<SubTitle>“...One part genius, one part crazy”</SubTitle>
<Divider />
</Wrapper>
);