Skip to content

Example with dynamic pages #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Example with dynamic pages #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a35d0a
separate out projects list component
SuaYoo Feb 7, 2021
100da04
organize projects into categories
SuaYoo Feb 7, 2021
99e2585
support multiple categories
SuaYoo Feb 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions components/ProjectsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import Link from "next/link";
import projects from "../db/projects";
import styles from "./ProjectsList.module.css";

export default function ProjectsList() {
const mediaProjects = projects.filter((project) => {
return project.categories.includes("Media");
});
const designProjects = projects.filter((project) => {
return project.categories.includes("Media");
});

return (
<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>
</div>
);
}
0 pages/projects.module.css → components/ProjectsList.module.css
View file
Open in desktop
File renamed without changes.
20 changes: 14 additions & 6 deletions db/projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
categories: ["Media", "Design"],
},
{
slug: "chess",
name: "Chess",
description: "Play chess online",
slug: "35mm-slide-digitization",
name: "35mm Slide Digitization",
description: "Digitized some 35mm slides",
categories: ["Media"],
},
{
slug: "neighborhood-organization-logo",
name: "Neighborhood Organization Logo",
description: "Design logo for Neighborhood Organization",
categories: ["Design"],
},
];

Expand Down
3 changes: 3 additions & 0 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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 />
Expand Down
20 changes: 2 additions & 18 deletions pages/projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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 />
Expand Down