Jerrit Fritzsche
da801b4ce2
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.
189 lines
7.2 KiB
HTML
189 lines
7.2 KiB
HTML
<!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>
|