feat: add Recent Projects section

src/app/page.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
-import readCodeSnippets from '@/lib/markdownUtils';
+import readCodeSnippets, { readMarkdown } from '@/lib/markdownUtils';
 
 import homePageData from '@/data/en/home.json';
+import projects from '@/data/projects/projects.json';
 
 import HomePage from '@/components/pages/home-page';
 
+import { Project } from '@/types/Project';
+
 export const metadata = {
   title: 'Marta Pancaldi | Martacodes.it',
   description:
@@ -15,13 +18,28 @@ export const metadata = {
 };
 
 async function getData() {
+  const projectsWithContent: Project[] = projects;
+  projectsWithContent.map((project) => {
+    const mdFile = project.longDescription;
+    if (mdFile?.includes('.md')) {
+      project.longDescription = readMarkdown(`projects/${mdFile}`);
+    }
+  });
+
   return {
     homePageData,
     codeSnippets: readCodeSnippets(),
+    projects: projectsWithContent,
   };
 }
 
 export default async function Page() {
-  const { homePageData, codeSnippets } = await getData();
-  return <HomePage homePage={homePageData} codeSnippets={codeSnippets} />;
+  const { homePageData, codeSnippets, projects } = await getData();
+  return (
+    <HomePage
+      homePage={homePageData}
+      codeSnippets={codeSnippets}
+      projects={projects}
+    />
+  );
 }

src/components/organisms/home/Photo.tsx

@@ -28,7 +28,7 @@ const Photo = () => {
   }, [theme]);
 
   return (
-    <div className='flex h-[300px] w-full justify-center lg:h-[280px] lg:w-1/2 lg:justify-end lg:mt-0 rounded-md'>
+    <div className='flex h-[300px] w-full justify-center items-center lg:h-[280px] lg:w-1/2 lg:justify-end mt-0 md:mt-8 rounded-md'>
       <div className='flex flex-col items-center mb-2'>
         <Image
           className={clsxm('mb-4 rounded-full', avatar)}

src/components/organisms/home/Projects.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Inter } from 'next/font/google';
+import React from 'react';
+
+const font = Inter({ subsets: ['latin'] });
+
+import Link from 'next/link';
+
+import clsxm from '@/lib/clsxm';
+
+import RecentProjectCard from '@/components/organisms/home/RecentProjectCard';
+
+import { Project } from '@/types/Project';
+
+interface ProjectsProps {
+  projects: Project[];
+}
+
+const Projects = ({ projects }: ProjectsProps) => {
+  return (
+    <div className='flex flex-col'>
+      <div className='tracking-widest text-sm font-semibold text-slate-500 mb-5'>
+        RECENT PROJECTS
+      </div>
+      <div
+        className={clsxm('flex flex-col gap-6 w-full', font.className)}
+        style={font.style}
+      >
+        <RecentProjectCard project={projects[0]} reverse />
+        <RecentProjectCard project={projects[2]} />
+        <RecentProjectCard project={projects[6]} reverse />
+      </div>
+
+      <div className='text-lg text-blue-950 dark:text-blue-200'>
+        Check out more of my projects{' '}
+        <Link
+          href='/projects'
+          className='animated-underline-2 dark:animated-underline font-semibold'
+        >
+          here
+        </Link>
+        ! 👀
+      </div>
+    </div>
+  );
+};
+
+export default Projects;

src/components/organisms/home/RecentProjectCard.tsx

@@ -0,0 +1,88 @@
+import Image from 'next/image';
+import { useTheme } from 'next-themes';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { IconContext } from 'react-icons';
+import { AiFillGithub } from 'react-icons/ai';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+import clsxm from '@/lib/clsxm';
+
+import ButtonLink from '@/components/atoms/links/ButtonLink';
+import { toolIconMapping } from '@/components/organisms/projects/Icons';
+
+import { Project } from '@/types/Project';
+
+interface RecentProjectCardProps {
+  project: Project;
+  reverse?: boolean;
+}
+
+const RecentProjectCard = ({
+  project,
+  reverse = false,
+}: RecentProjectCardProps) => {
+  const flexClass = reverse ? 'md:flex-row-reverse' : 'md:flex-row';
+
+  const { theme } = useTheme();
+
+  const [iconColor, setIconColor] = useState<string>('');
+
+  useEffect(() => {
+    setIconColor(theme === 'dark' ? '#e1e7f2' : '#15295F');
+  }, [theme]);
+
+  return (
+    <div className={clsxm('flex flex-col gap-6 w-full mb-10', flexClass)}>
+      <div className='rounded-xl drop-shadow-lg w-full md:1/2 lg:w-1/3'>
+        <Image
+          className='rounded-lg drop-shadow-lg'
+          src={project.image.url}
+          alt={project.image.name}
+          width={400}
+          height={0}
+        />
+      </div>
+      <div className='flex flex-col w-full md:1/2 lg:w-2/3'>
+        <h4>{project.title}</h4>
+
+        <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+          {project.mediumDescription ?? project.longDescription}
+        </ReactMarkdown>
+
+        <div className='flex flex-row justify-between mt-3'>
+          <div className='flex flex-row'>
+            <IconContext.Provider value={{ color: iconColor, size: '1.5em' }}>
+              {project.tools.map((tool: string) => {
+                const IconComponent = toolIconMapping[tool];
+                return (
+                  IconComponent && (
+                    <span key={tool} className='me-1' aria-label={tool}>
+                      <IconComponent />
+                    </span>
+                  )
+                );
+              })}
+            </IconContext.Provider>
+          </div>
+
+          {project.links.github && (
+            <div className='flex flex-row h-8 items-center px-2'>
+              <ButtonLink
+                href={project.links.github}
+                className='flex gap-1.5'
+                variant={theme === 'dark' ? 'dark' : 'light'}
+              >
+                <AiFillGithub size={24} />
+                Check it out
+              </ButtonLink>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecentProjectCard;

src/components/organisms/home/SkillSummary.tsx

@@ -18,32 +18,37 @@ interface SkillsProps {
 
 const SkillSummary = ({ homePage }: SkillsProps) => {
   return (
-    <div
-      className={clsxm(
-        'flex md:flex-row flex-col-reverse gap-6 w-full',
-        font.className,
-      )}
-    >
-      <div className='md:w-1/4 flex items-center justify-center md:bg-amber-100/75 dark:bg-transparent rounded-3xl'>
-        <Image
-          src='https://res.cloudinary.com/dwrurydlt/image/upload/v1710444087/full-stack-developer.png'
-          height={0}
-          width={375}
-          alt='full-stack development'
-        />
+    <div className='flex flex-col'>
+      <div className='tracking-widest text-sm font-semibold text-slate-500 mb-5 text-end'>
+        SOFTWARE DEVELOPMENT
       </div>
-      <div className='text-lg antialiased md:w-3/4'>
-        <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
-          {homePage.skills.fullStack}
-        </ReactMarkdown>
-
-        <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
-          {homePage.skills.languages}
-        </ReactMarkdown>
-
-        <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
-          {homePage.skills.latest}
-        </ReactMarkdown>
+      <div
+        className={clsxm(
+          'flex md:flex-row flex-col-reverse gap-6 w-full',
+          font.className,
+        )}
+      >
+        <div className='md:w-1/4 flex items-center justify-center lg:bg-amber-100/75 dark:bg-transparent rounded-3xl'>
+          <Image
+            src='https://res.cloudinary.com/dwrurydlt/image/upload/v1710444087/full-stack-developer.png'
+            height={0}
+            width={375}
+            alt='full-stack development'
+          />
+        </div>
+        <div className='text-lg antialiased md:w-3/4'>
+          <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+            {homePage.skills.fullStack}
+          </ReactMarkdown>
+
+          <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+            {homePage.skills.languages}
+          </ReactMarkdown>
+
+          <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+            {homePage.skills.latest}
+          </ReactMarkdown>
+        </div>
       </div>
     </div>
   );

src/components/organisms/home/Summary.tsx

@@ -132,6 +132,10 @@ const Summary = ({ homePage }: SummaryProps) => {
   return (
     <div className={clsx('flex md:flex-row flex-col-reverse', font.className)}>
       <div className='text-lg antialiased'>
+        <div className='tracking-widest text-sm font-semibold text-slate-500 mb-5'>
+          ABOUT ME
+        </div>
+
         <p className='mb-4'>{intro}</p>
 
         <p className='mb-4 md:mb-1'>{work}</p>

src/components/organisms/home/Updates.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { Inter } from 'next/font/google';
+import React from 'react';
+
+const font = Inter({ subsets: ['latin'] });
+
+import Image from 'next/image';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+import clsxm from '@/lib/clsxm';
+
+// interface ProjectsProps {
+//     projects: Project[];
+// }
+
+const Updates = () => {
+  return (
+    <div className='flex flex-col'>
+      <div className='tracking-widest text-sm font-semibold text-slate-500 mb-5 text-end'>
+        UPDATES
+      </div>
+      <div
+        className={clsxm(
+          'flex md:flex-row flex-col-reverse gap-6 w-full',
+          font.className,
+        )}
+      >
+        <div className='md:w-1/4 flex items-center justify-center lg:bg-amber-100/75 dark:bg-transparent rounded-3xl'>
+          <Image
+            src='https://res.cloudinary.com/dwrurydlt/image/upload/v1710444087/full-stack-developer.png'
+            height={0}
+            width={375}
+            alt='full-stack development'
+          />
+        </div>
+        <div className='text-lg antialiased md:w-3/4'>
+          <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+            {homePage.skills.fullStack}
+          </ReactMarkdown>
+
+          <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+            {homePage.skills.languages}
+          </ReactMarkdown>
+
+          <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+            {homePage.skills.latest}
+          </ReactMarkdown>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Updates;

src/components/organisms/projects/Icons.ts

@@ -29,10 +29,12 @@ import {
   SiIeee,
   SiJavascript,
   SiNextdotjs,
+  SiPuppeteer,
   SiPython,
   SiReact,
   SiSpring,
   SiStrapi,
+  SiTailwindcss,
   SiTypescript,
   SiVercel,
 } from 'react-icons/si';
@@ -70,12 +72,14 @@ export const toolIconMapping: Record<string, React.ComponentType> = {
   nextjs: SiNextdotjs,
   nodejs: FaNodeJs,
   php: FaPhp,
+  puppeteer: SiPuppeteer,
   python: SiPython,
   raspberrypi: FaRaspberryPi,
   react: SiReact,
   slack: BsSlack,
   spring: SiSpring,
   strapi: SiStrapi,
+  tailwind: SiTailwindcss,
   twitch: BsTwitch,
   typescript: SiTypescript,
   vercel: SiVercel,

src/components/organisms/projects/ProjectCard.tsx

@@ -55,7 +55,11 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
     }
   }, []);
 
-  const iconColor = theme === 'dark' ? '#e1e7f2' : '#15295F';
+  const [iconColor, setIconColor] = useState<string>('');
+
+  useEffect(() => {
+    setIconColor(theme === 'dark' ? '#e1e7f2' : '#15295F');
+  }, [theme]);
 
   return (
     <div