feat: add Photo component - wip

src/components/organisms/home/Code.tsx

@@ -57,7 +57,7 @@ const Code = ({ codeSnippets }: CodeSnippetsProps) => {
   }, [loading]);
 
   return (
-    <div className='me-4 h-72 w-full rounded border-double bg-slate-200 px-4 pb-12 pt-6 dark:bg-slate-800 md:w-2/3'>
+    <div className='me-4 h-72 w-full rounded border-double bg-slate-200 px-4 pb-12 pt-6 dark:bg-slate-800 md:w-1/2'>
       <div id='typed-strings'>
         {loading ? <span className='cursor-blink'>_</span> : null}
         {!loading &&

src/components/organisms/home/Photo.tsx

@@ -1,7 +1,21 @@
+import Image from 'next/image';
 import React from 'react';
 
 const Photo = () => {
-  return <div className='h-20 w-full pb-12 md:w-1/3'>Photo display</div>;
+  return (
+    <div className='h-84 flex w-full justify-start md:w-1/2 md:justify-end'>
+      <div className='mx-6 flex flex-row-reverse p-3 md:flex-row'>
+        <Image
+          className='rounded-full'
+          src='https://cdn.sanity.io/images/lj8a3h3g/production/15c9b3d57800e2f07abb0f6971a9186f9ff54f68-553x553.png'
+          alt='Avatar'
+          width={190}
+          height={0}
+          style={{ height: '190px' }}
+        />
+      </div>
+    </div>
+  );
 };
 
 export default Photo;