Merge branch '2026-redesign'
This commit is contained in:
178
index.html
Executable file → Normal file
178
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>
|
||||
</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>
|
||||
<li><a href="posts/about.html">About Hex Studios</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">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>
|
||||
<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">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">
|
||||
if (!posts.length) {
|
||||
list.innerHTML = '<li>No posts yet.</li>';
|
||||
return;
|
||||
}
|
||||
|
||||
<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>
|
||||
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 |
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>
|
||||
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