From 7a35d0a719434a316ebbf278560695979d727a45 Mon Sep 17 00:00:00 2001
From: Sua Yoo <sua@telnyx.com>
Date: Sun, 7 Feb 2021 14:14:06 -0800
Subject: [PATCH 1/3] separate out projects list component

---
 components/ProjectsList.js                    | 19 ++++++++++++++++++
 .../ProjectsList.module.css                   |  0
 pages/index.js                                |  3 +++
 pages/projects.js                             | 20 ++-----------------
 4 files changed, 24 insertions(+), 18 deletions(-)
 create mode 100644 components/ProjectsList.js
 rename pages/projects.module.css => components/ProjectsList.module.css (100%)

diff --git a/components/ProjectsList.js b/components/ProjectsList.js
new file mode 100644
index 0000000..f0c8245
--- /dev/null
+++ b/components/ProjectsList.js
@@ -0,0 +1,19 @@
+import Link from "next/link";
+import projects from "../db/projects";
+import styles from "./ProjectsList.module.css";
+
+export default function ProjectsList() {
+  return (
+    <section className={styles.list}>
+      {projects.map((project) => (
+        <div key={project.name} className={styles.listItem}>
+          <h2 className={styles.name}>{project.name}</h2>
+          <p className={styles.description}>{project.description}</p>
+          <div>
+            <Link href={`/projects/${project.slug}`}>View</Link>
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}
diff --git a/pages/projects.module.css b/components/ProjectsList.module.css
similarity index 100%
rename from pages/projects.module.css
rename to components/ProjectsList.module.css
diff --git a/pages/index.js b/pages/index.js
index 8387fc1..47f5b6f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,7 @@
 import Head from "next/head";
 import Navigation from "@components/Navigation";
 import Footer from "@components/Footer";
+import ProjectsList from "@components/ProjectsList";
 
 export default function Home() {
   return (
@@ -16,6 +17,8 @@ export default function Home() {
         <h1 className="main-title">Welcome to my portfolio</h1>
 
         <p className="main-description">This is the home page</p>
+
+        <ProjectsList />
       </main>
 
       <Footer />
diff --git a/pages/projects.js b/pages/projects.js
index b6bd3ba..dfc30f2 100644
--- a/pages/projects.js
+++ b/pages/projects.js
@@ -1,9 +1,7 @@
 import Head from "next/head";
-import Link from "next/link";
 import Navigation from "@components/Navigation";
 import Footer from "@components/Footer";
-import projects from "../db/projects";
-import projectStyles from "./projects.module.css";
+import ProjectsList from "@components/ProjectsList";
 
 export default function Projects() {
   return (
@@ -20,21 +18,7 @@ export default function Projects() {
 
         <p className="main-description">This is the projects page</p>
 
-        <div>
-          <section className={projectStyles.list}>
-            {projects.map((project) => (
-              <div key={project.name} className={projectStyles.listItem}>
-                <h2 className={projectStyles.name}>{project.name}</h2>
-                <p className={projectStyles.description}>
-                  {project.description}
-                </p>
-                <div>
-                  <Link href={`/projects/${project.slug}`}>View</Link>
-                </div>
-              </div>
-            ))}
-          </section>
-        </div>
+        <ProjectsList />
       </main>
 
       <Footer />

From 100da04cd3aea8e3f186e54a491e89f1e7041794 Mon Sep 17 00:00:00 2001
From: Sua Yoo <sua@telnyx.com>
Date: Sun, 7 Feb 2021 14:24:28 -0800
Subject: [PATCH 2/3] organize projects into categories

---
 components/ProjectsList.js | 47 ++++++++++++++++++++++++++++++--------
 db/projects.js             | 20 +++++++++++-----
 2 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/components/ProjectsList.js b/components/ProjectsList.js
index f0c8245..ca323f1 100644
--- a/components/ProjectsList.js
+++ b/components/ProjectsList.js
@@ -3,17 +3,44 @@ import projects from "../db/projects";
 import styles from "./ProjectsList.module.css";
 
 export default function ProjectsList() {
+  const mediaProjects = projects.filter((project) => {
+    return project.category === "Media";
+  });
+  const designProjects = projects.filter((project) => {
+    return project.category === "Design";
+  });
+
   return (
-    <section className={styles.list}>
-      {projects.map((project) => (
-        <div key={project.name} className={styles.listItem}>
-          <h2 className={styles.name}>{project.name}</h2>
-          <p className={styles.description}>{project.description}</p>
-          <div>
-            <Link href={`/projects/${project.slug}`}>View</Link>
-          </div>
+    <div>
+      <section>
+        <h2>Media</h2>
+        <div className={styles.list}>
+          {mediaProjects.map((project) => (
+            <div key={project.name} className={styles.listItem}>
+              <h2 className={styles.name}>{project.name}</h2>
+              <p className={styles.description}>{project.description}</p>
+              <div>
+                <Link href={`/projects/${project.slug}`}>View</Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <h2>Design</h2>
+        <div className={styles.list}>
+          {designProjects.map((project) => (
+            <div key={project.name} className={styles.listItem}>
+              <h2 className={styles.name}>{project.name}</h2>
+              <p className={styles.description}>{project.description}</p>
+              <div>
+                <Link href={`/projects/${project.slug}`}>View</Link>
+              </div>
+            </div>
+          ))}
         </div>
-      ))}
-    </section>
+      </section>
+    </div>
   );
 }
diff --git a/db/projects.js b/db/projects.js
index 1b4be3b..3e2b68e 100644
--- a/db/projects.js
+++ b/db/projects.js
@@ -1,13 +1,21 @@
 const projects = [
   {
-    slug: "farmers-market",
-    name: "Farmer's market",
-    description: "Buy some fruits and vegetables",
+    slug: "glass-slide-digitization",
+    name: "Glass Slide Digitization",
+    description: "Digitized some glass slides",
+    category: "Media",
   },
   {
-    slug: "chess",
-    name: "Chess",
-    description: "Play chess online",
+    slug: "35mm-slide-digitization",
+    name: "35mm Slide Digitization",
+    description: "Digitized some 35mm slides",
+    category: "Media",
+  },
+  {
+    slug: "neighborhood-organization-logo",
+    name: "Neighborhood Organization Logo",
+    description: "Design logo for Neighborhood Organization",
+    category: "Design",
   },
 ];
 

From 99e258544da859f8ed5a409980764b54e16b3fbe Mon Sep 17 00:00:00 2001
From: Sua Yoo <sua@telnyx.com>
Date: Sun, 7 Feb 2021 14:38:52 -0800
Subject: [PATCH 3/3] support multiple categories

---
 components/ProjectsList.js | 4 ++--
 db/projects.js             | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/ProjectsList.js b/components/ProjectsList.js
index ca323f1..bb14b0e 100644
--- a/components/ProjectsList.js
+++ b/components/ProjectsList.js
@@ -4,10 +4,10 @@ import styles from "./ProjectsList.module.css";
 
 export default function ProjectsList() {
   const mediaProjects = projects.filter((project) => {
-    return project.category === "Media";
+    return project.categories.includes("Media");
   });
   const designProjects = projects.filter((project) => {
-    return project.category === "Design";
+    return project.categories.includes("Media");
   });
 
   return (
diff --git a/db/projects.js b/db/projects.js
index 3e2b68e..257e608 100644
--- a/db/projects.js
+++ b/db/projects.js
@@ -3,19 +3,19 @@ const projects = [
     slug: "glass-slide-digitization",
     name: "Glass Slide Digitization",
     description: "Digitized some glass slides",
-    category: "Media",
+    categories: ["Media", "Design"],
   },
   {
     slug: "35mm-slide-digitization",
     name: "35mm Slide Digitization",
     description: "Digitized some 35mm slides",
-    category: "Media",
+    categories: ["Media"],
   },
   {
     slug: "neighborhood-organization-logo",
     name: "Neighborhood Organization Logo",
     description: "Design logo for Neighborhood Organization",
-    category: "Design",
+    categories: ["Design"],
   },
 ];