Compare commits
26 Commits
982d7340f3
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| cf38e6b07c | |||
| 5335afd88c | |||
| 3e1aec3867 | |||
| 37c4f8d2aa | |||
| d99dc901ac | |||
| bdcc5d0dc8 | |||
| 0ea57cf4c3 | |||
| a01bc4eb2b | |||
| a006bd418c | |||
| 622e62d4b4 | |||
| 24e8d9ef23 | |||
| a7e67503e5 | |||
| 298233e9f6 | |||
| 92d3899de7 | |||
| 1e783f8042 | |||
| 2ac913a9b9 | |||
| 8c0e4ad208 | |||
| c57f8d82ca | |||
| a6e20035c6 | |||
|
1d7144640e | ||
|
|
eb0e0125bc | ||
|
|
b68bd4cea6 | ||
|
|
9624ba2ee3 | ||
|
|
a984a1f5c0 | ||
|
|
860a8af7c4 | ||
|
|
9168c5f807 |
BIN
critterfolio/critterfolio.apk
Normal file
BIN
critterfolio/critterfolio.apk
Normal file
Binary file not shown.
BIN
critterfolio/icon.ico
Normal file
BIN
critterfolio/icon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
56
critterfolio/icon.svg
Normal file
56
critterfolio/icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 269 KiB |
70
critterfolio/index.html
Normal file
70
critterfolio/index.html
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Critterfolio</title>
|
||||||
|
<link rel="icon" href="icon.svg">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
color: #333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 400px;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #007AFF;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button:hover {
|
||||||
|
background-color: #005ecb;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>CritterFolio</h1>
|
||||||
|
<img src="icon.svg" alt="Critterfolio Logo" class="logo">
|
||||||
|
<h3>A simple application for managing all of your critters!</h3>
|
||||||
|
<h2>Downloads</h1>
|
||||||
|
<a href="critterfolio.apk" class="download-button">Download for Android</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
176
css/main.css
Normal file
176
css/main.css
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
:root {
|
||||||
|
--color-background: #010101;
|
||||||
|
--color-foreground: #4d6e8d;
|
||||||
|
|
||||||
|
--frame-spacing: 15px;
|
||||||
|
--frame-border-radius: 10px;
|
||||||
|
|
||||||
|
--main-view-width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: var(--color-background);
|
||||||
|
color: var(--color-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-heading {
|
||||||
|
font-size: 30pt;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
letter-spacing: 0.10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
#main {
|
||||||
|
width: 90vw !important;
|
||||||
|
}
|
||||||
|
#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;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
#tui-status-bar p {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
#tui-status-bar p::before {
|
||||||
|
content: ':';
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* TUI FRAME */
|
||||||
|
|
||||||
|
.tui-frame {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 2px solid var(--color-foreground);
|
||||||
|
border-radius: var(--frame-border-radius);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-frame-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 20px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
padding: 0 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
251
index.html
Executable file → Normal file
251
index.html
Executable file → Normal file
@@ -1,134 +1,151 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<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/hex-logo.animate.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
<link rel="stylesheet" href="css/master.css">
|
<script type="module" src="scripts/main.js"></script>
|
||||||
<title>Hex Studios</title>
|
<title>// HEX STUDIOS //</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="header">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div id="content">
|
|
||||||
<div id="fader"></div>
|
|
||||||
|
|
||||||
<h1 class="content-title">This Is HEX Studios</h1>
|
|
||||||
<hr class="content-break">
|
|
||||||
|
|
||||||
<div id="aboutme">
|
|
||||||
<div class="aboutme-box">
|
|
||||||
<div class="aboutme-box-left">
|
|
||||||
<img src="res/chris2.jpg" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="aboutme-box-right">
|
|
||||||
<h2>About Me</h2>
|
|
||||||
<p>
|
|
||||||
Hi! I'm Chris Bell. I am a programmer, musician, and nerd. My passion has been Game Development for over 5 years,
|
|
||||||
using Unreal Engine, Unity, and Godot. I am currently a full-time Unity developer, but have knowledge in C/C++,
|
|
||||||
C#, Java, HTML/CSS, and a few other languages. Most of my projects can be found on my
|
|
||||||
<a class="hexlink" href="https://git.bellsworne.tech/chrisbell">Gitea</a> site.
|
|
||||||
</p>
|
|
||||||
<br>
|
|
||||||
<p>
|
|
||||||
HexStudios is mostly just my personal portfolio, and I currently operate a
|
|
||||||
company under the name <a class="hexlink" href="https://bellsworne.com">Bellsworne</a>.
|
|
||||||
Bellsworne has multiple sub-sections like <a class="hexlink" href="https://bellsworne.tech">Bellsworne Tech</a>,
|
|
||||||
where a lot of my more professional software projects live,
|
|
||||||
and <a class="hexlink" href="https://bellsworne.com/games">Bellsworne Games</a>
|
|
||||||
where my future games will be published.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="content-title">PROJECTS</h1>
|
|
||||||
<hr class="content-break">
|
|
||||||
|
|
||||||
<div id="projects">
|
|
||||||
<div class="projects-box">
|
|
||||||
<!-- Stars -->
|
|
||||||
<div class="card"><div class="upper"><a href="dev/stars"><img src="res/stars.png"></a></div>
|
|
||||||
<div class="lower">
|
|
||||||
<h2>Stars</h2>
|
|
||||||
<p>A cool little visualization of randomly generated "stars", made in JS</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Let There Be Blight -->
|
|
||||||
<div class="card"><div class="upper"><a href="dev/blight"><img src="res/blight.png"></a></div>
|
|
||||||
<div class="lower">
|
|
||||||
<h2>Let There Be Blight</h2>
|
|
||||||
<p>A game made in 72 hours for MiniJam #150: Magic, made in Godot</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Interactive Map -->
|
|
||||||
<div class="card"><div class="upper"><a href="dev/interactive-angular-map"><img src="res/map.png"></a></div>
|
|
||||||
<div class="lower">
|
|
||||||
<h2>Interactive Map</h2>
|
|
||||||
<p>An interactive world map made in Angular</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ADEPT -->
|
|
||||||
<!-- <div class="card"><div class="upper"><a href="dev/interactive-angular-map"><img src="res/map.png"></a></div> -->
|
|
||||||
<!-- <div class="lower"> -->
|
|
||||||
<!-- <h2>Interactive Map</h2> -->
|
|
||||||
<!-- <p>An interactive world map made in Angular</p> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="content-title">CONTACT</h1>
|
<div id="main">
|
||||||
<hr class="content-break">
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<div id="contact">
|
<div class="tui-frame">
|
||||||
<div class="contact-box">
|
<h2 class="tui-frame-header">IMAGE</h2>
|
||||||
<ul>
|
<div class="tui-frame-content">
|
||||||
<li>Email: <a class="hexlink" href="mailto:chrisbell@hexstudios.co">chrisbell@hexstudios.co</a></li>
|
<img class="tui-frame-single-image" src="res/chris2.jpg" />
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="fader-reverse"></div>
|
<div class="tui-frame">
|
||||||
<div id="footer">
|
<h2 class="tui-frame-header">credentials</h2>
|
||||||
<p>© Copyright 2025 HEX Studios™</p>
|
<div class="tui-frame-content">
|
||||||
<br>
|
<h2>Education</h2>
|
||||||
<div class="footer-nav">
|
<ul>
|
||||||
<ul>
|
<li>Bachelors, Software Engineering - 2026</li>
|
||||||
<li><a class="hexlink" href="#aboutme">About</a></li>
|
<li>Associates, Computer Science - 2022</li>
|
||||||
<li><a class="hexlink" href="#projects">Projects</a></li>
|
</ul>
|
||||||
<li><a class="hexlink" href="#contact">Contact</a></li>
|
<h2>Experience</h2>
|
||||||
<li><a class="hexlink" href="https://git.bellsworne.tech/chrisbell/hexstudios-co.git">Page Source</a></li>
|
<ul>
|
||||||
</ul>
|
<li>Software Engineer (C#, .NET, Unity) - 4 years</li>
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -154,30 +154,25 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projects-box {
|
.project-card {
|
||||||
display: flex;
|
margin-bottom: 40px;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
margin: auto;
|
|
||||||
max-width: 70%;
|
|
||||||
|
|
||||||
} .projects-box .card {
|
.project-card img {
|
||||||
margin: auto;
|
width: 10%;
|
||||||
padding-bottom: 30px;
|
height: auto;
|
||||||
} .projects-box img {
|
margin-top: 20px;
|
||||||
width: 100%;
|
border: 2px solid var(--color-pallete-red);
|
||||||
height: 100%;
|
}
|
||||||
border-top-right-radius: 10%;
|
|
||||||
border-top-left-radius: 1%;
|
.project-card .hexlink {
|
||||||
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1000px)
|
@media (max-width: 1000px)
|
||||||
{
|
{
|
||||||
.projects-box {
|
.project-card img {
|
||||||
display: block;
|
width: 40%;
|
||||||
margin: 0 30px 0 30px;
|
|
||||||
} .projects-box .card {
|
|
||||||
margin: auto;
|
|
||||||
padding: 20px 0 20px 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
134
old/index.html
Executable file
134
old/index.html
Executable file
@@ -0,0 +1,134 @@
|
|||||||
|
<!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/hex-logo.animate.css">
|
||||||
|
<link rel="stylesheet" href="css/master.css">
|
||||||
|
<title>Hex Studios</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="header">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div id="content">
|
||||||
|
<div id="fader"></div>
|
||||||
|
|
||||||
|
<h1 class="content-title">This Is HEX Studios</h1>
|
||||||
|
<hr class="content-break">
|
||||||
|
|
||||||
|
<div id="aboutme">
|
||||||
|
<div class="aboutme-box">
|
||||||
|
<div class="aboutme-box-left">
|
||||||
|
<img src="res/chris2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="aboutme-box-right">
|
||||||
|
<h2>About Me</h2>
|
||||||
|
<p>
|
||||||
|
Hi! I'm Chris Bell. I am a programmer, musician, and nerd. My passion has been Game Development for over 5 years,
|
||||||
|
using Unreal Engine, Unity, and Godot. I am currently a full-time Unity developer, but have knowledge in C/C++,
|
||||||
|
C#, Java, HTML/CSS, and a few other languages. Most of my projects can be found on my
|
||||||
|
<a class="hexlink" href="https://git.bellsworne.tech/chrisbell">Gitea</a> site.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<p>
|
||||||
|
HexStudios is mostly just my personal portfolio, and I currently operate a
|
||||||
|
company under the name <a class="hexlink" href="https://bellsworne.com">Bellsworne</a>.
|
||||||
|
Bellsworne has multiple sub-sections like <a class="hexlink" href="https://bellsworne.tech">Bellsworne Tech</a>,
|
||||||
|
where a lot of my more professional software projects live,
|
||||||
|
and <a class="hexlink" href="https://bellsworne.com/games">Bellsworne Games</a>
|
||||||
|
where my future games will be published.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="content-title">PROJECTS</h1>
|
||||||
|
<hr class="content-break">
|
||||||
|
|
||||||
|
<div id="projects">
|
||||||
|
<div class="projects-box">
|
||||||
|
<!-- Stars -->
|
||||||
|
<div class="card"><div class="upper"><a href="dev/stars"><img src="res/stars.png"></a></div>
|
||||||
|
<div class="lower">
|
||||||
|
<h2>Stars</h2>
|
||||||
|
<p>A cool little visualization of randomly generated "stars", made in JS</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Let There Be Blight -->
|
||||||
|
<div class="card"><div class="upper"><a href="dev/blight"><img src="res/blight.png"></a></div>
|
||||||
|
<div class="lower">
|
||||||
|
<h2>Let There Be Blight</h2>
|
||||||
|
<p>A game made in 72 hours for MiniJam #150: Magic, made in Godot</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Interactive Map -->
|
||||||
|
<div class="card"><div class="upper"><a href="dev/interactive-angular-map"><img src="res/map.png"></a></div>
|
||||||
|
<div class="lower">
|
||||||
|
<h2>Interactive Map</h2>
|
||||||
|
<p>An interactive world map made in Angular</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ADEPT -->
|
||||||
|
<!-- <div class="card"><div class="upper"><a href="dev/interactive-angular-map"><img src="res/map.png"></a></div> -->
|
||||||
|
<!-- <div class="lower"> -->
|
||||||
|
<!-- <h2>Interactive Map</h2> -->
|
||||||
|
<!-- <p>An interactive world map made in Angular</p> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="content-title">CONTACT</h1>
|
||||||
|
<hr class="content-break">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="contact">
|
||||||
|
<div class="contact-box">
|
||||||
|
<ul>
|
||||||
|
<li>Email: <a class="hexlink" href="mailto:chrisbell@hexstudios.co">chrisbell@hexstudios.co</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="fader-reverse"></div>
|
||||||
|
<div id="footer">
|
||||||
|
<p>© Copyright 2025 HEX Studios™</p>
|
||||||
|
<br>
|
||||||
|
<div class="footer-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a class="hexlink" href="#aboutme">About</a></li>
|
||||||
|
<li><a class="hexlink" href="#projects">Projects</a></li>
|
||||||
|
<li><a class="hexlink" href="#contact">Contact</a></li>
|
||||||
|
<li><a class="hexlink" href="https://git.bellsworne.tech/chrisbell/hexstudios-co.git">Page Source</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
res/cogwheel.png
Normal file
BIN
res/cogwheel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 866 KiB |
BIN
res/seshzero.png
Normal file
BIN
res/seshzero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
res/shots.png
Normal file
BIN
res/shots.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
96
scripts/main.js
Normal file
96
scripts/main.js
Normal 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: "#4d6e8d",
|
||||||
|
background: "#010101",
|
||||||
|
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();
|
||||||
Reference in New Issue
Block a user