feat(about-me): add profile picture relative to color theme

mateusfg7 · Mar 14, 2024 · 8b8fa1b · 8b8fa1b
1 parent 8d55172
commit 8b8fa1b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/src/app/about/_components/dark-pic.png b/src/app/about/_components/dark-pic.png
diff --git a/src/app/about/_components/image-card.tsx b/src/app/about/_components/image-card.tsx
@@ -4,18 +4,28 @@ import Image from 'next/image'
 import Tilt from 'react-parallax-tilt'
 import { placeholder } from '../../../lib/placeholder'
 
+import lightPic from './light-pic.jpg'
+import darkPic from './dark-pic.png'
+
 export function ImageCard({ mobile = false }) {
   if (mobile) {
     return (
-      <Image
-        src="https://github.com/mateusfg7.png"
-        height={460}
-        width={460}
-        alt="Mateus Felipe's picture"
-        className="my-5 rounded-3xl border border-neutral-800 object-cover dark:border-neutral-500"
-        placeholder={placeholder(460, 460) as `data:image/${string}`}
-        priority
-      />
+      <>
+        <Image
+          src={lightPic}
+          alt="Mateus Felipe's picture"
+          className="my-5 rounded-3xl border border-neutral-800 object-cover dark:hidden"
+          placeholder={placeholder(460, 460) as `data:image/${string}`}
+          priority
+        />
+        <Image
+          src={darkPic}
+          alt="Mateus Felipe's picture"
+          className="my-5 hidden rounded-3xl border border-neutral-500 object-cover dark:block"
+          placeholder={placeholder(460, 460) as `data:image/${string}`}
+          priority
+        />
+      </>
     )
   }
 
@@ -34,11 +44,16 @@ export function ImageCard({ mobile = false }) {
       tiltReverse
     >
       <Image
-        src="https://github.com/mateusfg7.png"
-        height={460}
-        width={460}
+        src={lightPic}
+        alt="Mateus Felipe's picture"
+        className="h-[30rem] w-96 object-cover dark:hidden"
+        placeholder={placeholder(460, 460) as `data:image/${string}`}
+        priority
+      />
+      <Image
+        src={darkPic}
         alt="Mateus Felipe's picture"
-        className="h-[30rem] w-96 object-cover dark:brightness-90"
+        className="hidden h-[30rem] w-96 object-cover brightness-90 dark:block"
         placeholder={placeholder(460, 460) as `data:image/${string}`}
         priority
       />

diff --git a/src/app/about/_components/light-pic.jpg b/src/app/about/_components/light-pic.jpg