feat: restructure; add Desktop structure

sanity.config.ts

@@ -8,6 +8,7 @@ import { defineConfig } from 'sanity';
 import { deskTool } from 'sanity/desk';
 import { media } from 'sanity-plugin-media';
 
+import { customStructure } from './sanity/deskStructure';
 // Go to https://www.sanity.io/docs/api-versioning to learn how API versioning works
 import { apiVersion, dataset, projectId } from './sanity/env';
 import { schema } from './sanity/schema';
@@ -20,7 +21,9 @@ export default defineConfig({
   schema,
   plugins: [
     codeInput(),
-    deskTool(),
+    deskTool({
+      structure: customStructure,
+    }),
     media(),
     visionTool({ defaultApiVersion: apiVersion }),
   ],

sanity/deskStructure.js

@@ -0,0 +1,26 @@
+const workSection = ['job', 'language', 'publication', 'school', 'skill'];
+const sharedSection = ['shortText', 'skillIcon'];
+
+export const customStructure = (S) =>
+  S.list()
+    .title('Content')
+    .items([
+      S.listItem()
+        .title('Work')
+        .child(
+          S.list()
+            .title('Work Documents')
+            .items(
+              workSection.map((section) => S.documentTypeListItem(section))
+            )
+        ),
+      S.listItem()
+        .title('Shared')
+        .child(
+          S.list()
+            .title('Shared Documents')
+            .items(
+              sharedSection.map((section) => S.documentTypeListItem(section))
+            )
+        ),
+    ]);

sanity/schema.ts

@@ -1,12 +1,13 @@
 import { type SchemaTypeDefinition } from 'sanity';
 
+import skillIcon from '@/schemas/skillIcon';
+
 import job from '../src/schemas/job';
 import language from '../src/schemas/language';
 import publication from '../src/schemas/publication';
 import school from '../src/schemas/school';
 import shortText from '../src/schemas/shortText';
 import skill from '../src/schemas/skill';
-import skillIcon from '../src/schemas/skillIcon';
 
 export const schema: { types: SchemaTypeDefinition[] } = {
   types: [job, language, publication, school, shortText, skill, skillIcon],

src/app/(public)/about/free-time/page.tsx

@@ -11,6 +11,15 @@ const AboutFreeTimePage = async () => {
       <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-12'>
           <h1 className='mb-5'>Free Time</h1>
+
+          <div className='mb-5'>
+            <p>
+              Programming means great fun for me, but it's not the only activity
+              I enjoy. <br />
+              Here's an overview of non-computer related things I love doing in
+              my free time :)
+            </p>
+          </div>
         </div>
       </section>
     </main>

src/app/(public)/about/work/page.tsx

@@ -2,10 +2,10 @@ import { PortableText } from '@portabletext/react';
 import Image from 'next/image';
 import * as React from 'react';
 
-import Education from '@/components/organisms/Education/Education';
-import Languages from '@/components/organisms/Languages/Languages';
-import Publications from '@/components/organisms/Publications/Publications';
-import WorkExperience from '@/components/organisms/WorkExperience/WorkExperience';
+import Education from '@/components/organisms/about-work/Education';
+import Languages from '@/components/organisms/about-work/Languages';
+import Publications from '@/components/organisms/about-work/Publications';
+import WorkExperience from '@/components/organisms/about-work/WorkExperience';
 
 import { jobsQuery } from '@/queries/jobs';
 import { languageQuery } from '@/queries/languages';
@@ -16,13 +16,13 @@ import { skillQuery } from '@/queries/skills';
 
 import { sanityClient } from '../../../../../sanity/lib/client';
 
+import { Icon } from '@/types/Icon';
 import { Job } from '@/types/Job';
 import { Language } from '@/types/Language';
 import { Publication } from '@/types/Publication';
 import { School } from '@/types/School';
 import { ShortText } from '@/types/ShortText';
 import { Skill } from '@/types/Skill';
-import { SkillIcon } from '@/types/SkillIcon';
 
 export const metadata = {
   title: 'About my Work | MartaCodes.it',
@@ -71,7 +71,7 @@ const AboutPage = async () => {
     <main className='min-h-main'>
       <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-12'>
-          <h1 className='mb-5'>Work</h1>
+          <h1 className='mb-5'>Work & Career</h1>
 
           {softwareDevelopment && (
             <div>
@@ -107,7 +107,7 @@ const AboutPage = async () => {
                 className='skill-container rounded p-4 shadow-md dark:bg-slate-900 dark:drop-shadow-md'
               >
                 <div className='flex'>
-                  {skill.icons.map((icon: SkillIcon) => (
+                  {skill.icons.map((icon: Icon) => (
                     <Image
                       key={icon._id}
                       height={iconDimension}

src/components/layout/Header.tsx

@@ -96,7 +96,7 @@ export default function Header() {
                   }}
                 >
                   <MenuItem onClick={handleClose}>
-                    <Link href='/about/work'>👔 Work</Link>
+                    <Link href='/about/work'>👔 Work & Career</Link>
                   </MenuItem>
                   <MenuItem onClick={handleClose}>
                     <Link href='/about/free-time'>🪁 Free Time</Link>

src/components/organisms/about-work/Education.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { PortableText } from '@portabletext/react';
+import Image from 'next/image';
+import * as React from 'react';
+
+import { School } from '@/types/School';
+
+export interface EducationProps {
+  schools: School[];
+}
+
+const Education = ({ schools }: EducationProps) => {
+  return (
+    <div className=''>
+      <div className='m-2 flex'>
+        <h2>Education</h2>
+      </div>
+
+      <div>
+        {schools.map((school) => (
+          <div
+            key={school._id}
+            className='mb-4 rounded-md p-4 shadow-md dark:bg-slate-900'
+          >
+            {/* Start School Header - Desktop */}
+            <div className='hidden border-b-2 border-slate-200 pb-2 md:flex'>
+              <Image
+                className='me-3 rounded-sm'
+                src={school.schoolIcon}
+                alt={school.schoolName}
+                width={60}
+                height={60}
+              />
+
+              <div className='flex w-full justify-between'>
+                <div className='flex flex-col'>
+                  <div className='flex flex-row'>
+                    <h4 className='me-4'>
+                      <a href={school.degreeUrl}>{school.schoolName}</a>
+                    </h4>
+
+                    <Image
+                      src={school.flagUrl}
+                      alt={school.schoolName}
+                      width={28}
+                      height={28}
+                    />
+                  </div>
+
+                  <h5 className='font-medium'>{school.degreeName}</h5>
+                </div>
+
+                <div className='flex'>
+                  <div className='me-20 flex flex-col justify-center'>
+                    <span className='text-lg font-semibold'>
+                      {school.grade}
+                    </span>
+                  </div>
+
+                  <div className='flex flex-col justify-center'>
+                    <span className='text-lg font-semibold'>
+                      {school.startYear}&nbsp; — &nbsp;{school.endYear}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End School Header - Desktop */}
+
+            {/* Start School Header - Mobile */}
+            <div className='flex flex-col border-b-2 border-slate-200 pb-2 md:hidden'>
+              <div className='flex'>
+                <Image
+                  className='me-3 rounded-sm'
+                  src={school.schoolIcon}
+                  alt={school.schoolName}
+                  width={60}
+                  height={60}
+                />
+
+                <div className='flex w-full justify-between'>
+                  <div className='flex flex-col'>
+                    <div className='flex flex-row justify-between'>
+                      <h4 className='me-4'>
+                        <a href={school.degreeUrl}>{school.schoolName}</a>
+                      </h4>
+
+                      <Image
+                        src={school.flagUrl}
+                        alt={school.schoolName}
+                        width={20}
+                        height={20}
+                      />
+                    </div>
+
+                    <h5 className='font-medium'>{school.degreeName}</h5>
+                  </div>
+                </div>
+              </div>
+
+              <div className='-mt-1 flex flex-row justify-end'>
+                <span className='me-8 text-sm font-normal'>{school.grade}</span>
+
+                <span className='text-sm font-normal'>
+                  {school.startYear}&nbsp; — &nbsp;{school.endYear}
+                </span>
+              </div>
+            </div>
+            {/* End School Header - Mobile */}
+
+            {/* Start School Content */}
+            <div className='job-content pt-4'>
+              <div className='sm-skill-description md:skill-description pb-2 text-justify font-light'>
+                <PortableText value={school.description} />
+              </div>
+            </div>
+            {/* End School Content */}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Education;

src/types/SkillIcon.ts → src/types/Icon.ts

@@ -1,4 +1,4 @@
-export interface SkillIcon {
+export interface Icon {
   _id: string;
   title: string;
   url: string;

src/types/Skill.ts

@@ -1,10 +1,10 @@
 import { TypedObject } from '@portabletext/types';
 
-import { SkillIcon } from '@/types/SkillIcon';
+import { Icon } from '@/types/Icon';
 
 export interface Skill {
   name: string;
   title: string;
   description: TypedObject;
-  icons: SkillIcon[];
+  icons: Icon[];
 }