diff options
Diffstat (limited to 'src/components/landing/sections/Hero.tsx')
-rw-r--r-- | src/components/landing/sections/Hero.tsx | 30 |
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 { | |||
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 | import avatar from '@site/src/pages/avatar.jpg?placeholder=true&sizes[]=149&sizes[]=298&sizes[]=596&rl'; |
20 | 20 | ||
21 | import styles from './Hero.module.css'; | 21 | import styles from './Hero.module.css'; |
22 | 22 | ||
@@ -28,16 +28,24 @@ export default function Hero() { | |||
28 | <div | 28 | <div |
29 | className={clsx('col', 'col--3', styles.hero__col, styles.avatar)} | 29 | className={clsx('col', 'col--3', styles.hero__col, styles.avatar)} |
30 | > | 30 | > |
31 | <img | 31 | <div |
32 | src={avatar.src} | 32 | className={styles.avatar__holder} |
33 | srcSet={avatar.srcSet} | 33 | style={{ |
34 | width={avatar.width} | 34 | backgroundImage: `url("${avatar.placeholder}")`, |
35 | height={avatar.height} | 35 | backgroundSize: 'cover', |
36 | sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)" | 36 | }} |
37 | fetchPriority="high" | 37 | > |
38 | alt="My photo" | 38 | <img |
39 | className={styles.avatar__image} | 39 | src={avatar.src} |
40 | /> | 40 | srcSet={avatar.srcSet} |
41 | width={avatar.width} | ||
42 | height={avatar.height} | ||
43 | sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)" | ||
44 | fetchPriority="high" | ||
45 | alt="My photo" | ||
46 | className={styles.avatar__image} | ||
47 | /> | ||
48 | </div> | ||
41 | </div> | 49 | </div> |
42 | <div className={clsx('col', 'col--9', styles.hero__col)}> | 50 | <div className={clsx('col', 'col--9', styles.hero__col)}> |
43 | <h1 className={clsx('hero__title', styles.introduction)}> | 51 | <h1 className={clsx('hero__title', styles.introduction)}> |