feat: add icons into skills page

.prettierignore

@@ -1 +1,2 @@
-dist/*
+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)
+- **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)
+- **ci**: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)
--   **docs**: Documentation only changes
+- **docs**: Documentation only changes
--   **feat**: A new feature
+- **feat**: A new feature
--   **fix**: A bug fix
+- **fix**: A bug fix
--   **perf**: A code change that improves performance
+- **perf**: A code change that improves performance
--   **refactor**: A code change that neither fixes a bug nor adds a feature
+- **refactor**: A code change that neither fixes a bug nor adds a feature
--   **test**: Adding missing tests or correcting existing tests
+- **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`
+- `layouts`
--   `components`
+- `components`
--   `components-widgets`
+- `components-widgets`
--   `components-atoms`
+- `components-atoms`
--   `pages`
+- `pages`
--   `pages-blog`
+- `pages-blog`
--   `pages-docs`
+- `pages-docs`
--   `scripts`
+- `scripts`
--   `assets`
+- `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"
+- use the imperative, present tense: "change" not "changed" nor "changes"
--   don't capitalize the first letter
+- don't capitalize the first letter
--   no dot (.) at the end
+- 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 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 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>`,
+- 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.
+- 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 run the development server: `npm run dev`
--   To build the project for production: `npm run build`
+- To build the project for production: `npm run build`
--   To preview the production build: `npm run preview`
+- 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 {
+  return {
-        name: "hyro-minify",
+    name: "hyro-minify",
-        hooks: {
+    hooks: {
-            "astro:build:done": async (opts) => {
+      "astro:build:done": async (opts) => {
-                for (const route of opts.routes) {
+        for (const route of opts.routes) {
-                    const content = await readFile(fileURLToPath(route.distURL!), "utf-8");
+          const content = await readFile(
-                    const minified = await minify(content, {
+            fileURLToPath(route.distURL!),
-                        removeAttributeQuotes: true,
+            "utf-8"
-                        collapseWhitespace: true,
+          );
-                        minifyCSS: true,
+          const minified = await minify(content, {
-                        html5: true,
+            removeAttributeQuotes: true,
-                        removeComments: true,
+            collapseWhitespace: true,
-                        minifyJS: true,
+            minifyCSS: true,
-                        minifyURLs: true,
+            html5: true,
-                    });
+            removeComments: true,
+            minifyJS: true,
+            minifyURLs: true,
+          });
 
-                    await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
+          await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
-                    console.log(`Minified ${route.distURL!.pathname}`)
+          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/",
+  site: "https://xhyrom.dev/",
-    //prepisat uwu
+  //prepisat uwu
-    integrations: [
+  integrations: [
-        tailwind(),
+    tailwind(),
-        image(),
+    image(),
-        sitemap(),
+    sitemap(),
-        compress({
+    compress({
-            svg: false,
+      svg: false,
-            html: false,
+      html: false,
-        }),
+    }),
-        prefetch(),
+    prefetch(),
-        robotsTxt({
+    robotsTxt({
-            policy: [
+      policy: [
-                {
+        {
-                    userAgent: "*",
+          userAgent: "*",
-                },
+        },
-            ],
+      ],
-            sitemap: true,
+      sitemap: true,
-        }),
+    }),
-        minify(),
+    minify(),
-    ],
+  ],
 });

package.json

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

src/pages/docs/items/nadpis/introduction.md

@@ -11,4 +11,4 @@ Aliquam sollicitudin dolor et faucibus lobortis. Nullam et nisi mi. Nunc congue
 
 Proin placerat nisi ac nibh aliquet pellentesque. Fusce efficitur, arcu aliquet faucibus fringilla, arcu nisi vestibulum nunc, at porttitor massa erat vel nisi. Duis in ornare risus, blandit lobortis magna. Donec convallis sem a metus luctus porttitor. Quisque interdum faucibus nunc nec tincidunt. Nunc ut ullamcorper libero, in ornare risus. Fusce at vestibulum mauris. Proin euismod lectus et facilisis eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. In lobortis gravida augue at tincidunt. Fusce volutpat nisi id tempor luctus. Aenean ac hendrerit nisl. Donec ut venenatis ligula. Donec purus nibh, maximus id diam sit amet, viverra congue mi.
 
-Quisque consectetur porttitor diam nec porta. Donec ut tortor in dui ultrices vestibulum ut quis tellus. Morbi dignissim quis enim volutpat sagittis. Pellentesque iaculis mattis varius. Nam non laoreet ex. Etiam vestibulum leo augue, ut auctor lacus feugiat vitae. Maecenas vitae ante non nisl vestibulum luctus eu et tortor. Proin velit nisl, dapibus pellentesque interdum non, efficitur in orci.
+Quisque consectetur porttitor diam nec porta. Donec ut tortor in dui ultrices vestibulum ut quis tellus. Morbi dignissim quis enim volutpat sagittis. Pellentesque iaculis mattis varius. Nam non laoreet ex. Etiam vestibulum leo augue, ut auctor lacus feugiat vitae. Maecenas vitae ante non nisl vestibulum luctus eu et tortor. Proin velit nisl, dapibus pellentesque interdum non, efficitur in orci.

src/pages/docs/items/nadpis/test.md

@@ -1,4 +1,4 @@
 ---
 title: Test
 layout: ../../../../layouts/docs/ItemLayout.astro
----
+---

src/pages/docs/items/y/introduction.md

@@ -1,3 +1,3 @@
 ---
 title: Introduction
----
+---

src/pages/docs/items/y/test.md

@@ -1,3 +1,3 @@
 ---
 title: Test
----
+---

src/scripts/menu.js

@@ -1,9 +1,9 @@
 document.querySelector(".hamburger").addEventListener("click", () => {
-    document.querySelector(".nav-links").classList.remove("hidden");
+  document.querySelector(".nav-links").classList.remove("hidden");
-    document.querySelector(".hamburger-close").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(".nav-links").classList.toggle("hidden");
-    document.querySelector(".hamburger-close").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-show").classList.remove("hidden");
-    document.getElementById("sidebar").classList.toggle("-translate-x-full");
+  document.getElementById("sidebar").classList.toggle("-translate-x-full");
-    document.getElementById("sidebar").classList.remove("invisible");
+  document.getElementById("sidebar").classList.remove("invisible");
-    document.getElementById("open-arrow").classList.toggle("rotate-180");
+  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}"],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-    theme: {
+  theme: {
-        extend: {
+    extend: {
-            colors: {
+      colors: {
-                dark: "#0D0D0D",
+        dark: "#0D0D0D",
-                gray: "#131313",
+        gray: "#131313",
-                hyroGold: "#fbc119",
+        hyroGold: "#fbc119",
-            },
+      },
-            dropShadow: {
+      dropShadow: {
-                yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
+        yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
-                yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
+        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": "/(.*)",
+          "key": "Content-Security-Policy",
-            "headers": [
+          "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",
+  "redirects": [
-            "destination": "/docs/items/nadpis/introduction"
+    {
-        },
+      "source": "/docs",
-        {
+      "destination": "/docs/items/nadpis/introduction"
-            "source": "/docs/",
+    },
-            "destination": "/docs/items/nadpis/introduction"
+    {
-        }
+      "source": "/docs/",
-    ]
+      "destination": "/docs/items/nadpis/introduction"
+    }
+  ]
 }