1 files changed, 19 insertions, 11 deletions

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)}>