Use cards for Other Projects

Author: ButterscotchV

src/other-projects.md

@@ -12,22 +12,86 @@ description: "Links to my other projects."
 
 # {{ title }}
 
-## [ButterSTT](https://github.com/ButterscotchV/ButterSTT)
+<div class="columns is-multiline">
+<div class="column is-half">
+    <div class="card">
+        <header class="card-header">
+            <p class="card-header-title">ButterSTT</p>
+        </header>
+        <div class="card-content">
+            <div class="content">
+                My open source speech to text program for VRChat! This is a passion project of mine built to provide a local free speech to text service that is fast.
+            </div>
+        </div>
+        <footer class="card-footer is-nowrap is-flex-wrap-wrap">
+            <a class="card-footer-item" href="https://github.com/ButterscotchV/ButterSTT" target="_blank" rel="noopener">GitHub</a>
+        </footer>
+    </div>
+</div>
 
-My open source speech to text program for VRChat! This is a passion project of mine built to provide a local free speech to text service that is fast.
+<div class="column is-half">
+    <div class="card">
+        <header class="card-header">
+            <p class="card-header-title">Bingus Search</p>
+        </header>
+        <div class="card-content">
+            <div class="content">
+                Bingus Search is a passion project of mine to assist with technical support, helping people find accurate information through a simple question-based search.
+            </div>
+        </div>
+        <footer class="card-footer is-nowrap is-flex-wrap-wrap">
+            <a class="card-footer-item" href="https://bingus.bscotch.ca/" target="_blank" rel="noopener">Website</a>
+            <a class="card-footer-item" href="https://github.com/SlimeVR/Bingus-Search" target="_blank" rel="noopener">GitHub</a>
+        </footer>
+    </div>
+</div>
 
-## [Bingus Search](https://bingus.bscotch.ca/)
+<div class="column is-half">
+    <div class="card">
+        <header class="card-header">
+            <p class="card-header-title">SlimeVR Firmware Tool</p>
+        </header>
+        <div class="card-content">
+            <div class="content">
+                I host a fork of the SlimeVR Firmware Tool for people to use as the original is no longer hosted or maintained. There is a version integrated within the SlimeVR software which I highly recommend using instead.
+            </div>
+        </div>
+        <footer class="card-footer is-nowrap is-flex-wrap-wrap">
+            <a class="card-footer-item" href="https://slimevr-firmware.bscotch.ca/" target="_blank" rel="noopener">Website</a>
+        </footer>
+    </div>
+</div>
 
-Bingus Search is a passion project of mine to assist with technical support, helping people find accurate information through a simple question-based search.
+<div class="column is-half">
+    <div class="card">
+        <header class="card-header">
+            <p class="card-header-title">SlimeVR Testing Checklist</p>
+        </header>
+        <div class="card-content">
+            <div class="content">
+                This is a simple checklist I made to help with testing SlimeVR!
+            </div>
+        </div>
+        <footer class="card-footer is-nowrap is-flex-wrap-wrap">
+            <a class="card-footer-item" href="https://slimevr-testing.bscotch.ca/" target="_blank" rel="noopener">Website</a>
+            <a class="card-footer-item" href="https://github.com/ButterscotchV/SlimeVR-Integration-Testing" target="_blank" rel="noopener">GitHub</a>
+        </footer>
+    </div>
+</div>
 
-## [SlimeVR Firmware Tool](https://slimevr-firmware.bscotch.ca/)
-
-I host a fork of the SlimeVR Firmware Tool for people to use as the original is no longer hosted or maintained. There is a version integrated within the SlimeVR software which I highly recommend using instead.
-
-## [SlimeVR Testing Checklist](https://slimevr-testing.bscotch.ca/)
-
-This is a simple checklist I made to help with testing SlimeVR!
-
-## [SlimeVR Web GUI](https://slimevr-gui.bscotch.ca/)
-
-Originally made for use with Termux for standalone SlimeVR, now it's no longer needed and it's recommended you follow the [mobile setup guide](https://docs.slimevr.dev/tools/mobile-installation.html).
+<div class="column is-half">
+    <div class="card">
+        <header class="card-header">
+            <p class="card-header-title">SlimeVR Web GUI</p>
+        </header>
+        <div class="card-content">
+            <div class="content">
+                Originally made for use with Termux for standalone SlimeVR, now it's no longer needed and it's recommended you follow the <a href="https://docs.slimevr.dev/tools/mobile-installation.html" target="_blank" rel="noopener">mobile setup guide</a>.
+            </div>
+        </div>
+        <footer class="card-footer is-nowrap is-flex-wrap-wrap">
+            <a class="card-footer-item" href="https://slimevr-gui.bscotch.ca/" target="_blank" rel="noopener">Website</a>
+        </footer>
+    </div>
+</div>
+</div>