WebRing link

Reviewed-on: #5

css/main.css

@@ -1,6 +1,6 @@
 :root {
-  --color-background: #0f0f0f;
-  --color-foreground: #dd0000;
+  --color-background: #010101;
+  --color-foreground: #4d6e8d;
 
   --frame-spacing: 15px;
   --frame-border-radius: 10px;
@@ -27,6 +27,9 @@ html {
 }
 
 @media (max-width: 900px) {
+  #main {
+    width: 90vw !important;
+  }
   #page-heading {
     font-size: 20pt;
   }
@@ -58,6 +61,7 @@ html {
   padding: 20px;
   max-height: 30px;
   display: flex;
+  font-size: 10pt;
 }
 #tui-status-bar p {
   margin-left: 10px;
@@ -110,7 +114,7 @@ html {
 }
 
 .tui-frame-content h2::before {
-  content: '// ';
+  content: '//';
 }
 
 .tui-frame-content li {

index.html

@@ -21,16 +21,52 @@
     <div class="tui-frame">
       <h2 class="tui-frame-header">WELCOME</h2>
       <div class="tui-frame-content">
-        <p>Hello! My name is Chris, aka Spudnut2000. Welcome to my personal portfolio site!</p>
+        <p>Hello! My name is Chris. Welcome to my personal portfolio site!</p>
         <h2>About Me</h2>
-        <p>I am a husband, programmer, musician, and all around nerd. I like to develop both software and games.</p>
+        <p>I am a husband, programmer, musician, and all around nerd! I like to make games and software, as well as tinker with robots and motorcycles. I am a huge advocate for FOSS (Free and Open Source Software), a Linux user (NixOS), and a novice homelabber.</p>
         <p>I am primarily a Software Engineer by trade with a Bachelor's in Sotware Engineering and ~5 years of professional experience, where the majority of my knowledge is in C#/.NET, XAML, and HTML/CSS. I am also proficient in many other languages like Odin, C/C++, Java, QML, and JavaScript.</p>
+        <p>I am also the CEO and Co-Founder of <a href="https://bellsworne.com">Bellsworne LLC.</a> with my wife Alex.</p>
       </div>
     </div>
 
     <div class="tui-frame">
       <h2 class="tui-frame-header">IMAGE</h2>
-      <img class="tui-frame-single-image" src="res/chris2.jpg" />
+      <div class="tui-frame-content">
+        <img class="tui-frame-single-image" src="res/chris2.jpg" />
+      </div>
+    </div>
+
+    <div class="tui-frame">
+      <h2 class="tui-frame-header">credentials</h2>
+      <div class="tui-frame-content">
+        <h2>Education</h2>
+        <ul>
+          <li>Bachelors, Software Engineering - 2026</li>
+          <li>Associates, Computer Science - 2022</li>
+        </ul>
+        <h2>Experience</h2>
+        <ul>
+          <li>Software Engineer (C#, .NET, Unity) - 4 years</li>
+          <li>Computer Technician (Repair, IT) - 2 years</li>
+        </ul>
+        <h2>Certs</h2>
+        <ul>
+          <li>CompTIA Project+</li>
+          <li>AWS Certified Cloud Practitioner</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="tui-frame">
+      <h2 class="tui-frame-header">LINKS</h2>
+      <div class="tui-frame-content">
+        <ul>
+          <li><a href="https://git.bellsworne.tech">Gitlab</a></li>
+          <li><a href="https://bellsworne.com">Bellsworne</a></li>
+          <li><a href="https://youtube.com/@hexstudios">Youtube</a></li>
+          <li><a href="https://www.linkedin.com/in/christopher-i-bell/">LinkedIn</a></li>
+        </ul>
+      </div>
     </div>
 
     <div class="tui-frame">
@@ -56,53 +92,42 @@
       </div>
     </div>
 
-    <div class="tui-frame">
-      <h2 class="tui-frame-header">credentials</h2>
-      <div class="tui-frame-content">
-        <h2>Education</h2>
-        <ul>
-          <li>Bachelors, Software Engineering - 2026</li>
-          <li>Associates, Computer Science - 2022</li>
-        </ul>
-        <h2>Experience</h2>
-        <ul>
-          <li>Software Engineer (C#, .NET, Unity) - 4 years</li>
-          <li>Computer Technician (Repair, IT) - 2 years</li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="tui-frame">
-      <h2 class="tui-frame-header">LINKS</h2>
-      <div class="tui-frame-content">
-        <ul>
-          <li><a href="https://www.linkedin.com/in/christopher-i-bell/">LinkedIn</a></li>
-          <li><a href="https://bellsworne.com">Bellsworne</a></li>
-          <li><a href="https://youtube.com/@hexstudios">Youtube</a></li>
-        </ul>
-      </div>
-    </div>
-
     <div class="tui-frame">
       <h2 class="tui-frame-header">projects</h2>
       <div class="tui-frame-content">
         <h2>SessionZero</h2>
         <p>SessionZero is a data-driven TTRPG companion application for managing characters, sessions, and game data.</p>
-        <p>This is my passion project, and is currently a work in progress. It's core is developed using C# and .NET 8.</p>
+        <p>This is my passion project, and is currently a work in progress. Its core is developed using C# with .NET 8.</p>
         <p>Visit <a href="https://sessionzero.app">sessionzero.app</a> to learn more, or <a href="https://git.bellsworne.tech/Bellsworne/sessionzero-cs">view the source code.</a></p>
 
         <h2>Critterfolio</h2>
         <p>A simple cross-platform full-stack application for managing your critters, for farms or pet owners. Made in C# with Avalonia UI.</p>
-        <p>This project was developed as my Software Engineering Capstone project, but the idea came from my wife who breeds goats and needed an easy way to track linage and other notes about her goats.</p>
-        <p>It still needs some work, but you can download it for Windows, Linux, or Android <a href="critterfolio/index.html">HERE</a>.</p>
+        <p>This project was developed as my Software Engineering Capstone project, but the idea came from my wife who breeds goats and needed an easy way to track linage and other notes about her goats. It still needs some work, but you can download it for Windows, Linux, or Android <a href="critterfolio/index.html">HERE</a>.</p>
         
+        <h2>Let there be blight</h2>
+        <p>A game made in 72 hours for the MiniJam #150 game jam, made in Godot. <a href="/dev/blight">-- Click here to play in your browser! --</a></p>
+
+        <h2>Cogwheel</h2>
+        <p>A C# .NET 9 library that provides a robust and extendible Command and Developer Console system for Games and Software applications. <a href="https://git.bellsworne.tech/Bellsworne/Cogwheel">-- Click here to view on Gitea --</a></p>
+
+        <h2>Interactive Map</h2>
+        <p>An interactive world map that uses the <a href="https://worldbank.org">World Bank</a> REST API to display country information. Made as a school project in AngularJS. <a href="dev/interactive-angular-map">-- Click here to access-- </a></p>
+
+        <h2>Stars</h2>
+        <p>A really simple plain JS webpage that randomly generates a lot of stars. <a href="dev/stars/index.html">-- Click here to view --</a></p>
+
+        <h2>More</h2>
+        <p>To see more of my personal or professional projects, see my <a href="https://git.bellsworne.tech">Gitlab</a> page.</p>
 
       </div>
-
-      
     </div>
 
-    
+    <div class="tui-frame">
+      <h2 class="tui-frame-header">notice</h2>
+      <div class="tui-frame-content" style="width: 100%; display: flex; justify-content: center; text-align: center;">
+        <p style="font-size: 20pt; color: darkred;">SAY NO TO GENERATIVE AI</p>
+      </div>
+    </div>
 
     
 
@@ -124,3 +149,5 @@
   </div>
 
 </body>
+
+<a href='https://webring.dinhe.net/prev/https://hexstudios.co'>Previous</a> <a href='https://webring.dinhe.net/next/https://hexstudios.co'>Next</a>

old/css/master.css

@@ -154,30 +154,25 @@ body {
     width: 100%;
 }
 
-.projects-box {
-    display: flex;
-    flex-wrap: wrap;
-    margin: auto;
-    max-width: 70%;
+.project-card {
+    margin-bottom: 40px;
+}
 
-}  .projects-box .card {
-    margin: auto;
-    padding-bottom: 30px;
-} .projects-box img {
-    width: 100%;
-    height: 100%;
-    border-top-right-radius: 10%;
-    border-top-left-radius: 1%;
+.project-card img {
+    width: 10%;
+    height: auto;
+    margin-top: 20px;
+    border: 2px solid var(--color-pallete-red);
+}
+
+.project-card .hexlink {
+    font-size: 2em;
 }
 
 @media (max-width: 1000px)
 {
-    .projects-box {
-        display: block;
-        margin: 0 30px 0 30px;
-    } .projects-box .card {
-        margin: auto;
-        padding: 20px 0 20px 0;
+    .project-card img {
+        width: 40%;
     }
 }
 

scripts/main.js

@@ -10,8 +10,8 @@ const resetBtn = document.getElementById('reset-settings-button');
 let lightMode = false;
 
 const defaultSettings = {
-    foreground: "#ba1818",
-    background: "#0f0f0f",
+    foreground: "#4d6e8d",
+    background: "#010101",
     spacing: "15px",
     radius: "10px"
 };