feat: define home base structure

src/app/(public)/page.tsx

@@ -1,37 +1,35 @@
-import { PortableText } from '@portabletext/react';
 import * as React from 'react';
 
 import Intro from '@/components/organisms/home/Intro';
+import Summary from '@/components/organisms/home/Summary';
 import Seo from '@/components/Seo';
 
-import { homeContentQuery } from '@/queries/homeContent';
+// import {homeContentQuery} from '@/queries/homeContent';
+//
+// import {sanityClient} from '../../../sanity/lib/client';
+//
+// import {HomeContent} from '@/types/HomeContent';
 
-import { sanityClient } from '../../../sanity/lib/client';
-
-import { HomeContent } from '@/types/HomeContent';
-
-const getData = async () => {
-  const homeData: HomeContent[] = await sanityClient.fetch(homeContentQuery);
-
-  return {
-    homeContent: homeData[0],
-  };
-};
+// const getData = async () => {
+//   const homeData: HomeContent[] = await sanityClient.fetch(homeContentQuery);
+//
+//   return {
+//     homeContent: homeData[0],
+//   };
+// };
 
 const HomePage = async () => {
-  const { homeContent } = await getData();
+  // const {homeContent} = await getData();
 
   return (
     <main className='min-h-main'>
       <Seo templateTitle='Home' />
 
       <section className='dark:bg-dark bg-white'>
-        <div className='layout relative flex flex-col py-12'>
-          <div className='pb-12'>
-            <PortableText value={homeContent.threeLineSummary} />
-          </div>
-
+        <div className='layout relative flex flex-col py-16 md:py-24'>
           <Intro />
+
+          <Summary />
         </div>
       </section>
     </main>

src/components/organisms/home/Code.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Code = () => {
+  return <div className='h-20 w-full pb-12 md:w-2/3'>Code display</div>;
+};
+
+export default Code;

src/components/organisms/home/Intro.tsx

@@ -1,76 +1,19 @@
-import Image from 'next/image';
 import React from 'react';
 
+import Code from '@/components/organisms/home/Code';
+import Photo from '@/components/organisms/home/Photo';
+
 const Intro = () => {
   return (
-    <>
-      <p className='pb-4 text-base'>
-        Hey there 👋🏻 I'm Marta, a software engineer based in Turin, Italy, and I
-        am currently working at
-        <a
-          href='https://resourcify.com/'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <Image
-            className='ms-2 inline'
-            src='https://cdn.sanity.io/images/lj8a3h3g/production/c0f36368549d879ad790c46fd32f7ea10e3e258f-600x115.webp'
-            alt='Resourcify'
-            width='110'
-            height='25'
-          />
-        </a>
-        .
-      </p>
-
-      <p className='pb-4 text-base'>
-        I hold a MSc in Advanced Computer Science from the University of
-        Manchester, and have four years of experience at
-        <a href='https://bjss.com/' target='_blank' rel='noopener noreferrer'>
-          <Image
-            className='mx-2 inline'
-            src='https://cdn.sanity.io/images/lj8a3h3g/production/0c8cfb9083cafb314b46b195ab99a27daf2f639d-280x150.webp'
-            alt='BJSS'
-            width='45'
-            height='25'
-          />
-        </a>
-        and
-        <a
-          href='https://booking.com/'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <Image
-            className='ms-2 inline'
-            src='https://cdn.sanity.io/images/lj8a3h3g/production/a9bb3876e39ba378769bcc9b881ad8860dcbb9df-2500x424.svg'
-            alt='Booking.com'
-            width='115'
-            height='25'
-          />
-        </a>
-        .
-      </p>
+    <div className='mb-12 flex h-96 flex-col pb-12'>
+      <h1 className='pb-4 text-5xl antialiased'>Hey there, I'm Marta 👋🏻</h1>
 
-      <div className='pb-4'>
-        My skill set embraces a range of programming languages, including Java,
-        Kotlin, Python, C# and TypeScript, as well as frontend frameworks such
-        as React and Angular.
-      </div>
-
-      <div className='pb-4'>
-        While I have a solid foundation in backend development, my heart truly
-        lies in the exciting realm of full-stack engineering. The thrill of
-        bringing together the best of both worlds, seamlessly integrating robust
-        server-side solutions with captivating user interfaces, is what drives
-        my passion for this craft.
-      </div>
+      <div className='mt-8 flex flex-col md:flex-row'>
+        <Code />
 
-      <div className='pb-4'>
-        In my free time, I’m a fiction writer, an avid bookworm, an oboist and
-        alto singer, and a travel photographer.
+        <Photo />
       </div>
-    </>
+    </div>
   );
 };
 

src/components/organisms/home/Photo.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Photo = () => {
+  return <div className='h-20 w-full pb-12 md:w-1/3'>Photo display</div>;
+};
+
+export default Photo;

src/components/organisms/home/Summary.tsx

@@ -0,0 +1,74 @@
+import Image from 'next/image';
+import React from 'react';
+
+const Summary = () => {
+  return (
+    <>
+      <p className='pb-4 text-base antialiased'>
+        I'm a software engineer based in Turin, Italy, and I am currently
+        working at
+        <a
+          href='https://resourcify.com/'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <Image
+            className='ms-2 inline'
+            src='https://cdn.sanity.io/images/lj8a3h3g/production/c0f36368549d879ad790c46fd32f7ea10e3e258f-600x115.webp'
+            alt='Resourcify'
+            width='110'
+            height='25'
+          />
+        </a>
+        .
+      </p>
+
+      <p className='pb-4 text-base antialiased'>
+        I hold a MSc in Advanced Computer Science from the University of
+        Manchester, and have four years of experience at
+        <a href='https://bjss.com/' target='_blank' rel='noopener noreferrer'>
+          <Image
+            className='mx-2 inline'
+            src='https://cdn.sanity.io/images/lj8a3h3g/production/0c8cfb9083cafb314b46b195ab99a27daf2f639d-280x150.webp'
+            alt='BJSS'
+            width='45'
+            height='25'
+          />
+        </a>
+        and
+        <a
+          href='https://booking.com/'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <Image
+            className='ms-2 inline'
+            src='https://cdn.sanity.io/images/lj8a3h3g/production/a9bb3876e39ba378769bcc9b881ad8860dcbb9df-2500x424.svg'
+            alt='Booking.com'
+            width='115'
+            height='25'
+          />
+        </a>
+        .
+      </p>
+
+      <p className='pb-4 text-base antialiased'>
+        My skill set embraces a range of programming languages, including Java,
+        Kotlin, Python, C# and TypeScript, as well as frontend frameworks such
+        as React and Angular.
+      </p>
+
+      <p className='pb-4 text-base antialiased'>
+        While I have a solid foundation in backend development, my heart truly
+        lies in the exciting realm of full-stack engineering.
+      </p>
+
+      <p className='pb-4 text-base antialiased'>
+        In my free time, I’m a fiction writer, an avid bookworm, an oboist and
+        alto singer, and a travel photographer.
+      </p>
+    </>
+  );
+};
+
+export default Summary;