Partially implemented the projects section

next.config.mjs

@@ -7,6 +7,16 @@ await import("./src/env.mjs");
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "picsum.photos",
+        port: "",
+        pathname: "/**",
+      },
+    ],
+  },
 
   /**
    * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config

src/components/Polaroid.tsx

@@ -0,0 +1,27 @@
+import Image from "next/image";
+
+export interface Props {
+  title: string;
+  imageSrc: string;
+  rotation: string;
+}
+
+export const Polaroid: React.FC<Props> = ({ title, imageSrc, rotation }) => {
+  return (
+    <div
+      className={`m-5 w-52 rounded bg-[#F8F2EA] text-black shadow-md sm:w-64 lg:w-80 ${rotation}`}
+    >
+      <div className="flex h-full w-full flex-col items-center justify-between gap-y-3 p-4 sm:gap-y-4 sm:p-5 lg:gap-y-5 lg:p-6">
+        <div className="relative aspect-square w-full">
+          <Image
+            src="https://picsum.photos/200"
+            alt={`Showcase of ${title}`}
+            fill
+            className="object-cover shadow-inner"
+          />
+        </div>
+        <span className="text-2xl font-semibold">{title}</span>
+      </div>
+    </div>
+  );
+};

src/components/ProjectDescription.tsx

@@ -0,0 +1,26 @@
+import * as Separator from "@radix-ui/react-separator";
+
+export interface Props {
+  title: string;
+  color: string;
+  children?: React.ReactNode;
+}
+
+export const ProjectDescription: React.FC<Props> = ({
+  title,
+  color,
+  children,
+}) => {
+  return (
+    <div className="max-w-5xl text-black">
+      <h2 className="text-3xl font-semibold">{title}</h2>
+      <Separator.Root
+        className={`${color} my-2 h-1 w-full rounded-full`}
+        decorative
+      />
+      <p className="text-base leading-relaxed md:text-lg lg:text-xl">
+        {children}
+      </p>
+    </div>
+  );
+};

src/constants/projects.ts

@@ -0,0 +1,29 @@
+import type { Props as PolaroidProps } from "~/components/Polaroid";
+import type { Props as ProjectDescriptionProps } from "~/components/ProjectDescription";
+
+export const projects: Array<PolaroidProps & ProjectDescriptionProps> = [
+  {
+    title: "Parallel",
+    color: "bg-orange",
+    imageSrc: "https://unsplash.com/photos/OqtafYT5kTw",
+    rotation: "-rotate-12",
+    children:
+      "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ",
+  },
+  {
+    title: "DropNote",
+    color: "bg-yellow",
+    imageSrc: "",
+    rotation: "rotate-6",
+    children:
+      "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ",
+  },
+  {
+    title: "Flurry",
+    color: "bg-green",
+    imageSrc: "",
+    rotation: "-rotate-3",
+    children:
+      "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ",
+  },
+];

src/pages/index.tsx

@@ -1,5 +1,8 @@
 import { type NextPage } from "next";
 import Head from "next/head";
+import { Polaroid } from "~/components/Polaroid";
+import { ProjectDescription } from "~/components/ProjectDescription";
+import { projects } from "~/constants/projects";
 
 const Home: NextPage = () => {
   return (
@@ -12,7 +15,7 @@ const Home: NextPage = () => {
       <>
         <Hero />
         {/* <Services /> */}
-        {/* <Projects /> */}
+        <Projects />
         {/* <About /> */}
         {/* <Contact /> */}
       </>
@@ -35,7 +38,34 @@ const Hero = () => {
     </>
   );
 };
+
 // const Services = () => {}
-// const Projects = () => {}
+
+const Projects = () => {
+  return (
+    <div className="container py-20 [&>*:nth-child(odd)]:md:flex-row">
+      {projects.map((p) => (
+        <div
+          key={p.title}
+          className="my-20 flex flex-col items-center gap-x-12 gap-y-6 md:my-0 md:flex-row-reverse"
+        >
+          <div className="">
+            <Polaroid
+              title={p.title}
+              imageSrc={p.imageSrc}
+              rotation={p.rotation}
+            />
+          </div>
+          <div className="">
+            <ProjectDescription title={p.title} color={p.color}>
+              {p.children}
+            </ProjectDescription>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 // const About = () => {}
 // const Contact = () => {}