2024-10-21 02:17:10 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "preload" href = "/icons.webp" as = "image" type = "image/webp" / >
< style >
@font-face {
font-family: 'jbm';
src: url("/jetbrainsmono-subset.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: block;
}
:root { font-family: 'jbm' }
body {
background-color: #181818;
color: white;
height: 100vh;
margin: 0;
}
h1, h2, h3, h4, h5 {
margin-top: 0;
}
.center-container {
display: flex;
2024-10-21 03:16:53 +01:00
width: 75%;
2024-10-21 02:17:10 +01:00
height: 100%;
2024-10-21 03:16:53 +01:00
padding-left: 12.5%;
padding-right: 12.5%;
2024-10-21 02:17:10 +01:00
}
.center-anchor {
margin: auto;
}
2024-10-21 03:16:53 +01:00
.text-start {
text-align: left;
}
2024-10-21 02:17:10 +01:00
.text-center {
text-align: center;
}
a {
color: white;
}
2024-10-21 03:31:52 +01:00
#buttonContainer {
user-select: none;
}
2024-10-21 02:17:10 +01:00
.rounded-button {
display: inline-block;
font-size: 18pt;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
border-radius: 50%;
border: 2px solid white;
text-align: center;
vertical-align: middle;
filter: invert(0);
margin-left: 0.5rem;
cursor: pointer;
background-image: url("/icons.webp");
background-size: auto 44px;
background-repeat: no-repeat;
background-position: -2px -2px;
2024-10-21 03:16:53 +01:00
transition: background-color .1s linear, filter .1s linear, border .1s linear;
2024-10-21 02:17:10 +01:00
}
.rounded-button[data-id="discord"] {
background-position: -2px -2px;
}
.rounded-button[data-id="bsky"] {
background-position: -46px -2px;
}
.rounded-button[data-id="forgejo"] {
background-position: -90px -2px;
}
.rounded-button:first-child {
margin-left: 0!important;
}
.rounded-button:hover {
background-color: black;
border: 2px solid black;
filter: invert(1);
}
.top-left {
position: fixed;
left: 0px;
top: 0px;
padding: 2rem;
color: #535353;
}
2024-10-21 03:16:53 +01:00
.top-right {
position: fixed;
right: 0px;
top: 0px;
padding: 2rem;
color: #535353;
}
.nav * {
padding-left: .5rem;
}
.nav .link {
color: rgb(125, 125, 125);
cursor: pointer;
text-decoration: underline;
}
.click {
cursor: pointer;
text-decoration: underline;
}
2024-10-21 02:17:10 +01:00
#btnDesc {
transition: opacity .25s linear;
opacity: 1;
color: white;
padding-top: 1rem;
2024-10-21 03:35:56 +01:00
user-select: none;
2024-10-21 02:17:10 +01:00
}
.fade-out {
opacity: 0!important;
2024-10-21 03:31:52 +01:00
user-select: none;
2024-10-21 02:17:10 +01:00
}
.fade-in {
opacity: 1!important;
2024-10-21 03:35:56 +01:00
user-select: all!important;
2024-10-21 02:17:10 +01:00
}
< / style >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2024-10-21 03:16:53 +01:00
< title > home | holly.lgbt< / title >
2024-10-21 02:17:10 +01:00
< / head >
< body >
2024-10-21 03:16:53 +01:00
< div id = "home-panel" class = "panel center-container" >
2024-10-21 02:17:10 +01:00
< div class = "center-anchor" >
< div class = "text-center w-100" >
2024-10-21 03:16:53 +01:00
< h1 > hey there, i'm holly< / h1 >
< h4 > here's some places I do things< / h4 >
2024-10-21 02:17:10 +01:00
< div id = "buttonContainer" >
2024-10-21 03:16:53 +01:00
< a class = "rounded-button" data-id = "discord" onclick = "alert('because discord doesn\'t have functionality for invite to chat (at least I think it doesn\'t) my username is: tgpholly')" > < / a >
2024-10-21 02:17:10 +01:00
< a class = "rounded-button" data-id = "bsky" href = "https://bsky.app/profile/holly.lgbt" target = "_blank" > < / a >
< a class = "rounded-button" data-id = "forgejo" href = "https://git.eusv.net/tgpholly" target = "_blank" > < / a >
< / div >
2024-10-21 03:35:56 +01:00
< h3 id = "btnDesc" > < / h3 >
2024-10-21 02:17:10 +01:00
< / div >
< / div >
< / div >
2024-10-21 03:35:56 +01:00
< div id = "about_me-panel" class = "panel center-container" style = "display:none" >
2024-10-21 03:16:53 +01:00
< div class = "center-anchor" >
< div class = "text-center w-100" >
< h1 > about me< / h1 >
< div class = "text-start" >
< p > hey there, i'm holly. my pronouns are < b > she/her< / b > :3< / p >
< p > i'm a silly girl that works mostly in ts/js doing wacky stuff with browsers like porting entire pc games to raw js by hand or do < a target = "_blank" href = "https://multiprobe.eusv.net" > cursed userscript stuff to allow people to browse a site together< / a > < / p >
< p > i can write code compitently in:< / p >
< ul >
< li > typescript< / li >
< li > javascript< / li >
< li > c#< / li >
< li > lua< / li >
< li > gdscript< / li >
< li > java< / li >
< / ul >
< p > and a lot more if needs be< / p >
< p > i'm also making a game in < a href = "https://godotengine.org/" > godot< / a > , it's a pretty cool engine!< / p >
< p > these are (some) my current projects:< / p >
< ul >
< li > < a target = "_blank" href = "https://git.eusv.net/tgpholly/mc-beta-server" > mc-beta-server< / a > | an implementation of minecraft beta 1.7.3's server in typescript< / li >
< li > < a target = "_blank" href = "https://git.eusv.net/tgpholly/t00-multiuser" > MultiProbe< / a > | a userscript for exploring < a target = "_blank" href = "https://angusnicneven.com" > angusnicneven.com< / a > together< / li >
< li > < a target = "_blank" href = "https://git.eusv.net/tgpholly/Binato" > Binato< / a > | an implementation of < a target = "_blank" href = "https://osu.ppy.sh" > osu!< / a > 's bancho server< / li >
< / ul >
< br >
< p >
if you'd like to contact me i can be reached on < a target = "_blank" href = "https://bsky.app/profile/holly.lgbt" > bluesky< / a > or < a class = "click" onclick = "document.querySelector(`.rounded-button[data-id='discord']`).click()" > discord< / a >
< br >
or you can send and email to < b > < a id = "email" > < / a > < / b >
< / p >
< / div >
< / div >
< / div >
< / div >
2024-10-21 02:17:10 +01:00
< div class = "top-left" >
2024-10-21 03:17:07 +01:00
< b > last updated:< / b > 2024/10/21 < font style = "font-size:10pt" > 3:16am (utc+1 bst)< / font >
2024-10-21 03:16:53 +01:00
< / div >
< div class = "top-right nav" >
< a data-id = "#home-panel" > home< / a >
2024-10-21 03:35:56 +01:00
< a data-id = "#about_me-panel" class = "link" > about me< / a >
2024-10-21 02:17:10 +01:00
< / div >
< script >
2024-10-21 03:16:53 +01:00
const email = document.querySelector("#email");
const decodedEmail = atob("aG9sbHlAZXVzdi5uZXQ");
email.href = `mailto:${decodedEmail}`;
email.innerText = decodedEmail;
const panels = document.querySelectorAll(".panel");
const navLinks = document.querySelectorAll(".nav a");
navLinks.forEach(navItem => {
navItem.addEventListener("click", _ => {
panels.forEach(panel => {
panel.style.display = "none";
});
navLinks.forEach(navLink => {
navLink.classList.add("link");
});
document.querySelector(navItem.dataset.id).style.display = "";
navItem.classList.remove("link");
2024-10-21 03:35:56 +01:00
document.title = `${navItem.dataset.id.split("-")[0].slice(1).replace("_", " ")} | holly.lgbt`;
2024-10-21 03:16:53 +01:00
});
});
const btnDesc = document.querySelector("#btnDesc");
function hoverEvent(id) {
2024-10-21 02:17:10 +01:00
switch (id) {
2024-10-21 03:16:53 +01:00
case "discord": btnDesc.innerHTML = "discord"; break;
case "bsky": btnDesc.innerHTML = "bluesky"; break;
case "forgejo": btnDesc.innerHTML = 'eus git'; break;
2024-10-21 02:17:10 +01:00
}
btnDesc.classList.remove("fade-out");
btnDesc.classList.add("fade-in");
};
const hoverLeaveEvent = (e) => {
btnDesc.classList.remove("fade-in");
btnDesc.classList.add("fade-out");
};
2024-10-21 03:16:53 +01:00
const buttons = document.querySelectorAll(".rounded-button").forEach(button => {
button.onmouseenter = () => hoverEvent(button.dataset.id);
button.onmouseleave = hoverLeaveEvent;
});
2024-10-21 02:17:10 +01:00
< / script >
< / body >
< / html >
