gnawmon
/
website
1
1
Fork 0
Code Pull Requests Activity

idk

This commit is contained in:
Gnawmon 2024-03-09 19:55:52 +03:00
parent ed835da874
commit e14905a75c
8 changed files with 280 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Untitled.mp4 Normal file
View File

Binary file not shown.

112
assets/css/style.css
View File

@ -108,7 +108,7 @@ button:active {
bottom: 0;
min-width: 100%;
min-height: 100%;
display: none;
}
.title {
@ -370,21 +370,24 @@ code {
background-color: rgb(9, 24, 37);
}
.showcases{
.showcases {
display: grid;
grid-template-columns: auto auto;
margin: auto;
}
}
.showcase {
float: left;
box-shadow: 0 0 0.2em rgb(0, 0, 0);
border-radius: 3px;
width: 800px;
margin: 10px;
margin: 10px;
margin-top: 20px;
height: 400px;
}
.showcase img:not(.background) {
padding: 10px;
@ -435,4 +438,103 @@ margin: 10px;
#blur {
background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
backdrop-filter: blur(20px);
}
.pausetext {
float: right;
}
.pausetext:hover {
cursor: pointer;
}
.settings {
z-index: 11;
position: fixed;
width: 20%;
background: #2929293c;
border-radius: 3px;
margin-left: auto;
right: 0;
top: 4%;
transition: ease 0.2s all;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.532);
}
.settings p {
display: inline-block;
transform: translateY(-11px);
}
.gear {
float: right;
width: 20px;
margin-top: 6px;
margin-right: 10px;
transition: ease-in-out 1s;
}
.gear:hover {
cursor: pointer;
transform: rotate(360deg);
}
.switch {
--button-width: 3.5em;
--button-height: 2em;
--toggle-diameter: 1.5em;
--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
--toggle-shadow-offset: 10px;
--toggle-wider: 3em;
--color-grey: #cccccc;
}
.slider {
margin-top: 4%;
margin-left: 2%;
display: inline-block;
width: var(--button-width);
height: var(--button-height);
background-color: var(--color-grey);
border-radius: calc(var(--button-height) / 2);
position: relative;
transition: 0.3s all ease-in-out;
}
.slider::after {
content: "";
display: inline-block;
width: var(--toggle-diameter);
height: var(--toggle-diameter);
background-color: #fff;
border-radius: calc(var(--toggle-diameter) / 2);
position: absolute;
top: var(--button-toggle-offset);
transform: translateX(var(--button-toggle-offset));
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
transition: 0.3s all ease-in-out;
}
.switch input[type="checkbox"]:checked+.slider {
background-color: var(--accent-color);
}
.switch input[type="checkbox"]:checked+.slider::after {
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}
.switch input[type="checkbox"] {
display: none;
}
.switch input[type="checkbox"]:active+.slider::after {
width: var(--toggle-wider);
}
.switch input[type="checkbox"]:checked:active+.slider::after {
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

BIN
assets/images/cbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

85
assets/js/main.js
View File

@ -1,24 +1,77 @@
const backgrounds = ["ubg.png", "vbg.png", "limbg.png", "lbg.png"];
const colors = ["#676667",'rgb(227, 154, 228)' ,'#C9A333' , 'rgb(236, 36, 36)'];
const backgrounds = ["ubg.png", "vbg.png", "limbg.png", "lbg.png", "cbg.png"];
const colors = ["#676667", 'rgb(227, 154, 228)', '#C9A333', 'rgb(236, 36, 36)', '#990066'];
var backgroundVideo;
var pausetext;
window.onload = function () {
try {
document.getElementById("moreInfo").classList.add('div-hidden');
document.getElementById("specs").classList.add('div-hidden');
} catch (exception) {
console.log("something was supposed to happen, but it didnt.")
console.log("something was supposed to happen, but it didnt.");
}
const randValue = getRandomInt(backgrounds.length);
document.documentElement.style.setProperty('--accent-color',colors[randValue]);
document.body.style.background = getBackground(randValue);
document.body.style.backgroundSize = "cover";
backgroundVideo = document.getElementById("bgvideo");
pausetext = document.getElementById("pausetext");
var enableVideoBackground = document.getElementById("enableVideoBackground");
var enableRandomBackrounds = document.getElementById("enableRandomBackrounds");
if (localStorage.getItem("enableRandomBackrounds") == "true") {
randomColorAndBackground();
}
if (localStorage.getItem("enableVideoBackground") == "true") {
backgroundVideo.play();
backgroundVideo.style.display = "block";
enableVideoBackground.checked = true;
}
enableVideoBackground.addEventListener('change', function () {
if (this.checked) {
backgroundVideo.style.display = "block";
enableRandomBackrounds.checked = false;
backgroundVideo.play();
setDefaultColorAndBackground();
localStorage.setItem("enableVideoBackground", true);
} else {
backgroundVideo.style.display = "none";
localStorage.setItem("enableVideoBackground", false);
}
});
enableRandomBackrounds.addEventListener('change', function () {
if (this.checked) {
backgroundVideo.style.display = "none";
randomColorAndBackground();
enableVideoBackground.checked = false;
localStorage.setItem("enableRandomBackrounds", true);
localStorage.setItem("enableVideoBackground", false);
} else {
setDefaultColorAndBackground();
localStorage.setItem("enableRandomBackrounds", false);
}
});
};
function randomColorAndBackground() {
console.log("ran");
const randValue = getRandomInt(backgrounds.length);
document.documentElement.style.setProperty('--accent-color', colors[randValue]);
document.body.style.background = getBackground(randValue);
document.body.style.backgroundSize = "cover";
}
function setDefaultColorAndBackground() {
document.documentElement.style.setProperty('--accent-color', colors[1]);
document.body.style.background = getBackground(1);
document.body.style.backgroundSize = "cover";
}
function pauseVideo() {
if (!video.videoPaused) {
video.pause();
if (!backgroundVideo.videoPaused) {
backgroundVideo.pause();
} else {
video.play();
backgroundVideo.play();
}
}
function showThing(element) {
@ -49,3 +102,15 @@ function getBackground(i) {
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
function showSettings() {
var settings = document.getElementById("settings");
if (settings.style.display == "none") {
settings.style.display = "block";
setTimeout(() => { settings.style.opacity = "1"; }, 200);
} else {
settings.style.opacity = "0";
setTimeout(() => { settings.style.display = "none"; }, 200);
}
}

42
assets/svg/gear.svg Normal file
View File

@ -0,0 +1,42 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1269.000000pt" height="1280.000000pt" viewBox="0 0 1269.000000 1280.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
fill="#ffffff" stroke="none">
<path d="M6185 12793 c-802 -46 -1899 -350 -2688 -744 -138 -69 -203 -106
-334 -191 -122 -80 -128 -92 -127 -263 1 -205 47 -380 236 -890 128 -344 188
-521 188 -548 0 -15 -13 -29 -40 -45 -180 -103 -670 -638 -790 -864 -17 -31
-39 -60 -50 -63 -54 -17 -222 38 -641 210 -393 162 -565 224 -714 261 -109 26
-222 32 -247 12 -42 -35 -258 -455 -366 -713 -284 -682 -512 -1532 -588 -2192
-11 -90 -18 -229 -18 -355 l-1 -206 30 -42 c41 -58 129 -108 266 -153 152 -49
282 -78 610 -132 280 -46 327 -55 437 -81 87 -21 138 -40 173 -64 25 -18 29
-28 29 -68 0 -60 23 -188 56 -317 78 -305 247 -756 339 -907 30 -48 34 -60 25
-83 -27 -70 -116 -152 -515 -467 -379 -300 -526 -441 -568 -547 l-17 -42 47
-82 c479 -839 1602 -1934 2396 -2333 68 -35 73 -36 122 -25 82 18 151 66 275
189 123 123 193 207 410 492 233 307 339 420 395 420 13 0 56 -16 97 -35 235
-113 876 -267 1173 -282 87 -4 125 -10 138 -21 38 -34 76 -201 127 -567 60
-427 102 -638 158 -805 37 -107 61 -154 108 -209 l38 -44 201 6 c266 8 461 33
780 98 654 134 1435 428 2006 754 212 122 322 199 342 240 25 53 22 169 -7
285 -40 155 -75 242 -310 762 -87 194 -129 318 -124 374 3 35 9 43 64 79 109
72 206 156 394 345 246 245 443 478 500 591 24 47 52 54 135 34 89 -20 203
-64 553 -211 314 -132 537 -212 664 -238 77 -16 184 -21 223 -10 22 6 83 100
173 269 309 580 582 1498 691 2320 38 288 45 392 46 635 0 271 -2 280 -66 334
-118 100 -331 156 -889 236 -358 51 -505 86 -542 128 -10 10 -18 48 -22 97
-15 174 -68 391 -170 697 -77 233 -154 424 -200 497 -18 28 -26 51 -22 65 15
60 132 171 371 354 385 294 610 492 686 605 57 86 58 100 19 172 -491 890
-1668 2117 -2374 2472 -58 29 -76 34 -109 29 -141 -23 -315 -183 -609 -558
-279 -356 -322 -409 -392 -480 -41 -41 -89 -81 -105 -88 -28 -11 -37 -9 -103
23 -170 84 -479 170 -833 232 -132 23 -343 45 -376 38 -75 -15 -111 92 -164
482 -57 427 -77 565 -96 665 -41 214 -102 385 -156 442 l-27 28 -135 -2 c-75
-1 -158 -3 -186 -5z m582 -5049 c292 -43 530 -160 713 -350 186 -193 289 -407
347 -719 26 -141 26 -497 0 -640 -97 -531 -441 -886 -965 -995 -286 -60 -649
-42 -897 43 -470 162 -753 531 -825 1070 -15 114 -12 372 5 485 92 612 500
1017 1115 1106 132 19 379 19 507 0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

65
index.html
View File

@ -10,14 +10,25 @@
</head>
<body>
<!--
<video autoplay muted loop class="bgvideo" id="bgvideo">
<video muted loop class="bgvideo" id="bgvideo">
<source src="Untitled.mp4" type="video/mp4">
</video>
-->
<div class="middlething">
<div class="navbar"> <a id="active" href="index.html">Main Page </a> <a href="projects.html
">Projects </a></div>
">Projects </a> <img src="assets/svg/gear.svg" class="gear" onclick="showSettings()"/></div>
<div class="settings" id="settings">
<label class="switch">
<input type="checkbox" id="enableVideoBackground">
<span class="slider"></span>
</label> <p>Video Background</p>
<br>
<label class="switch">
<input type="checkbox" id="enableRandomBackrounds">
<span class="slider"></span>
</label> <p>Random Backgrounds</p>
</div>
<h3 class="paragraph invert" style="margin-top: 40px;">Hello hi, I'm Gnawmon</h3>
<p class="paragraph">
@ -25,12 +36,12 @@
I program in c# and python, I wanna learn a <tot class="tooltip">low level language<span
class="tooltiptext">rust, c or c++ idk</span> </tot> at one point too. I've made a few games in
unity and never posted them online. <br> <br>
I've made <tot class="tooltip">a few scenery<span class="tooltiptext">You're looking at one right now!
Although it's blurred</span> </tot> in blender and posted a few on <a class="link"
I've made <tot class="tooltip">a few scenery<span class="tooltiptext">You're looking at them right now!
Although they're blurred</span> </tot> in blender and posted a few on <a class="link"
target=”_blank” href="https://nitter.net/Gnawmon">twitter</a> but stopped posting a while back. I
also made prodecural textures with substance 3d in the past.<br><br>
I use an arch based os btw<br><br>
<!-- <button onclick="pauseVideo()">Pause the video</button> -->
<!-- <button onclick="pauseVideo()">Pause the video</button> -->
</p>
@ -51,25 +62,27 @@
<li>AMD CPU</li>
<li>Runs EndeavourOS with KDE Plasma</li>
<li><code>curl http://gnawmon.vern.cc/endeavour</code> run this to see fetch on your computer</li> </ul>
<div class="term-container"><span class="term-fg31 term-fg1"> .&#47;</span><span class="term-fg35 term-fg1">o</span><span class="term-fg34 term-fg1">.</span> <span class="term-fg32 term-fg1"> ╭─</span> EndeavourOS Linux x86_64
<span class="term-fg31 term-fg1"> .&#47;</span><span class="term-fg35 term-fg1">sssso</span><span class="term-fg34 term-fg1">-</span> <span class="term-fg32 term-fg1"> ├─</span> 6.5.5-arch1-1
<span class="term-fg31 term-fg1"> `:</span><span class="term-fg35 term-fg1">osssssss+</span><span class="term-fg34 term-fg1">-</span> <span class="term-fg32 term-fg1"> ├─</span> gnawmon
<span class="term-fg31 term-fg1"> `:+</span><span class="term-fg35 term-fg1">sssssssssso</span><span class="term-fg34 term-fg1">&#47;.</span> <span class="term-fg32 term-fg1"> ├─󰏗</span> 2 (cargo), 8 (npm), 2263 (pacman), 45 (steam), 31 (flatpak-system)
<span class="term-fg31 term-fg1"> `-&#47;o</span><span class="term-fg35 term-fg1">ssssssssssssso</span><span class="term-fg34 term-fg1">&#47;.</span> <span class="term-fg32 term-fg1"> ╰─</span> bash 5.1.16 its supposed to say zsh but idk why it does that
<span class="term-fg31 term-fg1"> `-&#47;+</span><span class="term-fg35 term-fg1">sssssssssssssssso</span><span class="term-fg34 term-fg1">+:`</span>
<span class="term-fg31 term-fg1"> `-:&#47;+</span><span class="term-fg35 term-fg1">sssssssssssssssssso</span><span class="term-fg34 term-fg1">+&#47;.</span> <span class="term-fg33 term-fg1"> ╭─</span> Plasma 5.27.8 [KF5 5.110.0] [Qt 5.15.10] (x11)
<span class="term-fg31 term-fg1"> `.:&#47;&#47;o</span><span class="term-fg35 term-fg1">sssssssssssssssssssso</span><span class="term-fg34 term-fg1">++-</span> <span class="term-fg33 term-fg1"> ├─</span> konsole
<span class="term-fg31 term-fg1"> .:&#47;&#47;+</span><span class="term-fg35 term-fg1">ssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">++:</span> <span class="term-fg33 term-fg1"> ├─</span> Hack Nerd Font 10
<span class="term-fg31 term-fg1"> .:&#47;&#47;&#47;o</span><span class="term-fg35 term-fg1">ssssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">++:</span> <span class="term-fg33 term-fg1"> ├─󰂫</span> AppleDark-ALL-AccentDinamic [KDE], Breeze [Qt]
<span class="term-fg31 term-fg1"> `:&#47;&#47;&#47;&#47;</span><span class="term-fg35 term-fg1">ssssssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">+++.</span> <span class="term-fg33 term-fg1"> ├─󰂫</span> Vimix-Amethyst [KDE&#47;Qt]
<span class="term-fg31 term-fg1">`-&#47;&#47;&#47;&#47;+</span><span class="term-fg35 term-fg1">ssssssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">++++-</span>
<span class="term-fg31 term-fg1"> `..-+</span><span class="term-fg35 term-fg1">oosssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">+++++&#47;`</span> <span class="term-fg34 term-fg1"> ├─󰍛</span> AMD Ryzen @ 3.6GHz [60.2°on]
<span class="term-fg34 term-fg1"> .&#47;++++++++++++++++++++++++++++++&#47;:.</span> <span class="term-fg34 term-fg1"> ├─󰍹</span> NVIDIA GeForce GTX
<span class="term-fg34 term-fg1"> `:::::::::::::::::::::::::------``</span> <span class="term-fg34 term-fg1"> ├─</span> 1920x1080 @ 60.00Hz, 1920x1080 @ 60.00Hz
<span class="term-fg34 term-fg1"> ├─</span> 7.08 GiB &#47; 15.54 GiB (45%)
<span class="term-fg34 term-fg1"> ╰─󰄉</span> 1 hour, 6 mins
<div class="term-container"><span class="term-fg31 term-fg1"> .&#47;</span><span class="term-fg35 term-fg1">o</span><span class="term-fg34 term-fg1">.</span> <span class="term-fg31 term-fg1">gnawmon</span>@<span class="term-fg31 term-fg1">lepc</span>
<span class="term-fg31 term-fg1"> .&#47;</span><span class="term-fg35 term-fg1">sssso</span><span class="term-fg34 term-fg1">-</span> ------------
<span class="term-fg31 term-fg1"> `:</span><span class="term-fg35 term-fg1">osssssss+</span><span class="term-fg34 term-fg1">-</span> <span class="term-fg35 term-fg1">OS</span>: EndeavourOS Linux x86_64
<span class="term-fg31 term-fg1"> `:+</span><span class="term-fg35 term-fg1">sssssssssso</span><span class="term-fg34 term-fg1">&#47;.</span> <span class="term-fg35 term-fg1">Kernel</span>: 6.7.8-arch1-1
<span class="term-fg31 term-fg1"> `-&#47;o</span><span class="term-fg35 term-fg1">ssssssssssssso</span><span class="term-fg34 term-fg1">&#47;.</span> <span class="term-fg35 term-fg1">Uptime</span>: 3 hours, 24 mins
<span class="term-fg31 term-fg1"> `-&#47;+</span><span class="term-fg35 term-fg1">sssssssssssssssso</span><span class="term-fg34 term-fg1">+:`</span> <span class="term-fg35 term-fg1">Packages</span>: 2351 (pacman), 22 (flatpak)
<span class="term-fg31 term-fg1"> `-:&#47;+</span><span class="term-fg35 term-fg1">sssssssssssssssssso</span><span class="term-fg34 term-fg1">+&#47;.</span> <span class="term-fg35 term-fg1">Shell</span>: bash 5.2.26
<span class="term-fg31 term-fg1"> `.:&#47;&#47;o</span><span class="term-fg35 term-fg1">sssssssssssssssssssso</span><span class="term-fg34 term-fg1">++-</span> <span class="term-fg35 term-fg1">Resolution</span>: 1920x1080 @ 60.00Hz, 1920x1080 @ 60.00Hz
<span class="term-fg31 term-fg1"> .:&#47;&#47;+</span><span class="term-fg35 term-fg1">ssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">++:</span> <span class="term-fg35 term-fg1">DE</span>: Plasma 5.27.10
<span class="term-fg31 term-fg1"> .:&#47;&#47;&#47;o</span><span class="term-fg35 term-fg1">ssssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">++:</span> <span class="term-fg35 term-fg1">WM</span>: KWin
<span class="term-fg31 term-fg1"> `:&#47;&#47;&#47;&#47;</span><span class="term-fg35 term-fg1">ssssssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">+++.</span> <span class="term-fg35 term-fg1">WM Theme</span>: WillowDarkShader
<span class="term-fg31 term-fg1">`-&#47;&#47;&#47;&#47;+</span><span class="term-fg35 term-fg1">ssssssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">++++-</span> <span class="term-fg35 term-fg1">Theme</span>: [Plasma], Sierra-dark [GTK2&#47;3]
<span class="term-fg31 term-fg1"> `..-+</span><span class="term-fg35 term-fg1">oosssssssssssssssssssssssso</span><span class="term-fg34 term-fg1">+++++&#47;`</span> <span class="term-fg35 term-fg1">Icons</span>: Vimix-Amethyst [Plasma], Vimix-Amethyst [GTK2&#47;3]
<span class="term-fg34 term-fg1"> .&#47;++++++++++++++++++++++++++++++&#47;:.</span> <span class="term-fg35 term-fg1">Terminal</span>: konsole
<span class="term-fg34 term-fg1"> `:::::::::::::::::::::::::------``</span> <span class="term-fg35 term-fg1">Terminal Font</span>: Hack Nerd Font 10
<span class="term-fg35 term-fg1">CPU</span>: AMD Ryzen 5 3500X (6) @ 3.6GHz
<span class="term-fg35 term-fg1">GPU</span>: NVIDIA GeForce GTX 1080
<span class="term-fg35 term-fg1">Memory</span>: 5.76GiB &#47; 15.54GiB (37%)
&nbsp;
<span class="term-fg1"> </span><span class="term-fg37 term-fg1"></span><span class="term-fg31 term-fg1"></span><span class="term-fg32 term-fg1"></span><span class="term-fg33 term-fg1"></span><span class="term-fg34 term-fg1"></span><span class="term-fg35 term-fg1"></span><span class="term-fg36 term-fg1"></span>
<span class="term-fg30 term-bg40"> </span><span class="term-fg31 term-bg41"> </span><span class="term-fg32 term-bg42"> </span><span class="term-fg33 term-bg43"> </span><span class="term-fg34 term-bg44"> </span><span class="term-fg35 term-bg45"> </span><span class="term-fg36 term-bg46"> </span><span class="term-fg37 term-bg47"> </span>
<span class="term-fgx8 term-bgx8"> </span><span class="term-fgx9 term-bgx9"> </span><span class="term-fgx10 term-bgx10"> </span><span class="term-fgx11 term-bgx11"> </span><span class="term-fgx12 term-bgx12"> </span><span class="term-fgx13 term-bgx13"> </span><span class="term-fgx14 term-bgx14"> </span><span class="term-fgx15 term-bgx15"> </span>
</div>
<p>You can find the terminal font <a class="link" href="https://github.com/ryanoasis/nerd-fonts"><tot class="tooltip">here<span class="tooltiptext">It's Inconsolata Regular</span> </tot></a>.</p>
<h3>Windows Machine </h3>
@ -164,7 +177,7 @@
<img src="assets/88x31/ie_exploder.gif"></img>
<a href="https://vern.cc"> <img src="assets/88x31/vern.png"></img></a>
<img src="assets/88x31/mwd.png"></img>
<!-- <button id="rotate_button" onclick="rotate()">rotate</button> -->
<button id="rotate_button" onclick="rotate()">rotate</button>
</div>
<p class="paragraph bottomtext"><a href="http://git.vern.cc/gnawmon/website" class="link">source code</a></p>

4
minexplorer.html
View File

@ -10,11 +10,11 @@
</head>
<body>
<!--
<video autoplay muted loop class="bgvideo" id="bgvideo">
<source src="Untitled.mp4" type="video/mp4">
</video>
-->
<div class="middlething">
<div class="navbar"> <a href="index.html">Main Page </a> <a href="projects.html
">Projects </a><a id="active" href="minexplorer.html">MineXplorer Word Finder </a></div>

18
projects.html
View File

@ -9,12 +9,24 @@
</head>
<body>
<!--
<video autoplay muted loop class="bgvideo" id="bgvideo">
<source src="Untitled.mp4" type="video/mp4">
</video>
-->
<div class="navbar"> <a href="index.html">Main Page </a> <a href="projects.html" id="active">Projects</a></div>
<div class="navbar"> <a id="active" href="index.html">Main Page </a> <a href="projects.html
">Projects </a> <img src="assets/svg/gear.svg" class="gear" onclick="showSettings()"/></div>
<div class="settings" id="settings">
<label class="switch">
<input type="checkbox" id="enableVideoBackground">
<span class="slider"></span>
</label> <p>Video Background</p>
<br>
<label class="switch">
<input type="checkbox" id="enableRandomBackrounds">
<span class="slider"></span>
</label> <p>Random Backgrounds</p>
</div>
<div class="middlething">