Placeholder image for avatar

2 files changed, 31 insertions, 12 deletions

diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css
index 0909c3f..4c55001 100644
--- a/src/components/landing/sections/Hero.module.css
+++ b/src/components/landing/sections/Hero.module.css
@@ -35,13 +35,24 @@
   }
 }
 
-.avatar__image {
+.avatar__holder {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 1/1;
   width: 100%;
   height: auto;
   max-width: 298px;
   border-radius: 100em;
 }
 
+.avatar__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .introduction {
   font-family: var(--ifm-font-family-base);
   font-weight: 500;
diff --git a/src/components/landing/sections/Hero.tsx b/src/components/landing/sections/Hero.tsx
index b4be44d..cdd5953 100644
--- a/src/components/landing/sections/Hero.tsx
+++ b/src/components/landing/sections/Hero.tsx
@@ -16,7 +16,7 @@ import {
   LinkedInIcon,
   OrcidIcon,
 } from '@site/src/components/icons';
-import avatar from '@site/src/pages/avatar.jpg?sizes[]=149&sizes[]=298&sizes[]=596&rl';
+import avatar from '@site/src/pages/avatar.jpg?placeholder=true&sizes[]=149&sizes[]=298&sizes[]=596&rl';
 
 import styles from './Hero.module.css';
 
@@ -28,16 +28,24 @@ export default function Hero() {
           <div
             className={clsx('col', 'col--3', styles.hero__col, styles.avatar)}
           >
-            <img
-              src={avatar.src}
-              srcSet={avatar.srcSet}
-              width={avatar.width}
-              height={avatar.height}
-              sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)"
-              fetchPriority="high"
-              alt="My photo"
-              className={styles.avatar__image}
-            />
+            <div
+              className={styles.avatar__holder}
+              style={{
+                backgroundImage: `url("${avatar.placeholder}")`,
+                backgroundSize: 'cover',
+              }}
+            >
+              <img
+                src={avatar.src}
+                srcSet={avatar.srcSet}
+                width={avatar.width}
+                height={avatar.height}
+                sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)"
+                fetchPriority="high"
+                alt="My photo"
+                className={styles.avatar__image}
+              />
+            </div>
           </div>
           <div className={clsx('col', 'col--9', styles.hero__col)}>
             <h1 className={clsx('hero__title', styles.introduction)}>