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

Updated ui

Browse Source
This commit is contained in:
Morten Olsen
2021-08-26 09:36:43 +02:00
parent 6661a9c45c
commit 315fb5721c
9 changed files with 177 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/Me.tsx
View File

@@ -3,16 +3,24 @@ import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
display-direction: column;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
`;
const Image = styled.div<{ src: string }>`
border: 30px #efefef solid;
width: 360px;
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);
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;
`;
@@ -21,11 +29,46 @@ const Spacer = styled.div`
padding-bottom: 100%;
`;
const Title = styled.h1`
text-transform: uppercase;
color: #fff;
font-size: 28px;
font-family: 'Source Code Pro', monospace;
text-shadow:
0 0 5px rgba(255, 255, 255, .5);
0 0 10px rgba(0, 0, 0, .5);
margin-bottom: 0px;
`;
const SubTitle = styled.h2`
text-transform: uppercase;
color: #fff;
font-size: 14px;
font-family: 'Source Code Pro', monospace;
text-shadow:
0 0 5px rgba(255, 255, 255, .5);
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 Me: React.FC<{}> = () => (
<Wrapper>
<Image src="/images/me.jpg">
<Spacer />
</Image>
<ImageWrapper>
<Image src="/images/me.jpg">
<Spacer />
</Image>
</ImageWrapper>
<Title>Morten Olsen</Title>
<SubTitle>“...One part genius, on part crazy”</SubTitle>
<Divider />
</Wrapper>
);