From 5b52d01235dbba87b0e5a1422a1b2fb061c07888 Mon Sep 17 00:00:00 2001 From: Henry-Hiles Date: Tue, 16 May 2023 10:16:02 -0400 Subject: [PATCH] Improve routes --- src/components/About.astro | 4 ++-- src/components/Portfolio.astro | 4 ++-- .../projects/{[id].astro => [route].astro} | 10 +++++----- src/projects.json | 18 ++++++++++++------ 4 files changed, 21 insertions(+), 15 deletions(-) rename src/pages/projects/{[id].astro => [route].astro} (86%) diff --git a/src/components/About.astro b/src/components/About.astro index 960c3ab..56d93a2 100644 --- a/src/components/About.astro +++ b/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{" "} - QuadraticBot 2.0, a giveaway bot - for discord. + QuadraticBot 2.0, a + giveaway bot for discord.

For more projects, check out{" "} diff --git a/src/components/Portfolio.astro b/src/components/Portfolio.astro index d7b2464..518f0fc 100644 --- a/src/components/Portfolio.astro +++ b/src/components/Portfolio.astro @@ -9,8 +9,8 @@ import Divider from "./Divider.astro"

{ - projects.map((project, index) => ( - + projects.map((project) => ( + {project.name} ({ 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 --- @@ -63,7 +63,7 @@ const project = projects[id]
{`Image diff --git a/src/projects.json b/src/projects.json index 93b0ab7..fb04bad 100644 --- a/src/projects.json +++ b/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" } ]