From 42952604e30dfa97a1da3c9afec57eccd6d9effe Mon Sep 17 00:00:00 2001
From: Morten Olsen <morten+pgp@olsen.pro>
Date: Fri, 27 Aug 2021 22:19:11 +0200
Subject: [PATCH] Attempted to fix iOS bug

---
 components/Me.tsx     | 11 +++++------
 components/Social.tsx |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/Me.tsx b/components/Me.tsx
index 580d840..bc3642d 100644
--- a/components/Me.tsx
+++ b/components/Me.tsx
@@ -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);
 `;
 
 const Spacer = styled.div`
@@ -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<HTMLImageElement>();
   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`