Update projects page styling, added some projects.

projects.html

@@ -40,7 +40,7 @@
     </header>
     <main>
         <article class="project-card">
-            <h2><a href="">Ace of Shades</a></h2>
+            <h2><a href="https://github.com/andrewlalis/AceOfShades">Ace of Shades</a></h2>
             <p>
                 A top-down 2D shooter game inspired by <em>Ace of Spades</em>, and was made as a submission the 2021 Java Discord server's Java Jam. Includes a dedicated server, client, and server registry application.
             </p>
@@ -52,16 +52,20 @@
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowfullscreen>
             </iframe>
-            <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
+            <div class="icons-row">
+                <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
+            </div>
         </article>
 
         <article class="project-card">
-            <h2><a href="">Ace of Shades 2</a></h2>
+            <h2><a href="https://github.com/Ace-of-Shades-2">Ace of Shades 2</a></h2>
             <p>
                 A 3D first-person shooter designed as the successor to <em>Ace of Shades</em>. This was again made as a 2022 Java Discord Java Jam submission, but I continued to develop it well beyond that.
             </p>
-            <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
+            <div class="icons-row">
-            <img src="images/logo_open_gl.png" class="lang-icon" alt="OpenGL API logo">
+                <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
+                <img src="images/logo_open_gl.png" class="lang-icon" alt="OpenGL API logo">
+            </div>
         </article>
 
         <article class="project-card">
@@ -79,11 +83,13 @@
                     server.start();
                 }
             </code></pre>
-            <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
+            <div class="icons-row">
+                <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
+            </div>
         </article>
 
         <article class="project-card">
-            <h2><a href="https://github.com/andrewlalis/movescript">Movescript & Itemscript</a></h2>
+            <h2><a href="https://andrewlalis.github.io/movescript/">Movescript & Itemscript</a></h2>
             <p>
                 Simple grammars for concisely defining robotic movement and inventory management for ComputerCraft robots in Minecraft.
             </p>
@@ -106,18 +112,23 @@
                 local ms = require("movescript")
                 ms.run("2FUDg")
             </code></pre>
-            <img src="images/logo_lua.png" class="lang-icon" alt="Lua programming language logo">
+            <div class="icons-row">
+                <img src="images/logo_lua.png" class="lang-icon" alt="Lua programming language logo">
+            </div>
         </article>
 
         <article class="project-card">
-            <h2><a href="">Rail Signal</a></h2>
+            <h2><a href="https://github.com/andrewlalis/RailSignalAPI">Rail Signal</a></h2>
             <p>
 			    API and web app for designing and managing rail systems, with real-time data updates via websockets. Originally designed for use with Minecraft and the Immersive Railroading mod, but practically can be used anywhere, as long as you've got the right device driver.
             </p>
-            <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
+            <iframe style="width: 100%; min-height: 250px;" src="https://www.youtube.com/embed/eGkM-cJcYD8" title="Minecraft Web-Based Rail Signalling First Version Showcase" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-            <img src="images/logo_spring_sm.png" class="lang-icon" alt="Spring Framework logo">
+            <div class="icons-row">
-            <img src="images/logo_vue.svg" class="lang-icon" alt="Vue JS framework logo">
+                <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
-            <img src="images/logo_lua.png" class="lang-icon" alt="Lua programming language logo">
+                <img src="images/logo_spring_sm.png" class="lang-icon" alt="Spring Framework logo">
+                <img src="images/logo_vue.svg" class="lang-icon" alt="Vue JS framework logo">
+                <img src="images/logo_lua.png" class="lang-icon" alt="Lua programming language logo">
+            </div>
         </article>
 
         <article class="project-card">
@@ -142,7 +153,9 @@
                     }
                 }
             </code></pre>
-            <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
+            <div class="icons-row">
+                <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
+            </div>
         </article>
 
         <article class="project-card">
@@ -150,7 +163,30 @@
             <p>
                 A library that defines compile-time primitives and helper functions for working with <em>streams</em> of elements. A stream is anything which provides a <code>readFromStream</code> or <code>writeToStream</code> method. Also includes many stream implementations for things like files, sockets, chunked encoding, buffering, and more.
             </p>
-            <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
+            <div class="icons-row">
+                <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
+            </div>
+        </article>
+
+        <article class="project-card">
+            <h2><a href="https://github.com/andrewlalis/record-net">Record-Net</a></h2>
+            <p>
+                A Java library for defining common protocol of binary messages to transmit over the network, similar to <a href="https://protobuf.dev/">Protocol Buffers</a>, but for pure Java applications, so it can take advantage of records and avoid code-generation.
+            </p>
+            <div class="icons-row">
+                <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
+            </div>
+        </article>
+
+        <article class="project-card">
+            <h2><a href="https://github.com/andrewlalis/CoyoteCredit">Coyote Credit</a></h2>
+            <p>
+                A web application for students to learn the basics of real-world stock trading through a simplified user interface and simulated accounts.
+            </p>
+            <div class="icons-row">
+                <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
+                <img src="images/logo_spring_sm.png" class="lang-icon" alt="Spring Framework logo">
+            </div>
         </article>
     </main>
 </body>

styles/project.css

@@ -1,11 +1,56 @@
-.project-card {
+body {
-    background-color: var(--background-color-2);
+    max-width: 100%;
-    padding: 0.5em;
-    margin-top: 1em;
 }
 
-.project-card h2 {
+/* This is the container for all cards. */
+main {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    align-content: flex-start;
+    gap: 2em 2em;
+}
+
+article {
+    background-color: var(--background-color-2);
+    padding: 0.5em;
+    width: calc((100% / 3) - 2.4em);
+    display: flex;
+    flex-direction: column;
+}
+
+@media(max-width: 1000px) {
+    article {
+        width: calc((100% / 2) - 2.4em);
+    }
+}
+
+@media(max-width: 480px) {
+    article {
+        width: 100%;
+    }
+}
+
+article:nth-child(odd) {
+    background-color: var(--background-color-3);
+}
+
+article h2 {
     margin-top: 0;
+    margin-bottom: 0.5em;
+}
+
+article p {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+}
+
+.icons-row {
+    width: 100%;
+    margin-top: auto;
+    padding-top: 0.5em;
 }
 
 .lang-icon {

styles/style.css

@@ -65,6 +65,8 @@ code {
 
 .page-header {
     text-align: center;
+    max-width: 50ch;
+    margin: 0 auto;
 }
 
 .page-header div {