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

Attempted to fix iOS bug

Browse Source
This commit is contained in:
Morten Olsen
2021-08-27 22:19:11 +02:00
parent 4606cbec9c
commit 42952604e3
2 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/Me.tsx
View File

@@ -14,14 +14,12 @@ const ImageWrapper = styled.div<{loaded: boolean}>`
border-radius: 50%; border-radius: 50%;
border: solid 10px rgba(255, 255, 255, .5); border: solid 10px rgba(255, 255, 255, .5);
box-shadow: 0 0 35px rgba(0, 0, 0, .5); box-shadow: 0 0 35px rgba(0, 0, 0, .5);
overflow: hidden;
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
position: relative; position: relative;
transition: all .6s; transition: all 1.2s;
transform: rotateY(180deg);
opacity: ${({ loaded }) => loaded ? '1' : '0'}; opacity: ${({ loaded }) => loaded ? '1' : '0'};
transform: ${({ loaded }) => loaded ? 'rotateY(180deg)' : 'rotateY(90deg) translateX(-300px)'}; transform: rotateY(180deg);
`; `;
const Spacer = styled.div` const Spacer = styled.div`
@@ -70,6 +68,7 @@ const Image = styled.img<{blurDataURL: string}>`
background: url("${({ blurDataURL }) => blurDataURL}"); background: url("${({ blurDataURL }) => blurDataURL}");
position: absolute; position: absolute;
background-size: cover; background-size: cover;
border-radius: 50%;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@@ -80,8 +79,8 @@ const Me: React.FC<{}> = () => {
const imgRef = useRef<HTMLImageElement>(); const imgRef = useRef<HTMLImageElement>();
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
useEffect(() => { useEffect(() => {
if (imgRef.current) { if (imgRef.current && imgRef.current.complete) {
setLoaded(imgRef.current.complete); setLoaded(true);
} }
}, [imgRef]); }, [imgRef]);
return ( return (

2
components/Social.tsx
View File

@@ -31,7 +31,7 @@ const Wrapper = styled.div`
align-items: center; align-items: center;
height: 100%; height: 100%;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 1000px; max-width: 1600px;
`; `;
const ItemWrapper = styled.a` const ItemWrapper = styled.a`