Initial commit

This commit is contained in:
Gnawmon 2024-01-11 21:51:42 +03:00
commit a668c0bee9
18 changed files with 561 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
saul.mp4

BIN
88x31/endeavour.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
88x31/firefox.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
88x31/ie_exploder.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
88x31/vern.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

4
README.md Normal file
View File

@ -0,0 +1,4 @@
# epic website i wrote
idk what license to use yet so do whatever you want with it <br>
also the files in svg/ and 88x31/ are not mine <br>
[link](https://gnawmon.vern.cc/)

BIN
Untitled.mp4 Normal file

Binary file not shown.

49
grt.html Normal file
View File

@ -0,0 +1,49 @@
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video autoplay muted loop class="bgvideo">
<source src="Untitled.mp4" type="video/mp4">
</video>
<div class="middlething">
<div class="navbar"> <a href="index.html">Main Page </a><a id="active" href="grt.html">GR Translator</a></div>
<p class="paragraph" style="padding-top: 20px;">plural decode</p>
<input placeholder="base16 " id="base16" name="name" />
<p class="paragraph" id="base16o"></p>
<p class="paragraph">abd3 decode</p>
<input placeholder="base32" id="base32" name="name" />
<p class="paragraph" id="base32o"></p>
</div>
</body>
<script>
const base32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
//code stolen from everywhere
function hex2a(hexx) {
var hex = hexx.toString();//force conversion
var str = '';
for (var i = 0; i < hex.length; i += 2)
str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
return str;
}
const base16i = document.getElementById("base16");
const base16o = document.getElementById("base16o");
const base32i = document.getElementById("base32");
const base32o = document.getElementById("base32o");
base16i.addEventListener("input", updateValue);
base32i.addEventListener("input", b32d);
function updateValue(e) {
base16o.textContent = hex2a(e.target.value);
}
function b32d(e){
base32o.textContent = "its not done yet lol";
}
</script>

67
index.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>Gnawmon's Website</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</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 id="active" href="index.html">Main Page </a> <a href="projects.html">Projects </a></div>
<h3 class="paragraph invert">Hello hi, I'm Gnawmon</h3>
<p class="paragraph">
I'm a programmer and an artist <br> <br>
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 watching them right now!
Although it's blurred</span> </tot> in blender and posted a few on <a style="color: #1DA1F2;"
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>
</p>
<h2 onclick="showThing('gallery')" class="paragraph dropdown">More</h2>
<div id="gallery">
<p class="paragraph">
i speak <s>3</s> 2 languages
</p>
</div>
<div class="contact">
<img src="svg/matrix.svg" height="40" width="40" />
<p>@gnawmon@matrix.org</p>
</div>
<div class="contact">
<img src="svg/discord.svg" height="40" width="40" />
<p>@gnawmon</p>
</div>
<div class="contact">
<a href="http://git.vern.cc/gnawmon" class="fill-div">
<img src="svg/forgejo.svg" height="40" width="40" />
<p>/gnawmon</p>
</a>
</div>
<div class="smalimages">
<a href="https://endeavouros.com/"> <img src="88x31/endeavour.png"></img> </a>
<a href="https://www.mozilla.org/en-US/firefox/new"> <img src="88x31/firefox.gif"></img></a>
<img src="88x31/ie_exploder.gif"></img>
<a href="https://vern.cc"> <img src="88x31/vern.png"></img></a>
<!-- <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>
</div>
</body>
</html>

21
main.js Normal file
View File

@ -0,0 +1,21 @@
function pauseVideo() {
var video = document.getElementById("bgvideo");
video.pause();
}
function showThing(element) {
var gallery = document.getElementById(element);
if (gallery.style.display === "block") {
gallery.style.display = "none";
} else {
gallery.style.display = "block";
}
}
function rotate() {
var x = document.getElementsByTagName("BODY")[0];
x.className = "rotate";
var button = document.getElementById("rotate_button");
button.style.display = "none";
}

BIN
pepsi.mp4 Normal file

Binary file not shown.

29
projects.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Projects</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</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" id="active">Projects</a></div>
<p class="paragraph">
not here yet lol <br> <br>
<button onclick="pauseVideo()">Pause the video</button>
</p>
<p class="paragraph bottomtext" ><a class="link">source code</a></p>
</div>
</body>
</html>

332
style.css Normal file
View File

@ -0,0 +1,332 @@
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto:wght@300;400&display=swap');
:root {
--accent-color: rgb(227, 154, 228);
--white: rgb(255, 255, 252);
--overlay: #00000069;
}
html,
body {
height: 100%;
margin: 0;
background: var(--overlay);
}
a,
h1,
h2,
h3,
h4,
h5,
p,
li {
font-family: 'Lato', sans-serif;
font-variant: normal;
color: var(--white);
}
button {
background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
color: var(--white);
padding: 10px;
border: none;
background-position: 0% 0%;
background-size: 100% 200%;
border-bottom: 5px solid var(--accent-color);
border-radius: 2px;
transition: 0.3s;
}
button:hover {
background-position: 0% 0%;
background-size: 100% 100%;
}
button:active {
filter: hue-rotate(180deg);
}
.paragraph {
align-self: center;
position: relative;
width: 40%;
}
.navbar {
width: 100%;
height: 30px;
background: var(--overlay);
}
.navbar a {
padding: 10px;
text-decoration: underline;
text-decoration-color: rgba(41, 41, 41, 0.507);
text-decoration-thickness: 3px;
text-underline-offset: 8px;
transition: text-decoration-color 0.2s;
}
.navbar a:hover {
text-decoration-color: var(--accent-color);
}
.navbar #active {
text-decoration-color: var(--accent-color);
}
.middlething {
overflow: auto;
position: fixed;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.454);
}
.bgvideo {
filter: brightness(80%);
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.title {
margin-left: 10px;
font-size: 30px;
text-align: center;
}
#gallery,
#projects {
display: none;
transition: all .5s ease-in-out;
align-self: center;
position: relative;
width: 40%;
}
.dropdown {
margin-left: 10px;
border-bottom: 3px solid var(--accent-color);
border-radius: 1px;
cursor: pointer;
user-select: none;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
}
to {
text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
}
}
@keyframes slideaway {
from {
display: block;
}
to {
transform: translateY(40px);
opacity: 0;
}
}
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(65, 65, 65);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(155, 153, 153);
}
.gimage:hover {
width: 1500px;
position: fixed;
float: none;
transition: height 4s;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.gimage {
transition: height 4s;
width: 100%;
height: auto;
border-radius: 3px;
}
@keyframes rotation {
from {
transform: rotateY(0deg);
rotate: 0deg;
}
to {
transform: rotateY(360deg);
rotate: -360deg;
}
}
.rotate {
animation: rotation 10s linear infinite;
}
input {
background-color: rgba(32, 32, 32, 0.507);
width: 99999000000000000000000000000000000000000%;
border: 0;
border-bottom: 2px solid gray;
outline: 0;
font-size: 1.3rem;
color: white;
padding: 7px;
transition: border-bottom 1s;
}
input:focus {
border-bottom: 2px solid var(--accent-color);
}
.tooltip {
position: relative;
display: inline-block;
color: var(--white);
border-bottom: 1px solid var(--accent-color);
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
background-color: #3d3d3dd3;
width: 190px;
color: var(--white);
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 10;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s ease;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.invert {
padding: 2px;
color: var(--white);
backdrop-filter: blur(100px);
}
.contact {
padding: 10px;
align-self: center;
position: relative;
width: 40%;
backdrop-filter: blur(100px);
vertical-align: baseline;
}
.contact image {
display: inline-block;
}
.contact p {
padding-left: 10px;
position: absolute;
display: inline-block;
vertical-align: middle;
line-height: 10px;
/* <-- adjust this */
vertical-align: baseline;
}
.contact a {
position: absolute;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
.smalimages {
align-self: center;
position: relative;
}
.smalimages img {
width: 88px;
height: 31px;
display: inline-block;
align-self: center;
margin-top: 100px;
}
.link {
color: var(--accent-color);
}
.bottomtext {
backdrop-filter: blur(100px);
text-align: center;
margin-top: 4%;
bottom: 0;
background: var(--overlay);
}

9
svg/discord.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#ffffff" fill-rule="nonzero">
</path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

36
svg/forgejo.svg Normal file
View File

@ -0,0 +1,36 @@
<svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg">
<metadata xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:RDF>
<cc:Work rdf:about="https://codeberg.org/forgejo/meta/src/branch/readme/branding#logo">
<dc:title>Forgejo logo</dc:title>
<cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
<cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/"/>
</cc:Work>
</rdf:RDF>
</metadata>
<style type="text/css">
circle {
fill: none;
stroke: #000;
stroke-width: 15;
}
path {
fill: none;
stroke: #000;
stroke-width: 25;
}
.orange {
stroke:#ffffff;
}
.red {
stroke:#ffffff;
}
</style>
<g transform="translate(6,6)">
<path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" class="orange"/>
<path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" class="red"/>
<circle cx="142" cy="20" r="18" class="orange"/>
<circle cx="142" cy="88" r="18" class="red"/>
<circle cx="58" cy="180" r="18" class="red"/>
</g>
<script xmlns=""/></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

1
svg/github.svg Normal file
View File

@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 960 B

9
svg/matrix.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<title>Matrix (protocol) logo</title>
<g transform="translate(-.095 .005)" fill="#ffffff">
<path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
<path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
<path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
</g>
<script xmlns=""/></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

3
translator.js Normal file
View File

@ -0,0 +1,3 @@