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]) => (
))}
-
+
);
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);