diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..59106e8 --- /dev/null +++ b/css/main.css @@ -0,0 +1,172 @@ +:root { + --color-background: #0f0f0f; + --color-foreground: #dd0000; + + --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) { + #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: 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; +} \ No newline at end of file diff --git a/index.html b/index.html old mode 100755 new mode 100644 index 4496775..252119a --- a/index.html +++ b/index.html @@ -1,134 +1,126 @@ + - - - Hex Studios + + + // HEX STUDIOS // + - -
-
- -

This Is HEX Studios

-
- -
-
-
- -
-
-

About Me

-

- 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 - Gitea site. -

-
-

- HexStudios is mostly just my personal portfolio, and I currently operate a - company under the name Bellsworne. - Bellsworne has multiple sub-sections like Bellsworne Tech, - where a lot of my more professional software projects live, - and Bellsworne Games - where my future games will be published. -

-
-
-
- -

PROJECTS

-
- -
-
- -
-
-

Stars

-

A cool little visualization of randomly generated "stars", made in JS

-
-
- - -
-
-

Let There Be Blight

-

A game made in 72 hours for MiniJam #150: Magic, made in Godot

-
-
- - -
-
-

Interactive Map

-

An interactive world map made in Angular

-
-
- - - - - - - - -
-
-

CONTACT

-
+
+ +

// HEX STUDIOS //

+ +
+

WELCOME

+
+

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

+

About Me

+

I am a husband, programmer, musician, and all around nerd. I like to develop both software and games.

+

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

+
-
-