Content update

homepage/website/about.html

@@ -17,12 +17,22 @@
     </header>
 
     <section id="home" class="hero">
-        <div class="container">
+        <div class="container-with-footer-padding">
             <h1>About</h1>
             <p>PWS is a homelabbing project that has taught me much about Linux, hardware, networking, and security practices. I use it to host a variety of self-created projects, open source software, and anything that piques my interest.</p>
+            <p>The v1 implementation of PWS was named Whitney, after the mountain in California. The original hardware was sourced from my old desktop PC, which was made completely of hand-me-down parts, and was housed in an old server case that was e-wasted by my college. This initial build was definitely on the "janky" side, featuring an unmounted power supply in the optical bay, secured only by some green yarn. (Fire hazard, anyone?)</p>
+            <img class="blog-image" src="static/about/whitney.jpg" alt="Whitney">
+            <p>I ran a lot of services from this box - my personal website/online resume, side projects, a Covid-19 data tracker, game servers, and a lot of other projects that taught me lessons in DNS config, networking, maintaining persistent storage and others.</p>
+            <p>But eventually I started running up against the limits of the box. The machine's CPU was released in 2008, which was indicative of the age of most of its hardware. After spending a lot of work on the original Whitney config in the first repo, I decided that I had learned enough to warrant an upgrade.</p>
+            <p>The v2 upgrade to PWS was given the nickname of "Olomana", a second step in this pattern of mountainous server names. <a href="https://en.wikipedia.org/wiki/Olomana_(mountain)">Mount Olomana</a> is a mountain on the windward side of Oahu. It has 3 peaks which are are a popular, albeit difficult and dangerous hike. While visiting family in Kailua, I hiked the Ko'olau range and snapped this picture of the rarely seen backside of Mount Olomana.</p>
+            <img class="blog-image" src="static/about/mount-olomana.jpg" alt="Mount Olomana">
+            <p>Olomana, the web server, is a significant upgrade over its predecessor. I've built it as a 4U rack-mounted machine with modern components. It's now mounted in a 16U rack, with a UPS and mesh network node close by. Critical resources like RAM and CPU cores are now a little more abundant, and I've set up the ZFS filesystem to provide redundancy against the power outages that occasionally would corrupt drive on the original PWS.</p>
+            <img class="blog-image" src="static/about/olomana.jpg" alt="Olomana">
+            <p>I'm super happy with the rebuild, and would encourage anyone with similar interests to jump in and give homelabbing a try for themselves.</p>
         </div>
     </section>
-
+    <script src="script.js"></script>
+</body>
 <footer>
     <div class="container">
         <p>&copy; 2024 PWS. All rights reserved.</p>
@@ -31,6 +41,4 @@
         </div>
     </div>
 </footer>
-    <script src="script.js"></script>
-</body>
 </html>

homepage/website/index.html

@@ -33,7 +33,8 @@
             </div>
         </div>
     </section>
-
+    <script src="script.js"></script>
+</body>
 <footer>
     <div class="container">
         <p>&copy; 2024 PWS. All rights reserved.</p>
@@ -42,6 +43,4 @@
         </div>
     </div>
 </footer>
-    <script src="script.js"></script>
-</body>
 </html>

homepage/website/services.html

@@ -26,23 +26,64 @@
     <section id="services" class="sub-section">
         <div class="container">
             <div class="service-entry">
-                <img src="static/image.png" alt="Service Image 1">
+                <img class="blog-image" src="static/services/gitea.png" alt="Gitea">
                 <div class="service-text">
-                    <h2>Service Title 1</h2>
-                    <p>Coming soon</p>
+                    <h2>Gitea <a class="service-private-status">Private</a></h2>
+                    <p>I usually host code on Github, but for personal projects or my own IP, I self host. Some repos are mirrored to Github.</p>
                 </div>
             </div>
             <div class="service-entry">
-                <img src="static/image.png" alt="Service Image 2">
+                <img class="blog-image" src="static/services/covid-tracker.png" alt="Covid Tracker">
                 <div class="service-text">
-                    <h2>Service Title 2</h2>
-                    <p>Coming soon</p>
+                    <h2>Covid Tracker <a class="service-public-status">Public</a></h2>
+                    <p>This was a coding project that my dad and I worked on during covid. He wanted to do some data analysis to fact check what was reported on about the covid rates. I wanted some practice with hosting web applications on PWS v1, and hosted the <a href="https://covid.whitney.rip">covid tracker website</a> for him on PWS.</p>
+                    <p>The website renders various charts, tables, and dashboards by interest. It additionally has a few "Checker" utilities to compare cases across cities and availability within hospitals.</p>
+                    <p>Unfortunately, as of 2024, the US government website we scraped data for has stopped sharing information, and unfortunately this marks the end for this project. However, we still run it on PWS with the most recent batch of data.</p>
+                    <p>Some stretch goals for this project include caching with <a href="https://nginx.org/en/">Nginx</a>, or converting it to a different framework like <a href="https://observablehq.com/">Observable</a>.</p>
+                </div>
+            </div>
+            <div class="service-entry">
+                <img class="blog-image" src="static/services/photoprism.png" alt="Photoprism">
+                <div class="service-text">
+                    <h2>Photoprism <a class="service-public-status">Public</a></h2>
+                    <p>I host a personal <a href="https://gallery.whitney.rip">photo gallery</a> of memories that I'd like to remember. <a href="https://www.photoprism.app/">Photoprism</a> makes a great open source(!) solution for doing this that is better than most other comparable projects. Its features list is rather long, and can give you a pretty decent Google Photos impression.</p>
+                </div>
+            </div>
+            <div class="service-entry">
+                <img class="blog-image" src="static/services/recipes.png" alt="Websites">
+                <div class="service-text">
+                    <h2>Websites <a class="service-public-status">Public</a></h2>
+                    <p>There are a few one-of websites that I host off of PWS. One is my <a href="https://recipes.whitney.rip">Recipes Website</a>, a ad-less, bloat-less recipes website that actually tells you how to cook something instead of trying to sell you on a cookbook or something. This was written around the time that ChatGPT was becoming a household name, and this was a great project to start to learn some of the capabilities on.</p>
+                    <p>Some other sites include my personal website (where I blog on some of these projects), and, of course, this PWS website!</p>
+                </div>
+            </div>
+            <div class="service-entry">
+                <img class="blog-image" src="static/services/plex.png" alt="Plex">
+                <div class="service-text">
+                    <h2>Plex <a class="service-private-status">Private</a></h2>
+                    <p>I have a few YouTube channels whose original video files I like to keep an archive of. It's perfectly fine to just host the files and play them in a media player, but self-hosting <a href="https://www.plex.tv/">Plex</a> allows me to slap on a UI for essentially free.</p>
+                </div>
+            </div>
+            <div class="service-entry">
+                <img class="blog-image" src="static/services/discord.png" alt="Discord Bots">
+                <div class="service-text">
+                    <h2>Discord Bots <a class="service-public-status">Public</a></h2>
+                    <p>At one point, when creating discord servers for special interest groups I was a part of, I found that moderation and automation were a problem with the default discord server owner experience.</p>
+                    <p>I tried using a paid discord bot to solve some of these problems, and eventually liked it enough to purchase a lifetime subscription. However, that bot's owners started to lock features away under additional tiers and I became unhappy.</p>
+                    <p>Just unhappy enought to sit down and learn how to use the Discord Api. With the help of the Discord API for Python, and ChatGPT by my side, I have started a <a href="https://github.com/runyanjake/discord">repository</a> containing some of the bots and features I have written for them. It's a nice, fun way to add functionality to a service that some of my friends choose to congregate on.</p>
+                </div>
+            </div>
+            <div class="service-entry">
+                <img class="blog-image" src="static/services/minecraft.png" alt="Minecraft">
+                <div class="service-text">
+                    <h2>Minecraft <a class="service-private-status">Private</a></h2>
+                    <p>Every few winters, people get stuck inside due to rain or snow and want to play some games. In the past, PWS has hosted a minecraft server to scratch that itch. Third party plugins like Dynmap allowed us to elevate the experience by hosting a live-updating <a href="https://minemap.whitney.rip">server map</a>, which is where the screenshot comes from.</p>
                 </div>
             </div>
-            <!-- Add more service entries as needed -->
         </div>
     </section>
-
+    <script src="script.js"></script>
+</body>
 <footer>
     <div class="container">
         <p>&copy; 2024 PWS. All rights reserved.</p>
@@ -51,6 +92,4 @@
         </div>
     </div>
 </footer>
-    <script src="script.js"></script>
-</body>
 </html>

homepage/website/styles.css

@@ -1,4 +1,5 @@
 body {
+    height: 100%;
     font-family: 'Roboto', sans-serif;
     margin: 0;
     padding: 0;
@@ -11,6 +12,12 @@ body {
     margin: 0 auto;
 }
 
+.container-with-footer-padding {
+    width: 80%;
+    margin: 0 auto;
+    padding-bottom: 60px;
+}
+
 header {
     background-color: #333333;
     color: #FFFFFF;
@@ -45,6 +52,13 @@ header nav ul li a {
     font-weight: 500;
 }
 
+.blog-image {
+    width: 50%;
+    height: auto;
+    border: 2px solid black;
+    border-radius: 5px;
+}
+
 .nav-button {
     display: inline-block;
     padding: 10px 20px;
@@ -56,6 +70,32 @@ header nav ul li a {
     transition: background-color 0.3s ease;
 }
 
+.service-entry {
+    padding-bottom: 60px;
+}
+
+.service-public-status {
+    display: inline;
+    padding: 10px 20px;
+    background-color: #1daa0a;
+    color: #240f0f;
+    text-decoration: none;
+    font-weight: 600;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.service-private-status {
+    display: inline;
+    padding: 10px 20px;
+    background-color: #c72424;
+    color: #240f0f;
+    text-decoration: none;
+    font-weight: 600;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
 .nav-button:hover {
     background-color: #cf5416;
 }