feat: add icons into skills page

.prettierignore

@@ -1 +1,2 @@
 dist/*
+node_modules/*

astro-integrations/minify/index.ts

@@ -9,7 +9,10 @@ export default (): AstroIntegration => {
     hooks: {
       "astro:build:done": async (opts) => {
         for (const route of opts.routes) {
-                    const content = await readFile(fileURLToPath(route.distURL!), "utf-8");
+          const content = await readFile(
+            fileURLToPath(route.distURL!),
+            "utf-8"
+          );
           const minified = await minify(content, {
             removeAttributeQuotes: true,
             collapseWhitespace: true,
@@ -21,9 +24,9 @@ export default (): AstroIntegration => {
           });
 
           await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
-                    console.log(`Minified ${route.distURL!.pathname}`)
+          console.log(`Minified ${route.distURL!.pathname}`);
         }
-            }
+      },
-        }
+    },
-    }
+  };
-}
+};

package.json

@@ -18,7 +18,9 @@
     "@tailwindcss/typography": "^0.5.9",
     "astro": "^2.4.5",
     "astro-compress": "^1.1.42",
+    "astro-icon": "^0.8.0",
     "astro-robots-txt": "^0.5.0",
+    "astro-tooltips": "^0.6.2",
     "fireworks-js": "^2.10.4",
     "html-minifier": "^4.0.0",
     "tailwind": "^4.0.0",
@@ -29,5 +31,10 @@
     "prettier": "2.8.8",
     "prettier-plugin-astro": "^0.8.1",
     "prettier-plugin-tailwindcss": "^0.2.8"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "astro-icon@0.8.0": "patches/astro-icon@0.8.0.patch"
+    }
   }
 }

patches/astro-icon@0.8.0.patch

@@ -0,0 +1,17 @@
+diff --git a/lib/resolver.ts b/lib/resolver.ts
+index 3845a6542c924397a7c2e2daf0a78cdb243ec603..0a02155ecf9b7f208432eb7e7c0a1108de502786 100644
+--- a/lib/resolver.ts
++++ b/lib/resolver.ts
+@@ -1,10 +1,10 @@
+-const baseURL = "https://api.astroicon.dev/v1/";
++const baseURL = "https://api.iconify.design/";
+ const requests = new Map();
+ const fetchCache = new Map();
+ 
+ // Default resolver fetches icons from `api.astroicon.dev`
+ export default async function get(pack: string, name: string) {
+-  const url = new URL(`./${pack}/${name}`, baseURL).toString();
++  const url = new URL(`./${pack}/${name}.svg`, baseURL).toString();
+   // Handle in-flight requests
+   if (requests.has(url)) {
+     return await requests.get(url);

src/components/widgets/TechIcon.astro

@@ -0,0 +1,18 @@
+---
+import { Tooltips } from "astro-tooltips";
+import { Icon } from "astro-icon";
+
+type Props = {
+  name: string;
+  icon: string;
+};
+
+const { name, icon } = Astro.props as Props;
+---
+
+<li class="p-2">
+  <Tooltips interactive={false} delay={[15, 150]} placement="top" />
+  <span title={name}>
+    <Icon name={icon} class="h-10 w-10" />
+  </span>
+</li>

src/pages/about.astro

@@ -1,25 +1,86 @@
 ---
 import Container from "../components/atoms/Container.astro";
 import Navbar from "../components/widgets/Navbar.astro";
+import TechIcon from "../components/widgets/TechIcon.astro";
 import Layout from "../layouts/Layout.astro";
 
 const skills = [
-  [
+  {
-    "TypeScript, JavaScript",
+    name: "TypeScript",
-    "Bun, Node.js, little Deno",
+    icon: "logos:typescript-icon",
-    "React, Astro, Next.js",
+  },
-  ],
+  {
-  ["HTML", "TailwindCSS", "CSS"],
+    name: "JavaScript",
-  ["Java", "Kotlin", "Rust (learning now)"],
+    icon: "logos:javascript",
-  ["SQLite", "MySQL", "MongoDB", "Redis"],
+  },
-  [
+  {
-    "Git",
+    name: "Bun",
-    "GitHub Actions",
+    icon: "logos:bun",
-    "GitHub Pages",
+  },
-    "Cloudflare Workers",
+  {
-    "Cloudflare Pages",
+    name: "NodeJS",
-    "Netlify",
+    icon: "logos:nodejs-icon-alt",
-  ],
+  },
+  {
+    name: "Deno",
+    icon: "logos:deno",
+  },
+  {
+    name: "React",
+    icon: "logos:react",
+  },
+  {
+    name: "NextJS",
+    icon: "file-icons:nextjs",
+  },
+  {
+    name: "Astro",
+    icon: "vscode-icons:file-type-astro",
+  },
+  {
+    name: "TailwindCSS",
+    icon: "logos:tailwindcss-icon",
+  },
+  {
+    name: "Java",
+    icon: "logos:java",
+  },
+  {
+    name: "Kotlin",
+    icon: "logos:kotlin-icon",
+  },
+  {
+    name: "Rust",
+    icon: "vscode-icons:file-type-rust",
+  },
+  {
+    name: "Go",
+    icon: "vscode-icons:file-type-go-aqua",
+  },
+  {
+    name: "MySQL",
+    icon: "logos:mysql-icon",
+  },
+  {
+    name: "MongoDB",
+    icon: "devicon:mongodb",
+  },
+  {
+    name: "Redis",
+    icon: "devicon:redis",
+  },
+  {
+    name: "Git",
+    icon: "mdi:git",
+  },
+  {
+    name: "GitHub",
+    icon: "mdi:github",
+  },
+  {
+    name: "CloudFlare",
+    icon: "logos:cloudflare",
+  },
 ];
 ---
 
@@ -89,15 +150,12 @@ const skills = [
           My skill set spans various programming languages, databases, and
           frameworks.
 
-          <ul class="list-inside list-disc">
+          <ul
+            class="mx-auto mb-4 flex w-fit flex-wrap items-center justify-center rounded-md border border-neutral-800"
+          >
             {
               skills.map((skill) => (
-                <>
+                <TechIcon icon={skill.icon} name={skill.name} />
-                  {skill.map((item) => (
-                    <li>{item}</li>
-                  ))}
-                  <hr class="my-4" />
-                </>
               ))
             }
           </ul>

tsconfig.json

@@ -1,3 +1,4 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "exclude": ["node_modules", ".astro"]
 }