diff --git a/img/bg-projects.jpg b/img/bg-projects.jpg new file mode 100644 index 0000000..a30e4b7 Binary files /dev/null and b/img/bg-projects.jpg differ diff --git a/img/bg.jpeg b/img/bg.jpeg deleted file mode 100644 index a553e3f..0000000 Binary files a/img/bg.jpeg and /dev/null differ diff --git a/img/bg.jpg b/img/bg.jpg new file mode 100644 index 0000000..24e6214 Binary files /dev/null and b/img/bg.jpg differ diff --git a/index.html b/index.html index 1d7f1ab..08b0dab 100644 --- a/index.html +++ b/index.html @@ -20,9 +20,57 @@ +
+
+
+
+

YouHaveTrouble

+ Just a random person on the internet +
+
+ Creative + Frontend + Backend + Developer + Web + Modder + Gamer +
+
+
+
+

Projects

+
+
+ +
+

Purpur

+

+ Minecraft server software based on Paper. Focuses on introducing new configuration options to + already existing features along with adding completely new features. +

+
+
+
+ +
+

Purpur

+

+ Minecraft server software based on Paper. Focuses on introducing new configuration options to + already existing features along with adding completely new features. +

+
+
+
+
+
diff --git a/index.js b/index.js index e69de29..6282b45 100644 --- a/index.js +++ b/index.js @@ -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); +} + + + + diff --git a/main.css b/main.css index 35f27bf..cc866c0 100644 --- a/main.css +++ b/main.css @@ -3,6 +3,7 @@ :root { --text-color: #cccccc; --text-color-highlight: #ffffff; + scroll-behavior: smooth; } html { @@ -12,28 +13,44 @@ html { body { display: flex; + flex-direction: row; justify-content: start; align-items: start; 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 { padding-block: 0.5rem; background-color: #232323; - height: 100vh; + width: 2rem; + height: 150vh; display: flex; - position: sticky; + position: fixed; flex-direction: column; - justify-content: center; + justify-content: start; + padding-top: 10%; + overflow: clip; } nav a { writing-mode: tb-rl; transform: rotate(-180deg); color: #cccccc; - transition: color 0.2s; padding-block: 0.2rem; padding-inline: 0.5rem; + transition: background-color 0.2s, color 0.2s; } nav a.active { @@ -66,4 +83,153 @@ nav a:hover::after { height: 100%; color: #cccccc; opacity: 1; -} \ No newline at end of file +} + +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%; +} diff --git a/reset.css b/reset.css index 946ce0a..59725c1 100644 --- a/reset.css +++ b/reset.css @@ -20,11 +20,6 @@ html { } body { margin: 0; - background-color: rgba(16, 16, 16, 0.7); - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; width: 100%; min-height: 100vh; padding: 0; @@ -43,6 +38,10 @@ a { text-decoration: none; } +h1 { + font-size: 1.5rem; +} + h2 { font-size: 1.1rem; }