diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/landing/sections/Hero.module.css | 13 | ||||
-rw-r--r-- | src/components/landing/sections/Hero.tsx | 30 |
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 @@ | |||
35 | } | 35 | } |
36 | } | 36 | } |
37 | 37 | ||
38 | .avatar__image { | 38 | .avatar__holder { |
39 | position: relative; | ||
40 | overflow: hidden; | ||
41 | aspect-ratio: 1/1; | ||
39 | width: 100%; | 42 | width: 100%; |
40 | height: auto; | 43 | height: auto; |
41 | max-width: 298px; | 44 | max-width: 298px; |
42 | border-radius: 100em; | 45 | border-radius: 100em; |
43 | } | 46 | } |
44 | 47 | ||
48 | .avatar__image { | ||
49 | position: absolute; | ||
50 | top: 0; | ||
51 | left: 0; | ||
52 | width: 100%; | ||
53 | height: 100%; | ||
54 | } | ||
55 | |||
45 | .introduction { | 56 | .introduction { |
46 | font-family: var(--ifm-font-family-base); | 57 | font-family: var(--ifm-font-family-base); |
47 | font-weight: 500; | 58 | 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 { | |||
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)}> |