From a006bd418ccbe7db9db87a96cb4412905d723703 Mon Sep 17 00:00:00 2001 From: chris bell Date: Sat, 31 Jan 2026 19:16:51 -0600 Subject: [PATCH] Lots of new stuff for rework --- css/main.css | 151 +++++++++++++++++++++++++++++++++++++++++++++--- index.html | 121 ++++++++++++++++++++++++++++++++------ scripts/main.js | 96 ++++++++++++++++++++++++++++++ 3 files changed, 340 insertions(+), 28 deletions(-) create mode 100644 scripts/main.js diff --git a/css/main.css b/css/main.css index f00077d..59106e8 100644 --- a/css/main.css +++ b/css/main.css @@ -1,6 +1,11 @@ :root { - --color-background: #010101; - --color-foreground: #aa0000; + --color-background: #0f0f0f; + --color-foreground: #dd0000; + + --frame-spacing: 15px; + --frame-border-radius: 10px; + + --main-view-width: 80vw; } * { @@ -14,26 +19,154 @@ html { 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 { - width: 100%; + width: auto; height: auto; padding: 20px; border: 2px solid var(--color-foreground); - border-radius: 10px; - margin: 20px; + border-radius: var(--frame-border-radius); position: relative; + display: flex; } .tui-frame-header { position: absolute; top: 0; - left: 25px; + left: 20px; transform: translateY(-50%); background-color: var(--color-background); padding: 0 10px; + text-transform: uppercase; + letter-spacing: 0.15em; } -.tui-frame-content p{ - font-size: 12pt; - margin: 15px 0 15px 0; +.tui-frame-content * { + font-size: 14pt; + /* 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; +} \ No newline at end of file diff --git a/index.html b/index.html index 2844130..252119a 100644 --- a/index.html +++ b/index.html @@ -6,29 +6,20 @@ - // Hex Studios // - - - + + // HEX STUDIOS // -
+ + +
+ +

// HEX STUDIOS //

-

IMAGE

- -
- -
-

// HEX STUDIOS //

+

WELCOME

Hello! My name is Chris, aka Spudnut2000. Welcome to my personal portfolio site!

About Me

@@ -36,8 +27,100 @@

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.

+ +
+

IMAGE

+ +
+ +
+

SITE SETTINGS

+
+

Change site colors, spacing, and borders

+
+ + + + + + + + + + + + + + +
+
+
+ +
+

credentials

+
+

Education

+
    +
  • Bachelors, Software Engineering - 2026
    • +
  • Associates, Computer Science - 2022
    • +
+

Experience

+
    +
  • Software Engineer (C#, .NET, Unity) - 4 years
    • +
  • Computer Technician (Repair, IT) - 2 years
    • +
+
+
+ +
+

LINKS

+
+ +
+
+ +
+

projects

+
+

SessionZero

+

SessionZero is a data-driven TTRPG companion application for managing characters, sessions, and game data.

+

This is my passion project, and is currently a work in progress. It's core is developed using C# and .NET 8.

+

Visit sessionzero.app to learn more, or view the source code.

+ +

Critterfolio

+

A simple cross-platform full-stack application for managing your critters, for farms or pet owners. Made in C# with Avalonia UI.

+

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 HERE.

+ + +
+ + +
+ + + + + + + + +
+ +
+

COPYRIGHT 2026 BELLSWORNE LLC

+

Source Code

- - diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..fa20178 --- /dev/null +++ b/scripts/main.js @@ -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(); \ No newline at end of file