Use NextImage for HomeHero Avatar

nathsimpson · Apr 27, 2024 · 1be92fb · 1be92fb
1 parent bc4d41e
commit 1be92fb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/components/Home/HomeHero.tsx b/components/Home/HomeHero.tsx
@@ -2,6 +2,7 @@ import { Flex, Stack } from '../ui/box';
 import { TextLink } from '../TextLink';
 import { useTheme } from '../../lib/theme';
 import { Heading, Text } from '../ui/typography';
+import Image from 'next/image';
 
 export const HomeHero = () => {
   const { maxWidth } = useTheme();
@@ -39,16 +40,16 @@ export const HomeHero = () => {
 
 const Avatar = () => {
   const { colors } = useTheme();
-  const size = '6rem';
+  const size = 96;
   return (
-    <img
+    <Image
       src="https://files.nathansimpson.design/avatar.jpeg"
       alt="Nathan is smiling while sitting in a Ford Mustang."
+      width={size}
+      height={size}
       css={{
-        width: size,
-        height: size,
         borderRadius: size,
-        backgroundColor: colors.text.default
+        backgroundColor: colors.background.emphasis
       }}
     />
   );

diff --git a/next.config.mjs b/next.config.mjs
@@ -14,6 +14,14 @@ const withMDX = nextMDX({
 });
 
 export default withMDX({
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'files.nathansimpson.design'
+      }
+    ]
+  },
   reactStrictMode: true,
   swcMinify: true,
   // Append the default value with md extensions