use unpic react

Burzmalian · Aug 21, 2024 · f2b1a45 · f2b1a45
1 parent dc6716e
commit f2b1a45
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/app/routes/_layout._index/Hero.tsx b/app/routes/_layout._index/Hero.tsx
@@ -1,14 +1,19 @@
+import { Image } from "@unpic/react";
+
 import { Container } from "~/components/Container";
 
 export const Hero = () => {
   return (
     <Container className="">
       <Container.Inner>
         <div className="flex max-w-3xl flex-col">
-          <img
-            className="mb-3 inline-block h-14 w-14 rounded-full"
+          <Image
             src="/gyles-fohl.jpg"
-            alt="Gyles Fohl"
+            alt="Gyles Fohl Portrait"
+            width={56}
+            height={56}
+            priority
+            className="mb-3 inline-block h-14 w-14 rounded-full"
           />
           <h1 className="flex flex-col gap-3.5 text-5xl font-bold tracking-tight text-foreground sm:text-6xl">
             Gyles Fohl

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@remix-run/node": "^2.11.1",
     "@remix-run/react": "^2.11.1",
     "@remix-run/serve": "^2.11.1",
+    "@unpic/react": "^0.1.14",
     "@vercel/remix": "^2.11.1",
     "@vercel/speed-insights": "^1.0.12",
     "clsx": "^2.1.0",