Merge branch '2026-redesign'
This commit is contained in:
176
index.html
Executable file → Normal file
176
index.html
Executable file → Normal file
@@ -1,156 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<script type="module" src="scripts/main.js"></script>
|
||||
<title>// HEX STUDIOS //</title>
|
||||
|
||||
|
||||
<title>Hex Studios</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>// Hex Studios</h1>
|
||||
<i>Developer, biker, musician, engineer, and an unapologetic centrist in the deep red south. The real @hexstudios.</i>
|
||||
|
||||
|
||||
|
||||
<div id="main">
|
||||
|
||||
<h1 id="page-heading">// HEX STUDIOS //</h1>
|
||||
|
||||
<div class="tui-frame">
|
||||
<h2 class="tui-frame-header">WELCOME</h2>
|
||||
<div class="tui-frame-content">
|
||||
<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 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 for well over 12 years, 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>
|
||||
<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>
|
||||
<div id="stick-posts-section">
|
||||
<h2>Pinned posts</h2>
|
||||
<ul>
|
||||
<li>Bachelors, Software Engineering - 2026</li>
|
||||
<li>Associates, Computer Science - 2022</li>
|
||||
<li><a href="posts/about.html">About Hex Studios</a></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">Git repos</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 id="posts-section">
|
||||
<h2>Posts</h2>
|
||||
<ul id="posts-list"></ul>
|
||||
</div>
|
||||
|
||||
<div class="tui-frame">
|
||||
<h2 class="tui-frame-header">SITE SETTINGS</h2>
|
||||
<div class="tui-frame-content">
|
||||
<p>Change site colors, spacing, and borders</p>
|
||||
<div class="tui-frame-section" id="settings-form">
|
||||
<label for="foreground-setting">Foreground Color</label>
|
||||
<input type="text" name="foreground-setting" id="foreground-setting">
|
||||
|
||||
<label for="background-setting">Background Color</label>
|
||||
<input type="text" name="background-setting" id="background-setting">
|
||||
|
||||
<label for="frame-spacing-setting">Frame Spacing</label>
|
||||
<input type="number" name="frame-spacing-setting" id="frame-spacing-setting" min="5" max="50" value="10">
|
||||
|
||||
<label for="frame-border-radius-setting">Frame Rounding</label>
|
||||
<input type="number" name="frame-border-radius-setting" id="frame-border-radius-setting" min="0" max="50" value="10">
|
||||
|
||||
<button type="button" id="save-settings-button">SAVE</button>
|
||||
<button type="button" id="reset-settings-button">RESET</button>
|
||||
</div>
|
||||
</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. 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. 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">Git repos</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> -->
|
||||
|
||||
|
||||
<script>
|
||||
async function loadPosts() {
|
||||
const list = document.getElementById('posts-list');
|
||||
try {
|
||||
const res = await fetch('posts/list.php');
|
||||
const posts = await res.json();
|
||||
|
||||
<!-- <div class="tui-frame">
|
||||
<h2 class="tui-frame-header">motto</h2>
|
||||
<p>Say No To AI</p>
|
||||
</div>
|
||||
<div class="tui-frame">
|
||||
<h2 class="tui-frame-header">motto</h2>
|
||||
<p>Say No To AI</p>
|
||||
</div> -->
|
||||
if (!posts.length) {
|
||||
list.innerHTML = '<li>No posts yet.</li>';
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="tui-status-bar">
|
||||
<p>COPYRIGHT 2026 <a href="https://bellsworne.com">BELLSWORNE LLC</a></p>
|
||||
<p><a href="https://git.bellsworne.tech/chrisbell/hexstudios-co">Source Code</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Keep android open banner -->
|
||||
<script src="https://keepandroidopen.org/banner.js"></script>
|
||||
posts.forEach(post => {
|
||||
const li = document.createElement('li');
|
||||
const a = document.createElement('a');
|
||||
a.textContent = post.title;
|
||||
a.href = post.type === 'html'
|
||||
? 'posts/' + post.file
|
||||
: 'post.html?file=' + encodeURIComponent(post.file);
|
||||
li.appendChild(a);
|
||||
list.appendChild(li);
|
||||
});
|
||||
} catch (err) {
|
||||
list.innerHTML = '<li>Couldn\u2019t load posts.</li>';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadPosts);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 182 KiB After Width: | Height: | Size: 182 KiB |
|
Before Width: | Height: | Size: 269 KiB After Width: | Height: | Size: 269 KiB |
@@ -1,33 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="hex-logo.animate.css">
|
||||
<title>Hex Logo Animation Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hex-svg">
|
||||
<svg width="400" height="400" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="hex-logo">
|
||||
<g id="hex-logo-h">
|
||||
<path id="rect850" d="M15.7479 34.5518H11.5634V62.4482H15.7479V34.5518Z" fill="black"/>
|
||||
<path id="rect852" d="M22.722 50.5923V46.4078H11.5634V50.5923H22.722Z" fill="black"/>
|
||||
<path id="rect854" d="M30.8119 34.5517H26.6274V62.4481H30.8119V34.5517Z" fill="black"/>
|
||||
</g>
|
||||
<g id="hex-logo-e">
|
||||
<path id="rect856" d="M40.065 34.5518H35.8805V62.4482H40.065V34.5518Z" fill="black"/>
|
||||
<path id="rect858" d="M51.2235 50.5923V46.4078H42.8546V50.5923H51.2235Z" fill="black"/>
|
||||
<path id="rect860" d="M51.2235 38.7363V34.5518H35.8805V38.7363H51.2235Z" fill="black"/>
|
||||
<path id="rect864" d="M51.2235 62.4482V58.2637H35.8805V62.4482H51.2235Z" fill="black"/>
|
||||
</g>
|
||||
<path id="hex-logo-hexagon" d="M62.8316 61.5916C62.6287 61.2394 61.3368 59.0007 59.9609 56.6166C57.5437 52.4282 55.71 49.2333 55.4309 48.7242L55.2963 48.4785L55.5171 48.0747C55.7907 47.5738 56.1847 46.8861 57.8597 43.9856C59.0777 41.8765 63.0011 35.0864 63.1156 34.8896L63.1651 34.8042L67.1282 34.7815C69.3078 34.7702 72.8948 34.7626 75.0992 34.7702L79.1072 34.7815L80.2735 36.8109C80.915 37.9271 82.5723 40.8034 83.9565 43.2027C86.4771 47.5721 86.9074 48.3293 86.9395 48.4529C86.9584 48.5258 86.7985 48.827 86.0349 50.1569C85.5828 50.9448 80.6853 59.4294 79.6327 61.2485L79.0862 62.1929L75.4324 62.2155C73.4228 62.2268 69.8486 62.2382 67.4897 62.2344L63.2009 62.2335L62.8316 61.5916ZM78.5288 61.0404C78.5666 60.9735 79.6892 59.0267 81.0255 56.714C82.3618 54.4013 83.9743 51.6106 84.6088 50.5123C85.2432 49.4141 85.7621 48.5008 85.7619 48.4829C85.7616 48.4602 80.94 40.0826 78.7059 36.2251L78.4897 35.8516L71.1537 35.829C67.119 35.8177 63.8084 35.8177 63.797 35.829C63.7857 35.8404 62.4908 38.0789 60.9197 40.8024C59.3486 43.5258 57.7105 46.3648 57.2794 47.1112C56.8484 47.8576 56.4957 48.4742 56.4957 48.4813C56.4957 48.4888 56.9287 49.2439 57.4579 50.1602C57.987 51.0764 59.5632 53.806 60.9605 56.2259C62.3578 58.6457 63.5717 60.7461 63.6581 60.8934L63.8153 61.1614L71.1387 61.1611L78.4621 61.1609L78.529 61.0396L78.5288 61.0404Z" fill="black" stroke="black" stroke-width="0.986869" stroke-linecap="square" stroke-linejoin="round"/>
|
||||
<path id="hex-logo-greater" d="M64.63 40.7631L69.5655 47.7179L70.1206 48.5001L69.5655 49.2823L64.63 56.2371L64.0749 55.4549L69.0104 48.5001L64.0749 41.5454L64.63 40.7631Z" fill="black" stroke="black" stroke-width="0.725197"/>
|
||||
<path id="hex-logo-lesser" d="M77.6163 40.7631L72.6808 47.7179L72.1257 48.5001L72.6808 49.2823L77.6163 56.2371L78.1715 55.4549L73.2359 48.5001L78.1715 41.5454L77.6163 40.7631Z" fill="black" stroke="black" stroke-width="0.725197"/>
|
||||
<rect id="hex-logo-slash" x="50" y="50" width="1.5" height="13" fill="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="hex-logo.animate.css">
|
||||
<title>Hex Logo Animation Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hex-svg">
|
||||
<svg width="400" height="400" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="hex-logo">
|
||||
<g id="hex-logo-h">
|
||||
<path id="rect850" d="M15.7479 34.5518H11.5634V62.4482H15.7479V34.5518Z" fill="black"/>
|
||||
<path id="rect852" d="M22.722 50.5923V46.4078H11.5634V50.5923H22.722Z" fill="black"/>
|
||||
<path id="rect854" d="M30.8119 34.5517H26.6274V62.4481H30.8119V34.5517Z" fill="black"/>
|
||||
</g>
|
||||
<g id="hex-logo-e">
|
||||
<path id="rect856" d="M40.065 34.5518H35.8805V62.4482H40.065V34.5518Z" fill="black"/>
|
||||
<path id="rect858" d="M51.2235 50.5923V46.4078H42.8546V50.5923H51.2235Z" fill="black"/>
|
||||
<path id="rect860" d="M51.2235 38.7363V34.5518H35.8805V38.7363H51.2235Z" fill="black"/>
|
||||
<path id="rect864" d="M51.2235 62.4482V58.2637H35.8805V62.4482H51.2235Z" fill="black"/>
|
||||
</g>
|
||||
<path id="hex-logo-hexagon" d="M62.8316 61.5916C62.6287 61.2394 61.3368 59.0007 59.9609 56.6166C57.5437 52.4282 55.71 49.2333 55.4309 48.7242L55.2963 48.4785L55.5171 48.0747C55.7907 47.5738 56.1847 46.8861 57.8597 43.9856C59.0777 41.8765 63.0011 35.0864 63.1156 34.8896L63.1651 34.8042L67.1282 34.7815C69.3078 34.7702 72.8948 34.7626 75.0992 34.7702L79.1072 34.7815L80.2735 36.8109C80.915 37.9271 82.5723 40.8034 83.9565 43.2027C86.4771 47.5721 86.9074 48.3293 86.9395 48.4529C86.9584 48.5258 86.7985 48.827 86.0349 50.1569C85.5828 50.9448 80.6853 59.4294 79.6327 61.2485L79.0862 62.1929L75.4324 62.2155C73.4228 62.2268 69.8486 62.2382 67.4897 62.2344L63.2009 62.2335L62.8316 61.5916ZM78.5288 61.0404C78.5666 60.9735 79.6892 59.0267 81.0255 56.714C82.3618 54.4013 83.9743 51.6106 84.6088 50.5123C85.2432 49.4141 85.7621 48.5008 85.7619 48.4829C85.7616 48.4602 80.94 40.0826 78.7059 36.2251L78.4897 35.8516L71.1537 35.829C67.119 35.8177 63.8084 35.8177 63.797 35.829C63.7857 35.8404 62.4908 38.0789 60.9197 40.8024C59.3486 43.5258 57.7105 46.3648 57.2794 47.1112C56.8484 47.8576 56.4957 48.4742 56.4957 48.4813C56.4957 48.4888 56.9287 49.2439 57.4579 50.1602C57.987 51.0764 59.5632 53.806 60.9605 56.2259C62.3578 58.6457 63.5717 60.7461 63.6581 60.8934L63.8153 61.1614L71.1387 61.1611L78.4621 61.1609L78.529 61.0396L78.5288 61.0404Z" fill="black" stroke="black" stroke-width="0.986869" stroke-linecap="square" stroke-linejoin="round"/>
|
||||
<path id="hex-logo-greater" d="M64.63 40.7631L69.5655 47.7179L70.1206 48.5001L69.5655 49.2823L64.63 56.2371L64.0749 55.4549L69.0104 48.5001L64.0749 41.5454L64.63 40.7631Z" fill="black" stroke="black" stroke-width="0.725197"/>
|
||||
<path id="hex-logo-lesser" d="M77.6163 40.7631L72.6808 47.7179L72.1257 48.5001L72.6808 49.2823L77.6163 56.2371L78.1715 55.4549L73.2359 48.5001L78.1715 41.5454L77.6163 40.7631Z" fill="black" stroke="black" stroke-width="0.725197"/>
|
||||
<rect id="hex-logo-slash" x="50" y="50" width="1.5" height="13" fill="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
156
old2/index.html
Executable file
156
old2/index.html
Executable file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<script type="module" src="scripts/main.js"></script>
|
||||
<title>// HEX STUDIOS //</title>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div id="main">
|
||||
|
||||
<h1 id="page-heading">// HEX STUDIOS //</h1>
|
||||
|
||||
<div class="tui-frame">
|
||||
<h2 class="tui-frame-header">WELCOME</h2>
|
||||
<div class="tui-frame-content">
|
||||
<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 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 for well over 12 years, 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>
|
||||
<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">Git repos</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">
|
||||
<h2 class="tui-frame-header">SITE SETTINGS</h2>
|
||||
<div class="tui-frame-content">
|
||||
<p>Change site colors, spacing, and borders</p>
|
||||
<div class="tui-frame-section" id="settings-form">
|
||||
<label for="foreground-setting">Foreground Color</label>
|
||||
<input type="text" name="foreground-setting" id="foreground-setting">
|
||||
|
||||
<label for="background-setting">Background Color</label>
|
||||
<input type="text" name="background-setting" id="background-setting">
|
||||
|
||||
<label for="frame-spacing-setting">Frame Spacing</label>
|
||||
<input type="number" name="frame-spacing-setting" id="frame-spacing-setting" min="5" max="50" value="10">
|
||||
|
||||
<label for="frame-border-radius-setting">Frame Rounding</label>
|
||||
<input type="number" name="frame-border-radius-setting" id="frame-border-radius-setting" min="0" max="50" value="10">
|
||||
|
||||
<button type="button" id="save-settings-button">SAVE</button>
|
||||
<button type="button" id="reset-settings-button">RESET</button>
|
||||
</div>
|
||||
</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. 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. 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">Git repos</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> -->
|
||||
|
||||
|
||||
|
||||
<!-- <div class="tui-frame">
|
||||
<h2 class="tui-frame-header">motto</h2>
|
||||
<p>Say No To AI</p>
|
||||
</div>
|
||||
<div class="tui-frame">
|
||||
<h2 class="tui-frame-header">motto</h2>
|
||||
<p>Say No To AI</p>
|
||||
</div> -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="tui-status-bar">
|
||||
<p>COPYRIGHT 2026 <a href="https://bellsworne.com">BELLSWORNE LLC</a></p>
|
||||
<p><a href="https://git.bellsworne.tech/chrisbell/hexstudios-co">Source Code</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Keep android open banner -->
|
||||
<script src="https://keepandroidopen.org/banner.js"></script>
|
||||
|
||||
</body>
|
||||
File diff suppressed because one or more lines are too long
279
post.html
Normal file
279
post.html
Normal file
@@ -0,0 +1,279 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Post</title>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/github.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/common.min.js"></script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--ink: #26241f;
|
||||
--ink-soft: #6b6a63;
|
||||
--paper: #fbfaf7;
|
||||
--rule: #e4e1d8;
|
||||
--accent: #3a5a40;
|
||||
--code-bg: #f1efe8;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 1.5rem 6rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
margin-bottom: 3rem;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.back-link:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-soft);
|
||||
margin: 0 0 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
#content h1:first-child {
|
||||
font-size: 2.1rem;
|
||||
line-height: 1.25;
|
||||
margin: 0 0 0.75rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
#content h1, #content h2, #content h3 {
|
||||
font-family: Georgia, serif;
|
||||
color: var(--ink);
|
||||
margin-top: 2.2em;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
#content h2 { font-size: 1.5rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.3em; }
|
||||
#content h3 { font-size: 1.2rem; }
|
||||
|
||||
#content p { margin: 1.1em 0; }
|
||||
|
||||
#content a { color: var(--accent); text-decoration-color: rgba(58,90,64,0.35); }
|
||||
#content a:hover { text-decoration-color: var(--accent); }
|
||||
|
||||
#content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
#content blockquote {
|
||||
margin: 1.5em 0;
|
||||
padding: 0.2em 1.2em;
|
||||
border-left: 3px solid var(--accent);
|
||||
color: var(--ink-soft);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#content ul, #content ol {
|
||||
padding-left: 1.4em;
|
||||
}
|
||||
#content li { margin: 0.4em 0; }
|
||||
|
||||
#content hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--rule);
|
||||
margin: 2.5em 0;
|
||||
}
|
||||
|
||||
#content code {
|
||||
font-family: 'SF Mono', Menlo, Consolas, monospace;
|
||||
font-size: 0.85em;
|
||||
background: var(--code-bg);
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#content pre {
|
||||
background: var(--code-bg);
|
||||
padding: 1em 1.2em;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
#content pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
#content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.5em 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#content th, #content td {
|
||||
text-align: left;
|
||||
padding: 0.5em 0.8em;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
#content th { color: var(--ink-soft); font-weight: 600; }
|
||||
|
||||
.state {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.state.error { color: #a3413a; }
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.wrap { animation: rise 0.35s ease-out both; }
|
||||
@keyframes rise {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<a class="back-link" href="index.html">← All posts</a>
|
||||
<p class="meta" id="meta" hidden></p>
|
||||
<div id="content"><p class="state">Loading post…</p></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function parseFrontMatter(raw) {
|
||||
const match = raw.match(/^---\r?\n([\s\S]+?)\r?\n---\r?\n([\s\S]*)$/);
|
||||
if (!match) return { meta: {}, body: raw };
|
||||
|
||||
const meta = {};
|
||||
match[1].split(/\r?\n/).forEach(line => {
|
||||
const idx = line.indexOf(':');
|
||||
if (idx === -1) return;
|
||||
const key = line.slice(0, idx).trim();
|
||||
let value = line.slice(idx + 1).trim();
|
||||
// strip optional surrounding quotes: title: "My Post"
|
||||
value = value.replace(/^["'](.*)["']$/, '$1');
|
||||
meta[key] = value;
|
||||
});
|
||||
|
||||
return { meta, body: match[2] };
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const d = new Date(dateStr);
|
||||
if (isNaN(d)) return dateStr; // fall back to raw string if unparseable
|
||||
return d.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('content').innerHTML =
|
||||
`<p class="state error">${message}</p>`;
|
||||
}
|
||||
|
||||
// ---- main ------------------------------------------------------------
|
||||
|
||||
marked.setOptions({
|
||||
highlight: (code, lang) => {
|
||||
try {
|
||||
return lang
|
||||
? hljs.highlight(code, { language: lang }).value
|
||||
: hljs.highlightAuto(code).value;
|
||||
} catch (e) {
|
||||
return code;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function loadPost() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const file = params.get('file');
|
||||
|
||||
if (!file) {
|
||||
showError('No post specified. Link to this page as <code>post.html?file=your-post.md</code>.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Guard against path traversal — keep the fetch confined to posts/
|
||||
if (file.includes('..') || file.startsWith('/')) {
|
||||
showError('Invalid post path.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('posts/' + file);
|
||||
if (!res.ok) throw new Error('HTTP ' + res.status);
|
||||
const raw = await res.text();
|
||||
|
||||
const { meta, body } = parseFrontMatter(raw);
|
||||
const html = marked.parse(body);
|
||||
|
||||
document.getElementById('content').innerHTML = html;
|
||||
|
||||
// Title: front matter > first H1 in the doc > filename
|
||||
let title = meta.title;
|
||||
if (!title) {
|
||||
const h1 = document.querySelector('#content h1');
|
||||
title = h1 ? h1.textContent : file.replace(/\.md$/, '');
|
||||
}
|
||||
document.title = title;
|
||||
|
||||
// Inject an H1 if front matter supplied a title but the body didn't have one
|
||||
if (meta.title && !document.querySelector('#content h1:first-child')) {
|
||||
const h1 = document.createElement('h1');
|
||||
h1.textContent = meta.title;
|
||||
document.getElementById('content').prepend(h1);
|
||||
}
|
||||
|
||||
// Meta line: date (and tags, if present)
|
||||
const metaEl = document.getElementById('meta');
|
||||
const parts = [];
|
||||
if (meta.date) parts.push(formatDate(meta.date));
|
||||
if (meta.tags) parts.push(meta.tags.split(',').map(t => t.trim()).join(' · '));
|
||||
if (parts.length) {
|
||||
metaEl.innerHTML = parts.join(' / ');
|
||||
metaEl.hidden = false;
|
||||
}
|
||||
} catch (err) {
|
||||
showError('Could not load this post. It may have been moved or deleted.');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadPost);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
52
posts/about.html
Normal file
52
posts/about.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hex Studios</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-header">
|
||||
<h1>// Hex Studios</h1>
|
||||
<i>Developer, biker, musician, engineer, and an unapologetic centrist in the deep red south. The real @hexstudios.</i>
|
||||
</div>
|
||||
|
||||
<div id="post-body">
|
||||
<a href="../index.html"><-- Back to home</a>
|
||||
|
||||
<h1>// ABout Hex Studios</h1>
|
||||
|
||||
<h2>// What is this?</h2>
|
||||
<p>Good question. It <i>was</i> my personal portfolio site, used for listing on applications to corporate slop jobs, but over time I just grew into wanting this place to be a space where I can be unapologetically <i><b>me</b></i>. You can still visit the old site <a href="old2/index.html">here</a> if you want. It's pretty cool.</p>
|
||||
<p>So thats what this is. I'll still list my credentials and who I am, but I won't shy away from being me.</p>
|
||||
|
||||
<h2>// Well then, who are you?</h2>
|
||||
<p>My name is Chris. I make stuff, sometimes. By day I'm a software engineer working with C# and unity. I love programming and old technology, I spend my time outside of work learning the ins-and-outs of computers and electronics in general, using C and C++ to mess with native applications and embedded firmware, hoping to one day reclaim the magic of technology from the souless corporate sphere it currently lives in.</p>
|
||||
|
||||
<p>Some of my hobbies include: Making and enjoying music, motorcycles, game development, light gaming (mostly indie games and older titles), homelabbing, poking at old technology</p>
|
||||
|
||||
<p>Oh yeah I also run a small company with my wife called Bellsworne. You should <a href="https://bellsworne.com">check us out.</a></p>
|
||||
|
||||
<h2>// My creds</h2>
|
||||
<h3>Education:</h3>
|
||||
<ul>
|
||||
<li>B.S. Software Engineering</li>
|
||||
<li>A.S. Computer Science</li>
|
||||
<li>CompTIA Project Managment+ Certification</li>
|
||||
</ul>
|
||||
<h3>Professional:</h3>
|
||||
<ul>
|
||||
<li>5+ years of software engineering, primarily in C#/.NET</li>
|
||||
<li>~2 years of electronics repair (phones, laptops, etc)</li>
|
||||
</ul>
|
||||
<i>I was also a barista for two years, who'uld've thunk it</i>
|
||||
<h3>Personal:</h3>
|
||||
<ul>
|
||||
<li>13+ years of linux experience (I use NixOS, btw)</li>
|
||||
<li>10+ years of C/C++</li>
|
||||
<li>10+ years of HTML/CSS</li>
|
||||
<li>Other languages, experience varies: Odin, Python, JS, Java</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
posts/about.md
Normal file
36
posts/about.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: About
|
||||
date: 2026-08-13
|
||||
tags: about
|
||||
---
|
||||
|
||||
# About Hex Studios
|
||||
|
||||
## // What is this
|
||||
Good question. It *was* my personal portfolio site, used for listing on applications to corporate slop jobs, but over time I just grew into wanting this place to be a space where I can be unapologetically ***me***. You can still visit the old site [here](old2/index.html) if you want. It's pretty cool.
|
||||
|
||||
So thats what this is. I'll still list my credentials and who I am, but I won't shy away from being me.
|
||||
|
||||
## // Well than, who are you?
|
||||
My name is Chris. I make stuff, sometimes. By day I'm a software engineer working with C# and unity. I love programming and old technology, I spend my time outside of work learning the ins-and-outs of computers and electronics in general, using C and C++ to mess with native applications and embedded firmware, hoping to one day reclaim the magic of technology from the souless corporate sphere it currently lives in.
|
||||
|
||||
Some of my hobbies include: Making and enjoying music, motorcycles, game development, light gaming (mostly indie games and older titles), homelabbing, poking at old technology.
|
||||
|
||||
Oh yeah I also run a small company with my wife called Bellsworne. You should [check us out](https://bellsworne.com).
|
||||
|
||||
## // My Creds:
|
||||
### Education:
|
||||
- B.S. Software Engineering
|
||||
- A.S. Computer Science
|
||||
- CompTIA Project Managment+ Certification
|
||||
|
||||
### Professional:
|
||||
- 5+ years of software engineering, primarily in C#/.NET
|
||||
- ~2 years of electronics repair (phones, laptops, etc)
|
||||
*I was also a barista for two years, who'uld've thunk it lol*
|
||||
|
||||
### Personal:
|
||||
- 13+ years of linux experience (I use NixOS, btw)
|
||||
- 10+ years of C/C++
|
||||
- 10+ years of HTML/CSS
|
||||
- Other languages, experience varies: Odin, Python, JS, Java
|
||||
48
posts/list.php
Normal file
48
posts/list.php
Normal file
@@ -0,0 +1,48 @@
|
||||
<?php
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$dir = __DIR__;
|
||||
$files = array_diff(scandir($dir), ['.', '..', 'list.php']);
|
||||
|
||||
function parseFrontMatter($raw) {
|
||||
if (preg_match('/^---\r?\n(.+?)\r?\n---\r?\n(.*)$/s', $raw, $m)) {
|
||||
$meta = [];
|
||||
foreach (preg_split('/\r?\n/', $m[1]) as $line) {
|
||||
if (strpos($line, ':') === false) continue;
|
||||
[$key, $value] = explode(':', $line, 2);
|
||||
$meta[trim($key)] = trim($value, " \t\"'");
|
||||
}
|
||||
return $meta;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
$posts = [];
|
||||
foreach ($files as $file) {
|
||||
$ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
|
||||
if (!in_array($ext, ['html', 'md'])) continue;
|
||||
|
||||
$path = $dir . '/' . $file;
|
||||
$fallbackTitle = ucwords(str_replace(['-', '_'], ' ', pathinfo($file, PATHINFO_FILENAME)));
|
||||
$created = filectime($path); // fallback if no front matter date
|
||||
|
||||
$meta = [];
|
||||
if ($ext === 'md') {
|
||||
$raw = file_get_contents($path, false, null, 0, 4096); // just need the header
|
||||
$meta = parseFrontMatter($raw);
|
||||
}
|
||||
|
||||
$title = $meta['title'] ?? $fallbackTitle;
|
||||
$date = isset($meta['date']) ? strtotime($meta['date']) : $created;
|
||||
|
||||
$posts[] = [
|
||||
'file' => $file,
|
||||
'title' => $title,
|
||||
'type' => $ext,
|
||||
'created' => $date ?: $created,
|
||||
];
|
||||
}
|
||||
|
||||
usort($posts, fn($a, $b) => $b['created'] - $a['created']); // newest first
|
||||
|
||||
echo json_encode($posts);
|
||||
17
styles/main.css
Normal file
17
styles/main.css
Normal file
@@ -0,0 +1,17 @@
|
||||
:root {
|
||||
--background-color: #1a1a1a;
|
||||
--foreground-color: #f5f5f5;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding-top: 4%;
|
||||
font-size: 12pt;
|
||||
}
|
||||
Reference in New Issue
Block a user