diff --git a/public/assets/home.css b/public/assets/home.css new file mode 100644 index 0000000..4dc8f1c --- /dev/null +++ b/public/assets/home.css @@ -0,0 +1,136 @@ +/* Home page sections: intro / motivation / to be done. + Colors come from the page itself (currentColor), so it follows style.css. + If your theme has an accent variable with a different name, change --home-accent. */ + +/* Tighten the gap under the logo: the old "nothing here yet" layout + probably made .home fill the viewport, so we undo that here. */ +main.home { + min-height: 0 !important; + height: auto !important; + padding-bottom: 0 !important; + margin-bottom: 0 !important; +} + +main.home .logo { + margin-bottom: 0; +} + +.landing { + --home-accent: var(--accent, currentColor); + --home-line: color-mix(in srgb, currentColor 18%, transparent); + --home-soft: color-mix(in srgb, currentColor 6%, transparent); + max-width: 62rem; + margin: 0 auto; + padding: 0 1.25rem 6rem; +} + +.landing .block { + margin: 0 0 clamp(3.5rem, 9vw, 6.5rem); +} + +.landing h2 { + display: flex; + align-items: center; + gap: 0.9rem; + margin: 0 0 1.25rem; + font-size: clamp(1.5rem, 3.2vw, 2rem); + line-height: 1.2; +} + +/* line after the heading */ +.landing h2::after { + content: ""; + flex: 1; + height: 1px; + background: linear-gradient(90deg, var(--home-line), transparent); +} + +.landing p { + margin: 0 0 1.1rem; + max-width: 68ch; + font-size: 1.05rem; + line-height: 1.75; +} + +.landing .closing { + margin-top: 1.6rem; + padding-left: 1rem; + border-left: 2px solid var(--home-accent); + font-size: 1.15rem; +} + +/* ---------- intro with portrait ---------- */ + +.intro { + display: grid; + grid-template-columns: minmax(180px, 280px) 1fr; + gap: clamp(1.5rem, 4vw, 3rem); + align-items: center; +} + +.portrait { + position: relative; + margin: 0; +} + +.portrait img { + display: block; + width: 100%; + height: auto; + aspect-ratio: 3 / 4; + object-fit: cover; + object-position: 50% 30%; + border: 1px solid var(--home-line); + border-radius: 6px; + background: var(--home-soft); +} + +/* offset frame behind the photo */ +.portrait::before { + content: ""; + position: absolute; + inset: 0.7rem -0.7rem -0.7rem 0.7rem; + border: 1px solid var(--home-accent); + border-radius: 6px; + opacity: 0.45; + z-index: -1; +} + +@media (max-width: 680px) { + .intro { + grid-template-columns: 1fr; + } + .portrait { + width: min(70%, 260px); + margin: 0 auto 0.5rem; + } +} + +/* ---------- scroll reveal ---------- */ + +.reveal-on .reveal { + opacity: 0; + transform: translateY(26px); + transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), + transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); + transition-delay: var(--delay, 0ms); + will-change: opacity, transform; +} + +.reveal-on .reveal.reveal-left { + transform: translateX(-30px); +} + +.reveal-on .reveal.is-visible { + opacity: 1; + transform: none; +} + +@media (prefers-reduced-motion: reduce) { + .reveal-on .reveal, + .reveal-on .reveal.reveal-left { + opacity: 1; + transform: none; + transition: none; + } +} diff --git a/public/assets/home.js b/public/assets/home.js new file mode 100644 index 0000000..80a42c0 --- /dev/null +++ b/public/assets/home.js @@ -0,0 +1,31 @@ +// Fade-in on scroll for elements with .reveal +(function () { + var items = document.querySelectorAll(".reveal"); + if (!items.length) return; + + var show = function (el) { el.classList.add("is-visible"); }; + + if (!("IntersectionObserver" in window)) { + items.forEach(show); + return; + } + + // small stagger for siblings inside the same container + var groups = new Map(); + items.forEach(function (el) { + var parent = el.parentElement; + var n = groups.get(parent) || 0; + el.style.setProperty("--delay", n * 120 + "ms"); + groups.set(parent, n + 1); + }); + + var io = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (!entry.isIntersecting) return; + show(entry.target); + io.unobserve(entry.target); + }); + }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" }); + + items.forEach(function (el) { io.observe(el); }); +})(); diff --git a/public/assets/img/nick.jpg b/public/assets/img/nick.jpg new file mode 100644 index 0000000..7d9bd40 Binary files /dev/null and b/public/assets/img/nick.jpg differ diff --git a/public/index.html b/public/index.html index 4f881e8..a3619b3 100644 --- a/public/index.html +++ b/public/index.html @@ -4,22 +4,49 @@ nkelabs + +
- nke/labs - +nke/labs +
-

nke/labs

-

nothing here yet

+

nke/labs

+
+ +
+
+Nick +
+
+

Introduction

+

Hi, I'm Nick, a 26 y.o. IT-Enthusiast with heavy hatred for the state and big corporate. This site acts as a small landing page for everything homelab-related (well, my homelab at least). You can find tabs for some services I host, my socials and a contact form. I'm glad you're here, please enjoy your stay.

+

And yes, before anyone says anything, I know this is AI Slop, but I can't code for shit, so this is the most you're ever gonna get out of me. :>

+
+
+ +
+

Motivation

+

The reason I'm doing this is twofold. Firstly, I enjoy server admin stuff and learning the ins and outs of everything I do here. The second reason is way more important: Information control and severing my connection from the bigger brands. Big corpo stealing every single bit of info from us is a crime against our informational rights and I want to fight against it as well as I can.

+
+ +
+

To be done

+

I'm currently broke and don't have the funds for more servers/devices, but as soon as I do, I intend to selfhost services for many of my friends to use so their data is "protected" as well. Also, since I love this shit, I intend to try out every single service I can, and keep the ones I enjoy. If my free time and financial situation allows it, I intend to help every leftist party, organisation, or person as well as I can with my setup since I fucking hate the right, and human rights are non-negotiable for me. This one is faaaar in the future though.

+

At the end of the day, I want to have fun and help out as many people as I can :)

+
+ +
+