dynamic project list

2025-04-23 14:16:27 -07:00 · 2025-04-23 14:16:27 -07:00 · 51ec83a45e
commit 51ec83a45e
parent b18488dce8
4 changed files with 117 additions and 46 deletions
--- a/css/style.scss
+++ b/css/style.scss
@ -38,6 +38,10 @@ body {
        justify-content: center;
        align-items: center;

+        img.icon {
+            width: 1.5em;
+        }
+
        h1 {}

        h2 {}
@ -71,9 +75,7 @@ body {
                    flex-direction: row;
                    gap: 0.5em;

-                    img.icon {
-                        width: 1.5em;
-                    }
+
                }


@ -95,10 +97,17 @@ body {
                    div.project {
                        background-color: white;
                        border-radius: 1em;
-                        flex: 1;
+                        flex-wrap: wrap;
+                        flex: 1 0 30%;
                        padding: 0.5em;
                        align-content: flex-start;
-                        justify-content: flex-start;
+                        justify-content: space-between;
+                        div.icons {
+                            padding-top: 0.5em;
+                            display: flex;
+                            flex-direction: row;
+                            gap: 0.75em;
+                        }

                    }
                }
--- a/images/icons/app.svg
+++ b/images/icons/app.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="m 2 0 c -1.105469 0 -2 0.894531 -2 2 c 0.00390625 0.710938 0.382812 1.371094 1 1.726562 v 8.546876 c -0.617188 0.355468 -0.99609375 1.015624 -1 1.726562 c 0 1.105469 0.894531 2 2 2 c 0.710938 -0.003906 1.371094 -0.382812 1.726562 -1 h 8.546876 c 0.355468 0.617188 1.015624 0.996094 1.726562 1 c 1.105469 0 2 -0.894531 2 -2 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 v -8.542969 c 0.617188 -0.355468 0.996094 -1.015624 1 -1.726562 c 0 -1.105469 -0.894531 -2 -2 -2 c -0.710938 0.00390625 -1.371094 0.382812 -1.726562 1 h -8.542969 c -0.355469 -0.617188 -1.015625 -1 -1.730469 -1 z m 1.726562 3 h 8.546876 c 0.007812 0.015625 0.015624 0.03125 0.027343 0.046875 l -1.125 1.117187 c -0.210937 -0.109374 -0.441406 -0.164062 -0.675781 -0.164062 c -0.632812 0 -1.199219 0.402344 -1.410156 1 h -2.179688 c -0.214844 -0.601562 -0.777344 -1 -1.410156 -1 c -0.222656 0 -0.441406 0.050781 -0.644531 0.148438 l -1.136719 -1.136719 c 0.003906 -0.003907 0.003906 -0.007813 0.007812 -0.011719 z m -0.714843 0.71875 l 1.136719 1.136719 c -0.097657 0.207031 -0.148438 0.433593 -0.148438 0.660156 c 0 0.640625 0.402344 1.210937 1 1.425781 v 2.148438 c -0.597656 0.210937 -1 0.777344 -1 1.410156 c 0 0.222656 0.050781 0.445312 0.144531 0.644531 l -1.128906 1.132813 c -0.003906 -0.003906 -0.011719 -0.003906 -0.015625 -0.007813 v -8.542969 c 0.003906 -0.003906 0.007812 -0.007812 0.011719 -0.007812 z m 9.988281 0.042969 v 8.511719 c -0.003906 0.003906 -0.007812 0.003906 -0.011719 0.007812 l -1.132812 -1.132812 c 0.09375 -0.203126 0.144531 -0.425782 0.144531 -0.648438 c 0 -0.636719 -0.402344 -1.203125 -1 -1.414062 v -2.175782 c 0.597656 -0.210937 1 -0.777344 1 -1.410156 c 0 -0.210938 -0.046875 -0.421875 -0.132812 -0.613281 z m -6.082031 2.238281 h 2.171875 c 0.152344 0.425781 0.484375 0.757812 0.910156 0.910156 v 2.179688 c -0.425781 0.152344 -0.757812 0.484375 -0.910156 0.910156 h -2.175782 c -0.152343 -0.425781 -0.488281 -0.761719 -0.914062 -0.914062 v -2.144532 c 0.433594 -0.15625 0.769531 -0.503906 0.917969 -0.941406 z m -0.007813 5 h 2.179688 c 0.210937 0.597656 0.777344 1 1.410156 1 c 0.222656 0 0.445312 -0.050781 0.644531 -0.144531 l 1.136719 1.132812 c -0.003906 0.003907 -0.003906 0.007813 -0.007812 0.011719 h -8.542969 c -0.003907 -0.003906 -0.003907 -0.011719 -0.007813 -0.015625 l 1.128906 -1.128906 c 0.203126 0.09375 0.425782 0.144531 0.648438 0.144531 c 0.632812 0 1.199219 -0.402344 1.410156 -1 z m 0 0" fill="#2e3436"/>
+</svg>
--- a/index.html
+++ b/index.html
@ -56,51 +56,70 @@
    <div class="content-container">
      <div class="content-section">
        <h2>Projects</h2>
-        <div class="content-inner">
-          <div class="project">
-            <h3><a href="https://tv.dwestgate.us">Over-the-air web television</a></h3>
-            <p>Watch local Portland area TV on the web</p>
-          </div>
-          <div class="project">
-            <h3> <a href="https://cat.dwestgate.us">Cat Tracker</a></h3>
-            <p>Helping to locate my outdoor cat with radios in my neighborhood</p>
-          </div>
-          <div class="project">
-            <h3> <a href="https://grow.dwestgate.us">Grow</a></h3>
-            <p>Automated Indoor plant growing with a raspberry pi</p>
-          </div>
+        <div id="project-container" class="content-inner">

-          <div class="project">
-            <h3> <a>Poker Chips Helper</a></h3>
-            <p>Mobile App to help denominate and distribute chips for casual poker games</p>
-          </div>
-          <div class="project">
-            <h3> <a href="https://mesh.dwestgate.us">Meshtastic Map</a></h3>
-            <p>Map of Local Portland Meshtastic Nodes</p>
-          </div>
-          <div class="project">
-            <h3> <a href="https://sdr.dwestgate.us">Local SDR</a></h3>
-            <p>Scan the local Portland airwaves with OpenWebRX</p>
+          <script>
+            const container = document.getElementById("project-container")
+            const json = fetch("/static/projects.json").then(r => r.json()).then(d => {
+              d.forEach(project => {
+                const div = document.createElement("div")
+                div.className = "project";
+
+                const title = document.createElement("h3")
+                title.textContent = project.name;
+
+                const description = document.createElement('p');
+                description.textContent = project.description;
+
+
+                const appIcon = document.createElement("img")
+                appIcon.src = "/images/icons/app.svg"
+                appIcon.className = "icon"
+                appIcon.alt = "Application Link";
+                const appLink = document.createElement('a')
+                appLink.href = project.link;
+                appLink.appendChild(appIcon)
+
+                const repoIcon = document.createElement("img");
+                repoIcon.src = "/images/icons/gitea.svg";
+                repoIcon.className = "icon"
+                repoIcon.alt = "Repository link";
+                const repoLink = document.createElement('a')
+                repoLink.href = project.repository;
+                repoLink.appendChild(repoIcon)
+
+                const icons = document.createElement("div");
+                icons.className = "icons"
+                if (project.link !== "") {
+                  icons.appendChild(appLink);
+
+                }
+                if (project.repository !== "") {
+                  icons.appendChild(repoLink);
+
+                }
+
+                div.appendChild(title)
+                div.appendChild(description);
+                div.appendChild(icons)
+                container.appendChild(div)
+
+              })
+            }).catch(e => { console.error(e) })
+
+          </script>
+
+        </div>
+
+        <div class="content-section">
+          <h2>Games</h2>
+          <div class="content-inner">
+            <h3>Space Engineers Server</h3>
+            <a href="https://space-engineers.com/server/224675/"><img
+                src="https://space-engineers.com/server/224675/banners/banner-1.png" border="0"></a>
          </div>
        </div>
      </div>
-      <!-- <div class="content-section">
-        <h2>Travel</h2>
-        <div class="content-inner"></div>
-      </div>
-      <div class="content-section">
-        <h2>Media</h2>
-        <div class="content-inner"></div>
-      </div> -->
-      <div class="content-section">
-        <h2>Games</h2>
-        <div class="content-inner">
-          <h3>Space Engineers Server</h3>
-          <a href="https://space-engineers.com/server/224675/"><img
-              src="https://space-engineers.com/server/224675/banners/banner-1.png" border="0"></a>
-        </div>
-      </div>
-    </div>
  </main>
  <footer>
    <p>2025 David Westgate</p>
--- a/static/projects.json
+++ b/static/projects.json
@ -0,0 +1,38 @@
+[
+    {
+        "name": "Over-the-air Web TV",
+        "link": "https://tv.dwestgate.us",
+        "description": "Watch local Portland area TV on the web",
+        "repository": "https://git.dwestgate.us/david/ota-tv-web"
+    },
+    {
+        "name": "Cat Tracker",
+        "link": "https://cat.dwestgate.us",
+        "description": "Helping to locate my outdoor cat with radios in my neighborhood",
+        "repository": "https://git.dwestgate.us/david/cat-tracker"
+    },
+    {
+        "name": "Grow",
+        "link": "https://grow.dwestgate.us",
+        "description": "Automated Indoor plant growing with a raspberry pi",
+        "repository": "https://git.dwestgate.us/david/grow"
+    },
+    {
+        "name": "Poker Chips Helper",
+        "link": "",
+        "description": "Mobile App to help denominate and distribute chips for casual poker games",
+        "repository": ""
+    },
+    {
+        "name": "Meshtastic Map",
+        "link": "https://mesh.dwestgate.us/",
+        "description": "Map of local Portland Meshtastic Nodes",
+        "repository": "https://git.dwestgate.us/david/mesh-map"
+    },
+    {
+        "name": "Westy RX SDR",
+        "link": "https://sdr.dwestgate.us/",
+        "description": "Scan the airwaves with a Software Defined Radio and OpenWebRX+",
+        "repository": ""
+    }
+]