From 8f738b0ad249cd8dd673ad58ba58742f8882bb55 Mon Sep 17 00:00:00 2001
From: Zeke Abshire <zekeabshire@gmail.com>
Date: Thu, 11 May 2023 12:28:16 -0500
Subject: [PATCH] Partially implemented the projects section

---
 next.config.mjs                       | 10 ++++++++
 src/components/Polaroid.tsx           | 27 +++++++++++++++++++++
 src/components/ProjectDescription.tsx | 26 ++++++++++++++++++++
 src/constants/projects.ts             | 29 +++++++++++++++++++++++
 src/pages/index.tsx                   | 34 +++++++++++++++++++++++++--
 5 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Polaroid.tsx
 create mode 100644 src/components/ProjectDescription.tsx
 create mode 100644 src/constants/projects.ts

diff --git a/next.config.mjs b/next.config.mjs
index d921057..4753f8f 100644
--- a/next.config.mjs
+++ b/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
diff --git a/src/components/Polaroid.tsx b/src/components/Polaroid.tsx
new file mode 100644
index 0000000..6b2aa07
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/ProjectDescription.tsx b/src/components/ProjectDescription.tsx
new file mode 100644
index 0000000..c04dda8
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/constants/projects.ts b/src/constants/projects.ts
new file mode 100644
index 0000000..a3b6419
--- /dev/null
+++ b/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. ",
+  },
+];
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b9a6781..f3731fe 100644
--- a/src/pages/index.tsx
+++ b/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 = () => {}