diff options
Diffstat (limited to 'src/components/landing/sections/Hero.tsx')
-rw-r--r-- | src/components/landing/sections/Hero.tsx | 13 |
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 { | |||
16 | LinkedInIcon, | 16 | LinkedInIcon, |
17 | OrcidIcon, | 17 | OrcidIcon, |
18 | } from '@site/src/components/icons'; | 18 | } from '@site/src/components/icons'; |
19 | import avatar from '@site/src/pages/avatar.jpg?sizes[]=149&sizes[]=298&sizes[]=596&rl'; | ||
19 | 20 | ||
20 | import styles from './Hero.module.css'; | 21 | import styles from './Hero.module.css'; |
21 | 22 | ||
22 | export default function Hero({ avatar }: { avatar: string }) { | 23 | export default function Hero() { |
23 | return ( | 24 | return ( |
24 | <header className={clsx('hero', 'hero--dark', styles.hero)}> | 25 | <header className={clsx('hero', 'hero--dark', styles.hero)}> |
25 | <div className="container"> | 26 | <div className="container"> |
@@ -27,7 +28,15 @@ export default function Hero({ avatar }: { avatar: string }) { | |||
27 | <div | 28 | <div |
28 | className={clsx('col', 'col--3', styles.hero__col, styles.avatar)} | 29 | className={clsx('col', 'col--3', styles.hero__col, styles.avatar)} |
29 | > | 30 | > |
30 | <img src={avatar} alt="My photo" className={styles.avatar__image} /> | 31 | <img |
32 | src={avatar.src} | ||
33 | srcSet={avatar.srcSet} | ||
34 | width={avatar.width} | ||
35 | height={avatar.height} | ||
36 | sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)" | ||
37 | alt="My photo" | ||
38 | className={styles.avatar__image} | ||
39 | /> | ||
31 | </div> | 40 | </div> |
32 | <div className={clsx('col', 'col--9', styles.hero__col)}> | 41 | <div className={clsx('col', 'col--9', styles.hero__col)}> |
33 | <h1 className={clsx('hero__title', styles.introduction)}> | 42 | <h1 className={clsx('hero__title', styles.introduction)}> |