That-One-Nerd/That-One-Nerd.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new website

Browse Source
This commit is contained in:
That_One_Nerd 2022-12-25 17:17:35 -05:00
parent dbc48548aa
commit e717392bcd
86 changed files with 2537 additions and 734 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -1,2 +1,2 @@
# Things like templates and stuff I don't need people to access publicly.
private/
# Personal stuff I use for website building
/news/_template.html

40
404.html
View File

@ -1,26 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<link href = "global/globalStyles.css" rel = "stylesheet" type = "text/css">
<link href = "404/styles.css" rel = "stylesheet" type = "text/css">
<link href = "global/images/favicon.ico" rel = "icon" type = "image/x-icon">
<head>
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/error.css">
<title>404 | That_One_Nerd</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How did we get here? | That_One_Nerd</title>
</head>
<body>
<div class = "header whiteselection">
<a href = "index.html">Home</a>
<a href = "about.html">About</a>
<a href = "games.html">Games</a>
<a href = "links.html">Links</a>
<a href = "news.html">News</a>
</div>
<div class = "formattable showtext">
<h1 class = "nomargin">404 - We can't find the page.</h1>
<h3 class = "nomargin">Maybe you misspelled the URL?</h3>
<p>Click <a href = "index.html">here</a> to return to the home page.</p>
<!--header-->
<body>
<p id="headertext">&#8639; Or you can go to any of these places, I guess. &#8638;</p>
<p id="headertext2a">Hey, I opened the header for your convenience, you know. Close it when you go somewhere.</p>
<p id="headertext2b">You know, the header has a bunch of links to help you find your way out of here. It might be useful.</p>
<div class="box js-check-vars">
<h2>Whoops, looks like you got lost.</h2>
<h3>Can't find %url%. Not sure how you even got here.</h3>
<p>Here's my ultimatum: either go <button onclick="goHome()">home</button> or go <button onclick="goBack()">back a page</button>.</p>
</div>
</body>
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
<script src="/js/error.js" defer></script>
</html>

21
404/styles.css
View File

@ -1,21 +0,0 @@
body
{
background-color: #f91;
color: white;
text-align: center;
}
.showtext
{
background-color: white;
border-radius: 1.5vw;
color: black;
font-size: 2.5vh;
margin-left: 10%;
margin-right: 10%;
margin-top: 37.5vh;
padding-bottom: 5vh;
padding-left: 5%;
padding-right: 5%;
padding-top: 5vh;
}

111
about.html
View File

@ -2,68 +2,89 @@
<html>
<head>
<link href = "global/globalStyles.css" rel = "stylesheet" type = "text/css">
<link href = "about/styles.css" rel = "stylesheet" type = "text/css">
<link href = "global/images/favicon.ico" rel = "icon" type = "image/x-icon">
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/about.css">
<meta charset="utf-8">
<meta name="description" content="Hi. I'm a %age%-year-old software developer.">
<meta name="keywords" content="That_One_Nerd, That One Nerd, ThatOneNerd, That-One-Nerd">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me | That_One_Nerd</title>
</head>
<!--header-->
<body>
<div class = "header whiteselection">
<a href = "index.html">Home</a>
<a href = "about.html">About</a>
<a href = "games.html">Games</a>
<a href = "links.html">Links</a>
<a href = "news.html">News</a>
</div>
<div class = "formattable title whiteselection">
<div id="title">
<h1>About Me</h1>
<h2>My name is Kyle. I am 14 years old. I am a Software and Game Developer.</h2>
</div>
<div id = "triangle-title"></div>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<div class = "formattable interests">
<h2>What are my interests?</h2>
<p>I love software development and logical thinking, such as</p>
<div class="field" id="intro">
<div id="intro-left">
<img src="images/logofullres.png">
</div>
<div id="intro-right">
<p class="js-check-vars">
Hey there. I'm Kyle. I am %age% years old and I like to program as a hobby.
<br><br>
I've been programming for almost %start% years now, right at the start of Covid-19, and it was love at first sight. I don't plan on stopping anytime soon.
<br><br>
I originally started with the programming language C#, but since then I've spread to other languages, namely C++, Python, Java, and JavaScript.
</p>
</div>
</div>
<div class="field" id="interests">
<p>I love software development and logical thinking. Some fields I have an interest in are (in no particular order):</p>
<ul>
<li>Graphical programming (not to be confused with graphic design)</li>
<li>General algorithm development</li>
<li>Library development</li>
<li>Game development</li>
<li>Server and website development</li>
</ul>
<p>Graphical programming is my latest hobby, and also the one I am the least saavy at. But I'm getting there sooner or later.</p>
<p>Here's how I'd rate my programming skills</p>
<img id="skills-img" src="images/about/programmingskills.png">
<div id="skills-float">
<div id="skills-float-left">
<p>Beginner</p>
</div>
<div id="skills-float-right">
<p>Expert</p>
</div>
</div>
<p>I'm definitely no expert (compared to some serious computer scientists I look up to), but I'd say I'm past the Intermediate stage. Somewhere in the middle of those two.</p>
</div>
<div id = "triangle-skills"></div>
<div class = "formattable skills whiteselection">
<h2>What are my skills?</h2>
<p>I can program in</p>
<div class="field" id = "what-ive-done">
<p>Here's some noteworthy stuff I've done:</p>
<ul>
<li><img src = "about/logos/csharp.png">C#</li>
<li><img src = "about/logos/java.png">Java</li>
<li><img src = "about/logos/cplusplus.png">C++</li>
<li><img src = "about/logos/html.png">HTML and <img src = "about/logos/css.png">CSS</li>
<li><img src = "about/logos/python.png">Python</li>
<li>Created and maintained <a href="https://github.com/That-One-Nerd/Nerd_STF" target="_blank">Nerd_STF</a> as a solo project.</li>
<li>Created <a href="https://that-one-nerd.itch.io/trick-or-treat" target="_blank">Trick Or Treat</a>, <a href="https://that-one-nerd.itch.io/rebuild">Rebuild</a>, and some other small Itch games.</li>
<li>Developing Brigade Laboratories, a game that I'm staying mostly secretive about. <a href="/projects/brigadelabs.html">Learn More</a></li>
</ul>
<p class = "nomargin">This is ranked in my expertise in each language. I am the best at C#, decent at Java and C++, and <i>okay</i> at Python.</p>
<br><br><br><br><br>
<p>I like to reinvent the wheel in software development. For example, Nerd_STF. I know there is a bunch in Nerd_STF that already exists in a different library, and it's likely better. But I feel like doing it myself teaches me more than just using somebody else's code. I wouldn't have learned nearly as much if I just used a different library.</p>
</div>
<div id = "triangle-tools"></div>
<div class = "formattable tools whitelink whiteselection">
<h2 class = "nomargin">What tools am I fluent in?</h2>
<ul>
<li>I use <a href = "https://visualstudio.microsoft.com/vs/" target = "_blank">Visual Studio 2022</a> for my C# and C++ development.</li>
<li>I use <a href = "https://www.jetbrains.com/idea/" target = "_blank">IntelliJ IDEA</a> and <a href = "https://code.visualstudio.com/" target = "_blank">Visual Studio Code</a> for Java development.</li>
<li>I use <a href = "https://www.jetbrains.com/pycharm/" target = "_blank">Pycharm</a> for Python development.</li>
<li>I use <a href = "https://unity.com/" target = "_blank">Unity</a> and <a href = "https://www.unrealengine.com/en-US/" target = "_blank">Unreal Engine</a> for game development.</li>
</ul>
</div>
<div id = "triangle-contact"></div>
<div class = "formattable contact">
<h2>How can you contact me?</h2>
<p>My preferred email for contact is <a href = "mailto:dev@thatonenerd.net" target = "_blank">dev@thatonenerd.net</a>.</p>
</div>
<div class = "formattable footer whiteselection">
<h6 class = "nomargin"><b>That_One_Nerd</b> 2022</h6>
<div class="field" id="outro">
<p>That's all I have to say. If you want to contact me, you can at <a href="mailto:kyle@thatonenerd.net">kyle@thatonenerd.net</a></p>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2-darkgray"></div>
</body>
<!--footer-->
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
<script src="/js/about.js" defer></script>
</html>

BIN
about/logos/cplusplus.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
about/logos/csharp.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
about/logos/css.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
about/logos/html.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
about/logos/java.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
about/logos/python.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

103
about/styles.css
View File

@ -1,103 +0,0 @@
.contact
{
background-color: #fff;
margin: 0;
padding: 5vh 10vw 5vh 10vw;
text-align: center;
}
.interests
{
background-color: #fff;
margin: 0;
padding: 5vh 10vw 5vh 10vw;
text-align: left;
}
.skills
{
background-color: #303030;
color: #fff;
margin: 0;
padding: 5vh 25vw 5vh 25vw;
text-align: center;
}
.skills h2
{
color: #f91;
margin-top: 0;
}
.skills img
{
height: 1vw;
margin-right: 0.5%;
}
.skills ul
{
margin-left: 15vw;
}
.title
{
background-color: #f91;
color: #000;
text-align: center;
margin-top: 0;
padding-bottom: 10.8vh;
padding-left: 2vw;
padding-right: 2vw;
padding-top: 17.3vh;
}
.title h1
{
font-size: 4vw;
margin: 0;
}
.tools
{
background-color: #f91;
margin: 0;
padding: 5vh 10vw 5vh 10vw;
text-align: right;
}
#triangle-contact
{
width: 0;
height: 0;
border-left: solid 100vw;
border-top: solid 5vh;
border-color: #f91 #f91 transparent transparent;
}
#triangle-skills
{
width: 0;
height: 0;
border-right: solid 100vw;
border-bottom: solid 5vh;
border-color: transparent transparent #303030 #303030;
}
#triangle-tools
{
width: 0;
height: 0;
border-left: solid 100vw;
border-top: solid 5vh;
border-color: #303030 #303030 #f91 #f91;
}
#triangle-title
{
width: 0;
height: 0;
border-left: solid 100vw;
border-top: solid 5vh;
border-color: #f91 #f91 transparent transparent;
}

53
css/about.css Normal file
View File

@ -0,0 +1,53 @@
.field
{
font-size: 1.38vw;
padding: 5vw 15vw 5vw 15vw;
text-align: center;
}
.field ul
{
font-size: 1.38vw;
margin: 1.3vw 5.2vw 1.3vw 5.2vw;
}
#intro
{
padding-bottom: 13vw;
}
#intro img
{
width: 25%;
}
#intro-left
{
float: left;
text-align: left;
}
#intro-right
{
float: right;
margin-left: 15.625vw;
margin-top: -15vw;
text-align: right;
}
#interests
{
text-align: left;
}
#skills-float
{
margin-bottom: 2.6vw;
}
#skills-float-left
{
float: left;
text-align: left;
}
#skills-float-right
{
float: right;
text-align: right;
}

36
css/error.css Normal file
View File

@ -0,0 +1,36 @@
body
{
background-color: #E0E0E0;
font-size: 1.25vw;
}
.box
{
margin-top: 10vw;
text-align: center;
}
.box h2
{
font-size: 2.5vw;
margin-bottom: 2vw;
}
#headertext
{
left: 0;
position: fixed;
right: 0;
text-align: center;
top: -1.75vw;
transition: top 0.5s;
}
#headertext2a, #headertext2b
{
left: 0;
position: fixed;
right: 0;
text-align: center;
top: -1.75vw;
}

333
css/global.css Normal file
View File

@ -0,0 +1,333 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('/css/icomoon.css');
@font-face
{
font-family: "Itch Pixel";
src: url("/fonts/itch/pixel.eot") format("embedded-opentype"),
url("/fonts/itch/pixel.woff2") format("woff2"),
url("/fonts/itch/pixel.woff") format("woff"),
url("/fonts/itch/pixel.ttf") format("truetype");
}
*
{
font-family: 'Outfit', 'Readex Pro', 'Roboto', 'sans-serif';
margin: 0;
padding: 0;
text-decoration: none;
}
a
{
color: #FF6A00;
cursor: pointer;
position: relative;
text-decoration: none;
}
a::after
{
background-color: #FF6A00;
bottom: 0;
content: '';
height: 0.08vw;
left: 0;
position: absolute;
transform: scale(0, 1);
transform-origin: bottom right;
width: 100%;
transition: transform 0.2s;
}
a:hover:after
{
transform: scale(1, 1);
transform-origin: bottom left;
}
abbr
{
cursor: help;
}
button
{
background-color: #FF6A00;
border: 0;
border-radius: 0.26vw;
color: #000;
cursor: pointer;
font-size: 1vw;
padding: 0.26vw 0.52vw 0.26vw 0.52vw;
transition: color 0.25s;
}
button:hover
{
color: #fff;
}
cmd
{
background-color: rgba(0, 0, 0, 0.875);
border-radius: 0.25vw;
color: #D0D0D0;
padding: 0 0.25vw;
font-family: 'Consolas';
}
footer
{
background-color: #303030;
color: #606060;
padding: 2.6vw 0 calc(6vw + 5vw) 13vw;
font-size: 1.15vw;
/* The 6vw is the max size of the lists, since they float. */
text-align: left;
}
footer *
{
transition: color 0.2s;
}
footer *:hover
{
color: #fff;
}
footer a
{
color: #606060;
}
footer a::after
{
background-color: #fff;
}
footer button
{
background-color: #606060;
color: #909090;
}
footer ul
{
list-style: none;
}
header
{
background-color: #303030;
color: #fff;
font-size: 1.35vw;
left: 0;
padding: 0.57vw 11.45vw 0.57vw 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
z-index: 1000;
transition: all 0.25s;
}
header a
{
color: #fff;
margin: 0 1.06vw 0 1.06vw;
}
header img
{
border-radius: 10px;
float: left;
margin-left: 4.25vw;
opacity: 0.625;
height: 1.72vw;
width: 1.72vw;
transition: all 0.25s;
}
header img:hover
{
opacity: 1;
}
i
{
color: #FF6A00;
}
img
{
width: 100%;
}
.button-secondary
{
background-color: #808080;
}
.dropdown
{
background-color: #FF6A00;
border: 1px solid #ff9f5b;
font-size: 1.25vw;
font-weight: bold;
margin-bottom: 0;
overflow: hidden;
padding-top: 1vw;
transition: all 0.125s;
}
.dropdown:hover
{
border: 3px solid rgba(0, 0, 0, 0.5);
}
.dropdown p
{
margin: 0 15%;
}
.dropdown-body
{
background-color: #ffc8a1;
border-top: solid #ff9f5b;
border-width: 0;
font-weight: normal;
height: 0;
font-size: 1.125vw;
margin-top: 1vw;
transition: height 0.5s;
}
.dropdown-body span
{
padding: 1vw;
}
.dropdown-secondary
{
background-color: #808080;
border: 1px solid #adadad;
justify-content: center;
margin: 0 auto;
padding-top: 0.5vw;
width: 62.5%;
}
.dropdown-secondary .dropdown-body
{
background-color: #d1d1d1;
border-top: solid #adadad;
margin-top: 0.5vw;
}
.line-spacer
{
border-bottom: 4vw solid;
border-left: 100vw solid;
border-color: #D0D0D0 transparent #D0D0D0 transparent;
margin-top: -4vw;
}
.line-spacer-darkgray
{
border-bottom: 4vw solid;
border-left: 100vw solid;
border-color: #D0D0D0 #303030 #D0D0D0 #303030;
margin-top: -4vw;
}
.line-spacer-darkgray-complete
{
border-bottom: 4vw solid;
border-left: 100vw solid;
border-color: #606060 #303030 #606060 #303030;
margin-top: -4vw;
}
.line-spacer2
{
border-top: 4vw solid;
border-right: 100vw solid;
border-color: #D0D0D0 transparent #D0D0D0 transparent;
margin-top: 0;
}
.line-spacer2-darkgray
{
border-top: 4vw solid;
border-right: 100vw solid;
border-color: #D0D0D0 #303030 #D0D0D0 #303030;
margin-top: 0;
}
.line-spacer2-darkgray-complete
{
border-top: 4vw solid;
border-right: 100vw solid;
border-color: #606060 #303030 #606060 #303030;
margin-top: 0;
}
.no-link-underscore:after
{
background-color: rgba(0, 0, 0, 0);
}
#footer-logo
{
filter: saturate(0);
height: 3.75vw;
width: 3.75vw;
transition: all 0.2s;
}
#footer-logo:hover
{
filter: saturate(1);
height: 4.5vw;
width: 4.5vw;
}
#footer-misc-list
{
float: left;
margin-left: 4vw;
}
#footer-name
{
margin-bottom: 1.3vw;
}
#footer-page-list
{
float: left;
}
#footer-to-top-button
{
margin: 0.52vw 0 0.52vw 0;
}
#header-close
{
font-size: 70%;
height: 1.72vw;
position: fixed;
right: 4.25vw;
rotate: 180deg;
top: 0.53vw;
width: 1.72vw;
z-index: 1100;
transition: color 0.25s, rotate 0.375s;
}
#title
{
align-items: center;
background-image: url("../images/background.png");
background-position: center;
background-size: 100%;
color: #fff;
font-size: 2.5vw;
padding: 14.5vw 0 14.5vw 0;
text-align: center;
transition: background 0.5s;
}
#title:hover
{
background-size: 110%;
}

64
css/icomoon.css Normal file
View File

@ -0,0 +1,64 @@
@font-face {
font-family: 'icomoon';
src: url('/fonts/icomoon.eot');
src: url('/fonts/icomoon.eot') format('embedded-opentype'),
url('/fonts/icomoon.ttf') format('truetype'),
url('/fonts/icomoon.woff') format('woff'),
url('/fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-itch-dot-io:before {
content: "\e901";
color: #fa5c5c;
}
.icon-discord:before {
content: "\e900";
color: #7289da;
}
.icon-file-zip:before {
content: "\e92b";
}
.icon-folder:before {
content: "\e92f";
}
.icon-stopwatch:before {
content: "\e952";
}
.icon-spinner8:before {
content: "\e981";
}
.icon-youtube:before {
content: "\ea9d";
}
.icon-youtube2:before {
content: "\ea9e";
}
.icon-twitch:before {
content: "\ea9f";
}
.icon-github:before {
content: "\eab0";
}
.icon-appleinc:before {
content: "\eabe";
}
.icon-windows8:before {
content: "\eac2";
}

104
css/index.css Normal file
View File

@ -0,0 +1,104 @@
.news
{
font-size: 1.5vw;
padding: 5.2vw 13vw 0 13vw;
text-align: center;
}
.news img
{
border-radius: 20%;
}
.news-left
{
float: left;
text-align: left;
width: 45%;
}
.news-right
{
float: right;
text-align: right;
width: 45%;
}
#news-nerd_stf
{
padding-bottom: 41vw;
}
#news-nerd_stf h2
{
color: #FF6A00;
}
#news-nerd_stf .news-left
{
width: 60%;
}
#news-nerd_stf .news-right
{
width: 30%;
}
#news-arcade-maniac
{
padding-bottom: 10.42vw;
}
#news-arcade-maniac a
{
color: #e72a00;
}
#news-arcade-maniac a::after
{
background-color: #e72a00;
}
#news-arcade-maniac h2
{
color: #6fe700;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
#news-arcade-maniac img
{
width: 50%;
}
#news-jobs
{
padding-bottom: 7.5vw;
}
#news-jobs h2
{
color: #303030;
}
#news-jobs img
{
width: 25%;
}
#news-brigade-labs
{
background-color: #303030;
color: white;
padding-bottom: 41.67vw;
}
#news-brigade-labs .news-left
{
width: 45%;
}
#news-brigade-labs .news-right
{
padding-top: 9.125vw;
width: 45%;
}
#title img
{
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3.625vw;
width: 14.5vw;
scale: 1;
transition: all 0.25s;
}
#title img:hover
{
scale: 1.15;
}

93
css/links.css Normal file
View File

@ -0,0 +1,93 @@
.links
{
margin-bottom: 4vw;
}
.link-row
{
display: inline-flex;
}
.link-row div
{
background-color: #eee;
border-radius: 0.25vw;
font-size: 1.125vw;
margin: 1.5vw;
padding: 2.5vw;
}
.link-row div h3
{
margin-bottom: 1vw;
}
#arcademaniac h3
{
color: #6FE700;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
#arcademaniac a
{
color: #e72a00;
}
#arcademaniac a::after
{
background-color: #e72a00;
}
#discord h3, #discord a
{
color: #7389DC;
}
#discord a::after
{
background-color: #7389DC;
}
#github h3, #github a
{
color: #181818;
}
#github a::after
{
background-color: #181818;
}
#itch h3, #itch a
{
color: #FF5C5B;
}
#itch a::after
{
background-color: #FF5C5B;
}
#saalty h3
{
color: green;
}
#saalty a
{
color: blue;
}
#saalty a::after
{
background-color: blue;
}
#twitch h3, #twitch a
{
color: #9147FF;
}
#twitch a::after
{
background-color: #9147FF;
}
#youtube h3, #youtube a
{
color: #FD0000;
}
#youtube a::after
{
background-color: #FD0000;
}

15
css/news-template.css Normal file
View File

@ -0,0 +1,15 @@
.back
{
background-color: #E0E0E0;
font-size: 1.25vw;
padding: 5vw;
margin: 5vw 30vw;
text-align: center;
}
.message p
{
font-size: 1.5vw;
margin: 5vw 15vw;
text-align: center;
}

48
css/news.css Normal file
View File

@ -0,0 +1,48 @@
.news-object
{
background-color: #e0e0e0;
border-radius: 0.25vw;
display: inline-flex;
font-size: 1.375vw;
margin: 0.5vw;
padding: 1vw;
width: 97vw;
}
.news-object #arrow
{
margin-left: 1vw;
}
.news-object #date
{
color: rgba(0, 0, 0, 0.5);
margin-left: auto;
transition: color 0.25s;
}
.news-object #date:hover
{
color: rgba(0, 0, 0, 1);
}
.news-object #name
{
color: #000;
}
.news-object #name::after
{
background-color: #000;
height: 0.15vw;
}
#end-message
{
font-size: 1.125vw;
margin: 2.5vw 0 6.5vw 0;
text-align: center;
}
#wait-message
{
font-size: 1.25vw;
margin: 7.5vw 25vw;
text-align: center;
}

23
css/privacy.css Normal file
View File

@ -0,0 +1,23 @@
.privacy
{
font-size: 1.475vw;
margin: 0 18.25vw 7.8125vw 18.25vw;
text-align: center;
}
.privacy ul, .privacy ol
{
margin: 0 13vw 0 13vw;
text-align: left;
}
.privacy li
{
margin: 0.78vw 0 0.78vw 0;
}
.privacy p
{
margin: 1.3vw 0 1.3vw 0;
}
#intro
{
margin-top: 6.51vw;
}

156
css/projects.css Normal file
View File

@ -0,0 +1,156 @@
.project
{
background-color: #E0E0E0;
border-color: #fff;
border-radius: 0.5vw;
border-style: solid;
border-width: 0.25vw;
font-size: 1.25vw;
padding: 5vw;
margin: 7.5vw 15vw 7.5vw 15vw;
text-align: center;
}
.project img
{
border-radius: 1vw;
margin-bottom: 2.5vw;
width: 25%;
}
#arcademaniac a
{
color: #e72a00;
}
#arcademaniac a::after
{
background-color: #e72a00;
}
#arcademaniac h2
{
color: #6fe700;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
#arcademaniac img
{
margin: -1vw;
width: 50%;
}
#brigadelabs
{
background-color: #303030;
color: #E0E0E0;
}
#brigadelabs img
{
margin: -2.5vw;
width: 37.5%;
}
#brigadelabs #date
{
color: rgba(255, 255, 255, 0.325);
transition: color 0.25s;
}
#brigadelabs #date:hover
{
color: #E0E0E0
}
#caveman
{
background-color: #000;
color: #fff;
}
#caveman a
{
color: #C00000;
}
#caveman a::after
{
background-color: #C00000;
}
#caveman h2
{
color: #8b0000;
}
#caveman img
{
margin-top: -7.5vw;
width: 37.5%;
}
#caveman #date
{
color: rgba(255, 255, 255, 0.325);
}
#caveman #date:hover
{
color: #909090;
}
#date
{
color: rgba(0, 0, 0, 0.325);
font-size: 1vw;
margin-top: 0.5vw;
transition: color 0.25s;
}
#date:hover
{
color: #000;
}
#emd
{
background-color: #314D79;
color: #fff;
}
#emd a
{
color: #0484d1;
}
#emd a::after
{
background-color: #0484d1;
}
#emd #date
{
color: rgba(255, 255, 255, 0.325);
}
#emd #date:hover
{
color: #fff;
}
#keycollect
{
background-color: #000;
color: #fff;
}
#keycollect a
{
color: #0326D1;
}
#keycollect a::after
{
background-color: #0326D1;
}
#keycollect #date
{
color: rgba(255, 255, 255, 0.325);
}
#keycollect #date:hover
{
color: #fff;
}
#rebuild img
{
width: 50%;
}
#trickortreat img
{
width: 35%;
}

162
css/projects/keycollect.css Normal file
View File

@ -0,0 +1,162 @@
:root
{
--background-color-1: #101010;
--background-color-2: #000;
--text-color: #e4e4e4;
--link-color: #0326d1;
}
body
{
background-color: var(--background-color-1);
}
.body
{
background-color: var(--background-color-2);
color: var(--text-color);
display: table;
font-size: 0.85vw;
margin: 0 25vw 0 25vw;
padding: 1vw 1vw 1vw 1vw;
width: 50%;
text-align: left;
}
.body *
{
font-family: 'Itch Pixel';
}
.body a
{
color: var(--link-color);
}
.body a::after
{
background-color: var(--link-color);
}
.body b
{
color: var(--link-color);
font-weight: normal;
}
.body br
{
margin-bottom: 1vw;
}
.body h2
{
margin-bottom: 1vw;
padding-top: 3vw;
}
.download-button
{
background-color: var(--link-color);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.15vw;
box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
color: #fff;
font-size: calc(0.85vw * 0.9);
font-weight: bold;
margin-right: 1vw;
padding: 0.5vw 0.625vw;
text-shadow: 0 1px 0 #2245f0;
}
.download-option
{
display: inline-flex;
padding-top: 0.625vw;
}
.download-option #name
{
align-items: center;
display: flex;
font-weight: bold;;
}
.download-option #fileicon
{
align-items: center;
color: rgba(255, 255, 255, 0.5);
display: flex;
margin-right: 1vw;
}
.download-option #filesize
{
align-items: center;
color: rgba(255, 255, 255, 0.5);
display: flex;
margin: 0 1vw;
}
.download-option #platforms
{
align-items: center;
color: rgba(255, 255, 255, 0.5);
display: flex;
}
.downloads
{
list-style: none;
}
#body-images
{
float: right;
margin-top: 5.325vw;
width: 40%;
}
#body-images a::after
{
background-color: rgba(0, 0, 0, 0);
}
#body-images img
{
width: 100%;
}
#body-more-info
{
background-color: #191919;
border-radius: 0.25vw;
margin-right: 1vw;
margin-top: 0.325vw;
padding: 0 1vw 0vw 1vw;
overflow: hidden;
transition: height 0.5s;
}
#body-more-info table
{
padding: 1vw 0;
}
#body-more-info table td:first-child
{
padding-right: 0.25vw;
font-size: calc(0.85vw * 0.9);
font-weight: bold;
opacity: 0.7;
text-align: right;
}
#body-more-info table td:last-child
{
padding-left: 0.25vw;
text-align: left;
}
#body-text
{
float: left;
height: 1000px;
width: 60%;
}
#download-price
{
align-items: center;
color: rgba(255, 255, 255, 0.5);
display: flex;
margin-left: 0.5vw;
}
#download-row
{
display: inline-flex;
margin-bottom: 2vw;
}

71
css/projects/nerdstf.css Normal file
View File

@ -0,0 +1,71 @@
.container button, .container h2, .container h3, .container h4, .dropdowns
{
margin-top: 1vw;
}
p
{
margin-top: 0.325vw;
}
.container
{
font-size: 1.25vw;
margin: 2.5vw 10vw 5vw 10vw;
text-align: center;
}
.container ul, .container ol
{
margin-left: 5vw;
text-align: left;
}
.download-container h2
{
text-align: left;
}
.download-table
{
border-collapse: collapse;
width: 100%;
}
.download-table td
{
border: 1px solid #888;
padding: 1vw;
text-align: left;
}
.download-table th
{
border: 1px solid #888;
padding: 1vw;
border-bottom: 2px solid #555;
}
.download-table tr:nth-child(even)
{
background-color: #ddd;
}
#download-button
{
font-size: 1.375vw;
padding: 1vw 1.5vw;
}
#intro
{
margin: 10vw;
}
#intro button
{
font-size: 1.125vw;
margin-top: 2vw;
padding: 1vw 1.5vw;
}
#title img
{
border-radius: 1vw;
width: 20vw;
}

55
data/initmessages.txt Normal file
View File

@ -0,0 +1,55 @@
The Stanley Parable is my favorite horror game.
Ah, Tetris, the inventory management survival horror game made by the Soviet Union in 1984.
Hey, what's going on guys?!?! CrazyYoutubeBro2 RIGHT HERE!!!
This is the story of a man named Stanley.
I love Minceraft
Hey guys, Steve Jobs here, coming back to you with another sick Fortnite video!
Je suis dans la Memory Zone.
I'm in the Diamond League in Duolingo :sunglasses:
Currently writing this code in school.
Idk why I decided to make these messages.
I swear, a good 60% of all my code is written at school (because I'm bored and have nothing to do).
Congratulations!!! You are our 1 millionth guest!!!
Congratulations!!! You've just made that joke for the 1 millionth time!!! How does it feel to be so unoriginal and stupid?
saltman was here
very nice
Imagine using Replit.
%ip_address%
No website builder necessary :smart:
Hey, VSauce! Michael here.
Hey, Michael! VSauce here.
#savetf2
https://desmos.com/calculator is my savior :)
:)
../
The end is never the end is never the end is never the end is never the end is never the end...
C:\Program Files\Google\Chrome\Application\chrome.exe
javac global.js
fubny
Home | That_One_Nerd
Is this a bucket?
https://stackoverflow.com is my savior :)
Unity 2021.2.7f1
ϕ = (sqrt(5) + 1) / 2
Have you seen the PNG specification on W3? Even the table of contents won't fit on my screen all at once completely zoomed out.
According to all known laws of aviation, there is no way a bee should be able to fly.
Brigade Laboratories is coming...
The real bucket was inside him all along...
Gambhorra'ta, Treasurer of the Profaned Vault.
How to javascript tutorial free???
How to html tutorial free?
How to css tutorial free?
me when i the
lol crit (lol)
random crits are fair and balanced
Cave Johnson, we're done here.
Alright, let's get started! This first test involves something the lab boys call "Repulsion Gel!"
You're not part of the control group, by the way. You get the gel. Last poor son-of-a-gun got blue paint! Ha-ha!
I AM NOT A MORON!!!
You should try playing Portal 2.
Silly... silly birds.
Stanley picked up the bucket.
New content? What does that mean, "New Content?"
I'm a pretty big fan of The Stanley Parable.
You know what, I think I've spent enough time writing this stupid easter egg nobody's going to find or care about.

10
data/news.json Normal file
View File

@ -0,0 +1,10 @@
{
"projects":
[
{
"id": "new-website",
"name": "A new website has been made!",
"date": "12/25/2022"
}
]
}

84
data/projects.json Normal file
View File

@ -0,0 +1,84 @@
{
"projects":
[
{
"id": "brigadelabs",
"img": "<img src=\"/images/projects/brigadelabs/logo.png\" title=\"Brigade Laboratories Logo\">",
"name": "Brigade Laboratories",
"description": "Brigade Laboratories is a first person puzzle and exploration game. It has a similar mood to Portal 2. I'm currently looking for a team to help me work on it. If that's your fancy, check more out on the <a href=\"/team\" target=\"_blank\">team page</a>. Other than that, I'm not disclosing much about the game.",
"link": "/projects/brigadelabs.html",
"date": "still going!"
},
{
"id": "nerdstf",
"img": "<img src=\"/images/projects/nerdstf/logo.png\" title=\"Nerd_STF Logo\">",
"name": "Nerd_STF",
"description": "Nerd_STF is a multi-purpose .NET library I maintain solo. It has math tools like an integral or derivative solver, matrix multiplication, complex numbers (and quaternions), and more. It also has some graphics stuff, like multiple color types (RGB, CMYK, HSV), and image support.",
"link": "/projects/nerdstf.html",
"date": "still going!"
},
{
"id": "website",
"name": "thatonenerd.net",
"description": "You know, the website that you're looking at right now. I don't think this needs a description.",
"link": "/projects/website.html",
"date": "still going!"
},
{
"id": "arcademaniac",
"img": "<img src=\"/images/projects/arcademaniac/logo.png\" title=\"Arcade Maniac Logo\">",
"name": "Arcade Maniac",
"description": "Arcade Maniac is a game about beating many different minigames, all of which are a different genre. There are 20 different minigames, but you only need to do at least 12 to half completion.<br>Doing more is always an option, though!",
"link": "/projects/arcademaniac.html",
"date": "January 11th, 2022"
},
{
"id": "caveman",
"img": "<img src=\"/images/projects/caveman/logo.png\" title=\"The Caveman Logo\">",
"name": "The Caveman",
"description": "The Caveman is a commissioned game by my friend <a href=\"https://about.saalty.net\" target=\"_blank\">Saalty</a>. It's a horror game about entering a cave in the dead of night and being chased by a madman who lives in there.",
"link": "/projects/caveman.html",
"date": "August 1st, 2021"
},
{
"id": "sneakandseek",
"img": "<img src=\"/images/projects/sneakandseek/logo.png\" title=\"SneakAndSeek Remastered Logo\">",
"name": "SneakAndSeek Remastered",
"description": "SneakAndSeek is a game I made for the <a href=\"https://itch.io/jam/pb-game-jam-4\" target=\"_blank\">PB Game Jab 4</a>. You're a ninja trying to escape an evil laboratory, and have to dodge a bunch of robots with different types lasers on them.",
"link": "/projects/sneakandseek.html",
"date": "May 31st, 2021"
},
{
"id": "emd",
"img": "<img src=\"/images/projects/emd/logo.png\" title=\"Entity March Dream Remastered Logo\">",
"name": "Entity March Dream Remastered",
"description": "Entity March Dream was the very first game I made. It's just a simple parkour game. You're a cube, and you're trying to stand on the green platform. Why? No clue, make up a story yourself if you care.",
"link": "/projects/emd.html",
"date": "June 25th, 2021"
},
{
"id": "rebuild",
"img": "<img src=\"/images/projects/rebuild/logo.png\" title=\"Rebuild Logo\">",
"name": "Rebuild",
"description": "Rebuild is a game about collecting radioactive waste and selling it for money. You can use that money to upgrade how much you can collect, how fast, and how much money you get for it.",
"link": "/projects/rebuild.html",
"date": "April 2nd, 2021"
},
{
"id": "trickortreat",
"img": "<img src=\"/images/projects/trickortreat/logo.png\" title=\"Trick or Treat Logo\">",
"name": "Trick or Treat",
"description": "Trick or Treat is a game about collecting candy/treats from people around the neighborhood. You can go shop for a bigger candy basket, better costumes, and more!",
"link": "/projects/trickortreat.html",
"date": "November 1st, 2020"
},
{
"id": "keycollect",
"img": "<img src=\"/images/projects/keycollect/logo.png\" title=\"Key Collect Logo\">",
"name": "KeyCollect",
"description": "Key Collect is a game similar to Pac-Man. You must collect several key pieces to finish the level.",
"link": "/projects/keycollect.html",
"date": "August 10th, 2020"
}
]
}

BIN
data/projects/keycollect/keycollect_mac.zip Normal file
View File

Binary file not shown.

BIN
data/projects/keycollect/keycombine.zip Normal file
View File

Binary file not shown.

BIN
fonts/icomoon.eot Normal file
View File

Binary file not shown.

22
fonts/icomoon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
fonts/icomoon.ttf Normal file
View File

Binary file not shown.

BIN
fonts/icomoon.woff Normal file
View File

Binary file not shown.

BIN
fonts/itch/pixel.eot Normal file
View File

Binary file not shown.

BIN
fonts/itch/pixel.ttf Normal file
View File

Binary file not shown.

BIN
fonts/itch/pixel.woff Normal file
View File

Binary file not shown.

BIN
fonts/itch/pixel.woff2 Normal file
View File

Binary file not shown.

8
games.html
View File

@ -1,8 +0,0 @@
<!DOCTYPE html>
<html>
<body>
<h1>This page is not ready yet. Sorry! Come back soon for more.</h1>
<a href = "index.html">Go home</a>
</body>
</html>

220
global/globalStyles.css
View File

@ -1,220 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
*
{
box-sizing: border-box;
}
::selection
{
background-color: rgba(255, 153, 17, 0.5);
}
a
{
color: #f91;
position: relative;
text-decoration: none;
}
a:after
{
background-color: #f91;
bottom: 0;
content: '';
height: 0.1vw;
left: 0;
position: absolute;
transform: scale(0, 1);
transform-origin: bottom right;
width: 100%;
transition: transform 0.25s;
}
a::selection
{
background-color: rgba(255, 255, 255, 0.5);
}
body
{
background-color: white;
color: black;
font-family: 'Readex Pro', 'Roboto', 'sans-serif';
font-size: 1.5vw;
margin: 0;
}
a:hover:after
{
transform: scale(1, 1);
transform-origin: bottom left;
}
i
{
color: #f91;
}
i ::selection
{
color: default;
}
li
{
margin-left: 5%;
text-align: left;
}
.column
{
float: left;
}
.float-left
{
float: left;
text-align: left;
}
.float-right
{
float: right;
text-align: right;
}
.footer
{
background-color: #303030;
color: #505050;
font-size: 1.75vw;
margin: 0;
padding-bottom: 2.5vh;
padding-top: 2.5vh;
text-align: center;
}
.formattable code
{
background-color: #303030;
border-radius: 0.4vw;
bottom: 0.2vh;
color: white;
font-family: 'Roboto Mono', 'Roboto', 'sans-serif';
font-size: 70%;
padding-left: 0.25vw;
padding-right: 0.25vw;
position: relative;
}
.formattable-codeblock
{
background-color: #303030;
border-radius: 0.5vw;
color: white;
font-family: 'Roboto Mono', 'Roboto', 'sans-serif';
font-size: 75%;
padding-bottom: 0.25vh;
padding-top: 0.25vh;
margin-left: 5%;
margin-right: 5%;
text-align: left;
width: 90%;
}
.formattable h1, .formattable h2, .formattable h3, .formattable h4, .formattable h5, .formattable h6
{
font-family: 'Outfit', 'Readex Pro', 'Roboto', 'sans-serif';
}
.formattable s
{
text-decoration-thickness: 2px;
}
.formattable table
{
background-color: rgba(0, 0, 0, 0.5);
border-collapse: collapse;
margin-left: 2.5%;
width: 95%;
}
.formattable td
{
text-align: left;
}
.formattable td, .formattable th
{
border-style: solid;
border-width: 0.13vw;
}
.formattable tr:nth-child(even)
{
background-color: rgba(255, 255, 255, 0.25);
}
.header
{
background-color: #303030;
margin: 0;
padding: 1vw;
position: fixed;
width: 100%;
text-align: center;
top: 0;
z-index: 100;
}
.header a
{
color: white;
font-size: 1.5vw;
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 0;
}
.nomargin
{
margin: 0;
}
.nopadding
{
padding: 0;
}
.row:after
{
content: "";
display: table;
clear: both;
}
.whitelink a
{
color: white;
}
.whitelink a:after
{
background-color: white;
}
.whitelink a::selection
{
background-color: rgba(255, 153, 17, 0.5);
}
.whiteselection::selection, .whiteselection h1::selection, .whiteselection h2::selection, .whiteselection h3::selection, .whiteselection h4::selection, .whiteselection h5::selection, .whiteselection h6::selection, .whiteselection li::selection, .whiteselection a::selection, .whiteselection p::selection, .whiteselection i::selection, .whiteselection img::selection
{
background-color: rgba(255, 255, 255, 0.5);
}

BIN
global/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 577 KiB

BIN
images/about/programmingskills.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
images/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 KiB

0
global/images/favicon.ico → images/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

BIN
images/huge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 MiB

BIN
images/logofullres.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
images/projects/arcademaniac/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
images/projects/brigadelabs/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
images/projects/caveman/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 MiB

BIN
images/projects/emd/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
images/projects/keycollect/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 861 B

BIN
images/projects/keycollect/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 861 B

BIN
images/projects/keycollect/showcase1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
images/projects/keycollect/showcase2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
images/projects/keycollect/showcase3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
images/projects/keycollect/showcase4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
images/projects/nerdstf/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 739 KiB

BIN
images/projects/rebuild/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
images/projects/sneakandseek/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
images/projects/trickortreat/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

134
index.html
View File

@ -2,81 +2,91 @@
<html>
<head>
<link href = "global/globalStyles.css" rel = "stylesheet" type = "text/css">
<link href = "index/styles.css" rel = "stylesheet" type = "text/css">
<link href = "global/images/favicon.ico" rel = "icon" type = "image/x-icon">
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/index.css">
<meta charset="utf-8">
<meta name="description" content="The home page of That_One_Nerd.">
<meta name="keywords" content="That_One_Nerd, That One Nerd, ThatOneNerd, That-One-Nerd">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | That_One_Nerd</title>
</head>
<!--header-->
<body>
<div class = "header whiteselection">
<a href = "index.html">Home</a>
<a href = "about.html">About</a>
<a href = "games.html">Games</a>
<a href = "links.html">Links</a>
<a href = "news.html">News</a>
</div>
<div class = "formattable title whiteselection">
<div id="title">
<img src="/images/logofullres.png">
<h1>That_One_Nerd</h1>
</div>
<div id = "title-triangle"></div>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<div class="news" id="news-nerd_stf">
<div class="news-left">
<h2>Nerd_STF Version 2.3</h2>
<br>
<p><b>Nerd_STF version 2.3 has been released! This update adds lots of linear algebra tools, like matrixes and vectors, as well as new number systems, like complex numbers and quaternions.</b></p>
<br>
<p>Nerd_STF is a C# library that runs on .Net 6.0, and contains added structures and classes I feel would help the default C# library package.</p>
<br>
<p>It includes math structures as well as other computer science topics. Right now, it is mainly focused on mathematics and graphics, but will branch out in the future. It currently contains alternative vector types, colors, and shape objects that are rich in implementation.
<br><br>
<p><b>
Find the repository <a href="https://github.com/That-One-Nerd/Nerd_STF" target="_blank">here</a> on GitHub,
<br>
and the package <a href="https://www.nuget.org/packages/Nerd_STF" target="_blank">here</a> on Nuget.
</b></p>
</div>
<div class="news-right">
<img src="/images/projects/nerdstf/logo.png">
</div>
</div>
<p style="text-align: center; margin-left: 10vw; margin-right: 10vw"><b>Just a head's up: this site is currently undergoing a complete remaking. This website will likely be completely changed within the next week or so.</b></p>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<div class="formattable row">
<div class="column" id = "about-left">
<img src = "global/images/logo.png">
</div>
<div class="column" id = "about-right">
<h2 class = "nomargin">I am <i>not</i> a professional game developer.</h2>
<h3 class = "nomargin">(Not yet)</h3>
<p>
Hey there, I'm Kyle, and I'm 14 years old. I am a programmer and game developer as a hobby. I've been programming in Unity and C# for about 2 years now, and I don't plan on stopping anytime soon. Most of my games will be free, because I don't need the money. I'm just here to make games that I would enjoy playing myself.
<br>
<br>
I also make things other than games, like this website. This is my first successful website I made myself. No website generator this time, all the raw HTML and CSS. I'm also learning other languages right now, such as Java, C++, and Python.
<br>
<br>
Also, FYI, all URLs on this website have a little underline to show you, and they open in a new tab. And no suspicious links. I don't want this site getting grouped up with other non-trustworthy sites. No ads here, either. Have fun.
</p>
</div>
<div class="news" id="news-arcade-maniac">
<img src="/images/projects/arcademaniac/logo.png">
<h2>Arcade Maniac</h2>
<p>Arcade Maniac is going to be a game based in an Arcade. There are going to be 20 games, all of which a different genre. You must complete at least 12 games to partial completion (slightly different per game) to beat it, but you get to choose which games to beat, or even choose to beat all of them. Each game has a partial completion split, but you can complete them to 100% if you'd like. This game will be free, but I will gladly accept donations!</p>
<br>
<p>Find more information on the <a href="https://arcademaniac.thatonenerd.net" target="_blank">website</a>, check out the <a href="https://that-one-nerd.itch.io/arcade-maniac" target="_blank">Itch</a> page, or find the <a href="https://github.com/That-One-Nerd/Arcade-Maniac" target="_blank">GitHub repository</a>!</p>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<div class = "formattable whatido">
<h2>What kind of stuff do I do?</h2>
<p>
Whatever I feel like. Usually, some sort of new game, but I'll also work on other things, like libraries and other tools. I've recently gained interest in graphics programming (basically doing what Unity does myself). I've began learning OpenCV and OpenGL, but I'm not as good at that kind of stuff as my buddy <a href = "https://about.saalty.net/" target = "_blank">Saalty</a>, so credit for that goes to him.
I'll try to make any library I use myself, because I'm the kind of person that likes to re-invent the wheel. But I understand their use, and for more complicated things like <a href = "https://www.newtonsoft.com/json" target = "_blank">Json.Net</a> I won't try and recreate. For now. :)
</p>
</div>
<div id = "hiring-triangle-top"></div>
<div class = "formattable hiring whiteselection">
<div class="news" id="news-jobs">
<h2>Want to hire me?</h2>
<p>
Unfortunately, I'm not up for full-on jobs yet, I'll wait a few more years first. But, if any company looking here is up for an internship in software development, I might be interested. You can email me at <a href = "mailto:dev@thatonenerd.net" target = "_blank">dev@thatonenerd.net</a>.
Employers, you can also check out my <a href = "about.html">About Me</a> page for more information.
</p>
<p>I am not up for full-time jobs yet, unfortunately for some, but I may be available for part-time software development internships for those who are interested. Send me an email at <a href="mailto:kyle@thatonenerd.net">kyle@thatonenerd.net</a>! You can also check my <a href="/about.html">About Me</a> for more information.</p>
<img src="/images/logofullres.png">
</div>
<div id = "hiring-triangle-bottom"></div>
<div class="line-spacer"></div>
<div class="line-spacer2-darkgray"></div>
<div class = "formattable thelatest whiteselection whitelink">
<h2>What's the latest?</h2>
<ul>
<li>Just added some redirects. Expect an update for the links page soon!</li>
<li>New update of the index and the about page!</li>
<li>This first edition of this site has been made! More will come, probably.</li>
</ul>
<p>Want older announcements? Check out the <a class = "whitelink" href = "news.html">news</a> page!</p>
</div>
<div class = "formattable footer whiteselection">
<h6 class = "nomargin"><b>That_One_Nerd</b> 2022</h6>
<div class="news" id="news-brigade-labs">
<div class="news-left">
<img src="/images/projects/brigadelabs/logo.png">
</div>
<div class="news-right">
<h2>Something new is coming...</h2>
<p>Don't worry, I haven't forgotten about Brigade Laboratories. Stay tuned, more is coming.</p>
<br>
<p>See the first teaser <a href="https://youtu.be/KVMNJAwnl9w" target="_blank">here</a> on Youtube.</p>
</div>
</div>
<div class="line-spacer-darkgray-complete"></div>
<div class="line-spacer2-darkgray-complete"></div>
</body>
<!--footer-->
<script type="module" src="js/imports.js"></script>
<script src="js/global.js" defer></script>
</html>

115
index/styles.css
View File

@ -1,115 +0,0 @@
.hiring
{
background-color: #303030;
color: white;
font-size: 1.4vw;
padding-bottom: 5.4vh;
padding-left: 10vw;
padding-right: 10vw;
padding-top: 5.4vh;
text-align: center;
}
.hiring h2
{
color: #f91;
}
.row
{
float: right;
margin: 0;
height: 27.78vh;
width: 100%;
}
.thelatest
{
background-color: #f91;
font-size: 1.4vw;
margin: 0;
padding-bottom: 7vh;
padding-right: 6.25vw;
padding-top: 2.25vh;
text-align: center;
}
.title
{
background-color: #f91;
color: #000;
text-align: center;
margin-top: 0;
padding-bottom: 10.8vh;
padding-left: 2vw;
padding-right: 2vw;
padding-top: 17.3vh;
}
.title h1
{
font-size: 4vw;
margin: 0;
}
.whatido
{
float: none;
font-size: 1.4vw;
padding-bottom: 10vh;
padding-left: 10vw;
padding-right: 10vw;
padding-top: 10vh;
margin-top: 35vw;
}
#about-left
{
width: 45%;
}
#about-left img
{
padding-bottom: 5vh;
padding-left: 7.5%;
padding-right: 7.5%;
padding-top: 5vh;
width: 85%;
}
#about-right
{
font-size: 1.4vw;
padding-bottom: 5vh;
padding-right: 2.6vw;
padding-top: 2.6vw;
text-align: right;
width: 55%;
}
#hiring-triangle-bottom
{
width: 0;
height: 0;
border-left: solid 100vw;
border-top: solid 5vh;
border-color: #303030 #303030 #f91 #f91;
}
#hiring-triangle-top
{
width: 0;
height: 0;
border-right: solid 100vw;
border-bottom: solid 5vh;
border-color: transparent transparent #303030 #303030;
}
#title-triangle
{
width: 0;
height: 0;
border-left: solid 100vw;
border-top: solid 5vh;
border-color: #f91 #f91 transparent transparent;
}

27
js/about.js Normal file
View File

@ -0,0 +1,27 @@
function main()
{
setAge();
setStart();
}
function setAge()
{
const birthday = Date.parse("05/18/2007");
var now = Date.now();
var diff = now - birthday;
var years = diff * (1 / 31556952000);
globalThis.extras.replaceVars("%age%", Math.floor(years));
}
function setStart()
{
const start = Date.parse("7/01/2020");
var now = Date.now();
var diff = now - start;
var years = diff * (1 / 31556952000);
globalThis.extras.replaceVars("%start%", Math.round(years));
}
main();

48
js/error.js Normal file
View File

@ -0,0 +1,48 @@
var changed = false;
function main()
{
globalThis.extras.replaceVars("%url%", window.location.pathname.substring(1));
setTimeout(() => {
if (!headerOpen)
{
toggleHeader();
changed = true;
setTimeout(showHeaderMessage, 500);
}
else showHeaderMessage();
}, headerOpen ? 500 : 1000);
}
function goBack()
{
history.back();
}
function goHome()
{
window.location.href = "/index.html";
}
function showHeaderMessage()
{
var text1 = document.getElementById("headertext");
var text2 = document.getElementById("headertext2" + (changed ? "a" : "b"));
text1.style.top = "3.5vw";
text2.style.top = "0.75vw";
var lastClosed = headerOpen;
setInterval(() => {
if (!headerOpen && lastClosed) onHeaderClose();
lastClosed = headerOpen;
}, 500);
}
function onHeaderClose()
{
setTimeout(() => {
if (!headerOpen) toggleHeader();
}, 3500);
}
main();

133
js/global.js Normal file
View File

@ -0,0 +1,133 @@
const request = new XMLHttpRequest();
const siteUrl = window.location.href;
function init()
{
console.log("Initializing " + siteUrl);
insertHeader();
insertFooter();
if (document.cookie.includes("headerOpen=false")) toggleHeader();
resetDropdowns();
const initMessagePath = "/data/initmessages.txt";
request.open("GET", initMessagePath, false);
request.send(null);
var lines = request.responseText.split("\n");
globalThis.request = request;
console.log(lines[Math.floor(Math.random() * lines.length)]);
}
function backToTop()
{
const maxFrames = 30;
var currentScroll = document.body.scrollTop;
if (currentScroll == 0) currentScroll = document.documentElement.scrollTop;
if (currentScroll == 0) return;
var startScroll = currentScroll;
var timer = setInterval(loop);
var frames = 0;
function loop()
{
if (frames == maxFrames)
{
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
clearInterval(timer);
return;
}
frames++;
currentScroll = globalThis.lerping.sinLerp(startScroll, 0, frames / maxFrames);
document.body.scrollTop = currentScroll;
document.documentElement.scrollTop = currentScroll;
}
}
function insertFooter()
{
const footerPath = "/templates/footer.html";
var str = document.documentElement.innerHTML;
request.open("GET", footerPath, false);
request.send(null);
while (str.includes("<!--footer-->")) str = str.replace("<!--footer-->", request.responseText);
document.documentElement.innerHTML = str;
}
function insertHeader()
{
const headerPath = "/templates/header.html";
var str = document.documentElement.innerHTML;
request.open("GET", headerPath, false);
request.send(null);
while (str.includes("<!--header-->")) str = str.replace("<!--header-->", request.responseText);
document.documentElement.innerHTML = str;
}
function resetDropdowns()
{
var drops = document.getElementsByClassName("dropdown");
for(var i = 0; i < drops.length; i++) toggleDropdown(drops[i]);
}
function scaleHeaderSpacer()
{
var header = document.getElementById("header"),
spacer = document.getElementById("header-spacer");
spacer.style.marginBottom = header.clientHeight + "px";
}
var headerOpen = true;
var spin = 180;
function toggleHeader()
{
headerOpen = !headerOpen;
var header = document.getElementById("header"), button = document.getElementById("header-close");
spin += 180;
header.style.top = headerOpen ? "0" : "-4.1vw";
button.style.rotate = spin + "deg";
button.title = (headerOpen ? "Close" : "Open") + " the header.";
document.cookie = "headerOpen=" + headerOpen;
}
function toggleDropdown(dropdown)
{
var body = dropdown.getElementsByClassName("dropdown-body")[0];
if (body.style.height.startsWith("0"))
{
body.style.height = "auto";
var height = body.clientHeight;
body.style.height = "0";
setTimeout(function ()
{
body.style.height = height + "px";
}, 10);
body.style.borderWidth = "1px";
dropdown.style.marginBottom = "1vw";
}
else
{
body.style.height = "0";
body.style.borderWidth = "0";
dropdown.style.marginBottom = "0";
}
}
init();

7
js/imports.js Normal file
View File

@ -0,0 +1,7 @@
import * as extras from "/js/lib/extras.js";
import * as lerping from "/js/lib/lerping.js";
import * as stringify from "/js/lib/stringify.js";
globalThis.extras = extras;
globalThis.lerping = lerping;
globalThis.stringify = stringify;

72
js/lib/extras.js Normal file
View File

@ -0,0 +1,72 @@
export function lerp(a, b, t, clamp = true)
{
if (clamp)
{
t = min([ 1, t ]);
t = max([ 0, t ]);
}
return a + t * (b - a);
}
export function max(nums)
{
if (nums.length < 0) return 0;
var biggest = nums[0];
for (var i = 1; i < nums.length; i++)
{
var num = nums[i];
if (num > biggest) biggest = num;
}
return biggest;
}
export function min(nums)
{
if (nums.length < 0) return 0;
var smallest = nums[0];
for (var i = 1; i < nums.length; i++)
{
var num = nums[i];
if (num < smallest) smallest = num;
}
return smallest;
}
export function placify(num)
{
var str = num.toString();
if (num > 10 && num < 20) return str + "th";
switch (str[str.length - 1])
{
case '1': return str + "st";
case '2': return str + "nd";
case '3': return str + "rd";
default: return str + "th";
}
}
export function replaceVars(variable, replace)
{
var elements = document.getElementsByClassName("js-check-vars");
var changed = 0;
for (var i = 0; i < elements.length; i++)
{
var element = elements[i];
var html = element.innerHTML;
while (html.includes(variable))
{
html = html.replace(variable, replace);
changed++;
}
element.innerHTML = html;
}
return changed;
}
export function replaceVarsBlock(text, variable, replace)
{
while (text.includes(variable)) text = text.replace(variable, replace);
return text;
}

21
js/lib/lerping.js Normal file
View File

@ -0,0 +1,21 @@
export function defaultLerp(a, b, t, clamp = true)
{
if (clamp)
{
t = globalThis.extras.min([ 1, t ]);
t = globalThis.extras.max([ 0, t ]);
}
return a + t * (b - a);
}
export function sinLerp(a, b, t, clamp = true)
{
if (clamp)
{
t = globalThis.extras.min([ 1, t ]);
t = globalThis.extras.max([ 0, t ]);
}
var cos = Math.cos(Math.PI * t) - 1;
var mult = (b - a) / 2;
return -mult * cos + a;
}

34
js/lib/stringify.js Normal file
View File

@ -0,0 +1,34 @@
export function commaify(numStr)
{
var str = "";
for (var i = 0; i < numStr.length; i++)
{
str = numStr.charAt(numStr.length - 1 - i) + str;
if (i % 3 == 2 && i != numStr.length - 1) str = "," + str;
}
return str;
}
export function stringifyByteCount(number)
{
const endings = [ "B", "KB", "MB", "GB", "TB", "PB", "EB" ];
var end = 0;
while (number >= 1024)
{
number /= 1024;
end++;
}
var places;
if (number < 100) places = 1;
else if (number < 10) places = 2;
else if (number < 2) places = 3;
else places = 0;
var pow = Math.pow(10, places);
var n = Math.round(number * pow) / pow;
var str = n + " " + endings[end];
return str;
}

76
js/news.js Normal file
View File

@ -0,0 +1,76 @@
function main()
{
var projects = getProjects();
if (projects == undefined)
{
console.error("No projects found.");
return;
}
var template = getTemplate();
if (template == undefined)
{
console.error("Template not found.");
return;
}
var divs = populateTemplates(projects, template);
insertProjects(divs);
removeWaitMessage();
}
function getProjects()
{
const projectsPath = "data/news.json";
request.open("GET", projectsPath, false);
request.send(null);
var str = request.responseText;
return JSON.parse(str);
}
function getTemplate()
{
const templatePath = "templates/news.html";
request.open("GET", templatePath, false);
request.send(null);
return request.responseText;
}
function populateTemplates(json, template)
{
var total = "";
for (var i = 0; i < json.projects.length; i++)
{
var project = json.projects[i];
var str = template;
str = globalThis.extras.replaceVarsBlock(str, "%id%", project.id);
str = globalThis.extras.replaceVarsBlock(str, "%name%", project.name);
str = globalThis.extras.replaceVarsBlock(str, "%date%", project.date);
total += str;
}
return total;
}
function insertProjects(projects)
{
var html = document.documentElement.innerHTML;
while (html.includes("<!--news-->")) html = html.replace("<!--news-->", projects);
document.documentElement.innerHTML = html;
}
function removeWaitMessage()
{
var html = document.getElementById("wait-message");
html.innerHTML = "";
html.style.margin = "0";
}
main();

70
js/projects.js Normal file
View File

@ -0,0 +1,70 @@
function main()
{
var projects = getProjects();
if (projects == undefined)
{
console.error("No projects found.");
return;
}
var template = getTemplate();
if (template == undefined)
{
console.error("Template not found.");
return;
}
var divs = populateTemplates(projects, template);
insertProjects(divs);
}
function getProjects()
{
const projectsPath = "/data/projects.json";
request.open("GET", projectsPath, false);
request.send(null);
var str = request.responseText;
return JSON.parse(str);
}
function getTemplate()
{
const templatePath = "/templates/project.html";
request.open("GET", templatePath, false);
request.send(null);
return request.responseText;
}
function populateTemplates(json, template)
{
var total = "";
for (var i = 0; i < json.projects.length; i++)
{
var project = json.projects[i];
var str = template;
str = globalThis.extras.replaceVarsBlock(str, "%id%", project.id);
str = globalThis.extras.replaceVarsBlock(str, "%name%", project.name);
str = globalThis.extras.replaceVarsBlock(str, "%description%", project.description);
str = globalThis.extras.replaceVarsBlock(str, "%link%", project.link);
str = globalThis.extras.replaceVarsBlock(str, "%date%", project.date);
str = globalThis.extras.replaceVarsBlock(str, "<!--img-->", project.img == undefined ? "" : project.img);
total += str;
}
return total;
}
function insertProjects(projects)
{
var html = document.documentElement.innerHTML;
while (html.includes("<!--projects-->")) html = html.replace("<!--projects-->", projects);
document.documentElement.innerHTML = html;
}
main();

35
js/projects/keycollect.js Normal file
View File

@ -0,0 +1,35 @@
const moreInfoId = "body-more-info";
var moreInfoOpen = false;
var moreInfoSize = 0;
function init()
{
var element = document.getElementById(moreInfoId);
if (element != undefined)
{
moreInfoSize = element.offsetHeight;
element.style.height = "0";
}
}
function toggleMoreInfo()
{
moreInfoOpen = !moreInfoOpen;
var element = document.getElementById(moreInfoId);
element.style.height = moreInfoOpen ? moreInfoSize.toString() + "px" : "0";
}
function goToDownloads()
{
window.location.href = "/projects/keycollect/download.html";
}
function downloadFile(name)
{
name = name.toLowerCase();
window.location.href = "/data/projects/keycollect/" + name;
}
init();

85
links.html
View File

@ -1,8 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/links.css">
<meta charset="utf-8">
<meta name="description" content="Some useful redirect links.">
<meta name="keywords" content="That_One_Nerd links">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links | That_One_Nerd</title>
</head>
<!--header-->
<body>
<h1>This page is not ready yet. Sorry! Come back soon for more.</h1>
<a href = "index.html">Go home</a>
<div id="title">
<h1>Links</h1>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<div class="links">
<div class="link-row">
<div id="github">
<h3><span class="icon-github"></span> Github</h3>
<p>You'll find the repositories to my code here (if I publish them).</p>
<a href="https://github.com/That-One-Nerd" target="_blank">Visit</a>
</div>
<div id="itch">
<h3><span class="icon-itch-dot-io"></span> Itch</h3>
<p>You'll find most of my games here. But all of my Itch games have been copied <a href="/projects.html" target="_blank">here</a> as well.</p>
<a href="https://that-one-nerd.itch.io/" target="_blank">Visit</a>
</div>
<div id="arcademaniac">
<h3>The Arcade Maniac Website</h3>
<p>I made a subdomain for Arcade Maniac. It isn't finished, and I'll likely be rennovating that site to be similar to this one.</p>
<a href="https://arcademaniac.thatonenerd.net/" target="_blank">Visit</a>
</div>
</div>
<div class="link-row">
<div id="youtube">
<h3><span class="icon-youtube"></span> Youtube</h3>
<p>My Youtube channel has a bunch of livestreams on projects, as well as video games if that's your jam. I may shift the channel into a more educational mindset soon, no promises.</p>
<a href="https://www.youtube.com/channel/UCeKaBeycUz-sHna0ypFykwA" target="_blank">Visit</a>
</div>
<div id="twitch">
<h3><span class="icon-twitch"></span> Twitch</h3>
<p>I used to stream on both Youtube and Twitch. Now I only do Youtube, but if you want Twitch anyway, here it is. I may be deleting my Twitch in the near future.</p>
<a href="https://www.twitch.tv/that_one_nerd77" target="_blank">Visit</a>
</div>
<div id="discord">
<h3><span class="icon-discord"></span> Discord</h3>
<p>Here's my Discord server if you want to come and talk.</p>
<a href="https://discord.gg/HqRS4aneyP" target="_blank">Visit</a>
</div>
</div>
<div class="link-row">
<div id="contact">
<h3>Contact Me</h3>
<p>Here's my email if you've got any reason to message me professionally.</p>
<a href="mailto:kyle@thatonenerd.net">kyle@thatonenerd.net</a>
</div>
<div id="saalty">
<h3>Saalty</h3>
<p>Check out Saalty and his website while you're at it; he's pretty cool.</p>
<a href="https://about.saalty.net/" target="_blank">Visit</a>
</div>
<div id="site">
<h3>thatonenerd.net</h3>
<p>In case you uuuh ummmm hmmm idk maybe go the website you're looking at right now?</p>
<a href="/index.html">Visit</a>
</div>
</div>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2-darkgray"></div>
</body>
<!--footer-->
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
</html>

44
news.html
View File

@ -1,8 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/news.css">
<meta charset="utf-8">
<meta name="description" content="What's going on at the moment.">
<meta name="keywords" content="That_One_Nerd news">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News | That_One_Nerd</title>
</head>
<!--header-->
<body>
<h1>This page is not ready yet. Sorry! Come back soon for more.</h1>
<a href = "index.html">Go home</a>
<div id="title">
<h1>News</h1>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<!--news-->
<div id="wait-message">
<p>Loading avaliable news. If this message stays long enough for you to read, there's probably a problem. Or you can read really fast. Or you have awful internet.</p>
</div>
<div id="end-message">
<h3>That's all the news I've got for now.</h3>
<p>Come back later and you might find more!</p>
</div>
<div id="end-spacer"></div>
<div class="line-spacer"></div>
<div class="line-spacer2-darkgray"></div>
</body>
<!--footer-->
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
<script src="/js/news.js" defer></script>
</html>

88
news/new-website.html Normal file
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/news-template.css">
<meta charset="utf-8">
<meta name="description" content="The new site has been created. Horray! Here's what was added.">
<meta name="keywords" content="That_One_Nerd New Website, New Website">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The New Website | That_One_Nerd</title>
</head>
<!--header-->
<body>
<div id="title">
<h1>The New Website</h1>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<div class="message">
<p>
Hi everybody! In January this year I released the first version of thatonenerd.net. Now, almost a year later, I've barely
touched it. In November I decided to replace the old (and slightly crappy) version of this website with a brand new one.
It was originally meant to be a one-week project, but ended up, you know, slightly longer. To be honest, I haven't actually
worked that hard on the website in that time.
</p>
<p>
So, school is a little boring. I've got a ton of time in classes I'm good at. Enough time for me to bring my personal
laptop to school and work on stuff. That's where most of the website development has been done (along with some other projects,
including some easy parts of Nerd_STF). But I hit a roadblock 2-3 weeks into development when it became time to make the
download pages for each project listed. It's not particularly hard, but the problem is that the school's WiFi has blocked
Itch.IO, where most of my games were. So I couldn't work on it at school anymore, and I didn't feel like working on it at
home because other projects were calling.
</p>
<p>
And it's still kind of like that. You may notice that (at least at the time of publishing), most of the project pages lead
to 404s. But I've decided that I'll add those with time. Winter break has given me enough time to wrap everything else about
the website up. All that's left are the project pages.
</p>
<p>
I was originally going to host this website on my own server. I had a Node.JS server written and working, and I was looking
into either using my own server with a VPN or getting an online provider, but I decided to stick with GitHub Pages just
because it's much simpler and more importantly free. I may eventually use a custom server with more capabilities than
GitHub Pages, but for now that isn't much of a problem.
</p>
<p>
And again, like the last website design, this design has been made with exactly <i>zero</i> website templates or builders.
I've designed all of this myself. I've written the HTML, the CSS, and the JavaScript by hand. I'm doing this for a couple
reasons. I've always had more respect for people who make stuff themselves rather than using an existing tool. I think this
website being made by one person without help is a way to show my skill (and obsession with certain topics). I also don't
want something I put time into being squandered by a company putting their marketing on it. Lastly, let's be honest. Reading
the HTML or JavaScript of a template website is really hard. Their code is super difficult to understand, and whether that's
intentional or a result of automation, I don't like it.
</p>
<p>
So anyway, that's my rant about this website. There's stuff to do, like the project pages as previously said, but I also
want to remake the About Me page because it could be better (I didn't have any time to remake it as I wanted this to be
out by Christmas), but overall I think the new website is a definite improvement over the old one.
<br><br>
Well, I'll be making more announcements when more project pages are released, or anything else happens (update for Nerd_STF
or another project, or just other rants). Stay tuned!
</p>
<p>
- Kyle
</p>
</div>
<div class="back">
<p>Want to read more? <a href="/news.html">See all the news</a></p>
<p>Done? <a href="/index.html">Head back home</a></p>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2-darkgray"></div>
</body>
<!--footer-->
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
</html>

67
privacy.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/privacy.css">
<meta charset="utf-8">
<meta name="description" content="The privacy policy. It's a pretty simple one.">
<meta name="keywords" content="That_One_Nerd privacy, That_One_Nerd privacy policy, That_One_Nerd policy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Privacy Policy | That_One_Nerd</title>
</head>
<!--header-->
<body>
<div id="title">
<h1>Privacy Policy</h1>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<div class="privacy" id="intro">
<p>I value your privacy. I get it. Personally, I would rather not be tracked across every page I go to or have a company know more about me than I do myself. It's not a good look on the site. Maybe it's just me.</p>
<br>
<p>Now I know that that's something often lied about. But seriously, the list of things I collect is going to be so short and mundane it might even be a little boring. The site does use cookies, however, for simple things also described down below. If you really hate every cookie to ever exist, you can opt out. But these cookies I think you'll agree are nothing you should get mad about.</p>
</div>
<div class="privacy" id="global">
<h2>Things collected for global usage.</h2>
<p>This is the data I collect from your browsing session that is sent to the servers for safe-keeping.</p>
<ul>
<li>Nothing (maybe one day anonymous page statistics).</li>
</ul>
</div>
<div class="privacy" id="cookies">
<h2>Things stored locally on your computer (cookies).</h2>
<p>You've probably heard of cookies. But if you haven't, cookies are basically little bits of data stored on your computer. Only the website that puts a cookie on your computer can look at that cookie. It was created as a quality-of-life improvement to keep track of things like light/dark mode, or your login credentials so you don't have to sign in every time you refresh. Cookies aren't inheritly bad, they have only recently been taken and used improperly for things like tracking.</p>
<p>So here's what I store with cookies.</p>
<ul>
<li>Whether to show or hide the header.</li>
</ul>
</div>
<div class="privacy" id="intro">
<p>That's everything.</p>
<p>And I'm not lying, if you are a programming nerd (like me) then you can feel free to view the source code of the website and check for yourself. I'll even help you find the files that matter.</p>
<ul>
<li>You can find all of the source files on the GitHub Pages repository <a href="https://github.com/That-One-Nerd/That-One-Nerd.github.io" target="_blank">here</a>.</li>
<li><a href="/js/global.js" target="_blank">global.js</a> is a big one. You may also want to look at the page-specific JavaScript files.</li>
<li><a href="/js/lib/extras.js" target="_blank">extras.js</a> and <a href="/js/lib/lerping.js" target="_blank">lerping.js</a> are just extra tools.</li>
<li><a href="/js/imports.js" target="_blank">imports.js</a> is literally just used for importing the above files. There should never be any complicated code there.</li>
</ul>
<p>In fact, if you find anything that looks suspicious, please message me to let me know. It might be some sort of hack, or I might just have changed how much I value your privacy, in which case please hold me personally accountable.</p>
</div>
</body>
<!--footer-->
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
</html>

38
projects.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/projects.css">
<meta charset="utf-8">
<meta name="description" content="All of the projects that I've worked on at some point.">
<meta name="keywords" content="That_One_Nerd projects, That_One_Nerd games, projects, games">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My projects | That_One_Nerd</title>
</head>
<!--header-->
<body>
<div id="title">
<h1>My projects</h1>
</div>
<div class="line-spacer"></div>
<div class="line-spacer2"></div>
<!--projects-->
<div class="line-spacer"></div>
<div class="line-spacer2-darkgray"></div>
</body>
<!--footer-->
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
<script src="/js/projects.js" defer></script>
</html>

111
projects/keycollect.html Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html>
<head>
<link type="image/x-icon" rel="icon" href="/images/projects/keycollect/favicon.png">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/projects/keycollect.css">
<meta charset="utf-8">
<meta name="description" content="A game created from the idea of Pac-Man">
<meta name="keywords" content="That_One_Nerd KeyCollect, That_One_Nerd Key Collect, KeyCollect, Key Collect, That_One_Nerd KeyCombine, That_One_Nerd Key Combine, KeyCombine, Key Combine">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KeyCollect | Projects | That_One_Nerd</title>
</head>
<!--header-->
<body>
<div class="body">
<div id="body-text">
<h2>KeyCollect</h2>
<p>
A game that looks like Pac-Man, but with a few differences!
<br>
Your goal is to collect all the pieces of a key to exit the level, while dodging enemies!
<br>
Each different color enemy has its own AI, and most of them are very unpredictable!
</p>
<br>
<a onclick="toggleMoreInfo()">More information</a>
<div id="body-more-info">
<table>
<tr>
<td>Updated</td>
<td><abbr title="August 10th, 2020 at 12:04 AM"><span class="icon-stopwatch"></span> Aug 10, 2020</abbr></td>
</tr>
<tr>
<td>Published</td>
<td><abbr title="August 7th, 2020 at 7:44 PM"><span class="icon-stopwatch"></span> Aug 07, 2020</abbr></td>
</tr>
<tr>
<td>Status</td>
<td><b>Released</b></td>
</tr>
<tr>
<td>Platforms</td>
<td><b>Windows</b>, <b>macOS</b></td>
</tr>
<tr>
<td>Author</td>
<td><b>That_One_Nerd</b></td>
</tr>
<tr>
<td>Genre</td>
<td><b>Puzzle</b></td>
</tr>
<tr>
<td>Tags</td>
<td><b>2D</b></td>
</tr>
</table>
</div>
<h2>Download</h2>
<div id="download-row">
<button class="download-button" id="goto-downloads" onclick="goToDownloads()">Download Now</button>
<p id="download-price">Free</p>
</div>
<br>
<p>Click download now to get access to the following files:</p>
<ul class="downloads">
<li>
<div class="download-option">
<span class="icon-file-zip" id="fileicon"></span>
<p id="name">KeyCombine.zip</p>
<p id="filesize">17 MB</p>
<p id="platforms"><span class="icon-windows8" title="Download for Windows"></span></p>
</div>
</li>
<li>
<div class="download-option">
<span class="icon-file-zip" id="fileicon"></span>
<p id="name">KeyCollect_Mac.zip</p>
<p id="filesize">20 MB</p>
<p id="platforms"><span class="icon-appleinc" title="Download for macOS"></span></p>
</div>
</li>
</ul>
</div>
<div id="body-images">
<a href="/images/projects/keycollect/showcase1.png" target="_blank"><img src="/images/projects/keycollect/showcase1.png"></a>
<a href="/images/projects/keycollect/showcase2.png" target="_blank"><img src="/images/projects/keycollect/showcase2.png"></a>
<a href="/images/projects/keycollect/showcase3.png" target="_blank"><img src="/images/projects/keycollect/showcase3.png"></a>
<a href="/images/projects/keycollect/showcase4.png" target="_blank"><img src="/images/projects/keycollect/showcase4.png"></a>
</div>
</div>
</body>
<!--footer-->
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
<script src="/js/projects/keycollect.js" defer></script>
</html>

50
projects/keycollect/download.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<link type="image/x-icon" rel="icon" href="/images/projects/keycollect/favicon.png">
<link type="text/css" rel="stylesheet" href="/css/global.css">
<link type="text/css" rel="stylesheet" href="/css/projects/keycollect.css">
<meta charset="utf-8">
<meta name="description" content="A game created from the idea of Pac-Man">
<meta name="keywords" content="That_One_Nerd KeyCollect, That_One_Nerd Key Collect, KeyCollect, Key Collect, That_One_Nerd KeyCombine, That_One_Nerd Key Combine, KeyCombine, Key Combine">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KeyCollect | Projects | That_One_Nerd</title>
</head>
<!--header-->
<body>
<div class="body">
<h2>Download "KeyCollect"</h2>
<a href="../keycollect.html">&larr; Game page</a>
<ul class="downloads">
<li>
<div class="download-option">
<button class="download-button" onclick="downloadFile('KeyCombine.zip')">Download</button>
<p id="name">KeyCombine.zip</p>
<p id="filesize">17 MB</p>
<p id="platforms"><span class="icon-windows8" title="Download for Windows"></span></p>
</div>
</li>
<li>
<div class="download-option">
<button class="download-button" onclick="downloadFile('KeyCollect_Mac.zip')">Download</button>
<p id="name">KeyCollect_Mac.zip</p>
<p id="filesize">20 MB</p>
<p id="platforms"><span class="icon-appleinc" title="Download for macOS"></span></p>
</div>
</li>
</ul>
</div>
</body>
<!--footer-->
<script type="module" src="/js/imports.js"></script>
<script src="/js/global.js" defer></script>
<script src="/js/projects/keycollect.js" defer></script>
</html>

29
redirects/arcademaniac.html
View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href = "../global/globalStyles.css" rel = "stylesheet" type = "text/css">
<link href = "styles.css" rel = "stylesheet" type = "text/css">
<link href = "../global/images/favicon.ico" rel = "icon" type = "image/x-icon">
<meta http-equiv = "Refresh" content = "0; url = 'https://arcademaniac.thatonenerd.net/'">
<title>Redirecting to Arcade Maniac | That_One_Nerd</title>
</head>
<body>
<div class = "header whiteselection">
<a href = "index.html">Home</a>
<a href = "about.html">About</a>
<a href = "games.html">Games</a>
<a href = "links.html">Links</a>
<a href = "news.html">News</a>
</div>
<div class = "formattable container">
<h1 class = "nomargin">Redirecting you to Arcade Maniac</h1>
<h3 class = "nomargin">Haven't gone yet? Click <a href = "https://arcademaniac.thatonenerd.net/">here</a>.</h3>
<p>Don't want to go anymore? Here's the <a href = "index.html">home page</a>.</p>
</div>
</body>
</html>

29
redirects/github.html
View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href = "../global/globalStyles.css" rel = "stylesheet" type = "text/css">
<link href = "styles.css" rel = "stylesheet" type = "text/css">
<link href = "../global/images/favicon.ico" rel = "icon" type = "image/x-icon">
<meta http-equiv = "Refresh" content = "0; url = 'https://github.com/That-One-Nerd/'">
<title>Redirecting to my Github | That_One_Nerd</title>
</head>
<body>
<div class = "header whiteselection">
<a href = "index.html">Home</a>
<a href = "about.html">About</a>
<a href = "games.html">Games</a>
<a href = "links.html">Links</a>
<a href = "news.html">News</a>
</div>
<div class = "formattable container">
<h1 class = "nomargin">Redirecting you to my Github</h1>
<h3 class = "nomargin">Haven't gone yet? Click <a href = "https://github.com/That-One-Nerd/">here</a>.</h3>
<p>Don't want to go anymore? Here's the <a href = "index.html">home page</a>.</p>
</div>
</body>
</html>

29
redirects/itch.html
View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href = "../global/globalStyles.css" rel = "stylesheet" type = "text/css">
<link href = "styles.css" rel = "stylesheet" type = "text/css">
<link href = "../global/images/favicon.ico" rel = "icon" type = "image/x-icon">
<meta http-equiv = "Refresh" content = "0; url = 'https://that-one-nerd.itch.io/'">
<title>Redirecting to Itch | That_One_Nerd</title>
</head>
<body>
<div class = "header whiteselection">
<a href = "index.html">Home</a>
<a href = "about.html">About</a>
<a href = "games.html">Games</a>
<a href = "links.html">Links</a>
<a href = "news.html">News</a>
</div>
<div class = "formattable container">
<h1 class = "nomargin">Redirecting you to Itch</h1>
<h3 class = "nomargin">Haven't gone yet? Click <a href = "https://that-one-nerd.itch.io/">here</a>.</h3>
<p>Don't want to go anymore? Here's the <a href = "index.html">home page</a>.</p>
</div>
</body>
</html>

29
redirects/saalty.html
View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href = "../global/globalStyles.css" rel = "stylesheet" type = "text/css">
<link href = "styles.css" rel = "stylesheet" type = "text/css">
<link href = "../global/images/favicon.ico" rel = "icon" type = "image/x-icon">
<meta http-equiv = "Refresh" content = "0; url = 'https://about.saalty.net/'">
<title>Redirecting to Saalty's Website | That_One_Nerd</title>
</head>
<body>
<div class = "header whiteselection">
<a href = "index.html">Home</a>
<a href = "about.html">About</a>
<a href = "games.html">Games</a>
<a href = "links.html">Links</a>
<a href = "news.html">News</a>
</div>
<div class = "formattable container">
<h1 class = "nomargin">Redirecting you to Saalty's Website</h1>
<h3 class = "nomargin">Haven't gone yet? Click <a href = "https://about.saalty.net/">here</a>.</h3>
<p>Don't want to go anymore? Here's the <a href = "index.html">home page</a>.</p>
</div>
</body>
</html>

21
redirects/styles.css
View File

@ -1,21 +0,0 @@
body
{
background-color: #f91;
color: white;
text-align: center;
}
.container
{
background-color: white;
border-radius: 1.5vw;
color: black;
font-size: 2.5vh;
margin-left: 10%;
margin-right: 10%;
margin-top: 37.5vh;
padding-bottom: 5vh;
padding-left: 5%;
padding-right: 5%;
padding-top: 5vh;
}

20
templates/footer.html Normal file
View File

@ -0,0 +1,20 @@
<footer>
<a class="no-link-underscore" href="/"><img id="footer-logo" src="/images/logofullres.png"></a>
<h3 id="footer-name"><b>That_One_Nerd</b> 2022</h3>
<button id="footer-to-top-button" onclick="backToTop()" title="Scroll back to the top.">Back to Top</button>
<div id="footer-lists">
<ul id="footer-page-list">
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/projects.html">Projects</a></li>
<li><a href="/links.html">Links</a></li>
<li><a href="/news.html">News</a></li>
</ul>
<ul id="footer-misc-list">
<li><a href="/privacy.html">Privacy Policy</a></li>
<li><a href="mailto:kyle@thatonenerd.net">Contact Me</a></li>
</ul>
</div>
</footer>

11
templates/header.html Normal file
View File

@ -0,0 +1,11 @@
<header id="header">
<a href="/">
<img src="/images/favicon.ico">
</a>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
<a href="/projects.html">Projects</a>
<a href="/links.html">Links</a>
<a href="/news.html">News</a>
<button id="header-close" onclick="toggleHeader()" title="Close the header.">V</button>
</header>

5
templates/news.html Normal file
View File

@ -0,0 +1,5 @@
<div class="news-object" id="%id%">
<a id="name" href="news/%id%.html">%name%</a>
<p id="arrow"a>></p>
<p id="date">%date%</p>
</div>

7
templates/project.html Normal file
View File

@ -0,0 +1,7 @@
<div class="project" id="%id%">
<!--img-->
<h2>%name%</h2>
<p>%description%</p>
<a href="%link%" target="_blank">Learn More</a>
<p id="date">Last update: %date%</p>
</div>