feat: add icons into skills page

.prettierignore

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

CONTRIBUTING.md

@@ -44,14 +44,14 @@ Exclamation mark is optional too, but it's used to mark breaking changes.
 
 Must be one of the following:
 
--   **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
--   **ci**: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)
--   **docs**: Documentation only changes
--   **feat**: A new feature
--   **fix**: A bug fix
--   **perf**: A code change that improves performance
--   **refactor**: A code change that neither fixes a bug nor adds a feature
--   **test**: Adding missing tests or correcting existing tests
+- **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
+- **ci**: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)
+- **docs**: Documentation only changes
+- **feat**: A new feature
+- **fix**: A bug fix
+- **perf**: A code change that improves performance
+- **refactor**: A code change that neither fixes a bug nor adds a feature
+- **test**: Adding missing tests or correcting existing tests
 
 ##### Scope
 
@@ -59,27 +59,27 @@ The scope should be the name of the npm package affected (as perceived by the pe
 
 The following is the list of supported scopes:
 
--   `layouts`
--   `components`
--   `components-widgets`
--   `components-atoms`
--   `pages`
--   `pages-blog`
--   `pages-docs`
--   `scripts`
--   `assets`
+- `layouts`
+- `components`
+- `components-widgets`
+- `components-atoms`
+- `pages`
+- `pages-blog`
+- `pages-docs`
+- `scripts`
+- `assets`
 
 There are currently a few exceptions to the "use package name" rule:
 
--   none/empty string: useful for `test` and `refactor` changes that are done across all packages (e.g. `test: add missing unit tests`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`).
+- none/empty string: useful for `test` and `refactor` changes that are done across all packages (e.g. `test: add missing unit tests`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`).
 
 ##### Summary
 
 Use the summary field to provide a succinct description of the change:
 
--   use the imperative, present tense: "change" not "changed" nor "changes"
--   don't capitalize the first letter
--   no dot (.) at the end
+- use the imperative, present tense: "change" not "changed" nor "changes"
+- don't capitalize the first letter
+- no dot (.) at the end
 
 #### <a name="commit-body"></a>Commit Message Body
 
@@ -92,8 +92,8 @@ You can include a comparison of the previous behavior with the new behavior in o
 
 The footer is optional and is used for two purposes:
 
--   To reference issues that this commit closes
--   To include information that doesn't fit in the header or body, such as a link to a file or a suggestion to review a pull request
+- To reference issues that this commit closes
+- To include information that doesn't fit in the header or body, such as a link to a file or a suggestion to review a pull request
 
 The format for the footer is as follows:
 
@@ -113,5 +113,5 @@ If the commit reverts a previous commit, it should begin with `revert: `, follow
 
 The content of the commit message body should contain:
 
--   information about the SHA of the commit being reverted in the following format: `This reverts commit <SHA>`,
--   a clear description of the reason for reverting the commit message.
+- information about the SHA of the commit being reverted in the following format: `This reverts commit <SHA>`,
+- a clear description of the reason for reverting the commit message.

README.md

@@ -20,9 +20,9 @@
 
 ## Usage
 
--   To run the development server: `npm run dev`
--   To build the project for production: `npm run build`
--   To preview the production build: `npm run preview`
+- To run the development server: `npm run dev`
+- To build the project for production: `npm run build`
+- To preview the production build: `npm run preview`
 
 ## Contributing
 

astro-integrations/minify/index.ts

@@ -4,26 +4,29 @@ import { writeFile, readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 
 export default (): AstroIntegration => {
-    return {
-        name: "hyro-minify",
-        hooks: {
-            "astro:build:done": async (opts) => {
-                for (const route of opts.routes) {
-                    const content = await readFile(fileURLToPath(route.distURL!), "utf-8");
-                    const minified = await minify(content, {
-                        removeAttributeQuotes: true,
-                        collapseWhitespace: true,
-                        minifyCSS: true,
-                        html5: true,
-                        removeComments: true,
-                        minifyJS: true,
-                        minifyURLs: true,
-                    });
+  return {
+    name: "hyro-minify",
+    hooks: {
+      "astro:build:done": async (opts) => {
+        for (const route of opts.routes) {
+          const content = await readFile(
+            fileURLToPath(route.distURL!),
+            "utf-8"
+          );
+          const minified = await minify(content, {
+            removeAttributeQuotes: true,
+            collapseWhitespace: true,
+            minifyCSS: true,
+            html5: true,
+            removeComments: true,
+            minifyJS: true,
+            minifyURLs: true,
+          });
 
-                    await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
-                    console.log(`Minified ${route.distURL!.pathname}`)
-                }
-            }
+          await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
+          console.log(`Minified ${route.distURL!.pathname}`);
         }
-    }
-}
+      },
+    },
+  };
+};

astro.config.ts

@@ -19,25 +19,25 @@ import minify from "./astro-integrations/minify";
 
 // https://astro.build/config
 export default defineConfig({
-    site: "https://xhyrom.dev/",
-    //prepisat uwu
-    integrations: [
-        tailwind(),
-        image(),
-        sitemap(),
-        compress({
-            svg: false,
-            html: false,
-        }),
-        prefetch(),
-        robotsTxt({
-            policy: [
-                {
-                    userAgent: "*",
-                },
-            ],
-            sitemap: true,
-        }),
-        minify(),
-    ],
+  site: "https://xhyrom.dev/",
+  //prepisat uwu
+  integrations: [
+    tailwind(),
+    image(),
+    sitemap(),
+    compress({
+      svg: false,
+      html: false,
+    }),
+    prefetch(),
+    robotsTxt({
+      policy: [
+        {
+          userAgent: "*",
+        },
+      ],
+      sitemap: true,
+    }),
+    minify(),
+  ],
 });

package.json

@@ -1,33 +1,40 @@
 {
-    "name": "@example/basics",
-    "type": "module",
-    "version": "0.0.1",
-    "private": true,
-    "scripts": {
-        "dev": "astro dev",
-        "start": "astro dev",
-        "build": "astro build",
-        "preview": "astro preview",
-        "astro": "astro"
-    },
-    "dependencies": {
-        "@astrojs/image": "^0.16.8",
-        "@astrojs/prefetch": "^0.2.1",
-        "@astrojs/sitemap": "^1.3.1",
-        "@astrojs/tailwind": "^3.1.2",
-        "@tailwindcss/typography": "^0.5.9",
-        "astro": "^2.4.5",
-        "astro-compress": "^1.1.42",
-        "astro-robots-txt": "^0.5.0",
-        "fireworks-js": "^2.10.4",
-        "html-minifier": "^4.0.0",
-        "tailwind": "^4.0.0",
-        "tailwindcss": "^3.3.2"
-    },
-    "devDependencies": {
-        "@types/html-minifier": "^4.0.2",
-        "prettier": "2.8.8",
-        "prettier-plugin-astro": "^0.8.1",
-        "prettier-plugin-tailwindcss": "^0.2.8"
+  "name": "@example/basics",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/image": "^0.16.8",
+    "@astrojs/prefetch": "^0.2.1",
+    "@astrojs/sitemap": "^1.3.1",
+    "@astrojs/tailwind": "^3.1.2",
+    "@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",
+    "tailwindcss": "^3.3.2"
+  },
+  "devDependencies": {
+    "@types/html-minifier": "^4.0.2",
+    "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/env.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="astro/client" />
 
 interface ImportMetaEnv {
-    readonly GITHUB_ACCESS_TOKEN: string;
+  readonly GITHUB_ACCESS_TOKEN: string;
 }
 
 interface ImportMeta {
-    readonly env: ImportMetaEnv;
+  readonly env: ImportMetaEnv;
 }

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",
-    "Bun, Node.js, little Deno",
-    "React, Astro, Next.js",
-  ],
-  ["HTML", "TailwindCSS", "CSS"],
-  ["Java", "Kotlin", "Rust (learning now)"],
-  ["SQLite", "MySQL", "MongoDB", "Redis"],
-  [
-    "Git",
-    "GitHub Actions",
-    "GitHub Pages",
-    "Cloudflare Workers",
-    "Cloudflare Pages",
-    "Netlify",
-  ],
+  {
+    name: "TypeScript",
+    icon: "logos:typescript-icon",
+  },
+  {
+    name: "JavaScript",
+    icon: "logos:javascript",
+  },
+  {
+    name: "Bun",
+    icon: "logos:bun",
+  },
+  {
+    name: "NodeJS",
+    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) => (
-                <>
-                  {skill.map((item) => (
-                    <li>{item}</li>
-                  ))}
-                  <hr class="my-4" />
-                </>
+                <TechIcon icon={skill.icon} name={skill.name} />
               ))
             }
           </ul>

src/scripts/menu.js

@@ -1,9 +1,9 @@
 document.querySelector(".hamburger").addEventListener("click", () => {
-    document.querySelector(".nav-links").classList.remove("hidden");
-    document.querySelector(".hamburger-close").classList.remove("hidden");
+  document.querySelector(".nav-links").classList.remove("hidden");
+  document.querySelector(".hamburger-close").classList.remove("hidden");
 });
 
 document.querySelector(".hamburger-close").addEventListener("click", () => {
-    document.querySelector(".nav-links").classList.toggle("hidden");
-    document.querySelector(".hamburger-close").classList.toggle("hidden");
+  document.querySelector(".nav-links").classList.toggle("hidden");
+  document.querySelector(".hamburger-close").classList.toggle("hidden");
 });

src/scripts/sidebarToggle.js

@@ -1,6 +1,6 @@
 document.getElementById("sidebar-show").addEventListener("click", () => {
-    document.getElementById("sidebar-show").classList.remove("hidden");
-    document.getElementById("sidebar").classList.toggle("-translate-x-full");
-    document.getElementById("sidebar").classList.remove("invisible");
-    document.getElementById("open-arrow").classList.toggle("rotate-180");
+  document.getElementById("sidebar-show").classList.remove("hidden");
+  document.getElementById("sidebar").classList.toggle("-translate-x-full");
+  document.getElementById("sidebar").classList.remove("invisible");
+  document.getElementById("open-arrow").classList.toggle("rotate-180");
 });

tailwind.config.cjs

@@ -1,18 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-    theme: {
-        extend: {
-            colors: {
-                dark: "#0D0D0D",
-                gray: "#131313",
-                hyroGold: "#fbc119",
-            },
-            dropShadow: {
-                yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
-                yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
-            },
-        },
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        dark: "#0D0D0D",
+        gray: "#131313",
+        hyroGold: "#fbc119",
+      },
+      dropShadow: {
+        yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
+        yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
+      },
     },
-    plugins: [require("@tailwindcss/typography")],
+  },
+  plugins: [require("@tailwindcss/typography")],
 };

tsconfig.json

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

vercel.json

@@ -1,23 +1,23 @@
 {
-    "headers": [
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
         {
-            "source": "/(.*)",
-            "headers": [
-                {
-                    "key": "Content-Security-Policy",
-                    "value": "img-src 'self'; font-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; object-src 'none'"
-                }
-            ]
+          "key": "Content-Security-Policy",
+          "value": "img-src 'self'; font-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; object-src 'none'"
         }
-    ],
-    "redirects": [
-        {
-            "source": "/docs",
-            "destination": "/docs/items/nadpis/introduction"
-        },
-        {
-            "source": "/docs/",
-            "destination": "/docs/items/nadpis/introduction"
-        }
-    ]
+      ]
+    }
+  ],
+  "redirects": [
+    {
+      "source": "/docs",
+      "destination": "/docs/items/nadpis/introduction"
+    },
+    {
+      "source": "/docs/",
+      "destination": "/docs/items/nadpis/introduction"
+    }
+  ]
 }