commit 9dee5d4c2e16c5ddceb382acb9e8d51fe1c67b33 Author: Zoey Date: Tue Dec 19 18:32:19 2023 +0100 Init diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..6eb51c1 --- /dev/null +++ b/css/about.css @@ -0,0 +1,52 @@ +@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Sarabun', sans-serif; + font-weight: 400; + display: flex; + flex-direction: column; + align-items: center; + background-color: black; + color: lightpink; + padding-top: 6%; + padding-bottom: 3.5%; +} + +/* Centered Content */ +.headercontent { + text-align: center; + align-self: flex; + flex-grow: 1; + overflow-y: auto; + height: 100%; + width: 100% +} + +.headercontent h1 { + padding-top: 10px; + font-size: 48px; +} + +.headercontent h4 { + margin-bottom: 60px; +} + +.headercontent p { + margin-bottom: 30px; +} + +.TTClogo { + margin-top: 20px; + width: 250px; + margin-bottom: 10px; +} + +.ShieldsDiscord { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d834444 --- /dev/null +++ b/css/style.css @@ -0,0 +1,29 @@ +@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Sarabun', sans-serif; + font-weight: 400; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: black; + color: lightpink; + overflow: hidden; + margin: 0; +} + +/* Centered Content */ +.centered-content { + text-align: center; +} + +#blahaj { + opacity: 0; +} \ No newline at end of file diff --git a/css/styleHF.css b/css/styleHF.css new file mode 100644 index 0000000..0b7b4bc --- /dev/null +++ b/css/styleHF.css @@ -0,0 +1,167 @@ +/* Header */ + +:root { + --background-color-dark: #111111; + --background-color-light: rgb(255, 224, 229); + --color-dark: lightpink; + --color-light: #111111; + --color-button-dark: rgb(160, 61, 76); + --color-buton-light: #333; + --color-button-hover-light: rgb(160, 61, 76); + --color-button-hover-dark: #333; + + --color-bg-body-dark: black; + --color-bg-body-light: lightpink; + --color-body-light: lightpink; + --color-body-dark: black; +} + +header { + background-color: var(--background-color-dark); + color: var(--color-light); + padding: 5px; + text-align: left; + position: fixed; + width: 100%; + top: 0; + left: 0; +} + + /* Footer */ + footer { + background-color: #111111; + color: lightpink; + padding: 5px; + text-align: center; + position: fixed; + width: 100%; + bottom: 0; + left: 0; + } + + /* Add the following styles for the popup */ +.image-popup { + position: relative; + display: inline-block; + max-width: 300px; + width: min-content; +} + + +.popup-content { + display: none; + position: absolute; + top: 100%; + left: 0; + width: min-content; + background-color: #1d1d1d; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 1; + border-radius: 5px; +} + +.image-popup:hover .popup-content { + display: flex; +} + +.popup-content img { + width: 40px; + height: auto; + margin-right: 10px; + box-sizing: border-box; + transition: transform 0.1s ease-in-out; +} + +.popup-content img:last-child { + margin-right: 0; +} + +/* Add the following style to remove margin on the last child */ +.popup-content > :last-child { + margin-right: 0; +} + +.popup-content img:hover { + transform: scale(1.1); /* Add a slight scale effect on hover */ +} + + /* Navigation in Header*/ + nav.top-nav ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; /* Align items vertically in the center */ + } + + nav.top-nav a { + text-decoration: none; + color: inherit; + padding: 10px 15px; /* Adjust padding for better spacing */ + transition: color 0.3s; /* Add a smooth transition for color change */ + } + + nav.top-nav li { + margin: 0 15px; + border-right: 2px solid rgb(0, 0, 0); /* Add a right border to create a separator */ + padding-right: 15px; /* Adjust padding for better spacing */ + } + + /* Style the last li to remove the border */ + nav.top-nav li:last-child { + border-right: none; + } + + /* Change text color on hover */ + nav.top-nav a:hover { + color: rgb(255, 246, 247); /* Change to the desired hover color */ + } + + /* Navigation in Footer */ + nav.bottom-nav ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + justify-content: center; /* Center the items horizontally */ + align-items: center; /* Align items vertically in the center */ + } + + nav.bottom-nav li { + margin: 0 15px; + } + + /* Navigation links in Footer */ + nav.bottom-nav a { + text-decoration: none; + color: inherit; + padding: 10px 15px; /* Adjust padding for better spacing */ + transition: color 0.3s; /* Add a smooth transition for color change */ + } + + /* Change text color on hover */ + nav.bottom-nav a:hover { + color: inherit; /* Change to the desired hover color */ + } + + .toggle-button { + display: flex; + align-items: center; + justify-content: center; + background-color: #333; + color: inherit; + width: 40px; + height: 40px; + padding: 10px 20px; + border-color: #11111100; + border-radius: 5px; + cursor: pointer; + } + + .toggle-button img { + transform: scale(.08); + } + + input[type="checkbox"] { + display: none; +} \ No newline at end of file diff --git a/html/about.html b/html/about.html new file mode 100644 index 0000000..79af7ef --- /dev/null +++ b/html/about.html @@ -0,0 +1,77 @@ + + + + + + + + Zoey's Bits - About + + + + + +
+ +
+

About me!

+

booba

+ +

+ I like bunnies, but don't own any. +

+ +

+ Mostly a jack of all trades, master of none. +
+ At least it makes for conversations that don't really die down. +

+ +

+ Big proponent of Free and Open Source Software. +
+ Self-hosting Gitea and Nextcloud servers. +
+ Running Arch Linux (btw) since 2019. +
+ My first Linux distro was Ubuntu 14.04 in, well.., 2014. +
+

+ Aspiring game dev, doing everything from code, +
+ through hosting services, + and creating all the 3D models, sprites and soon also sounds. +
+ Yet to release a single project. ヽ(ﾟДﾟ)ﾉ +

+ +

+ Used to, and still do, have a relatively big K-On! oriented Discord server,
+ like that's anything to brag about,
+ but it's basically been on maintenance mode for maybe 2 years now.
+ If you'd still like to join, knock yourself out.
+ + +
+ Discord + +
+ + Mastodon + + + Discord + + + Matrix + +

+ +
+ + + + + + + \ No newline at end of file diff --git a/html/elements/footer.html b/html/elements/footer.html new file mode 100644 index 0000000..18c53de --- /dev/null +++ b/html/elements/footer.html @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/html/elements/header.html b/html/elements/header.html new file mode 100644 index 0000000..f05b534 --- /dev/null +++ b/html/elements/header.html @@ -0,0 +1,36 @@ + + + + + + + + +
+ +
+ + + + diff --git a/html/projects.html b/html/projects.html new file mode 100644 index 0000000..f840848 --- /dev/null +++ b/html/projects.html @@ -0,0 +1,24 @@ + + + + + + + Zoey's Bits - Projects + + + + +
+ +
+

Welcome to the projects section!

+

WIP

+
+ + + + + + + \ No newline at end of file diff --git a/html/rants.html b/html/rants.html new file mode 100644 index 0000000..508190f --- /dev/null +++ b/html/rants.html @@ -0,0 +1,24 @@ + + + + + + + Zoey's Bits - Rants + + + + +
+ +
+

Welcome to the rants section!

+

WIP

+
+ + + + + + + \ No newline at end of file diff --git a/images/TTClatestCircleCrop.png b/images/TTClatestCircleCrop.png new file mode 100644 index 0000000..72f656d Binary files /dev/null and b/images/TTClatestCircleCrop.png differ diff --git a/images/bunnie48px.png b/images/bunnie48px.png new file mode 100644 index 0000000..082d4d9 Binary files /dev/null and b/images/bunnie48px.png differ diff --git a/images/gt.png b/images/gt.png new file mode 100644 index 0000000..bbc96c2 Binary files /dev/null and b/images/gt.png differ diff --git a/images/moon.svg b/images/moon.svg new file mode 100644 index 0000000..6ab8f50 --- /dev/null +++ b/images/moon.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + diff --git a/images/nc.png b/images/nc.png new file mode 100644 index 0000000..5ebd55f Binary files /dev/null and b/images/nc.png differ diff --git a/images/sun.svg b/images/sun.svg new file mode 100644 index 0000000..83521da --- /dev/null +++ b/images/sun.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + diff --git a/images/under_construction.gif b/images/under_construction.gif new file mode 100644 index 0000000..6f2059f Binary files /dev/null and b/images/under_construction.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..5d32004 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + Zoey's Bits + + + + + +
+ +
+

Welcome to my Website!

+

WIP

+ Under Construction +

blahaj dance

+
+ + + + + + + \ No newline at end of file diff --git a/js/loadnavs.js b/js/loadnavs.js new file mode 100644 index 0000000..14f95e2 --- /dev/null +++ b/js/loadnavs.js @@ -0,0 +1,82 @@ +document.addEventListener('DOMContentLoaded', function () { + console.log('DOMContentLoaded event fired'); + // Wait for the DOM to load + // Load header and footer + loadContent('/html/elements/header.html', document.getElementById('header-placeholder')) + .then(() => { + toggleHeaderColor(); + // After loading the header content, initialize toggle button and checkbox for header color + const toggleButton = document.querySelector('button.toggle-button'); + }); + + loadContent('/html/elements/footer.html', document.getElementById('footer-placeholder')); + + // Load external stylesheets + loadStylesheet('/css/style.css'); // Add more stylesheets if needed + loadStylesheet('/css/styleHF.css'); + + // Retrieve the header element + const header = document.querySelector('header'); + + // Check if the header element exists before initializing the toggle button + if (header) { + // Call the function once to set the initial header color based on checkbox state + toggleHeaderColor(); + } +}); + +async function loadContent(url, container) { + try { + const response = await fetch(url); + const html = await response.text(); + container.innerHTML = html; + + // After loading the content, load any stylesheets within it + const stylesheets = container.querySelectorAll('link[rel="stylesheet"]'); + stylesheets.forEach(stylesheet => { + const href = stylesheet.getAttribute('href'); + loadStylesheet(href); + }); + } catch (error) { + console.error('Error loading content:', error); + } +} + +function loadStylesheet(href) { + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.type = 'text/css'; + link.href = href; + document.head.appendChild(link); +} + +let isLightMode = true; + +function toggleHeaderColor() { + const header = document.querySelector('header'); + const togglebutton = document.querySelector('.toggle-button'); + const body = document.querySelector('body'); + + isLightMode = !isLightMode; + + if (!isLightMode) { + header.style.backgroundColor = 'var(--background-color-dark)'; + header.style.color = 'var(--color-dark)'; + togglebutton.backgroundColor = 'var(--color-button-dark)'; + togglebutton.classList.add('dark-mode'); + togglebutton.classList.remove('light-mode'); + + body.style.backgroundColor = 'var(--color-bg-body-dark)'; + body.style.color = 'var(--color-bg-body-light)'; + + } else { + header.style.backgroundColor = 'var(--background-color-light)'; + header.style.color = 'var(--color-light)'; + togglebutton.backgroundColor = 'var(--color-button-light)'; + togglebutton.classList.add('light-mode'); + togglebutton.classList.remove('dark-mode'); + + body.style.backgroundColor = 'var(--color-bg-body-light)'; + body.style.color = 'var(--color-bg-body-dark)'; + } +} diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..09a05d2 --- /dev/null +++ b/js/script.js @@ -0,0 +1,43 @@ +document.addEventListener('DOMContentLoaded', function () { + const title = document.querySelector('#title'); + const subtitle = document.querySelector('#subtitle'); + const blahaj = document.querySelector('#blahaj'); + + function handleClick() { + // Move elements up and fade them out + title.animate( + [ + { transform: 'translateY(0)', opacity: 1 }, + { transform: 'translateY(-50px)', opacity: 0 } + ], + { duration: 1000, easing: 'ease-out', fill: 'forwards' } + ); + + subtitle.animate( + [ + { transform: 'translateY(0)', opacity: 1 }, + { transform: 'translateY(-50px)', opacity: 0 } + ], + { duration: 1000, easing: 'ease-out', fill: 'forwards', delay: 200 } + ); + + blahaj.animate( + [ + { transform: 'translateY(-50px)', opacity: 0 }, + { transform: 'translateY(-0px)', opacity: 1 } + ], + { duration: 500, easing: 'ease-out', fill: 'forwards', delay: 400 } + ); + + // Remove the event listener after it has been triggered + document.body.removeEventListener('click', handleClick); + + title.addEventListener('animationend', function () { + title.remove(); + }); + + subtitle.addEventListener('animationend', function () { + subtitle.remove(); + }); + } +}); diff --git a/json/status.json b/json/status.json new file mode 100644 index 0000000..14e7089 --- /dev/null +++ b/json/status.json @@ -0,0 +1,3 @@ +{ + "godotver": "4.2.1" +} \ No newline at end of file diff --git a/not_found.html b/not_found.html new file mode 100644 index 0000000..c009a3b --- /dev/null +++ b/not_found.html @@ -0,0 +1,15 @@ + + + + + + Not Found + + + +
+

Page Not Found

+

There's nobunny here.

+
+ +