Improve routes

src/components/About.astro

@@ -20,8 +20,8 @@ import Divider from "./Divider.astro"
 					extensive experience with React, SolidJS, Node.js, and
 					ASP.NET Razor Pages. I have used my Node.js knowledge to
 					create{" "}
-					<a href="/projects/0">QuadraticBot 2.0</a>, a giveaway bot
-					for discord.
+					<a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a
+					giveaway bot for discord.
 				</p>
 				<p>
 					For more projects, check out{" "}

src/components/Portfolio.astro

@@ -9,8 +9,8 @@ import Divider from "./Divider.astro"
 	<Divider />
 	<article class={styles.portfolioItems}>
 		{
-			projects.map((project, index) => (
-				<a href={`/projects/${index}`}>
+			projects.map((project) => (
+				<a href={`/projects/${project.route}`}>
 					<img
 						src={`/images/${project.thumbImage}`}
 						alt={project.name}

src/pages/projects/[route].astro

@@ -7,12 +7,12 @@ import Layout from "../../layouts/Layout.astro"
 import projects from "../../projects.json"
 
 export function getStaticPaths() {
-	return projects.map((_, id) => ({ params: { id: id } }))
+	return projects.map((project) => ({ params: { route: project.route } }))
 }
 
-const { id: idParam } = Astro.params
-const id = Number(idParam)
-const project = projects[id]
+const { route } = Astro.params
+const project = projects.find((project) => project.route === route)
+if (project == null) return
 ---
 
 <Layout page={project.name}>
@@ -63,7 +63,7 @@ const project = projects[id]
 				</article>
 				<article class={styles.image}>
 					<img
-						src={`/images/${project.computerImages[0]}`}
+						src={`/images/${project.computerImage}`}
 						alt={`Image of ${project.name}`}
 						class={styles.screenshot}
 					/>

src/projects.json

@@ -1,6 +1,7 @@
 [
 	{
 		"name": "QuadraticBot 2.0",
+		"route": "quadraticbot2.0",
 		"github": "https://github.com/Henry-Hiles/QuadraticBot2.0",
 		"overview": "A simple, user-friendly giveaway bot that uses slash commands and buttons.",
 		"description": "A simple, open-source, user-friendly Discord giveaway bot that uses the latest features, such as slash commands, timestamps, and buttons. It's a rewrite of my original closed-source Discord bot, Quadratic Giveaways.",
@@ -9,58 +10,63 @@
 			"link": "https://discord.com/api/oauth2/authorize?client_id=930172444910702653&permissions=150528&scope=applications.commands%20bot"
 		},
 		"technologies": "This project was built using Node.js and Discord.js.",
-		"computerImages": ["quadraticBotComputer.png"],
+		"computerImage": "quadraticBotComputer.png",
 		"mobileImage": "flappyMobile.png",
 		"thumbImage": "quadraticBot.png"
 	},
 	{
 		"name": "Flappy Bird",
+		"route": "flappy-bird",
 		"github": "https://github.com/Henry-Hiles/FlappyBird",
 		"overview": "A simple flappy bird game, made with html elements, CSS, and JavaScript. Made without using canvas.",
 		"description": "A simple flappy bird game, made with the technologies listed below. This project uses a modular design, with many JS files working together. It uses ES6 arrow functions instead of regular functions.",
 		"technologies": "This project was built using handcrafted HTML, CSS, and JavaScript, and canvas wasn't used. This project uses no bloated frontend technologies, making for quick loading times and fewer requests.",
-		"computerImages": ["flappyComputer1.png", "flappyComputer2.png"],
+		"computerImage": "flappyComputer1.png",
 		"mobileImage": "flappyMobile.png",
 		"thumbImage": "flappyThumb.jpg"
 	},
 	{
 		"name": "PokeAPI Searcher",
+		"route": "pokeapi-searcher",
 		"github": "https://github.com/Henry-Hiles/PokeAPI-Searcher",
 		"overview": "A simple website where you can search for Pokemon by type or Pokedex. Uses the PokeAPI for data.",
 		"description": "A simple website where you can search for Pokemon by type or Pokedex. Uses the PokeAPI for data. Made purely of HTML, CSS, and Vanilla Javascript. Uses the Fetch API for querying the PokeAPI.",
 		"technologies": "This project was built using handcrafted HTML, CSS, and JavaScript, and canvas wasn't used. This project uses no bloated frontend technologies, making for quick loading times and fewer requests.",
-		"computerImages": ["pokeAPIComputer1.png", "pokeAPIComputer2.png"],
+		"computerImage": "pokeAPIComputer1.png",
 		"mobileImage": "pokeAPIMobile.png",
 		"thumbImage": "pokeAPIThumb.png"
 	},
 	{
 		"name": "Messaging",
+		"route": "messaging",
 		"github": "https://github.com/Henry-Hiles/Messaging",
 		"overview": "A messaging website where multiple users can chat together.",
 		"description": "A simple, open-source, online chat room where you can join online chat rooms, or create your own.",
 		"technologies": "This project was built using handcrafted Javascript, as well as Node.js, Socket.io, and Express.",
-		"computerImages": ["messagingComputer.png"],
+		"computerImage": "messagingComputer.png",
 		"mobileImage": "messagingMobile.png",
 		"thumbImage": "messagingThumb.png",
 		"demoLink": "https://chat.henryhiles.com"
 	},
 	{
 		"name": "Video Chat",
+		"route": "video-chat",
 		"github": "https://github.com/Henry-Hiles/Video-Chat",
 		"overview": "A simple Web-RTC powered video chat that uses PeerJS and Socket.IO.",
 		"description": "A simple Web-RTC powered video chat, great for chatting with friends or family.",
 		"technologies": "This project was built using EJS, PeerJS, Express, and Socket.IO.",
-		"computerImages": ["videoChatComputer.png"],
+		"computerImage": "videoChatComputer.png",
 		"thumbImage": "videoChatThumb.png",
 		"demoLink": "https://video.henryhiles.com"
 	},
 	{
 		"name": "MentalMath",
+		"route": "mental-math",
 		"github": "https://github.com/Henry-Hiles/MentalMath",
 		"overview": "A simple project to help with learning addition and subtraction.",
 		"description": "A simple project to help with learning addition and subtraction. You can change the amount of numbers, and switch between addition and subtraction modes.",
 		"technologies": "This project was built using React and CSS Modules.",
-		"computerImages": ["mentalMathComputer.png"],
+		"computerImage": "mentalMathComputer.png",
 		"thumbImage": "mentalMathThumb.webp"
 	}
 ]