feat: allow multiple featured project sections on the home page

Author: TheNickOfTime

src/components/home/featured/featured-projects.tsx

@@ -7,16 +7,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretLeft, faCaretRight, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { useState } from 'react';
 
-const Gallery = () => {
-	const projects: Projects = import.meta.glob('/src/projects/portfolio/*.mdx', {
+const Gallery = ({ projects }: { projects: string[] }) => {
+	const importedProjects: Projects = import.meta.glob('/src/projects/portfolio/*.mdx', {
 		eager: true,
 	});
 
-	const featuredProjects: Project[] = Object.values(projects)
-		.filter((project) => {
-			return project.metadata.featured;
-		})
-		.sort((a, b) => a.metadata.featured - b.metadata.featured);
+	const featuredProjects: Project[] = projects.map((project) => importedProjects[project]);
 
 	const [galleryIndex, setGalleryIndex] = useState(0);
 
@@ -80,17 +76,22 @@ const Gallery = () => {
 	);
 };
 
-export default function FeaturedProjects() {
+type Params = {
+	title: string;
+	projects: string[];
+};
+
+export default function FeaturedProjects({ title, projects }: Params) {
 	return (
 		<div id='featured-projects'>
 			<div id='projects-title'>
-				<h1>Featured Projects</h1>
+				<h1>{title}</h1>
 				<NavLink id='all-projects' className='button' to='/projects'>
 					See All Projects
 				</NavLink>
 			</div>
 			{/* <div id='projects-container'> */}
-			<Gallery />
+			<Gallery projects={projects} />
 			{/* </div> */}
 		</div>
 	);

src/components/projects/project-card/project-card.scss

@@ -15,6 +15,7 @@
 	.project-image {
 		width: 100%;
 		aspect-ratio: 16/9;
+		object-fit: cover;
 	}
 
 	.project-info {

src/pages/home/home.tsx

@@ -9,7 +9,26 @@ export default function Home() {
 		<>
 			<Hero />
 			<SocialLinks />
-			<FeaturedProjects />
+			<FeaturedProjects
+				title='Featured Web Projects'
+				projects={[
+					'/src/projects/portfolio/handbrake-web.mdx',
+					'/src/projects/portfolio/dev-portfolio.mdx',
+					'/src/projects/portfolio/games-portfolio.mdx',
+					'/src/projects/portfolio/pokemon-search-app.mdx',
+					'/src/projects/portfolio/realtime-multiplayer-game.mdx',
+					'/src/projects/portfolio/rock-paper-scissors.mdx',
+				]}
+			/>
+			<FeaturedProjects
+				title='Featured Game Projects'
+				projects={[
+					'/src/projects/portfolio/thorb.mdx',
+					'/src/projects/portfolio/dungeon-of-greyness.mdx',
+					'/src/projects/portfolio/escape-room.mdx',
+					'/src/projects/portfolio/gravity-box.mdx',
+				]}
+			/>
 		</>
 	);
 }

src/projects/portfolio/games-portfolio.mdx

@@ -2,7 +2,7 @@ export const metadata = {
 	thumb: 'thumbs/portfolio/games-portfolio.png',
 	name: 'Games Portfolio',
 	description:
-		'I worked in game development for quite some time, you can see work in games here. The site itself was built with Jekyll & deployed via GitHub Pages.',
+		'My previous portfolio website. The site itself was built with Jekyll & deployed via GitHub Pages.',
 	link: 'https://nickcunningh.am/games-portfolio/',
 	links: {
 		live: 'https://nickcunningh.am/games-portfolio/',