feat: add Home intro content

sanity/deskStructure.js

@@ -39,4 +39,12 @@ export const customStructure = (S) =>
               sharedSection.map((section) => S.documentTypeListItem(section))
             )
         ),
+      S.listItem()
+        .title('Single Pages')
+        .child(
+          S.editor()
+            .id('homeContent')
+            .schemaType('homeContent')
+            .documentId('homeContent')
+        ),
     ]);

sanity/schema.ts

@@ -1,5 +1,6 @@
 import { type SchemaTypeDefinition } from 'sanity';
 
+import homeContent from '@/schemas/homeContent';
 import randomFact from '@/schemas/randomFact';
 
 import book from '../src/schemas/book';
@@ -17,6 +18,7 @@ import videoGame from '../src/schemas/videoGame';
 export const schema: { types: SchemaTypeDefinition[] } = {
   types: [
     book,
+    homeContent,
     job,
     language,
     podcast,

src/app/(public)/page.tsx

@@ -1,15 +1,37 @@
+import { PortableText } from '@portabletext/react';
 import * as React from 'react';
 
+import Intro from '@/components/organisms/home/Intro';
 import Seo from '@/components/Seo';
 
+import { homeContentQuery } from '@/queries/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 HomePage = async () => {
+  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 items-center justify-center py-12 text-center'>
-          Homepage :)
+        <div className='layout relative flex flex-col py-12'>
+          <div className='pb-12'>
+            <PortableText value={homeContent.threeLineSummary} />
+          </div>
+
+          <Intro />
         </div>
       </section>
     </main>

src/components/organisms/home/Intro.tsx

@@ -0,0 +1,77 @@
+import Image from 'next/image';
+import React from 'react';
+
+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='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='pb-4'>
+        In my free time, I’m a fiction writer, an avid bookworm, an oboist and
+        alto singer, and a travel photographer.
+      </div>
+    </>
+  );
+};
+
+export default Intro;

src/pages/api/home.ts

@@ -0,0 +1,17 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { homeContentQuery } from '@/queries/homeContent';
+
+import { sanityClient } from '../../../sanity/lib/client';
+
+import { HomeContent } from '@/types/HomeContent';
+
+const homeApi = async (req: NextApiRequest, res: NextApiResponse) => {
+  const homeContent: HomeContent = await sanityClient.fetch(homeContentQuery);
+
+  res.status(200).json({
+    home: homeContent,
+  });
+};
+
+export default homeApi;

src/queries/homeContent.ts

@@ -0,0 +1,13 @@
+import { groq } from 'next-sanity';
+
+export const homeContentQuery = groq`
+*[_type == "homeContent"] {
+  _id,
+  title,
+  threeLineSummary,
+  summary0,
+  summary1,
+  summary2,
+  summary3,
+  summary4,
+}`;

src/schemas/homeContent.ts

@@ -0,0 +1,50 @@
+import { defineField, defineType } from 'sanity';
+
+export default defineType({
+  name: 'homeContent',
+  title: 'Home Content',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    }),
+    defineField({
+      name: 'threeLineSummary',
+      title: '3-line Summary',
+      type: 'array',
+      of: [{ type: 'block' }],
+    }),
+    defineField({
+      name: 'summary0',
+      title: 'Summary - 0',
+      type: 'text',
+      rows: 3,
+    }),
+    defineField({
+      name: 'summary1',
+      title: 'Summary - 1',
+      type: 'text',
+      rows: 3,
+    }),
+    defineField({
+      name: 'summary2',
+      title: 'Summary - 2',
+      type: 'text',
+      rows: 4,
+    }),
+    defineField({
+      name: 'summary3',
+      title: 'Summary - 3',
+      type: 'text',
+      rows: 5,
+    }),
+    defineField({
+      name: 'summary4',
+      title: 'Summary - 4',
+      type: 'array',
+      of: [{ type: 'block' }],
+    }),
+  ],
+});

src/types/HomeContent.ts

@@ -0,0 +1,11 @@
+import { TypedObject } from '@portabletext/types';
+
+export interface HomeContent {
+  title: string;
+  threeLineSummary: TypedObject;
+  summary0: string;
+  summary1: string;
+  summary2: string;
+  summary3: string;
+  summary4: TypedObject;
+}