YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-11 22:06:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

actually commit this because it's been laying here for literal months

Browse Source
This commit is contained in:
youhavetrouble
2023-12-28 13:23:28 +01:00
parent 94bccd78a6
commit 033bae1856
7 changed files with 285 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
img/bg-projects.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

img/bg.jpeg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 100 KiB

img/bg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

index.html
+49 -1
View File
@@ -20,9 +20,57 @@
</head> </head>
<body> <body>
<nav> <nav>
<a href="#" class="active">Home</a> <a href="#hero">Home</a>
<a href="#projects">Projects</a> <a href="#projects">Projects</a>
</nav> </nav>
<main>
<section id="hero">
<article>
<div>
<h1>YouHaveTrouble</h1>
<small style="display: block" class="text-center">Just a random person on the internet</small>
</div>
<div data-info class="tags">
<span>Creative</span>
<span>Frontend</span>
<span>Backend</span>
<span>Developer</span>
<span>Web</span>
<span>Modder</span>
<span>Gamer</span>
</div>
</article>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project-scroller">
<article>
<div class="project-logo">
<img src="/img/purpur.svg" alt="Purpur logo" draggable="false">
</div>
<div class="description">
<h3 class="title">Purpur</h3>
<p>
Minecraft server software based on Paper. Focuses on introducing new configuration options to
already existing features along with adding completely new features.
</p>
</div>
</article>
<article>
<div class="project-logo">
<img src="/img/purpur.svg" alt="Purpur logo" draggable="false">
</div>
<div class="description">
<h3 class="title">Purpur</h3>
<p>
Minecraft server software based on Paper. Focuses on introducing new configuration options to
already existing features along with adding completely new features.
</p>
</div>
</article>
</div>
</section>
</main>
</body> </body>
</html> </html>
index.js
+61
View File
@@ -0,0 +1,61 @@
const navLinks = {
hero: document.querySelector('a[href="#hero"]'),
projects: document.querySelector('a[href="#projects"]'),
}
const sections = {
hero: document.querySelector('#hero'),
projects: document.querySelector('#projects'),
}
changeSection(window.location.hash ? window.location.hash : '#hero')
for (const link of Object.values(navLinks)) {
link.addEventListener('click', (e) => {
const target = e.target.getAttribute('href');
if (!target.startsWith('#')) return;
changeSection(target)
}
)
}
function changeSection(sectionName) {
for (const link of Object.values(navLinks)) {
link.classList.remove('active');
}
for (const link of Object.values(sections)) {
link.classList.remove('active');
}
if (!sectionName.startsWith('#')) {
sectionName = '#' + sectionName;
}
const targetElement = document.querySelector(sectionName);
if (!targetElement) return;
targetElement.classList.add('active');
navLinks[targetElement.id].classList.add('active');
}
/** Shuffle data-info elements */
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
const dataInfo = document.querySelector("[data-info]");
const dataInfoElements = [];
for (const element of dataInfo.children) {
dataInfoElements.push(element);
}
shuffleArray(dataInfoElements);
dataInfo.innerHTML = "";
for (const element of dataInfoElements) {
dataInfo.appendChild(element);
}
main.css
+170 -4
View File
@@ -3,6 +3,7 @@
:root { :root {
--text-color: #cccccc; --text-color: #cccccc;
--text-color-highlight: #ffffff; --text-color-highlight: #ffffff;
scroll-behavior: smooth;
} }
html { html {
@@ -12,28 +13,44 @@ html {
body { body {
display: flex; display: flex;
flex-direction: row;
justify-content: start; justify-content: start;
align-items: start; align-items: start;
color: var(--text-color); color: var(--text-color);
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
background-color: rgba(0, 0, 0, 0.65);
background-attachment: fixed;
background-position: center;
overflow-y: hidden;
}
.text-center {
text-align: center;
} }
nav { nav {
padding-block: 0.5rem; padding-block: 0.5rem;
background-color: #232323; background-color: #232323;
height: 100vh; width: 2rem;
height: 150vh;
display: flex; display: flex;
position: sticky; position: fixed;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: start;
padding-top: 10%;
overflow: clip;
} }
nav a { nav a {
writing-mode: tb-rl; writing-mode: tb-rl;
transform: rotate(-180deg); transform: rotate(-180deg);
color: #cccccc; color: #cccccc;
transition: color 0.2s;
padding-block: 0.2rem; padding-block: 0.2rem;
padding-inline: 0.5rem; padding-inline: 0.5rem;
transition: background-color 0.2s, color 0.2s;
} }
nav a.active { nav a.active {
@@ -67,3 +84,152 @@ nav a:hover::after {
color: #cccccc; color: #cccccc;
opacity: 1; opacity: 1;
} }
main {
padding: 0;
margin-left: 2rem;
width: 100%;
scroll-snap-type: block;
scroll-snap-align: start;
}
section {
padding: 0;
margin: 0;
width: 100%;
height: 100vh;
overflow-y: auto;
}
article {
width: 100%;
}
#hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#projects {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
background-color: rgba(0,0,0, 0.9);
background-blend-mode: darken;
background-attachment: local;
padding-top: 2rem;
background-image: url("/img/bg-projects.jpg");
transition: background-color 4s;
overflow-y: auto;
overflow-y: overlay;
}
#projects.active {
background-color: rgba(0,0,0, 0.85);
}
.tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 1rem;
max-width: 18rem;
}
.tags span {
font-size: 0.65rem;
border: 1px solid var(--text-color);
padding: 0.2rem;
border-radius: 0.2rem;
cursor: default;
user-select: none;
transition: transform 0.2s, color 0.2s, border-color 0.2s
}
.tags span:hover {
transform: scale(1.2);
color: var(--text-color-highlight);
border-color: var(--text-color-highlight);
}
#hero article {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.5rem;
}
#hero h1 {
color: var(--text-color-highlight);
}
#projects h2 {
font-size: 1.5rem;
color: var(--text-color-highlight);
padding-bottom: 1.5rem;
}
#projects .project-scroller {
display: flex;
justify-content: start;
align-items: center;
height: 100%;
width: 100%;
gap: 1.5rem;
max-width: 100vw;
flex-direction: column;
}
#projects .project-scroller article {
display: flex;
flex-direction: row;
justify-content: start;
text-align: start;
flex-wrap: wrap;
max-width: 34rem;
padding: 0.5rem;
gap: 0.25rem;
}
#projects .project-scroller article:nth-child(2) {
justify-content: end;
flex-direction: row-reverse;
text-align: end;
}
#projects .project-scroller article .title {
font-size: 1.4rem;
color: var(--text-color-highlight);
text-align: inherit;
}
#projects .project-scroller article .description {
width: fit-content;
flex: 1;
min-width: 14rem;
}
#projects .project-scroller article .description p {
font-size: 0.8rem;
color: var(--text-color);
text-align: inherit;
}
#projects .project-scroller article .project-logo {
width: 6rem;
height: 6rem;
min-width: 10rem;
min-height: 10rem;
}
#projects .project-scroller article .project-logo img {
width: 100%;
height: 100%;
}
reset.css
+4 -5
View File
@@ -20,11 +20,6 @@ html {
} }
body { body {
margin: 0; margin: 0;
background-color: rgba(16, 16, 16, 0.7);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
padding: 0; padding: 0;
@@ -43,6 +38,10 @@ a {
text-decoration: none; text-decoration: none;
} }
h1 {
font-size: 1.5rem;
}
h2 { h2 {
font-size: 1.1rem; font-size: 1.1rem;
} }