diff --git a/components/Me.tsx b/components/Me.tsx index 580d840..9d8ec24 100644 --- a/components/Me.tsx +++ b/components/Me.tsx @@ -14,12 +14,10 @@ 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); opacity: ${({ loaded }) => loaded ? '1' : '0'}; transform: ${({ loaded }) => loaded ? 'rotateY(180deg)' : 'rotateY(90deg) translateX(-300px)'}; `; @@ -70,6 +68,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 +79,8 @@ const Me: React.FC<{}> = () => { const imgRef = useRef(); const [loaded, setLoaded] = useState(false); useEffect(() => { - if (imgRef.current) { - setLoaded(imgRef.current.complete); + if (imgRef.current && imgRef.current.complete) { + setLoaded(true); } }, [imgRef]); return ( diff --git a/components/Social.tsx b/components/Social.tsx index 7755171..86032b7 100644 --- a/components/Social.tsx +++ b/components/Social.tsx @@ -31,7 +31,7 @@ const Wrapper = styled.div` align-items: center; height: 100%; flex-wrap: wrap; - max-width: 1000px; + max-width: 1600px; `; const ItemWrapper = styled.a`