From 8212c68e3700e0ec56305d53f25ae4c4f5bcfbf8 Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Tue, 1 Aug 2023 07:58:39 -0400
Subject: [PATCH] Update projects page styling, added some projects.

---
 projects.html      | 66 +++++++++++++++++++++++++++++++++++-----------
 styles/project.css | 55 ++++++++++++++++++++++++++++++++++----
 styles/style.css   |  2 ++
 3 files changed, 103 insertions(+), 20 deletions(-)

diff --git a/projects.html b/projects.html
index 9a6fffe..92248f9 100644
--- a/projects.html
+++ b/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">
-            <img src="images/logo_open_gl.png" class="lang-icon" alt="OpenGL API logo">
+            <div class="icons-row">
+                <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">
-            <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">
+            <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>
+            <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">
+                <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>
diff --git a/styles/project.css b/styles/project.css
index 261ba92..0561878 100644
--- a/styles/project.css
+++ b/styles/project.css
@@ -1,11 +1,56 @@
-.project-card {
-    background-color: var(--background-color-2);
-    padding: 0.5em;
-    margin-top: 1em;
+body {
+    max-width: 100%;
 }
 
-.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 {
diff --git a/styles/style.css b/styles/style.css
index 16d2ec7..c5c7a0a 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -65,6 +65,8 @@ code {
 
 .page-header {
     text-align: center;
+    max-width: 50ch;
+    margin: 0 auto;
 }
 
 .page-header div {