280 lines
18 KiB
HTML
280 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>bug.tools</title>
|
||
<link id="dynamic-favicon" rel="icon" href="./images/snowflake.png" type="image/png">
|
||
<link href="style.css" rel="stylesheet" type="text/css" media="all">
|
||
<script src="js/onLoad.js" defer></script>
|
||
<script src="js/switchPage.js" defer></script>
|
||
<script src="js/updates.js" defer></script>
|
||
<script src="js/player.js" defer></script>
|
||
<script src="js/counter.js" defer></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="row">
|
||
<div class="column left">
|
||
<div class="navbar">
|
||
<img src="images/loadercircle.png" id="loadercircle">
|
||
<div class="navbar-title">bug</div>
|
||
<div class="navbar-title-2">.tools</div>
|
||
<table id="navtable">
|
||
<tr>
|
||
<td id="navhover"><a href="#" onclick="switchPage('home'); return false;">HOME</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td id="navhover"><a href="#" onclick="switchPage('links'); return false;">LINKS</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td id="navhover"><a href="#" onclick="switchPage('contact'); return false;">CONTACT</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td id="navhover"><a href="#" onclick="switchPage('sitemap'); return false;">SITEMAP</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td id="navhover"><a href="gallery.html">GALLERY</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td id="navhover"><a href="#"><!-- Empty --></a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="vidbutton">
|
||
<button id="vidBtn" onclick="PlayPauseVideo()">TURN OFF</button>
|
||
<p>moving background</p>
|
||
</div>
|
||
|
||
<div class="small-content-mood">
|
||
<div class="small-content-toolbar">
|
||
<span data-text="toolbar text">STATUS</span>
|
||
<img src="images/xbutton.png" id="small-xbutton-right">
|
||
</div>
|
||
|
||
<div class="small-content-inner">
|
||
<span class="status-text" style="margin-top:20px;">
|
||
<div id="status" class="fade-in visible">
|
||
<div id="status-username"><a href="https://bug.tools/" target="_blank">bug</a> ❄️</div>
|
||
<div id="status-content">working on something...</div>
|
||
<div id="status-date">// 3 days ago</div>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="small-content-mood">
|
||
<div class="small-content-toolbar">
|
||
<span data-text="toolbar text">STATS</span>
|
||
<img src="images/xbutton.png" id="small-xbutton-right">
|
||
</div>
|
||
|
||
<div class="small-content-inner"
|
||
style="height: 30px; padding-left:0px; padding-right:0px; padding-bottom:0px; margin-top:40px;">
|
||
<span style="top:-22px; left:10px; font-family: 'Aldrich', sans-serif;">
|
||
your digital ID number<br>
|
||
</span>
|
||
<span
|
||
style="height:25px; margin-left:auto; margin-right:auto; margin-top:-8px; margin-bottom:5px;text-align: center;">
|
||
<span id="counter" style="font-variant-numeric: tabular-nums;">0000000</span>
|
||
</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="column middle">
|
||
<div class="content">
|
||
<div class="content-toolbar">
|
||
<span data-text="welcome" id="toolbar-title">welcome</span>
|
||
<img src="images/xbutton.png" id="xbutton">
|
||
</div>
|
||
|
||
<div class="content-inner">
|
||
<div id="page-content" class="fade-in"></div>
|
||
|
||
<template id="page-home">
|
||
<h1>Where am I?</h1>
|
||
<span>
|
||
Welcome to my corner of the web. I'm bug, a self-taught programmer.
|
||
This site is my personal space where I collect, create, and share
|
||
whatever catches my interest.
|
||
</span>
|
||
<span class="blink_text" style="color: #93bdec;">
|
||
this website is meant to be viewed on a computer.
|
||
still under construction, thank you for your patience.
|
||
</span>
|
||
|
||
<h1 style="margin-top:-10px;">What lies here?
|
||
<img src="images/ascii_cat.gif"
|
||
style="mix-blend-mode: normal; opacity: 0.5; display:inline; margin-left:90px;">
|
||
</h1>
|
||
<span>
|
||
I run <a href="https://nixos.org">NixOS</a> on everything, desktop, laptop, and my home server that this site is hosted on.
|
||
You can find my <a href="https://git.bug.tools/bug/nix/" target="_blank">nix configuration</a> on my git instance.
|
||
<a href="https://www.lua.org">Lua</a> is my favorite
|
||
programming language, though I dabble in plenty of others. I'm a strong believer in
|
||
privacy and self-hosting; if there's a service I can run myself, I probably do.
|
||
I also have a deep appreciation for digital archival and preserving things that
|
||
might otherwise disappear from the internet.
|
||
The <a href="https://git.bug.tools/bug/bug.tools/" target="_blank">source code for this website</a> is also available if you're curious.
|
||
</span>
|
||
|
||
<h1 style="margin-top:-10px;">A little about me.
|
||
<img src="images/ascii_cat_sleep.gif"
|
||
style="mix-blend-mode: normal; opacity: 0.5; display:inline; margin-left:90px;">
|
||
</h1>
|
||
<span>
|
||
When I'm not writing code, I'm usually listening to music or playing games. My taste
|
||
in music spans metal, DnB, and a lot in between, some of my favorite artists are
|
||
<a href="https://files.bug.tools/music/Pendulum/">Pendulum</a>, <a href="https://files.bug.tools/music/The%20Qemists/">The Qemists</a>, <a href="https://files.bug.tools/music/Linkin%20Park/">Linkin Park</a>, <a href="https://files.bug.tools/music/GUNSHIP/">GUNSHIP</a>.
|
||
I also love playing <a href="https://store.steampowered.com/app/2073850/THE_FINALS/">THE FINALS</a> and <a href="https://store.steampowered.com/app/2694490/Path_of_Exile_2/">Path of Exile 2</a>, and I'm always down for a good MMORPG.
|
||
Feel free to check out the music player on this page or explore the rest of
|
||
the site, there's always something being worked on.
|
||
</span>
|
||
</template>
|
||
|
||
<template id="page-contact">
|
||
<h1>Traces of me on the web</h1>
|
||
<span>
|
||
<img src="images/navcircleblue.png" style="margin-top:5px; margin-left:15px;"> <a href="mailto:contact@bug.tools" target="_blank">Email</a> (my contact email)<br>
|
||
<img src="images/navcircleblue.png" style="margin-top:10px; margin-left:15px;"> <a href="https://git.bug.tools/bug" target="_blank">Gitea</a> (my personal
|
||
Gitea instance)<br>
|
||
<img src="images/navcircleblue.png" style="margin-top:10px; margin-left:15px;"> <a href="https://github.com/4DBug" target="_blank">GitHub</a> (my
|
||
GitHub account)<br>
|
||
<img src="images/navcircleblue.png" style="margin-top:10px; margin-left:15px;"> <a href="https://discordapp.com/users/1475869049526292534" target="_blank">Discord</a> (my discord profile)<br>
|
||
<img src="images/navcircleblue.png" style="margin-top:10px; margin-left:15px;"> <a href="https://steamcommunity.com/id/0zBug/" target="_blank">Steam</a> (where I play games)<br>
|
||
<img src="images/navcircleblue.png" style="margin-top:10px; margin-left:15px;"> <a href="https://www.roblox.com/users/2520646240/profile" target="_blank">Roblox</a> (where I waste my time)<br>
|
||
</span>
|
||
<h1>Contact me ?</h1>
|
||
<span>
|
||
Feel free to send me a message on any of my social medias, I do my best to respond to
|
||
everyone.<br>
|
||
</span>
|
||
|
||
<span class="ascii-art" style="width:100%;">
|
||
<img src="images/ascii-lab.gif" alt="ascii-lab">
|
||
</span>
|
||
</template>
|
||
|
||
<template id="page-links">
|
||
<h1>Links</h1>
|
||
<span>The links page still needs to be implemented.</span>
|
||
</template>
|
||
|
||
<template id="page-sitemap">
|
||
<span style="font-family: 'Source Code Pro', monospace;">
|
||
<b style="font-weight: 600;">.bug.tools</b><br>
|
||
│<br>
|
||
├──<b style="font-weight: 600;"><a href="https://bug.tools/">@.</a></b> _the homepage (you are here) <br>
|
||
│ ├── <b style="font-weight: 600;">links</b> _cool or useful links<br>
|
||
│ ├── <b style="font-weight: 600;">contact</b> _how to contact me<br>
|
||
│ ├── <b style="font-weight: 600;">sitemap</b> _map of all pages<br>
|
||
│ └── <b style="font-weight: 600;">gallery</b> _gallery<br>
|
||
│<br>
|
||
├──<b style="font-weight: 600;"><a href="https://tv.bug.tools/">tv.</a></b> _movie and television streaming <br>
|
||
│ ├── <b style="font-weight: 600;">search</b> _search for entertainment<br>
|
||
│ └── <b style="font-weight: 600;">watch</b> _watch movies and tv shows<br>
|
||
│<br>
|
||
├──<b style="font-weight: 600;"><a href="https://fm.bug.tools/">fm.</a></b> _music streaming site<br>
|
||
│<br>
|
||
├──<b style="font-weight: 600;"><a href="https://git.bug.tools/">git.</a></b> _gitea instance<br>
|
||
│ └── <b style="font-weight: 600;"><a href="https://git.bug.tools/bug">bug</a></b> _my gitea account<br>
|
||
│<br>
|
||
├──<b style="font-weight: 600;"><a href="https://files.bug.tools/">files.</a></b> _files storage<br>
|
||
│ ├── <b style="font-weight: 600;">music</b> _my music collection<br>
|
||
│ ├── <b style="font-weight: 600;">raknet</b> _raknet documentation<br>
|
||
│ └── <b style="font-weight: 600;">media</b> _various media<br>
|
||
│<br>
|
||
├──<b style="font-weight: 600;">project.</b> _generic project<br>
|
||
│ ├── <b style="font-weight: 600;">docs</b> _documentation<br>
|
||
│ ├── <b style="font-weight: 600;">src</b> _source files<br>
|
||
│ ├── <b style="font-weight: 600;">assets</b> _static assets<br>
|
||
│ ├── <b style="font-weight: 600;">tests</b> _test files<br>
|
||
│ └── <b style="font-weight: 600;">misc</b> _other files<br>
|
||
│<br>
|
||
├── <b style="font-weight: 600;"><a href="https://gallery.bug.tools/">gallery.</a></b> _gallery of random images<br>
|
||
│<br>
|
||
└── <b style="font-weight: 600;"><a href="https://monitor.bug.tools/">monitor.</a></b> _status of my homeserver<br>
|
||
</span>
|
||
</template>
|
||
</div>
|
||
<div class="content-footer"><span id="factDisplay"></span></div>
|
||
</div>
|
||
|
||
<div id="middle-column-img">
|
||
<img src="images/dotloader.gif" style="mix-blend-mode: normal; width:500px; opacity: 0.3;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="column right">
|
||
<div class="small-content-updates"
|
||
style="position: relative; top: 0px; left: 0px; width: 285px; height: auto;">
|
||
<div class="small-content-toolbar">
|
||
<span data-text="toolbar text">UPDATES</span>
|
||
<img src="images/xbutton.png" id="small-xbutton-right">
|
||
</div>
|
||
|
||
<div id="small-content-pictochat">
|
||
<div id="pictochat-content">
|
||
<div class="picto"></div>
|
||
<img src="images/pitcochatmenu.png"
|
||
style="border-radius: 0 0 10px 10px; position:relative; top: 0px; left:1px; width:257px; image-rendering: pixelated;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="small-content-updates"
|
||
style="position:relative; top:15px; left:0; width:285px; height:auto; margin-bottom:25px;">
|
||
<div class="small-content-toolbar">
|
||
<span data-text="toolbar text">MUSIC</span>
|
||
<img src="images/xbutton.png" id="small-xbutton-right">
|
||
</div>
|
||
|
||
<div id="small-content-todo" class="fade-in">
|
||
<div id="music-player">
|
||
|
||
<div id="mp-info">
|
||
<div id="mp-title">no track selected</div>
|
||
<div id="mp-artist">---</div>
|
||
</div>
|
||
|
||
<div id="mp-progress-bg">
|
||
<div id="mp-progress-fill"></div>
|
||
<input type="range" id="mp-seek" min="0" max="100" value="0" step="0.1">
|
||
</div>
|
||
<div id="mp-time">
|
||
<span id="mp-current">0:00</span>
|
||
<span id="mp-duration">0:00</span>
|
||
</div>
|
||
|
||
<div id="mp-controls">
|
||
<button class="mp-btn mp-btn-sm" id="mp-loop" title="Loop">↻</button>
|
||
<button class="mp-btn" id="mp-prev">◀◀</button>
|
||
<button class="mp-btn mp-btn-play" id="mp-play">▶</button>
|
||
<button class="mp-btn" id="mp-next">▶▶</button>
|
||
<button class="mp-btn mp-btn-sm" id="mp-shuffle" title="Shuffle">⇄</button>
|
||
</div>
|
||
|
||
<div id="mp-vol-row">
|
||
<span id="mp-vol-icon">♬</span>
|
||
<input type="range" id="mp-volume" min="0" max="1" step="0.01" value="0.7">
|
||
</div>
|
||
|
||
<ul id="mp-playlist"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="bgVideoContainer">
|
||
<video autoplay muted loop id="bgVideo" style="pointer-events: none">
|
||
<source src="background.mp4" type="video/mp4" style="pointer-events: none">
|
||
</video>
|
||
</div>
|
||
</body>
|
||
</html>
|