clicky icons

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1727643088689
+		"lastUpdateCheck": 1733513283182
 	}
 }

.astro/types.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="astro/client" />
-/// <reference path="astro/content.d.ts" />
+/// <reference path="content.d.ts" />

.gitignore

@@ -1,2 +1,3 @@
+.astro
 node_modules
 dist

package.json

@@ -19,12 +19,12 @@
     "vite-plugin-solid": "^2.3.0"
   },
   "dependencies": {
-    "@astrojs/solid-js": "^4.4.2",
-    "@astrojs/tailwind": "^5.1.1",
-    "astro": "^4.15.9",
+    "@astrojs/solid-js": "^5.0.0",
+    "@astrojs/tailwind": "^5.1.3",
+    "astro": "^5.0.3",
     "solid-heroicons": "^3.1.1",
     "solid-icons": "^1.0.12",
-    "solid-js": "^1.7.12",
+    "solid-js": "^1.9.3",
     "solid-markdown": "^1.2.0"
   }
 }

src/components/SkillIcons.tsx

@@ -0,0 +1,53 @@
+import { createSignal } from "solid-js";
+import skills from "../data/skills";
+
+
+
+export default function SkillIcons() {
+    return <div class="grid xs:grid-cols-2 sm:grid-cols-3">
+        {
+            skills.map((skill) => {
+                const [lightsOn, setLightsOn] = createSignal(false)
+                function toggleLights() {
+                    setLightsOn(!lightsOn())
+                    if (lightsOn()) {
+                        const click = new Audio('sound/switch1.ogg');
+                        click.play()
+                    } else {
+                        const click = new Audio('sound/switch2.ogg');
+                        click.play()
+                    }
+                }
+                return <button
+                    class="flex xs:justify-normal justify-center items-center m-2 text-left"
+                    onClick={() => toggleLights()}
+                >
+                    <div
+                        class="transition duration-[0.1s] ease-[cubic-bezier(1,1,0,0)]"
+                        classList={{
+                            "grayscale brightness-[0.2]": !lightsOn()
+                        }}
+                    >
+                        {skill.iconType == "image" ? (
+                            <div class="mx-2 flex items-center">
+                                <img
+                                    width={25}
+                                    src={skill.icon as string}
+                                    alt={`skill icon for ${skill.name}`}
+                                />
+                            </div>
+                        ) : (
+                            <div
+                                style={{ "--colour": skill.colour }}
+                                class="mx-2 flex items-center fill-[var(--colour)]"
+                            >
+                                <skill.icon size={25} class="fill-inherit" />
+                            </div>
+                        )}
+                    </div>
+                    <span>{skill.name}</span>
+                </button>
+            })
+        }
+    </div>
+}

src/content/config.ts → src/content.config.ts

@@ -1,19 +1,20 @@
 import { z, defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
 
 const postsCollection = defineCollection({
-  type: 'content', // v2.5.0 and later
+  loader: glob({ pattern: '**/*.md', base: "./src/content/posts" }),
   schema: z.object({
     title: z.string(),
     date: z.string().optional(),
     description: z.string(),
     links: z.array(z.object({
-        name: z.string(),
-        link: z.string(),
+      name: z.string(),
+      url: z.string(),
     })),
     image: z.string().optional(),
   }),
 });
 
 export const collections = {
-  'post': postsCollection,
+  'posts': postsCollection,
 };

src/content/posts/ocr-pseudocode-interpreter.md

@@ -8,4 +8,4 @@ links:
     url: "https://github.com/Hatchibombotar/ocr-pseudocode-interpreter"
 
 image: "/projects/ocr-pseudocode.png"
----
+---

src/data/skills.ts

@@ -58,9 +58,9 @@ export default [
         icon: SiPython,
         colour: "#4578A6",
     },
-    {
-        name: "Minecraft Add-Ons",
-        iconType: "image",
-        icon: MCIcon,
-    },
+    // {
+    //     name: "Minecraft Add-Ons",
+    //     iconType: "image",
+    //     icon: MCIcon,
+    // },
 ];

src/pages/contact.astro

@@ -1,40 +1,29 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import { SiDiscord } from "solid-icons/si";
-import { IoMail } from "solid-icons/io";
 ---
 
 <Layout>
+  <h2 class="text-2xl font-bold my-3">Contact</h2>
   <p class="mb-3">
     Want to ask about one of my projects or about hiring me? <br> You can reach me
     by email or discord.
   </p>
-  <div class="grid sm:grid-cols-2 gap-4">
-    <a
-      href="mailto:hatchibombotar.mc@gmail.com"
-      class="block bg-neutral-50 rounded-lg shadow-sm border px-3 py-4 my-2"
-      target="_blank"
-    >
-      <div class="flex items-center justify-center sm:justify-start gap-2">
-        <IoMail class="fill-black h-5 w-5" />
-        <span class="text-lg text-neutral-800 font-semibold">
-          hatchibombotar.mc@gmail.com
-        </span>
-      </div>
-      <span class="text-neutral-800 text-sm">Email</span>
-    </a>
-    <a
-      href="https://discord.com/users/629396893440671765"
-      class="block bg-neutral-50 rounded-lg shadow-sm border px-3 py-4 my-2"
-      target="_blank"
-    >
-      <div class="flex items-center justify-center sm:justify-start gap-2">
-        <SiDiscord class="fill-black h-5 w-5" />
-        <span class="text-lg text-neutral-800 font-semibold">
+  <ul class="prose underline-offset-2">
+    <li>
+      <div class="flex items-center gap-2">
+        <span>Discord: </span>
+        <a href="https://discord.com/users/629396893440671765" target="_blank">
           @hatchibombotar
-        </span>
+        </a>
+      </div>
+    </li>
+    <li>
+      <div class="flex items-center gap-2">
+        <span>Email: </span>
+        <a href="mailto:hatchibombotar.mc@gmail.com" target="_blank">
+          hatchibombotar.mc@gmail.com
+        </a>
       </div>
-      <span class="text-neutral-800 text-sm">Discord</span>
-    </a>
-  </div>
+    </li>
+  </ul>
 </Layout>

src/pages/index.astro

@@ -9,6 +9,8 @@ import projects from "../data/projects";
 import Layout from "../layouts/Layout.astro";
 import FeedPost from "../components/FeedPost.astro";
 
+import SkillIcons from "../components/SkillIcons"
+
 const logo = "/assets/logo_small.png";
 
 const github_user = await (async () => {
@@ -44,31 +46,7 @@ const postCollectionInOrder = await Promise.all(
   <hr class="my-5" />
 
   <h2 class="text-2xl font-bold my-3">Skills</h2>
-  <div class="grid xs:grid-cols-2 sm:grid-cols-3">
-    {
-      skills.map((skill) => (
-        <div class="flex xs:justify-normal justify-center items-center m-2 text-left sm:grayscale sm:brightness-[0.2] hover:filter-none hover:ease-[cubic-bezier(1,1,0,0)] hover:transition duration-[14s]">
-          {skill.iconType == "image" ? (
-            <div class="mx-2 flex items-center">
-              <img
-                width={25}
-                src={skill.icon as string}
-                alt={`skill icon for ${skill.name}`}
-              />
-            </div>
-          ) : (
-            <div
-              style={{ "--colour": skill.colour }}
-              class="mx-2 flex items-center fill-[var(--colour)]"
-            >
-              <skill.icon size={25} class="fill-inherit" />
-            </div>
-          )}
-          {skill.name}
-        </div>
-      ))
-    }
-  </div>
+  <SkillIcons client:load />
   <hr class="my-5" />
 
   <h2 class="text-2xl font-bold my-3" id="contact">Contact</h2>

src/pages/minecraft.astro

@@ -62,7 +62,7 @@ const ignore_submissions = [
 
   <hr class="my-4" />
   <h2 class="font-semibold text-xl">Add-On Concepts</h2>
-  <p>Some of my more advanced add-ons that I don't end up finishing.</p>
+  <p>Some of my more advanced add-ons that I don't end up releasing.</p>
   <div class="my-2">
     <iframe
       class="w-full h-auto aspect-video my-4 bg-red-400"

src/pages/projects.astro

@@ -1,12 +1,10 @@
 ---
 import { getEntry } from "astro:content";
 
-import skills from "../data/skills";
 import postOrder from "../data/post_order";
 import Layout from "../layouts/Layout.astro";
 import FeedPost from "../components/FeedPost.astro";
 
-
 const postCollectionInOrder = await Promise.all(
   postOrder.map(async (postSlug) => {
     const post = await getEntry("posts", postSlug);