feat: change skill icons to hoverable links

next.config.js

@@ -1,18 +1,26 @@
+// @ts-check
+
 const withPreact = require("next-plugin-preact");
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
 	enabled: process.env.ANALYZE === "true"
 });
 
-module.exports = withBundleAnalyzer(
-	withPreact({
-		reactStrictMode: true,
-		swcMinify: true,
-		i18n: { locales: ["en-US"], defaultLocale: "en-US" },
+/** @type {import("next").NextConfig} */
+const config = {
+	reactStrictMode: true,
+	swcMinify: true,
+	i18n: { locales: ["en-US"], defaultLocale: "en-US" },
+	images: {
+		domains: ["cdn.discordapp.com", "i.scdn.co", "skillicons.dev"],
+		dangerouslyAllowSVG: true,
+		contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;"
+	},
+	experimental: {
+		esmExternals: false,
 		images: {
-			domains: ["cdn.discordapp.com", "i.scdn.co", "skillicons.dev"]
-		},
-		experimental: {
-			esmExternals: false
+			allowFutureImage: true
 		}
-	})
-);
+	}
+};
+
+module.exports = withBundleAnalyzer(withPreact(config));

src/data/index.ts

@@ -11,6 +11,13 @@ export interface ProjectInfo {
 	url: string;
 }
 
+export interface SkillInfo {
+	name: string;
+	icon: string;
+	href: string;
+	bg?: string;
+}
+
 export interface AnimeInfo {
 	name: string;
 	description: string;
@@ -81,8 +88,74 @@ export const projects: ProjectInfo[] = [
 	}
 ];
 
-export const skillIcons =
-	"https://skillicons.dev/icons?theme=dark&perline=5&i=ts,js,html,css,rust,vscode,tailwind,github,nextjs,react,mongodb,nodejs";
+export const skills: SkillInfo[] = [
+	{
+		name: "TypeScript",
+		icon: "ts",
+		href: "https://www.typescriptlang.org/",
+		bg: "#3279cc"
+	},
+	{
+		name: "JavaScript",
+		icon: "js",
+		href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
+		bg: "#ecdb4f"
+	},
+	{
+		name: "HTML",
+		icon: "html",
+		href: "https://developer.mozilla.org/en-US/docs/Web/HTML",
+		bg: "#d55125"
+	},
+	{
+		name: "CSS",
+		icon: "css",
+		href: "https://developer.mozilla.org/en-US/docs/Web/CSS",
+		bg: "#3076bd"
+	},
+	{
+		name: "Rust",
+		icon: "rust",
+		href: "https://www.rust-lang.org/",
+		bg: "#d73c22"
+	},
+	{
+		name: "VS Code",
+		icon: "vscode",
+		href: "https://code.visualstudio.com/"
+	},
+	{
+		name: "Tailwind CSS",
+		icon: "tailwind",
+		href: "https://tailwindcss.com/"
+	},
+	{
+		name: "GitHub",
+		icon: "github",
+		href: "https://github.com/"
+	},
+	{
+		name: "Next.js",
+		icon: "nextjs",
+		href: "https://nextjs.org/"
+	},
+	{
+		name: "React",
+		icon: "react",
+		href: "https://reactjs.org/"
+	},
+	{
+		name: "MongoDB",
+		icon: "mongodb",
+		href: "https://www.mongodb.com/",
+		bg: "#0f3430"
+	},
+	{
+		name: "Node.js",
+		icon: "nodejs",
+		href: "https://nodejs.org/en/"
+	}
+];
 
 export const anime: AnimeInfo[] = [
 	{

src/pages/skills.tsx

@@ -1,18 +1,12 @@
 import { CubeIcon } from "@heroicons/react/solid";
-import { InferGetStaticPropsType } from "next";
+import Image from "next/image";
 
 import GenericMeta from "../components/GenericMeta";
-import { skillIcons } from "../data";
+import { skills } from "../data";
 
-export async function getStaticProps() {
-	const svg = await fetch(skillIcons).then(res => res.text());
+const skillIconsEndpoint = "https://skillicons.dev/icons?theme=dark&i=";
 
-	return { props: { svg } };
-}
-
-export default function Skills({
-	svg
-}: InferGetStaticPropsType<typeof getStaticProps>) {
+export default function Skills() {
 	return (
 		<>
 			<GenericMeta
@@ -28,10 +22,33 @@ export default function Skills({
 				Skills and technologies I use to build things.
 			</p>
 
-			<div
-				dangerouslySetInnerHTML={{ __html: svg }}
-				className="w-full overflow-x-scroll"
-			/>
+			<div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 gap-2 sm:gap-4">
+				{skills.map(({ name, icon, href, bg }) => (
+					<a
+						href={href}
+						target="_blank"
+						rel="noopener noreferrer"
+						key={icon}
+						className="group overflow-hidden isolate relative grid place-items-center rounded-lg aspect-square before:absolute before:inset-0 before:z-10 before:bg-black before:opacity-0 before:transition before:duration-300 hover:before:opacity-50"
+						style={{
+							backgroundColor: bg ?? "#252938"
+						}}
+					>
+						<Image
+							src={`${skillIconsEndpoint}${icon}`}
+							layout="fill"
+							objectFit="cover"
+							className="-z-10 transition duration-300 group-hover:scale-[1.02]"
+							priority={true}
+						/>
+						<div className="z-10 absolute inset-2 md:inset-4 flex flex-col justify-end transition duration-300 scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100">
+							<h2 className="text-lg xs:text-xl md:text-2xl font-bold leading-tight">
+								{name}
+							</h2>
+						</div>
+					</a>
+				))}
+			</div>
 		</>
 	);
 }

tailwind.config.js

@@ -6,6 +6,10 @@ module.exports = {
 		"./src/pages/**/*.{ts,tsx,js,jsx}"
 	],
 	theme: {
+		screens: {
+			xs: "400px",
+			...defaultTheme.screens
+		},
 		extend: {
 			fontFamily: {
 				heading: ["Inter", ...defaultTheme.fontFamily.sans],