chrisbell/hexstudios-co
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pull rewrite into develop #5

Merged
chrisbell merged 3 commits from rewrite into develop 2026-02-01 01:18:05 +00:00
Conversation 0 Commits 3 Files Changed 6 +340 -28
3 changed files with 340 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a006bd418c - Show all commits

151
css/main.css
View File

@@ -1,6 +1,11 @@
:root { :root {
--color-background: #010101; --color-background: #0f0f0f;
--color-foreground: #aa0000; --color-foreground: #dd0000;
--frame-spacing: 15px;
--frame-border-radius: 10px;
--main-view-width: 80vw;
} }
* { * {
@@ -14,26 +19,154 @@ html {
color: var(--color-foreground); color: var(--color-foreground);
} }
#page-heading {
font-size: 30pt;
text-align: center;
font-style: italic;
letter-spacing: 0.10em;
}
@media (max-width: 900px) {
#page-heading {
font-size: 20pt;
}
}
#main {
margin-top: 20px;
margin-bottom: 100px;
width: var(--main-view-width);
display: flex;
flex-wrap: wrap;
align-items: stretch;
padding: 20px;
gap: var(--frame-spacing);
margin-inline: auto;
}
#main > * {
flex: 1 1 auto;
}
#tui-status-bar {
width: 100vw;
border-top: 2px solid var(--color-foreground);
position: fixed;
left: 0;
bottom: 0;
background-color: var(--color-background);
color: var(--color-foreground);
padding: 20px;
max-height: 30px;
display: flex;
}
#tui-status-bar p {
margin-left: 10px;
margin-right: 10px;
}
#tui-status-bar p::before {
content: ':';
margin-right: 3px;
}
/* TUI FRAME */
.tui-frame { .tui-frame {
width: 100%; width: auto;
height: auto; height: auto;
padding: 20px; padding: 20px;
border: 2px solid var(--color-foreground); border: 2px solid var(--color-foreground);
border-radius: 10px; border-radius: var(--frame-border-radius);
margin: 20px;
position: relative; position: relative;
display: flex;
} }
.tui-frame-header { .tui-frame-header {
position: absolute; position: absolute;
top: 0; top: 0;
left: 25px; left: 20px;
transform: translateY(-50%); transform: translateY(-50%);
background-color: var(--color-background); background-color: var(--color-background);
padding: 0 10px; padding: 0 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
} }
.tui-frame-content p{ .tui-frame-content * {
font-size: 12pt; font-size: 14pt;
margin: 15px 0 15px 0; /* display: block; */
}
.tui-frame-content p {
margin-bottom: 30px;
}
.tui-frame-content h2 {
font-size: 19pt;
font-style: italic;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 20px;
}
.tui-frame-content h2::before {
content: '// ';
}
.tui-frame-content li {
display: flex;
align-items: center;
margin-top: 5px;
align-items: baseline;
}
.tui-frame-content li::before {
content: "*";
display: inline;
margin-right: 5px;
}
.tui-frame-single-image {
display: block;
margin: auto;
width: 80%;
}
.tui-frame-section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-bottom: 10px;
gap: 10px;
}
.tui-frame-section * {
margin-right: 10px;
}
/* CONTROLS */
button {
color: var(--color-foreground);
background-color: transparent;
border: 2px solid var(--color-foreground);
padding: 5px;
text-decoration: underline;
}
button:hover {
transform: scale(1.05, 1.05);
}
a {
text-decoration: underline;
color: var(--color-foreground);
font-style: italic;
display: inline !important;
}
input {
color: var(--color-foreground);
background-color: transparent;
border: 2px solid var(--color-foreground);
padding: 5px;
text-decoration: underline;
} }

119
index.html
View File

@@ -6,29 +6,20 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<title>// Hex Studios //</title> <script type="module" src="scripts/main.js"></script>
<title>// HEX STUDIOS //</title>
<script>
r = document.querySelector(':root');
function setForegroundColor(color) {
r.style.setProperty('--color-foreground', color)
}
</script>
</head> </head>
<body> <body>
<div style="width: 50vh; margin-left: 30px; margin-top: 50px;">
<div id="main">
<h1 id="page-heading">// HEX STUDIOS //</h1>
<div class="tui-frame"> <div class="tui-frame">
<h2 class="tui-frame-header">IMAGE</h2> <h2 class="tui-frame-header">WELCOME</h2>
<img src="res/chris2.jpg" style="width:50%;" />
</div>
<div class="tui-frame">
<h2 class="tui-frame-header">// HEX STUDIOS //</h2>
<div class="tui-frame-content"> <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, aka Spudnut2000. Welcome to my personal portfolio site!</p>
<h2>About Me</h2> <h2>About Me</h2>
@@ -36,8 +27,100 @@
<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 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>
</div> </div>
</div> </div>
<div class="tui-frame">
<h2 class="tui-frame-header">IMAGE</h2>
<img class="tui-frame-single-image" src="res/chris2.jpg" />
</div> </div>
<button onClick="setForegroundColor('#102090')">Change color</button> <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">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>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>
</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>
</body> </body>

96
scripts/main.js Normal file
View File

@@ -0,0 +1,96 @@
const r = document.querySelector(':root');
const fgInput = document.getElementById('foreground-setting');
const bgInput = document.getElementById('background-setting');
const spacingInput = document.getElementById('frame-spacing-setting');
const radiusInput = document.getElementById('frame-border-radius-setting');
const saveBtn = document.getElementById('save-settings-button');
const resetBtn = document.getElementById('reset-settings-button');
let lightMode = false;
const defaultSettings = {
foreground: "#ba1818",
background: "#0f0f0f",
spacing: "15px",
radius: "10px"
};
saveBtn.addEventListener('click', () => {
const currentSettings = {
foreground: fgInput.value,
background: bgInput.value,
spacing: spacingInput.value + 'px',
radius: radiusInput.value + 'px'
};
setForegroundColor(currentSettings.foreground);
setBackgroundColor(currentSettings.background);
setFrameSpacing(currentSettings.spacing);
setFrameBorderRadius(currentSettings.radius);
localStorage.setItem('user-settings', JSON.stringify(currentSettings));
});
resetBtn.addEventListener('click', () => {
localStorage.setItem('user-settings', JSON.stringify(defaultSettings));
loadStoredSettings();
syncSettings();
});
function setForegroundColor(color) {
r.style.setProperty('--color-foreground', color);
}
function setBackgroundColor(color) {
r.style.setProperty('--color-background', color);
}
function setFrameSpacing(amount) {
r.style.setProperty('--frame-spacing', amount);
}
function setFrameBorderRadius(amount) {
r.style.setProperty('--frame-border-radius', amount);
}
function syncSettings() {
const rootStyles = getComputedStyle(document.documentElement);
const varMap = {
'foreground-setting': '--color-foreground',
'background-setting': '--color-background',
'frame-spacing-setting': '--frame-spacing',
'frame-border-radius-setting': '--frame-border-radius'
};
for (const [id, variable] of Object.entries(varMap)) {
const element = document.getElementById(id);
if (element) {
let cssValue = rootStyles.getPropertyValue(variable).trim();
if (element.type === 'number') {
element.value = parseFloat(cssValue) || 0;
} else {
element.value = cssValue;
}
}
}
}
function loadStoredSettings() {
const saved = localStorage.getItem('user-settings');
if (saved) {
const settings = JSON.parse(saved);
setForegroundColor(settings.foreground);
setBackgroundColor(settings.background);
setFrameSpacing(settings.spacing);
setFrameBorderRadius(settings.radius);
}
}
loadStoredSettings();
syncSettings();