diff --git a/src/Body/Fetch/Description.tsx b/src/Body/Fetch/Description.tsx index 0d32e0b..5a37744 100644 --- a/src/Body/Fetch/Description.tsx +++ b/src/Body/Fetch/Description.tsx @@ -33,7 +33,7 @@ const Description = () => ( - + ); diff --git a/src/Body/Fetch/ProfilePicture.tsx b/src/Body/Fetch/ProfilePicture.tsx index efae279..abce1d8 100644 --- a/src/Body/Fetch/ProfilePicture.tsx +++ b/src/Body/Fetch/ProfilePicture.tsx @@ -1,4 +1,5 @@ // TODO: Generate JXL once it doesn't crash +// TODO: Use multiple widths once that's working too import hero from "../../assets/MichaelBradley.avif?format=avif;webp;jpeg&as=picture"; const ProfilePicture = () => ( @@ -7,7 +8,12 @@ const ProfilePicture = () => ( {Object.entries(hero.sources).map(([format, src]) => ( ))} - A picture of me in a suit smiling + A picture of me in winter jumping and smiling in front of a mountain ); diff --git a/src/Body/Fetch/index.tsx b/src/Body/Fetch/index.tsx index 7a8012a..ae14ec8 100644 --- a/src/Body/Fetch/index.tsx +++ b/src/Body/Fetch/index.tsx @@ -7,12 +7,12 @@ const Fetch = () => { return (
-
+
-
+
); }; diff --git a/src/Body/Links.tsx b/src/Body/Links.tsx index d45f593..a24db43 100644 --- a/src/Body/Links.tsx +++ b/src/Body/Links.tsx @@ -16,7 +16,7 @@ const ImageLink = ({ href, title, Image }: ImageLinkProps) => ( ); const Links = () => ( -
+
+ ); export default Links; diff --git a/src/assets/MichaelBradley.avif b/src/assets/MichaelBradley.avif index d5d0d85..82987c2 100644 Binary files a/src/assets/MichaelBradley.avif and b/src/assets/MichaelBradley.avif differ diff --git a/src/style.css b/src/style.css index f02269e..1e1ded3 100644 --- a/src/style.css +++ b/src/style.css @@ -246,9 +246,11 @@ p { } #michael-photo-container { - max-height: 9lh; - aspect-ratio: 1; + height: 9lh; + width: 9lh; align-self: center; + border-radius: 50%; + border: 0.2rem solid var(--highlight); :active { animation: spin 1s linear infinite forwards; @@ -256,12 +258,10 @@ p { } #michael-photo { - width: 100%; - aspect-ratio: 1; + width: 9lh; + height: 9lh; + text-wrap: wrap; border-radius: 50%; - object-fit: cover; - object-position: 62.5% 0; - border: 0.2rem solid var(--highlight); @media (prefers-reduced-motion: no-preference) { transition: border ease var(--anim-duration);