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