1 files changed, 11 insertions, 2 deletions

diff --git a/src/components/landing/sections/Hero.tsx b/src/components/landing/sections/Hero.tsx
index 2773b9b..ee11048 100644
--- a/src/components/landing/sections/Hero.tsx
+++ b/src/components/landing/sections/Hero.tsx
@@ -16,10 +16,11 @@ import {
   LinkedInIcon,
   OrcidIcon,
 } from '@site/src/components/icons';
+import avatar from '@site/src/pages/avatar.jpg?sizes[]=149&sizes[]=298&sizes[]=596&rl';
 
 import styles from './Hero.module.css';
 
-export default function Hero({ avatar }: { avatar: string }) {
+export default function Hero() {
   return (
     <header className={clsx('hero', 'hero--dark', styles.hero)}>
       <div className="container">
@@ -27,7 +28,15 @@ export default function Hero({ avatar }: { avatar: string }) {
           <div
             className={clsx('col', 'col--3', styles.hero__col, styles.avatar)}
           >
-            <img src={avatar} alt="My photo" className={styles.avatar__image} />
+            <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)"
+              alt="My photo"
+              className={styles.avatar__image}
+            />
           </div>
           <div className={clsx('col', 'col--9', styles.hero__col)}>
             <h1 className={clsx('hero__title', styles.introduction)}>