feat: add Photo component - wip

martapanc · Jul 31, 2023 · 8cdbf1d · 8cdbf1d
1 parent 54d2f00
commit 8cdbf1d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/components/organisms/home/Code.tsx b/src/components/organisms/home/Code.tsx
@@ -57,7 +57,7 @@ const Code = ({ codeSnippets }: CodeSnippetsProps) => {
   }, [loading]);
 
   return (
-    <div className='h-92 me-4 w-full rounded border-double bg-slate-200 px-4 pb-12 pt-6 dark:bg-slate-800 md:w-1/2'>
+    <div className='me-4 h-56 w-full rounded border-double bg-slate-200 px-4 py-6 dark:bg-slate-800 md:h-[280px] md:w-1/2'>
       <div id='typed-strings'>
         {loading ? <span className='cursor-blink'>_</span> : null}
         {!loading &&

diff --git a/src/components/organisms/home/Photo.tsx b/src/components/organisms/home/Photo.tsx
@@ -3,16 +3,30 @@ import React from 'react';
 
 const Photo = () => {
   return (
-    <div className='h-68 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 className='flex h-80 w-full justify-start md:h-[280px] md:w-1/2 md:justify-end'>
+      <div className='ms-3 flex flex-row-reverse p-3 md:flex-row'>
+        <div className='me-6 flex flex-col items-end text-lg'>
+          <div className='mt-10'>Software Engineer</div>
+          <div className='mt-10'>Lifelong learner</div>
+          <div className='mt-10'>Remote work enthusiast</div>
+        </div>
+        <div className='flex flex-col items-center'>
+          <Image
+            className='mb-3 rounded-full'
+            src='https://cdn.sanity.io/images/lj8a3h3g/production/15c9b3d57800e2f07abb0f6971a9186f9ff54f68-553x553.png'
+            alt='Avatar'
+            width={190}
+            height={0}
+            style={{ height: '190px' }}
+          />
+          <Image
+            src='https://cdn.sanity.io/images/lj8a3h3g/production/b1fbe23d8efef11db38fd636e4035db81cfebdf6-941x189.webp'
+            alt='Avatar'
+            width={250}
+            height={0}
+            style={{ height: '50px' }}
+          />
+        </div>
       </div>
     </div>
   );