feat: add tech icons to projects

src/data/projects.ts

@@ -1,8 +1,21 @@
+export interface StackIconItem {
+	name: string;
+	icon: string;
+	src?: never;
+}
+
+export interface StackCustomItem {
+	name: string;
+	icon?: never;
+	src: string;
+}
+
 export interface ProjectInfo {
 	name: string;
 	description: React.ReactNode;
 	image: string;
 	url: string;
+	stack: (StackIconItem | StackCustomItem)[];
 }
 
 export const projects: ProjectInfo[] = [
@@ -11,41 +24,177 @@ export const projects: ProjectInfo[] = [
 		description:
 			"A 2D simulation of flocking behavior with thousands of boids.",
 		image: "/images/projects/boids.png",
-		url: "https://boids.cubedhuang.com"
+		url: "https://boids.cubedhuang.com",
+		stack: [
+			{
+				name: "PixiJS",
+				src: "/images/icons/pixi.png"
+			},
+			{
+				name: "JavaScript",
+				icon: "js"
+			},
+			{
+				name: "HTML",
+				icon: "html"
+			},
+			{
+				name: "CSS",
+				icon: "css"
+			}
+		]
 	},
 	{
 		name: "Slate – Discord Bot",
 		description:
 			"A Discord bot with loads of features like YouTube Together, logging ghost pings, playing music, and more.",
 		image: "/images/projects/slate.jpg",
-		url: "https://slate.dan.onl"
+		url: "https://slate.dan.onl",
+		stack: [
+			{
+				name: "Linux Systems",
+				icon: "linux"
+			},
+			{
+				name: "NodeJS",
+				icon: "nodejs"
+			},
+			{
+				name: "discord.js",
+				src: "/images/icons/djs.webp"
+			},
+			{
+				name: "Docker",
+				icon: "docker"
+			},
+			{
+				name: "MongoDB",
+				icon: "mongodb"
+			},
+			{
+				name: "Prisma",
+				icon: "prisma"
+			},
+			{
+				name: "TypeScript",
+				icon: "ts"
+			}
+		]
 	},
 	{
 		name: "Discord Embed Creator",
 		description:
 			"A tool that lets you generate code for embeds in discord.js or discord.py easily.",
 		image: "/images/projects/embed.png",
-		url: "https://embed.dan.onl"
+		url: "https://embed.dan.onl",
+		stack: [
+			{
+				name: "Next.js",
+				icon: "nextjs"
+			},
+			{
+				name: "React",
+				icon: "react"
+			},
+			{
+				name: "TailwindCSS",
+				icon: "tailwindcss"
+			},
+			{
+				name: "Redis",
+				icon: "redis"
+			},
+			{
+				name: "MD Parsers",
+				icon: "markdown"
+			},
+			{
+				name: "TypeScript",
+				icon: "ts"
+			},
+			{
+				name: "SCSS",
+				icon: "sass"
+			}
+		]
 	},
 	{
-		name: "College Board Pseudocode Interpreter",
+		name: "Pseudocode Interpreter",
 		description:
 			"An interpreter for the College Board specified pseudocode language for the Computer Science Principles AP Exam.",
 		image: "/images/projects/board.png",
-		url: "https://board.dan.onl"
+		url: "https://board.dan.onl",
+		stack: [
+			{
+				name: "Next.js",
+				icon: "nextjs"
+			},
+			{
+				name: "React",
+				icon: "react"
+			},
+			{
+				name: "TypeScript",
+				icon: "ts"
+			},
+			{
+				name: "HTML",
+				icon: "html"
+			},
+			{
+				name: "CSS",
+				icon: "css"
+			}
+		]
 	},
 	{
 		name: "CubeDHuang: Web Experiments",
 		description:
 			"A collection of various random web experiments I've made over the years.",
 		image: "/images/projects/cubedhuang.webp",
-		url: "https://cubedhuang.com"
+		url: "https://cubedhuang.com",
+		stack: [
+			{
+				name: "Vue.js",
+				icon: "vue"
+			},
+			{
+				name: "JavaScript",
+				icon: "js"
+			},
+			{
+				name: "HTML",
+				icon: "html"
+			},
+			{
+				name: "CSS",
+				icon: "css"
+			}
+		]
 	},
 	{
 		name: "Wordle Bot",
 		description:
 			"A simple bot that lets you play unlimited Wordle games in your Discord servers. It uses images to accurately simulate the real Wordle website.",
 		image: "/images/projects/wordle.jpg",
-		url: "https://github.com/cubedhuang/wordle-bot"
+		url: "https://github.com/cubedhuang/wordle-bot",
+		stack: [
+			{
+				name: "discord.js",
+				src: "/images/icons/djs.webp"
+			},
+			{
+				name: "PlanetScale",
+				src: "/images/icons/pscale.jpg"
+			},
+			{
+				name: "Prisma",
+				icon: "prisma"
+			},
+			{
+				name: "TypeScript",
+				icon: "ts"
+			}
+		]
 	}
 ];

src/pages/projects.tsx

@@ -1,9 +1,11 @@
 import { CollectionIcon, ExternalLinkIcon } from "@heroicons/react/solid";
-import Image from "next/image";
+import Image from "next/future/image";
 
 import GenericMeta from "../components/GenericMeta";
 import { projects } from "../data/projects";
 
+const skillIconsEndpoint = "https://skillicons.dev/icons?theme=dark&i=";
+
 export default function Projects() {
 	return (
 		<>
@@ -17,7 +19,7 @@ export default function Projects() {
 				<CollectionIcon className="ml-4 h-12 w-12 text-blue-400" />
 			</h1>
 
-			{projects.map(({ name, description, image, url }) => (
+			{projects.map(({ name, description, image, url, stack }) => (
 				<div
 					key={name}
 					className="mb-4 flex flex-col rounded-lg bg-slate-900"
@@ -26,11 +28,36 @@ export default function Projects() {
 						<Image
 							src={image}
 							alt=""
-							layout="fill"
-							objectFit="cover"
+							width={1200}
+							height={800}
+							// layout="fill"
+							// objectFit="cover"
 							priority={true}
-							className="rounded-t-lg transition duration-500 group-hover:scale-105"
+							className="absolute top-0 left-0 w-full h-full object-cover object-center rounded-t-lg transition duration-500 group-hover:scale-105"
 						/>
+
+						<div className="flex absolute bottom-2 right-2 gap-2">
+							{stack.map(({ name, icon, src }) => (
+								<div className="relative group cursor-pointer flex justify-center">
+									<Image
+										key={name}
+										src={
+											icon !== undefined
+												? `${skillIconsEndpoint}${icon}`
+												: src
+										}
+										width={120}
+										height={120}
+										alt={name}
+										className="w-6 h-6 md:w-10 md:h-10 rounded-[25%]"
+										quality={100}
+									/>
+									<div className="absolute mb-1 px-2 py-1 text-white text-sm bg-slate-900 opacity-0 group-hover:opacity-100 transition pointer-events-none bottom-full rounded-lg w-max">
+										{name}
+									</div>
+								</div>
+							))}
+						</div>
 					</div>
 					<div className="p-4">
 						<div className="flex items-start">