feat: initial portfolio site (Vite + TS + GSAP + Lenis)
Some checks are pending
docker / build-and-push (push) Waiting to run
Some checks are pending
docker / build-and-push (push) Waiting to run
Dark-mode Portfolio mit Scroll-Animationen, Custom Cursor, Skill-Bars und Docker-Pipeline zu Gitea Packages.
This commit is contained in:
commit
da801b4ce2
7
.dockerignore
Normal file
7
.dockerignore
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
*.log
|
||||||
|
.vite
|
||||||
|
.gitea
|
||||||
32
.gitea/workflows/docker.yml
Normal file
32
.gitea/workflows/docker.yml
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
name: docker
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [main]
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-and-push:
|
||||||
|
runs-on: docker
|
||||||
|
container:
|
||||||
|
image: catthehacker/ubuntu:act-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Set up Docker Buildx
|
||||||
|
uses: https://github.com/docker/setup-buildx-action@v3
|
||||||
|
|
||||||
|
- name: Log in to Gitea Container Registry
|
||||||
|
run: echo "${{ secrets.REGISTRY_TOKEN }}" | docker login git.jfritzsche.de -u jf --password-stdin
|
||||||
|
|
||||||
|
- name: Build and push
|
||||||
|
uses: https://github.com/docker/build-push-action@v6
|
||||||
|
with:
|
||||||
|
context: .
|
||||||
|
push: true
|
||||||
|
tags: |
|
||||||
|
git.jfritzsche.de/jf/jf-homepage:latest
|
||||||
|
git.jfritzsche.de/jf/jf-homepage:${{ github.sha }}
|
||||||
|
|
||||||
|
- name: Logout
|
||||||
|
run: docker logout git.jfritzsche.de
|
||||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
.vite
|
||||||
14
Dockerfile
Normal file
14
Dockerfile
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
# Multi-stage: build mit Vite, serven mit nginx
|
||||||
|
FROM node:20-alpine AS build
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json ./
|
||||||
|
RUN npm install
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM nginx:alpine
|
||||||
|
COPY --from=build /app/dist /usr/share/nginx/html
|
||||||
|
# Gitea-Container-Registry-Host als Cache-bust, sonst Standard-port 80
|
||||||
|
EXPOSE 80
|
||||||
|
HEALTHCHECK --interval=30s --timeout=3s \
|
||||||
|
CMD wget -qO- http://localhost/ >/dev/null 2>&1 || exit 1
|
||||||
64
README.md
Normal file
64
README.md
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
# jf-homepage
|
||||||
|
|
||||||
|
Portfolio & About-Seite für **Jerrit (jf)** — gebaut mit Vite, TypeScript, GSAP/ScrollTrigger und Lenis.
|
||||||
|
|
||||||
|
## Stack
|
||||||
|
|
||||||
|
- **Vite** — Dev-Server & Build
|
||||||
|
- **TypeScript** — Typsicherheit
|
||||||
|
- **GSAP + ScrollTrigger** — Scroll-Animationen, Reveals, Skill-Bars
|
||||||
|
- **Lenis** — Smooth Scrolling
|
||||||
|
- Reines CSS (Custom Properties, kein Framework)
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Animierter Hero (Intro-Timeline, Gradient-Background)
|
||||||
|
- Reveal-on-Scroll für alle Sektionen
|
||||||
|
- Skill-Bars mit Scroll-Trigger
|
||||||
|
- Custom Cursor + Scroll-Progress-Bar
|
||||||
|
- Fixe Nav mit Blur-on-Scroll
|
||||||
|
- Responsive (Desktop / Tablet / Mobile)
|
||||||
|
- `prefers-reduced-motion` respektiert
|
||||||
|
|
||||||
|
## Struktur
|
||||||
|
|
||||||
|
```
|
||||||
|
jf-homepage/
|
||||||
|
├── index.html # Markup, Sektionen
|
||||||
|
├── src/
|
||||||
|
│ ├── style.css # komplettes Styling
|
||||||
|
│ └── main.ts # Animationen, Lenis, Cursor, Nav
|
||||||
|
├── package.json
|
||||||
|
└── tsconfig.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## Local dev
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev # http://localhost:5173
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build # tsc + vite build -> dist/
|
||||||
|
npm run preview # dist/ lokal serven
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deploy
|
||||||
|
|
||||||
|
Statisches `dist/` — hostbar auf jedem Static-Host (z. B. Gitea Pages, Netlify, Cloudflare Pages, nginx).
|
||||||
|
|
||||||
|
## Git / Gitea
|
||||||
|
|
||||||
|
- Remote: `git@git.jfritzsche.de:jf/jf-homepage.git`
|
||||||
|
- Branches: `main` (prod), `dev` (laufend), `feature/*`, `fix/*`
|
||||||
|
- Commits: Conventional Commits (`feat:`, `fix:`, `docs:`, `chore:`)
|
||||||
|
- CI/CD: aktuell keine Pipeline (statisches Hosting).
|
||||||
|
|
||||||
|
## ToDo / Ideen
|
||||||
|
|
||||||
|
- [ ] Echte Projekt-Cases statt Platzhalter
|
||||||
|
- [ ] Dark/Light-Toggle
|
||||||
|
- [ ] Gitea-Actions-Deploy zu Gitea Pages (optional)
|
||||||
188
index.html
Normal file
188
index.html
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Jerrit · jf — Portfolio</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Portfolio von Jerrit (jf) — fortgeschrittener Entwickler, 15 Jahre Hobby, Web, Spiele, Tools, Plugins."
|
||||||
|
/>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Custom cursor -->
|
||||||
|
<div class="cursor" aria-hidden="true"></div>
|
||||||
|
<div class="cursor-dot" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<!-- Progress bar -->
|
||||||
|
<div class="scroll-progress" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<header class="nav" id="nav">
|
||||||
|
<a href="#top" class="nav__logo">jf<span>.</span></a>
|
||||||
|
<nav class="nav__links">
|
||||||
|
<a href="#about">Über mich</a>
|
||||||
|
<a href="#skills">Skills</a>
|
||||||
|
<a href="#work">Projekte</a>
|
||||||
|
<a href="#contact">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
<button class="nav__toggle" id="navToggle" aria-label="Menü">☰</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="top">
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="hero" id="hero">
|
||||||
|
<div class="hero__bg" aria-hidden="true"></div>
|
||||||
|
<div class="hero__content">
|
||||||
|
<p class="hero__eyebrow" data-reveal>Entwickler · Maker · IT</p>
|
||||||
|
<h1 class="hero__title">
|
||||||
|
<span class="line" data-reveal-line>Jerrit</span>
|
||||||
|
<span class="line line--accent" data-reveal-line>Fritzsche</span>
|
||||||
|
</h1>
|
||||||
|
<p class="hero__sub" data-reveal>
|
||||||
|
25 · Fortgeschrittener Entwickler seit ~15 Jahren.
|
||||||
|
Ich baue Web-Apps, Spiele, Tools & Game-Systeme —
|
||||||
|
und plane meine nebenberufliche Selbstständigkeit.
|
||||||
|
</p>
|
||||||
|
<div class="hero__cta" data-reveal>
|
||||||
|
<a href="#work" class="btn btn--primary">Projekte ansehen</a>
|
||||||
|
<a href="#contact" class="btn btn--ghost">Kontakt</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#about" class="hero__scroll" aria-label="Scrollen">
|
||||||
|
<span></span>scroll
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About -->
|
||||||
|
<section class="section about" id="about">
|
||||||
|
<div class="section__head">
|
||||||
|
<span class="section__index">01</span>
|
||||||
|
<h2 data-reveal>Über mich</h2>
|
||||||
|
</div>
|
||||||
|
<div class="about__grid">
|
||||||
|
<div class="about__lead" data-reveal>
|
||||||
|
<p>
|
||||||
|
Ich programmiere hobbymäßig, seit ich den Computer nicht mehr nur
|
||||||
|
zum Spielen nutze — mittlerweile etwa 15 Jahre. Viele Sprachen
|
||||||
|
verstehe ich rezeptiv sicher; wenn es drauf ankommt, schreibe ich
|
||||||
|
sauberen Code in dem, was das Projekt verlangt.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Tagsüber leitender IT-Administrator im öffentlichen Dienst.
|
||||||
|
Abends und am Wochenende: eigene Projekte, Skills sharpen, und der
|
||||||
|
Weg in die nebenberufliche Selbstständigkeit.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul class="about__facts" data-reveal>
|
||||||
|
<li><strong>Alter</strong><span>25</span></li>
|
||||||
|
<li><strong>Erfahrung</strong><span>~15 Jahre</span></li>
|
||||||
|
<li><strong>Fokus</strong><span>Web · Games · Tools</span></li>
|
||||||
|
<li><strong>Setup</strong><span>macOS · Devin · Orca</span></li>
|
||||||
|
<li><strong>Git</strong><span>Gitea · jf</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Skills -->
|
||||||
|
<section class="section skills" id="skills">
|
||||||
|
<div class="section__head">
|
||||||
|
<span class="section__index">02</span>
|
||||||
|
<h2 data-reveal>Skills</h2>
|
||||||
|
</div>
|
||||||
|
<div class="skills__grid">
|
||||||
|
<article class="skill" data-reveal>
|
||||||
|
<h3>Java</h3>
|
||||||
|
<div class="skill__bar"><i data-level="85"></i></div>
|
||||||
|
</article>
|
||||||
|
<article class="skill" data-reveal>
|
||||||
|
<h3>JavaScript / TS</h3>
|
||||||
|
<div class="skill__bar"><i data-level="90"></i></div>
|
||||||
|
</article>
|
||||||
|
<article class="skill" data-reveal>
|
||||||
|
<h3>Lua</h3>
|
||||||
|
<div class="skill__bar"><i data-level="80"></i></div>
|
||||||
|
</article>
|
||||||
|
<article class="skill" data-reveal>
|
||||||
|
<h3>HTML / CSS</h3>
|
||||||
|
<div class="skill__bar"><i data-level="92"></i></div>
|
||||||
|
</article>
|
||||||
|
<article class="skill" data-reveal>
|
||||||
|
<h3>Game-Systeme</h3>
|
||||||
|
<div class="skill__bar"><i data-level="78"></i></div>
|
||||||
|
</article>
|
||||||
|
<article class="skill" data-reveal>
|
||||||
|
<h3>DevOps / IT</h3>
|
||||||
|
<div class="skill__bar"><i data-level="88"></i></div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Work -->
|
||||||
|
<section class="section work" id="work">
|
||||||
|
<div class="section__head">
|
||||||
|
<span class="section__index">03</span>
|
||||||
|
<h2 data-reveal>Projekte</h2>
|
||||||
|
</div>
|
||||||
|
<div class="work__grid">
|
||||||
|
<a class="card" data-reveal href="#">
|
||||||
|
<span class="card__tag">Web-App</span>
|
||||||
|
<h3>Portfolio Engine</h3>
|
||||||
|
<p>Die Seite, auf der du gerade bist — Vite + TS + GSAP.</p>
|
||||||
|
<span class="card__more">mehr →</span>
|
||||||
|
</a>
|
||||||
|
<a class="card" data-reveal href="#">
|
||||||
|
<span class="card__tag">Game</span>
|
||||||
|
<h3>Lua Game-System</h3>
|
||||||
|
<p>Modulares Framework für Spielmechaniken & Plugins.</p>
|
||||||
|
<span class="card__more">mehr →</span>
|
||||||
|
</a>
|
||||||
|
<a class="card" data-reveal href="#">
|
||||||
|
<span class="card__tag">Tool</span>
|
||||||
|
<h3>Automation Suite</h3>
|
||||||
|
<p>CLI-Tools, die mir im Alltag als IT-Admin die Arbeit abnehmen.</p>
|
||||||
|
<span class="card__more">mehr →</span>
|
||||||
|
</a>
|
||||||
|
<a class="card" data-reveal href="#">
|
||||||
|
<span class="card__tag">Plugin</span>
|
||||||
|
<h3>Editor-Plugins</h3>
|
||||||
|
<p>Erweiterungen für Devin & Orca, die mein Setup beschleunigen.</p>
|
||||||
|
<span class="card__more">mehr →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<section class="section contact" id="contact">
|
||||||
|
<div class="section__head">
|
||||||
|
<span class="section__index">04</span>
|
||||||
|
<h2 data-reveal>Kontakt</h2>
|
||||||
|
</div>
|
||||||
|
<div class="contact__body" data-reveal>
|
||||||
|
<p class="contact__lead">
|
||||||
|
Lust auf ein Projekt, eine Idee oder einfach ein Gespräch über
|
||||||
|
Kaffee und Code?
|
||||||
|
</p>
|
||||||
|
<div class="contact__links">
|
||||||
|
<a href="https://git.jfritzsche.de/jf" target="_blank" rel="noopener">Gitea ↗</a>
|
||||||
|
<a href="mailto:hello@jfritzsche.de">Mail ↗</a>
|
||||||
|
<a href="#" target="_blank" rel="noopener">LinkedIn ↗</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<span>© <span id="year"></span> Jerrit Fritzsche</span>
|
||||||
|
<span>gebaut mit Vite · TS · GSAP</span>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1043
package-lock.json
generated
Normal file
1043
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
Normal file
20
package.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "jf-homepage",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"description": "Portfolio & About — Jerrit (jf)",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"gsap": "^3.12.5",
|
||||||
|
"lenis": "^1.1.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^5.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
121
src/main.ts
Normal file
121
src/main.ts
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
import "./style.css";
|
||||||
|
import gsap from "gsap";
|
||||||
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||||
|
import Lenis from "lenis";
|
||||||
|
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
/* ---------- Smooth scroll (Lenis) ---------- */
|
||||||
|
const lenis = new Lenis({
|
||||||
|
duration: 1.1,
|
||||||
|
easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||||
|
});
|
||||||
|
lenis.on("scroll", ScrollTrigger.update);
|
||||||
|
gsap.ticker.add((time: number) => lenis.raf(time * 1000));
|
||||||
|
gsap.ticker.lagSmoothing(0);
|
||||||
|
|
||||||
|
/* Anchor-Links über Lenis */
|
||||||
|
document.querySelectorAll<HTMLAnchorElement>('a[href^="#"]').forEach((a) => {
|
||||||
|
a.addEventListener("click", (e) => {
|
||||||
|
const id = a.getAttribute("href");
|
||||||
|
if (!id || id === "#") return;
|
||||||
|
const target = document.querySelector(id);
|
||||||
|
if (target) {
|
||||||
|
e.preventDefault();
|
||||||
|
lenis.scrollTo(target as HTMLElement, { offset: -80 });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- Custom cursor ---------- */
|
||||||
|
const cursor = document.querySelector<HTMLElement>(".cursor");
|
||||||
|
const dot = document.querySelector<HTMLElement>(".cursor-dot");
|
||||||
|
if (cursor && dot && window.matchMedia("(hover: hover)").matches) {
|
||||||
|
let mx = 0,
|
||||||
|
my = 0,
|
||||||
|
cx = 0,
|
||||||
|
cy = 0;
|
||||||
|
window.addEventListener("mousemove", (e) => {
|
||||||
|
mx = e.clientX;
|
||||||
|
my = e.clientY;
|
||||||
|
dot.style.transform = `translate(${mx}px, ${my}px) translate(-50%, -50%)`;
|
||||||
|
});
|
||||||
|
gsap.ticker.add(() => {
|
||||||
|
cx += (mx - cx) * 0.18;
|
||||||
|
cy += (my - cy) * 0.18;
|
||||||
|
cursor.style.transform = `translate(${cx}px, ${cy}px) translate(-50%, -50%)`;
|
||||||
|
});
|
||||||
|
const hoverables = "a, button, .card";
|
||||||
|
document.querySelectorAll(hoverables).forEach((el) => {
|
||||||
|
el.addEventListener("mouseenter", () => cursor.classList.add("is-hover"));
|
||||||
|
el.addEventListener("mouseleave", () => cursor.classList.remove("is-hover"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Scroll progress + nav state ---------- */
|
||||||
|
const progress = document.querySelector<HTMLElement>(".scroll-progress");
|
||||||
|
const nav = document.querySelector<HTMLElement>("#nav");
|
||||||
|
lenis.on("scroll", ({ scroll, limit }: { scroll: number; limit: number }) => {
|
||||||
|
const p = limit > 0 ? scroll / limit : 0;
|
||||||
|
if (progress) progress.style.width = `${p * 100}%`;
|
||||||
|
if (nav) nav.classList.toggle("is-scrolled", scroll > 40);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- Hero intro ---------- */
|
||||||
|
const heroTl = gsap.timeline({ defaults: { ease: "power3.out" } });
|
||||||
|
heroTl
|
||||||
|
.from(".hero__eyebrow", { y: 20, opacity: 0, duration: 0.6 })
|
||||||
|
.from(
|
||||||
|
".hero__title .line",
|
||||||
|
{ yPercent: 120, opacity: 0, duration: 0.9, stagger: 0.12 },
|
||||||
|
"-=0.2"
|
||||||
|
)
|
||||||
|
.from(".hero__sub", { y: 24, opacity: 0, duration: 0.7 }, "-=0.5")
|
||||||
|
.from(".hero__cta .btn", { y: 20, opacity: 0, duration: 0.5, stagger: 0.1 }, "-=0.4")
|
||||||
|
.from(".hero__scroll", { opacity: 0, duration: 0.6 }, "-=0.2");
|
||||||
|
|
||||||
|
/* ---------- Reveal on scroll ---------- */
|
||||||
|
gsap.utils.toArray<HTMLElement>("[data-reveal]").forEach((el) => {
|
||||||
|
gsap.from(el, {
|
||||||
|
y: 40,
|
||||||
|
opacity: 0,
|
||||||
|
duration: 0.8,
|
||||||
|
ease: "power3.out",
|
||||||
|
scrollTrigger: { trigger: el, start: "top 85%" },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- Skill bars ---------- */
|
||||||
|
gsap.utils.toArray<HTMLElement>(".skill__bar i").forEach((bar) => {
|
||||||
|
const level = Number(bar.dataset.level || 0);
|
||||||
|
gsap.to(bar, {
|
||||||
|
width: `${level}%`,
|
||||||
|
duration: 1.2,
|
||||||
|
ease: "power3.out",
|
||||||
|
scrollTrigger: { trigger: bar, start: "top 90%" },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- Footer year ---------- */
|
||||||
|
const year = document.getElementById("year");
|
||||||
|
if (year) year.textContent = String(new Date().getFullYear());
|
||||||
|
|
||||||
|
/* ---------- Mobile nav toggle (simple) ---------- */
|
||||||
|
const toggle = document.getElementById("navToggle");
|
||||||
|
if (toggle) {
|
||||||
|
toggle.addEventListener("click", () => {
|
||||||
|
const links = document.querySelector<HTMLElement>(".nav__links");
|
||||||
|
if (links) {
|
||||||
|
const open = links.style.display === "flex";
|
||||||
|
links.style.display = open ? "" : "flex";
|
||||||
|
links.style.position = "absolute";
|
||||||
|
links.style.top = "100%";
|
||||||
|
links.style.right = "20px";
|
||||||
|
links.style.flexDirection = "column";
|
||||||
|
links.style.background = "rgba(10,10,15,0.95)";
|
||||||
|
links.style.padding = "20px";
|
||||||
|
links.style.borderRadius = "12px";
|
||||||
|
links.style.border = "1px solid var(--line)";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
499
src/style.css
Normal file
499
src/style.css
Normal file
@ -0,0 +1,499 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #0a0a0f;
|
||||||
|
--bg-soft: #111119;
|
||||||
|
--fg: #f2f2f5;
|
||||||
|
--muted: #9a9aac;
|
||||||
|
--accent: #6c5ce7;
|
||||||
|
--accent-2: #00d2ff;
|
||||||
|
--line: rgba(255, 255, 255, 0.08);
|
||||||
|
--radius: 14px;
|
||||||
|
--maxw: 1180px;
|
||||||
|
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto; /* Lenis übernimmt */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
font-family: "Inter", system-ui, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
font-family: "Space Grotesk", system-ui, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Cursor ---------- */
|
||||||
|
.cursor,
|
||||||
|
.cursor-dot {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 9999;
|
||||||
|
border-radius: 50%;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
}
|
||||||
|
.cursor {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
border: 1.5px solid #fff;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: width 0.25s var(--ease), height 0.25s var(--ease),
|
||||||
|
background 0.25s var(--ease);
|
||||||
|
}
|
||||||
|
.cursor-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: #fff;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.cursor.is-hover {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
@media (hover: none) {
|
||||||
|
.cursor,
|
||||||
|
.cursor-dot {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Scroll progress ---------- */
|
||||||
|
.scroll-progress {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 3px;
|
||||||
|
width: 0%;
|
||||||
|
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
||||||
|
z-index: 9998;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Nav ---------- */
|
||||||
|
.nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 22px clamp(20px, 5vw, 60px);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
background: rgba(10, 10, 15, 0.4);
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
|
||||||
|
}
|
||||||
|
.nav.is-scrolled {
|
||||||
|
background: rgba(10, 10, 15, 0.75);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.nav__logo {
|
||||||
|
font-family: "Space Grotesk", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
.nav__logo span {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.nav__links {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.nav__links a {
|
||||||
|
color: var(--muted);
|
||||||
|
position: relative;
|
||||||
|
transition: color 0.25s var(--ease);
|
||||||
|
}
|
||||||
|
.nav__links a::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: -4px;
|
||||||
|
width: 0;
|
||||||
|
height: 1.5px;
|
||||||
|
background: var(--accent);
|
||||||
|
transition: width 0.25s var(--ease);
|
||||||
|
}
|
||||||
|
.nav__links a:hover {
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
.nav__links a:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.nav__toggle {
|
||||||
|
display: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--fg);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Hero ---------- */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 clamp(20px, 5vw, 60px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero__bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
60% 60% at 70% 20%,
|
||||||
|
rgba(108, 92, 231, 0.25),
|
||||||
|
transparent 60%
|
||||||
|
),
|
||||||
|
radial-gradient(50% 50% at 20% 80%, rgba(0, 210, 255, 0.18), transparent 60%);
|
||||||
|
filter: blur(20px);
|
||||||
|
animation: drift 18s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
@keyframes drift {
|
||||||
|
to {
|
||||||
|
transform: translate3d(40px, -30px, 0) scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hero__content {
|
||||||
|
position: relative;
|
||||||
|
max-width: var(--maxw);
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.hero__eyebrow {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.3em;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--accent-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.hero__title {
|
||||||
|
font-size: clamp(3.5rem, 12vw, 9rem);
|
||||||
|
line-height: 0.95;
|
||||||
|
}
|
||||||
|
.hero__title .line {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero__title .line--accent {
|
||||||
|
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.hero__sub {
|
||||||
|
max-width: 620px;
|
||||||
|
margin-top: 30px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: clamp(1rem, 1.6vw, 1.2rem);
|
||||||
|
}
|
||||||
|
.hero__cta {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 40px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 40px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
|
||||||
|
background 0.25s var(--ease);
|
||||||
|
}
|
||||||
|
.btn--primary {
|
||||||
|
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
||||||
|
color: #0a0a0f;
|
||||||
|
}
|
||||||
|
.btn--primary:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 14px 40px rgba(108, 92, 231, 0.4);
|
||||||
|
}
|
||||||
|
.btn--ghost {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
.btn--ghost:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
.hero__scroll {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 34px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.hero__scroll span {
|
||||||
|
width: 1px;
|
||||||
|
height: 46px;
|
||||||
|
background: linear-gradient(var(--accent), transparent);
|
||||||
|
animation: scrollPulse 2s var(--ease) infinite;
|
||||||
|
}
|
||||||
|
@keyframes scrollPulse {
|
||||||
|
0% {
|
||||||
|
transform: scaleY(0);
|
||||||
|
transform-origin: top;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scaleY(1);
|
||||||
|
transform-origin: top;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
transform-origin: bottom;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleY(0);
|
||||||
|
transform-origin: bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Sections ---------- */
|
||||||
|
.section {
|
||||||
|
max-width: var(--maxw);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: clamp(80px, 12vh, 160px) clamp(20px, 5vw, 60px);
|
||||||
|
}
|
||||||
|
.section__head {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.section__index {
|
||||||
|
font-family: "Space Grotesk", sans-serif;
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.section__head h2 {
|
||||||
|
font-size: clamp(2rem, 5vw, 3.4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About */
|
||||||
|
.about__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.4fr 1fr;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
.about__lead p {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
color: var(--fg);
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
.about__lead p:last-child {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.about__facts {
|
||||||
|
list-style: none;
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
.about__facts li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 14px 0;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.about__facts strong {
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.about__facts span {
|
||||||
|
font-family: "Space Grotesk", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skills */
|
||||||
|
.skills__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 26px;
|
||||||
|
}
|
||||||
|
.skill h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.skill__bar {
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--bg-soft);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.skill__bar i {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
||||||
|
box-shadow: 0 0 12px rgba(108, 92, 231, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Work */
|
||||||
|
.work__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
display: block;
|
||||||
|
padding: 34px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--bg-soft);
|
||||||
|
transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
|
||||||
|
background 0.35s var(--ease);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.card::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
120% 120% at 0% 0%,
|
||||||
|
rgba(108, 92, 231, 0.15),
|
||||||
|
transparent 50%
|
||||||
|
);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.35s var(--ease);
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
.card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.card__tag {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
color: var(--accent-2);
|
||||||
|
}
|
||||||
|
.card h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 12px 0 10px;
|
||||||
|
}
|
||||||
|
.card p {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.98rem;
|
||||||
|
}
|
||||||
|
.card__more {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 18px;
|
||||||
|
color: var(--fg);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact */
|
||||||
|
.contact__lead {
|
||||||
|
font-size: clamp(1.4rem, 3.5vw, 2.4rem);
|
||||||
|
font-family: "Space Grotesk", sans-serif;
|
||||||
|
max-width: 720px;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
.contact__links {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
margin-top: 40px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.contact__links a {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
padding-bottom: 4px;
|
||||||
|
transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
|
||||||
|
}
|
||||||
|
.contact__links a:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 30px clamp(20px, 5vw, 60px);
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
max-width: var(--maxw);
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Reveal ---------- */
|
||||||
|
[data-reveal],
|
||||||
|
[data-reveal-line] {
|
||||||
|
will-change: transform, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Responsive ---------- */
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.nav__links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.nav__toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.about__grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
.skills__grid {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.work__grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
.skills__grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.hero__bg,
|
||||||
|
.hero__scroll span {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"resolveJsonModule": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user