deploy: 18333963df

static/images/8thNote.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="90" height="90">
+	<path d="M 23.7,87.9 C 18.1,82.8 21.2,74.7 30.4,69.9 C 33.5,68.4 35.8,67.7 39.8,67.8 C 42.3,67.9 45.1,69.3 45.1,69.3 C 45.1,51.2 45.0,17.0 45.0,0.2 C 46.0,0.2 46.7,0.1 48.1,0.1 C 48.1,1.1 48.1,1.9 48.1,2.7 C 48.1,3.6 48.1,4.1 48.2,4.7 C 49.2,11.0 50.6,13.5 57.6,21.2 C 66.5,31.1 69.1,37.0 69.1,44.9 C 69.0,52.3 62.5,68.1 61.1,67.5 C 63.1,61.9 65.9,55.9 66.6,50.9 C 67.5,44.8 65.0,36.2 61.0,31.7 C 57.8,27.9 50.2,24.6 48.1,24.6 C 48.1,24.6 48.0,61.0 48.0,74.8 C 48.0,77.1 45.9,81.2 44.7,82.6 C 39.2,89.2 28.5,92.2 23.7,87.9 z"/>
+</svg>

static/images/arrow-cursor.svg

@@ -0,0 +1,2 @@
+<?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 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M123.193 29.635L121 406.18l84.31-82.836 65.87 159.02 67.5-27.96-65.87-159.02L391 294.342z"/></svg>

static/images/cameraroll.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48h-48z" fill="none"/>
+    <path d="M28 10c0-2.21-1.79-4-4-4h-2v-2c0-1.1-.9-2-2-2h-8c-1.1 0-2 .9-2 2v2h-2c-2.21 0-4 1.79-4 4v30c0 2.21 1.79 4 4 4h16c2.21 0 4-1.79 4-4h16v-30h-16zm-4 26h-4v-4h4v4zm0-18h-4v-4h4v4zm8 18h-4v-4h4v4zm0-18h-4v-4h4v4zm8 18h-4v-4h4v4zm0-18h-4v-4h4v4z"/>
+</svg>

static/images/file-code.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g><g><path fill="#000000" d="M43,11.1l-1.2,1.2V128c0,113.2,0,115.7,0.9,116.8l0.9,1.1H128h84.4l0.9-1.1c0.9-1.1,0.9-3.2,0.9-94.5c0-74.1-0.1-93.6-0.6-94.2c-0.3-0.4-13.7-10.9-29.7-23.3l-29.1-22.6l-55.4-0.1L44.1,10L43,11.1z M149.9,42.9v25.3l1.2,1.1c0.6,0.7,1.6,1.2,2.2,1.2c0.6,0,12.8-1.7,27.1-3.8c14.3-2,26.1-3.6,26.3-3.5c0.2,0.1,0.3,39.6,0.3,87.8v87.6H128H48.9V128.1V17.6h50.5h50.5V42.9z M179.7,39.1c20.6,16,21.7,16.9,20.4,17.2c-0.8,0.2-10.6,1.7-21.8,3.3c-16.5,2.3-20.5,2.8-20.8,2.2c-0.6-0.9-0.5-40,0-39.8C157.8,22.1,167.8,29.8,179.7,39.1z"/><path fill="#000000" d="M139.6,95.7c-0.6,0.2-1.2,0.9-1.5,1.3c-0.9,1.6-23.9,87.9-23.9,89.5c0,3.1,4,4.7,6,2.3c0.7-0.8,4.3-13.6,12.7-44.9c6.5-24.1,11.8-44.4,11.8-45.1C144.7,96.5,141.9,94.8,139.6,95.7z"/><path fill="#000000" d="M84.7,130.3c-10.6,5.9-19.6,11-19.9,11.5c-0.7,0.9-0.8,3.4-0.2,4.3c0.9,1.4,39.6,22.5,41.2,22.5c1.5,0,3-1.4,3.4-3.1c0.5-2-1-3.3-6.7-6.5c-19.2-10.5-26.9-14.9-26.6-15.2c0.2-0.2,7.5-4.2,16.1-9c8.7-4.8,16-8.9,16.3-9.2c1.2-1.1,1.2-3.4,0.1-4.8C106.5,118.3,105.7,118.6,84.7,130.3z"/><path fill="#000000" d="M150,120.8c-1.2,1.6-1.3,3.1-0.1,4.4c0.4,0.6,6.3,4,13,7.6c13.7,7.5,19.1,10.5,19.6,11c0.2,0.2-6.7,4.2-15.2,8.9c-8.6,4.7-16.2,9.2-17,9.9c-1.1,1.1-1.3,1.6-1,2.9c0.3,1.8,1.9,3.2,3.5,3.2c1.2,0,38.6-20.4,40.5-22.1c1.3-1.2,1.4-3.6,0.2-5c-0.9-1-9.3-5.8-29.1-16.5C153.1,119,151.7,118.6,150,120.8z"/></g></g></g>
+</svg>

static/images/gears.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 30.998 30.998"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M18.73,16.686l-1.713-0.205c-0.176-0.654-0.433-1.271-0.763-1.844l1.063-1.354c0.164-0.209,0.145-0.531-0.043-0.718
+			l-1.766-1.767c-0.187-0.187-0.509-0.206-0.717-0.044l-1.356,1.067c-0.571-0.33-1.188-0.587-1.841-0.761L11.39,9.345
+			c-0.031-0.262-0.273-0.477-0.537-0.477H8.354c-0.264,0-0.506,0.215-0.537,0.477l-0.206,1.714
+			c-0.653,0.174-1.271,0.432-1.842,0.762l-1.357-1.065c-0.207-0.163-0.53-0.145-0.716,0.042l-1.767,1.769
+			c-0.187,0.187-0.206,0.509-0.043,0.717l1.065,1.354c-0.331,0.572-0.586,1.19-0.761,1.844l-1.713,0.205
+			C0.215,16.718,0,16.959,0,17.225v2.498c0,0.265,0.215,0.506,0.477,0.536l1.714,0.207c0.175,0.651,0.431,1.269,0.761,1.841
+			l-1.064,1.354c-0.163,0.21-0.144,0.532,0.043,0.719l1.765,1.767c0.186,0.188,0.509,0.207,0.716,0.045l1.357-1.068
+			c0.571,0.33,1.189,0.588,1.842,0.762L7.817,27.6c0.031,0.262,0.273,0.477,0.537,0.477h2.499c0.264,0,0.506-0.215,0.537-0.477
+			l0.206-1.715c0.653-0.174,1.271-0.432,1.843-0.762l1.356,1.064c0.208,0.162,0.53,0.145,0.716-0.041l1.767-1.77
+			c0.187-0.188,0.207-0.51,0.043-0.717l-1.065-1.354c0.331-0.572,0.586-1.19,0.761-1.844l1.715-0.205
+			c0.263-0.031,0.477-0.271,0.477-0.537v-2.498C19.209,16.957,18.994,16.718,18.73,16.686z M9.605,23.271
+			c-2.651,0-4.801-2.148-4.801-4.801c0-2.652,2.15-4.802,4.801-4.802c2.652,0,4.801,2.149,4.801,4.802
+			C14.407,21.123,12.257,23.271,9.605,23.271z"/>
+		<path d="M30.641,8.804L29.35,8.651c-0.132-0.492-0.324-0.959-0.574-1.39l0.803-1.02c0.123-0.155,0.107-0.399-0.033-0.54
+			l-1.33-1.329c-0.14-0.142-0.383-0.156-0.54-0.033l-1.021,0.803c-0.43-0.249-0.896-0.441-1.385-0.571l-0.156-1.29
+			c-0.022-0.198-0.205-0.359-0.402-0.359H22.83c-0.199,0-0.381,0.161-0.404,0.359l-0.154,1.29c-0.492,0.13-0.957,0.323-1.388,0.572
+			l-1.021-0.802c-0.156-0.122-0.399-0.107-0.539,0.031l-1.331,1.332c-0.142,0.141-0.155,0.383-0.032,0.539l0.803,1.021
+			c-0.25,0.43-0.441,0.896-0.574,1.388L16.9,8.806c-0.198,0.023-0.359,0.206-0.359,0.405v1.881c0,0.197,0.162,0.381,0.359,0.402
+			l1.289,0.157c0.133,0.49,0.326,0.955,0.574,1.386l-0.803,1.02c-0.122,0.156-0.107,0.4,0.033,0.54l1.328,1.329
+			c0.141,0.143,0.383,0.156,0.539,0.033l1.021-0.804c0.43,0.249,0.896,0.442,1.387,0.572l0.155,1.292
+			c0.022,0.195,0.206,0.356,0.404,0.356h1.881c0.198,0,0.38-0.161,0.403-0.356l0.154-1.292c0.492-0.13,0.957-0.323,1.387-0.572
+			l1.021,0.802c0.157,0.123,0.399,0.109,0.54-0.031l1.33-1.332c0.141-0.139,0.155-0.382,0.032-0.538l-0.802-1.021
+			c0.25-0.429,0.44-0.895,0.572-1.386l1.291-0.154c0.198-0.025,0.359-0.205,0.359-0.405V9.21
+			C30.999,9.009,30.837,8.829,30.641,8.804z M23.771,13.764c-1.998,0-3.615-1.618-3.615-3.614c0-1.997,1.619-3.614,3.615-3.614
+			c1.994,0,3.613,1.617,3.613,3.614C27.384,12.145,25.766,13.764,23.771,13.764z"/>
+	</g>
+</g>
+</svg>

static/images/video.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
+<path d="M46.9,13.1L35.9,21v-5.6c0-1.5-1.2-2.7-2.7-2.7H4.7c-1.5,0-2.7,1.2-2.7,2.7v21.3c0,1.5,1.2,2.7,2.7,2.7h28.6  c1.5,0,2.7-1.2,2.7-2.7v-5.5L46.9,39c0.7,0.7,1.9,0.2,1.9-0.8V13.9C48.8,12.9,47.6,12.4,46.9,13.1z"/>
+</svg>

static/main.css

@@ -0,0 +1,804 @@
+:root {
+    --theme-color: #4c6d6e;
+    --theme-color-lighter: #84b9bb;
+    --theme-color-variation: #22e6ed;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: black;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1em;
+    color: white;
+}
+
+a {
+    transition: .2s;
+    color: lightgray;
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--theme-color-lighter);
+}
+
+li {
+    list-style-type: none;
+}
+
+li.inlineList {
+    display: inline;
+}
+
+select {
+    background-color: transparent;
+    color: white;
+    border: none;
+    font-size: 1em;
+}
+
+#music {
+    padding: 0;
+    display: flex;
+    gap: .4em;
+    inline-size: fit-content;
+    height: 1.4em;
+    margin-top: auto;
+    opacity: .6;
+}
+
+#music:hover {
+    opacity: 1;
+}
+
+header {
+    display: flex;
+    border-bottom: thick solid rgba(255, 255, 255, 0.1);
+    width: 100%;
+    box-shadow: 
+    2px 7px 5px rgba(0,0,0,0.3),
+    0px -4px 10px rgba(0,0,0,0.3);
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+header div {
+    padding: 1rem;
+}
+
+#everythingHelper {
+    position: relative;
+}
+
+#everythingHelper .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    opacity: .5;
+    width: 100%;
+    height: auto;
+    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    user-select: none;
+    transition: .4s;
+}
+
+header ul {
+    transition: .2s;
+    font-size: larger;
+    margin: auto 0 auto 0;
+    padding: 0;
+    opacity: 0.6;
+    text-align: right;
+}
+
+header ul a {
+    transition: .2s;
+    color: white;
+}
+
+header ul a:hover {
+    color: var(--theme-color);
+}
+
+header ul:hover {
+    opacity: 1;
+}
+
+#mainHelper {
+    padding-top: 3rem;
+    max-width: 50vw;
+    margin: auto;
+    display: flex;
+}
+
+main {
+    margin-bottom: 2em;
+}
+
+h1, h2, h3 {
+    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
+    0px -4px 10px rgba(0,0,0,0.3);
+}
+
+blockquote, main p {
+    margin-bottom: 1em;
+}
+
+main h1, main h2 {
+    margin-bottom: .5em;
+}
+
+main h2 {
+    margin-top: 1em;
+}
+
+b {
+    color: var(--theme-color-lighter);
+    font-weight: 600;
+}
+
+blockquote {
+    margin-left: 2.8em;
+}
+
+#headerSubtitle {
+    color: white;
+    opacity: 0.6;
+}
+
+h2 {
+    font-weight: normal;
+    color: var(--theme-color-lighter);
+}
+
+textarea, input, button {
+    border: medium solid var(--theme-color-lighter);
+    background-color: black;
+    color: white;
+    padding: .6em;
+}
+
+#sound {
+    filter: invert();
+}
+
+#sound:hover {
+    cursor: pointer;
+}
+
+#linksHelper {
+    margin: auto 1em auto auto;
+    display: flex;
+    flex-direction: column;
+    gap: .2em;
+}
+
+#linksHelper:hover {
+    opacity: 1;
+}
+
+#headerLinks {
+    user-select: none;
+}
+
+#headerLinks a {
+    color: white;
+}
+
+#headerLinks a {
+    margin-right: .2em;
+    margin-left: .2em;
+}
+
+#headerLinks:last-child {
+    margin-left: 0;
+}
+
+#headerLinks a:first-child {
+    margin-left: 0;
+}
+
+#headerLinks a:last-child {
+    margin-right: 0;
+}
+
+header div:first-child {
+    margin-bottom: 0;
+}
+
+#headerSquareMusic img, #headerSquareVideo img, #headerSquareCode img, #defaultSquare img {
+    filter: invert();
+}
+
+.headerSquare, #defaultSquare {
+    transition: .4s;
+    border: medium solid white;
+    height: 7vh;
+    overflow: hidden;
+    width: 10vh;
+    opacity: .4;
+    padding: .4em;
+    cursor: pointer;
+    user-select: none;
+}
+
+.headerSquare img, #defaultSquare img {
+    width: 100%;
+    height: auto;
+}
+
+.headerSquare:hover, #defaultSquare {
+    z-index: 1;
+    /* height: 10vh; */
+    /* background-color: black; */
+}
+
+.headerSquare.selected, #defaultSquare.selected {
+    opacity: 1;
+    height: 10vh;
+    box-shadow: 
+    2px 7px 5px rgba(0,0,0,0.4),
+    0px -4px 10px rgba(0,0,0,0.4);
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+#homeSquares {
+    display: flex;
+    flex-direction: column;
+    transition: .4s;
+    width: fit-content;
+    height: fit-content;
+    margin-right: 3vw;
+    margin-bottom: 3rem;
+    gap: 10px;
+}
+
+div.hs {
+    display: none;
+}
+
+div.hs.selected {
+    display: unset;
+}
+
+.ytembed {
+    display: block;
+    margin: auto;
+}
+
+.margarinaColor {
+    color: #ff85e1;
+}
+
+.hsProjects {
+    gap: .6em;
+    display: flex;
+    flex-direction: column;
+}
+
+.hsProject {
+    margin-bottom: .4em;
+    /* padding: 1em; */
+    border: medium solid rgba(255, 255, 255, 0.6);
+    width: 100%;
+    height: fit-content;
+    transition: .2s;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    box-shadow: 
+    2px 7px 5px rgba(0,0,0,0.4),
+    0px -4px 10px rgba(0,0,0,0.4);
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.hsProjectHeader {
+    transition: .2s;
+    display: flex;
+    height: 7em;
+    border-bottom: medium solid rgba(255, 255, 255, 0.6);
+    padding: 1em;
+}
+
+.hsProjectHeaderIcon {
+    transition: .2s;
+    fill: white;
+    stroke: white;
+    height: 50%;
+    width: auto;
+    margin: auto 0;
+    opacity: .6;
+}
+
+.hsProjectHeaderIcon img {
+    height: 100%;
+}
+
+.hsProject:hover {
+    border-color: white;
+}
+
+.hsProject:hover .hsProjectHeader {
+    border-color: white;
+}
+
+.hsProject:hover .hsProjectHeaderIcon {
+    opacity: 1;
+}
+
+.hsProjectImage {
+    width: 100%;
+    max-height: 100%;
+}
+
+.hsProjectImage img {
+    height: 100%;
+    width: auto;
+}
+
+.hsProjectContent {
+    padding: 1em;
+}
+
+.invertedc {
+    filter: invert();
+}
+
+#hsCode {
+    flex-direction: column;
+}
+
+#hsCode.selected {
+    display: flex;
+}
+
+.ellipsis-loader {
+    animation: 1.8s infinite ellipsis-loader;
+    display: inline-block;
+    height: 8px;
+    overflow: hidden;
+    position: relative;
+    width: 140px;
+    margin: auto;
+}
+.ellipsis-loader__dot {
+    animation: 1.8s infinite ellipsis-loader__dot;
+    background: #FFF;
+    border-radius: 50%;
+    float: left;
+    height: 8px;
+    position: absolute;
+    width: 8px;
+}
+.ellipsis-loader__dot:nth-child(1) {
+    animation-delay: 0.15s;
+    left: -13px;
+}
+.ellipsis-loader__dot:nth-child(2) {
+    animation-delay: 0.3s;
+    left: -26px;
+}
+.ellipsis-loader__dot:nth-child(3) {
+    animation-delay: 0.45s;
+    left: -39px;
+}
+.ellipsis-loader__dot:nth-child(4) {
+    animation-delay: 0.6s;
+    left: -52px;
+}
+
+#telnetSimulation {
+    display: flex;
+    width: 100%;
+    gap: 10px;
+}
+
+#telnetSimulation div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: 100%;
+}
+
+#telnetSimulation div textarea {
+    width: 100%;
+    resize: none;
+    height: 300px;
+}
+
+#telnetSimulationInput {
+    display: flex;
+}
+
+#telnetSimulationLoadingHolder {
+    text-align: center;
+    margin: 10px;
+    display: none;
+    flex-direction: column;
+}
+
+#youtubeVideo p {
+    font-size: 2vh;
+}
+
+#youtubeVideoImage {
+    width: 100%;
+    transition: .3s;
+    box-shadow: 
+        2px 7px 5px rgba(0,0,0,0.3),
+        0px -4px 10px rgba(0,0,0,0.3);
+}
+
+#youtubeVideoImage:hover {
+    opacity: .8;
+}
+
+#languageList {
+    font-size: 2vh;
+}
+
+#languageList li {
+    margin-bottom: .5em;
+}
+
+#languageList li a {
+    transition: 1s;
+}
+
+.languagesHighlightedLink {
+    color: var(--theme-color-variation);
+}
+
+.fadeIn {
+  animation: fadeIn .5s ease-in 1 forwards;
+}
+.fadeOut {
+  opacity: 1;
+  animation: fadeOut .5s ease-out 1 forwards;
+}
+
+.oneLineClamp {
+    overflow: hidden;
+    width: 100%;
+    display: -webkit-box;
+    /* height: 1em; */
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical
+}
+
+aside.metromenu {
+    z-index: 2;
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 30vw;
+    background-color: black;
+    height: 100vh;
+    transition: .2s;
+    transition-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.955);
+    padding: 2em;
+}
+
+aside.metromenu.closed {
+    transform: translateX(100%);
+}
+
+aside.metromenu h2 {
+    font-size: xx-large;
+}
+
+aside.metromenu p {
+    margin-bottom: .4em;
+}
+
+aside.metromenu .optionsToggle {
+    margin-bottom: 1em;
+}
+
+.optionsToggle {
+    cursor: pointer;
+}
+
+aside.metromenu .optionsToggle  {
+    opacity: .6;
+    width: fit-content;
+}
+
+aside.metromenu #content {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+.checkbox {
+    display: flex;
+}
+
+.checkbox p {
+    flex-grow: 1;
+}
+
+input[type="checkbox"] {
+    border: thick solid white;
+}
+
+input[type="range"] {
+    width: 100%;
+    border: none;
+    padding: 0;
+}
+
+input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb {
+    background-color: black;
+    transition: .2s;
+    border-radius: 0;
+    border: medium solid white;
+    height: 1.2em;
+}
+
+input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:hover::-moz-range-thumb {
+    height: 2em;
+    background-color: white;
+    border-width: thin;
+}
+
+input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track {
+    background-color: white;
+    height: 1em;
+}
+
+#songDrawer {
+    display: flex;
+    height: 10em;
+    overflow-x: auto;
+    overflow-y: hidden;
+    gap: .2em;
+}
+
+.drawerSong {
+    position: relative;
+    overflow: hidden;
+}
+
+.drawerSong img {
+    transition: .4s;
+    width: 5em;
+    height: 100%;
+    object-fit: cover;
+    object-position: left top;
+    opacity: .4;
+    filter: grayscale(1);
+}
+
+.drawerSong p {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline;
+}
+
+.drawerSong:hover img, .drawerSong.selected img {
+    opacity: 1;
+    overflow: hidden;
+    width: 10em;
+}
+
+.drawerSong.selected img {
+    filter: none;
+    /* width: auto; */
+}
+
+.drawerSong.selected {
+    width: 10em;
+}
+
+.playlistTitle {
+    background-color: white;
+    color: black;
+}
+
+#playlist {
+    transition: .2s;
+    max-height: 10em;
+    overflow: auto;
+    border: medium solid white;
+}
+
+#playlist p {
+    cursor: pointer;
+    padding: 0 .4em;
+}
+
+#playlist p:first-child {
+    padding-bottom: .2em;
+}
+
+.playingSong {
+    font-size: larger;
+}
+
+hs {
+    border-bottom: thin solid white;
+}
+
+#linksHelper hs {
+    margin: .2em 0;
+    opacity: .6;
+}
+
+#linkshelper:hover hs {
+    opacity: 1;
+}
+
+.hidden {
+    display: none;
+}
+
+.invisible {
+    opacity: 0;
+}
+
+.bg.invisible {
+    opacity: 0!important;
+}
+
+@keyframes ellipsis-loader {
+    0%, 25% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translate(20px);
+    }
+}
+@keyframes ellipsis-loader__dot {
+    0% {
+        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        transform: translateX(0);
+    }
+    55% {
+        animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+        opacity: 1;
+        transform: translateX(98px);
+    }
+    75%, 100% {
+        transform: translateX(212px);
+    }
+    90% {
+        opacity: 0.2;
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    body {
+        font-size: 2vh;
+    }
+
+    header {
+        padding-top: 1.4rem;
+        text-align: center;
+        flex-direction: column;
+    }
+
+    header ul {
+        margin: auto;
+        margin-bottom: 1.4rem;
+    }
+
+    main {
+        max-width: 90vw;
+    }
+
+    main h1 {
+        font-size: 3vh;
+    }
+
+    #headerLinks {
+        text-align: center;
+        width: 100%;
+    }
+
+    #homeTitle {
+        font-size: 4vh;
+    }
+
+    #linksHelper {
+        margin: 0 auto 0 auto;
+    }
+
+    #mainHelper {
+        flex-direction: column;
+        max-width: 90vw;
+    }
+
+    #homeSquares {
+        flex-direction: row;
+        align-content: center;
+        justify-content: center;
+        width: 40vw;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .headerSquare, #defaultSquare {
+        aspect-ratio: 1/1;
+        height: 100%;
+        flex-grow: 1;
+    }
+
+    .headerSquare.selected, #defaultSqaure.selected {
+        height: unset!important;
+    }
+
+
+    #languageList {
+        font-size: 2.5vh;
+    }
+
+    #postHeader {
+        /* border-bottom: 8px dashed rgba(255, 255, 255, 0.1); */
+    }
+
+    .hsProjectHeader {
+        height: fit-content;
+        flex-direction: column;
+        gap: 1em;
+    }
+
+    .hsProjectImage {
+        max-height: 5em;
+        margin: auto;
+        width: fit-content;
+    }
+    
+    .hsProjectImage img {
+        height: 100%;
+        max-height: inherit;
+    }
+
+    .hsProjectHeaderIcon {
+        margin: auto;
+    }
+
+    aside.metromenu {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    #homeSquares {
+        width: 60vw;
+    }
+    
+    aside.metromenu {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 720px) {
+    #homeSquares {
+        width: 80vw;
+    }
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  to {
+    opacity: 0;
+  }
+}

static/scripts/ccd.js

@@ -0,0 +1,14 @@
+const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'];
+let keyIndex = 0;
+
+document.addEventListener('keydown', function(event) {
+  if (event.code === konamiCode[keyIndex]) {
+    keyIndex++;
+    if (keyIndex === konamiCode.length) {
+        window.location.href = './toyourdreams.txt'
+        keyIndex = 0;
+    }
+  } else {
+    keyIndex = 0;
+  }
+});

static/scripts/home.js

@@ -0,0 +1,51 @@
+const _homeSquares = document.querySelector("#homeSquares");
+const main = document.querySelector("main");
+
+let info = [
+    ["Default", "defaultSquare", "arrow-cursor.svg", "Computer cursor arrow line drawing"],
+    ["Music", "headerSquareMusic", "8thNote.svg", "Music note line drawing"],
+    ["Video", "headerSquareVideo", "video.svg", "Video roll line drawing"],
+    ["Code", "headerSquareCode", "file-code.svg", "Computer code file line drawing"]
+]
+
+info.forEach(square => {
+    let rawHTML = `<div class='headerSquare' id='${square[1]}'><img src='/static/images/${square[2]}' alt='${square[3]}'></div>`;
+    _homeSquares.innerHTML += rawHTML;
+});
+
+const homeSquares = document.querySelectorAll(".headerSquare");
+let selectedSquare = "defaultSquare";
+let selectedSquareDiv;
+updateSquare();
+
+homeSquares.forEach(square =>
+    square.addEventListener('click', () => {
+        toggleSquare(square);
+    })
+)
+
+function toggleSquare(square) {
+    if (selectedSquare && (selectedSquare == square.id)) {
+        return
+    }
+    else if (selectedSquare) {
+        oldSquare = document.getElementById(selectedSquare);
+        oldSquare.classList.toggle("selected");
+        document.querySelector(`#${selectedSquareDiv}`).classList.toggle("selected");
+    }
+    selectedSquare = square.id;
+    updateSquare()
+}
+
+function getSquareDivByID(id) {
+    divID = `hs${info.find(item => item[1] === id)[0]}`;
+    return document.querySelector(`#${divID}`);
+}
+
+function updateSquare() {
+    square = document.getElementById(selectedSquare);
+    square.classList.toggle("selected");
+    div = getSquareDivByID(square.id);
+    selectedSquareDiv = div.id;
+    div.classList.toggle("selected");
+}

static/scripts/language.js

@@ -0,0 +1,37 @@
+const el = document.getElementById("languageTitle");
+const texts = [["Pick a language", "English"], ["Escolha um idioma", "Português Brasileiro"]];
+let i = 0;
+let fadeTime = 1000;
+let holdTime = 2000;
+const links = document.querySelectorAll("#languageList li a");
+let currentLang = 0;
+
+el.style.transition = `opacity ${fadeTime}ms`;
+el.style.opacity = 1;
+
+function cycle() {
+  el.style.opacity = 0;
+  removeOldHighlightedLang();
+  setTimeout(() => {
+    i = (i + 1) % texts.length;
+    currentLang = i;
+    el.textContent = texts[i][0];
+    el.style.opacity = 1;
+    setNewHighlightedLang()
+  }, fadeTime);
+}
+
+function removeOldHighlightedLang() {
+    document.querySelector(".languagesHighlightedLink").classList.remove("languagesHighlightedLink");
+}
+
+function setNewHighlightedLang() {
+    links.forEach(link => {
+        if (link.innerText == texts[currentLang][1]) {
+            link.classList.add('languagesHighlightedLink');
+        }
+    })
+}
+
+setNewHighlightedLang()
+setInterval(cycle, fadeTime * 2 + holdTime);

static/scripts/main.js

@@ -0,0 +1,213 @@
+// This script handles the playback of music in the header's miniplayer ;)
+const body = document.querySelector("body");
+
+const musicdiv = document.getElementById("music");
+musicdiv.innerHTML = `
+<img src="/static/images/gears.svg" class="optionsToggle invertedc">
+<img src="/static/images/sound-on.png" id="sound">
+<select name="song" id="songSelection"></select>
+`
+const linksHelper = document.getElementById("linksHelper");
+linksHelper.insertBefore(document.createElement("hs"), document.getElementById("headerLinks"));
+
+const songs = [
+    { file: "Velkommen.mp3", name: 'Velkommen', artwork: "velkommen.jpg" },
+    { file: "PG2.mp3", name: 'Frugal APE', artwork: "pg.jpg" },
+    { file: "dreamscape.mp3", name: 'Dreamscape', artwork: "winds.png" },
+    { file: "skychat.mp3", name: 'Skychat', artwork: "winds.png" }
+];
+
+// Options page
+const optionsAside = document.createElement("aside");
+optionsAside.classList.add("closed");
+optionsAside.classList.add("metromenu");
+{
+    const back = document.createElement("p");
+    back.textContent = headeri18n.back;
+    back.classList.add("optionsToggle");
+    
+    const title = document.createElement("h2");
+    title.textContent = headeri18n.options;
+    optionsAside.appendChild(title);
+    optionsAside.appendChild(back);
+    
+    const content = document.createElement("div");
+    content.innerHTML = `
+    <div id="content">
+    <div id="songDrawer"></div>
+    <div>
+        <p class="playingSong"></p>
+        <p>${headeri18n.by} tenkuma</p>
+    </div>
+    <div id="playlist"></div>
+    <div>
+        <p>Volume</p>
+        <input id="volume" oninput="setVolume(this.value / 100)" type="range" min="0" max="100"></input>
+    </div>
+        <div class="checkbox">
+            <p>${headeri18n.hideBackground}</p>
+            <input id="background" type="checkbox"></input>
+        </div>
+    </div>
+    `
+    optionsAside.appendChild(content);
+}
+body.appendChild(optionsAside);
+
+
+const toggleIMG = document.querySelector('#sound');
+toggleIMG.addEventListener('click', () => {
+    toggleAudio();
+})
+
+const hideBG = document.querySelector("input#background");
+if (localStorage.getItem("bgHidden") === "true") hideBG.checked = true, toggleBG();
+hideBG.addEventListener("click", () => {
+    toggleBG();
+})
+
+function toggleBG() {
+    const bg = document.querySelector(".bg");
+    bg.classList.toggle("invisible");
+    localStorage.setItem("bgHidden", bg.classList.contains("invisible"))
+}
+
+const songsDrawer = document.querySelector("#songDrawer");
+const drawerSongs = [];
+const playlist = document.querySelector("#playlist");
+const expandButton = document.createElement('p');
+expandButton.textContent = "Playlist";
+expandButton.classList.add("playlistTitle");
+playlist.appendChild(expandButton);
+
+songs.forEach(song => {
+    const songElement = document.createElement("div");
+    songElement.classList.add("drawerSong");
+    songElement.dataset.song = song.file;
+    const songImage = document.createElement("img");
+    songImage.src = `/static/images/songs/${song.artwork}`;
+    songElement.appendChild(songImage);
+    songElement.addEventListener('click', () => {
+        changeSong(song.file);
+    });
+    drawerSongs.push(songElement);
+    songsDrawer.appendChild(songElement);
+    
+    // Playlist
+    const playlistEntry = document.createElement("p");
+    playlistEntry.textContent = song.name;
+    playlistEntry.addEventListener('click', () => {
+        changeSong(song.file);
+    })
+    playlist.appendChild(playlistEntry);
+})
+
+const audioSelect = document.getElementById("songSelection");
+songs.forEach(song => {
+    const songOption = document.createElement("option");
+    songOption.value = song.file;
+    songOption.textContent = song.name;
+    audioSelect.appendChild(songOption);
+});
+
+const playingSongLabel = document.querySelector(".playingSong");
+
+function updatePlayingLabel(label) {
+    drawerSongs.forEach(sng => {
+        sng.classList.remove("selected");
+        if (sng.dataset.song == label) {
+            sng.classList.add("selected");
+        }
+    });
+    
+    const songString = songs.find(item => item.file === label).name;
+    playingSongLabel.textContent = songString;
+}
+
+const savedSong = localStorage.getItem("song");
+
+if (savedSong) {
+    audioSelect.value = savedSong;
+    updatePlayingLabel(savedSong);
+} else {
+    audioSelect.value = songs[0].file;
+    updatePlayingLabel(songs[0].file);
+}
+
+const optionsButton = document.querySelectorAll(".optionsToggle");
+optionsButton.forEach(button => {
+    button.addEventListener('click', () => {
+        optionsAside.classList.toggle('closed');
+    });
+});
+
+// Create the audio object using the current select value
+let audio = new Audio(`/static/music/${audioSelect.value}`);
+
+const savedTime = localStorage.getItem("audioTime");
+const savedVolume = localStorage.getItem("volume");
+const wasPlaying = localStorage.getItem("audioPlaying") === 'true';
+
+function play() {
+    audio.volume = localStorage.getItem("volume");
+    audio.play();
+    localStorage.setItem("audioPlaying", "true")
+    toggleIMG.src = "/static/images/sound-on.png"
+    console.log(`[Music Player] playing ${audioSelect.value}`)
+}
+
+function stop() {
+    audio.pause();
+    localStorage.setItem("audioPlaying", "false")
+    toggleIMG.src = "/static/images/sound-off.png"
+}
+
+function setVolume(volume) {
+    audio.volume = volume;
+    localStorage.setItem("volume", volume);
+}
+
+function toggleAudio() {
+    if (!audio.paused) {
+        stop();
+    } else {
+        play();
+    }
+}
+
+window.addEventListener("beforeunload", () => {
+    localStorage.setItem("audioTime", audio.currentTime);
+    localStorage.setItem("audioPlaying", !audio.paused);
+});
+
+function changeSong(song) {
+    const wasPlaying = !audio.paused;
+    stop();
+    localStorage.removeItem("audioTime");
+    audio = new Audio(`/static/music/${song}`);
+    if (savedVolume) setVolume(savedVolume);
+    console.log(`[Music Player] changing song to ${song}`)
+    localStorage.setItem("song", song);
+    updatePlayingLabel(song);
+    if (wasPlaying) play();
+}
+
+// hooking into the options menu 'change' event to update the song
+audioSelect.addEventListener('change', () => {
+    changeSong(audioSelect.value);
+})
+
+// Set initial playback state and volume based on saved preferences
+if (savedTime) audio.currentTime = parseFloat(savedTime);
+
+if (savedVolume) { 
+    document.getElementById("volume").value = savedVolume * 100;
+} else {
+    document.getElementById("volume").value = 100;
+}
+
+if (wasPlaying) {
+    play();
+} else {
+    stop();
+}

static/scripts/telnetSimulator.js

@@ -0,0 +1,66 @@
+const screen = document.getElementById('telnetSimulationClientScreen');
+const input = document.getElementById('telnetSimulationInputBox');
+const btn = document.getElementById('telnetSimulationClientSend')
+const sbtn = document.getElementById('telnetSimulationServerClean');
+const sscreen = document.getElementById('telnetSimulationServerScreen');
+const loading = document.getElementById("telnetSimulationLoadingHolder")
+const loadingText = document.getElementById("telnetSimulationLoadingText")
+let loadingms = 2500;
+
+btn.addEventListener('click', () => {
+  send_command();
+})
+
+sbtn.addEventListener('click', () => {
+  screen.innerHTML = '';
+  sscreen.innerHTML = '';
+})
+
+async function send_command() {
+  if (!input.value) return;
+  const command = input.value;
+  input.value = '';
+  screen.value += `telnet> ${command}\n`;
+  await wait(loadingms, "<b>Camada OSI #7 - Aplicação:</b> Usuário digitou o texto na aplicação.");
+  await wait(loadingms, "<b>Camada OSI #6 - Apresentação:</b> Tradução do comando para um pacote legível para o servidor.");
+  await wait(loadingms, "<b>Camada OSI #5 - Sessão:</b> Sistema do cliente abre uma conexão com o servidor.");
+  await wait(loadingms, "<b>Camada OSI #4 - Transporte:</b> Sistema do cliente troca informações com o servidor.");
+  await wait(loadingms, "<b>Camada OSI #3 - Rede:</b> O sistema do cliente resolve o endereço do servidor.");
+  await wait(loadingms, "<b>Camada OSI #2 - Enlace de dados:</b> Os frames são entregues ao dispositivo com o endereço MAC correto.");
+  await wait(loadingms, "<b>Camada OSI #1 - Física:</b> Os dados são transmitidos por cabo, ou via <i>wireless</i>, para o dispositivo de destino.");
+  process_command(command);
+}
+
+async function process_command(command) {
+  sscreen.value += `Comando recebido: ${command}\n`;
+  args = command.split(" ");
+  command = args[0]
+  args.shift();
+  await wait(loadingms, "<b>O servidor empacota uma resposta, que também será passada por todas camadas até chegar no cliente.");
+  switch (command) {
+    case 'help':
+        screen.value += `Comandos disponíveis:\nhelp - mostra essa mensagem de ajuda\nping - responde 'pong'\necho [texto] - retorna o texto especificado no comando\ntimeout [milissegundos] - muda o tempo que as mensagens de carregamento da simulação duram`
+      break;
+    case 'echo':
+        screen.value += `Resposta do servidor: ${args.join(' ')}\n`
+      break;
+    case 'ping':
+        screen.value += `Pong!\n`
+      break;
+    case 'timeout':
+        loadingms = args[0]
+        screen.value += `O tempo das mensagens de carregamento foi mudado para ${args[0]}ms!`
+      break;
+    default:
+        screen.value += `Comando desconhecido! Envie help para ver a lista de comandos.\n`
+      break;
+  }
+}
+
+async function wait(ms, txt = '') {
+  const delay = ms => new Promise(res => setTimeout(res, ms));
+  loadingText.innerHTML = txt;
+  loading.style.display = "flex"
+  await delay(ms)
+  loading.style.display = "none"
+}

static/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/static/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/static/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

static/visual/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>