369 lines
18 KiB
HTML
369 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jarne Götz - Portfolio</title>
|
|
<meta name="description"
|
|
content="Software Developer & Technology Enthusiast. Focusing on Rust, AI, Security, and Infrastructure.">
|
|
|
|
<!-- Font: Space Grotesk -->
|
|
<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@300;400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<!-- Preload Icons -->
|
|
<link rel="preload" href="icons/menu.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/terminal.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/arrow-right.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/github.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/chip.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/cube.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/globe.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/code.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/server.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/shield.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/layout.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/external-link.svg" as="image" type="image/svg+xml">
|
|
<link rel="preload" href="icons/envelope.svg" as="image" type="image/svg+xml">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav>
|
|
<input type="checkbox" id="menu-toggle">
|
|
<div class="container nav-inner">
|
|
<div class="logo">JARNE GÖTZ</div>
|
|
<div class="nav-links">
|
|
<a href="#projects" onclick="document.getElementById('menu-toggle').checked = false">Projects</a>
|
|
<a href="#stack" onclick="document.getElementById('menu-toggle').checked = false">Stack</a>
|
|
<a href="#lab" onclick="document.getElementById('menu-toggle').checked = false">Lab</a>
|
|
<a href="#contact" onclick="document.getElementById('menu-toggle').checked = false">Contact</a>
|
|
</div>
|
|
<label for="menu-toggle" class="mobile-menu-label" aria-label="Menu">
|
|
<img src="icons/menu.svg" alt="Menu" class="icon-sm">
|
|
</label>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="section">
|
|
<div class="container">
|
|
<div class="mb-4"
|
|
style="display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; text-transform: uppercase; color: var(--fg-muted); border: 1px solid var(--border); padding: 0.25rem 0.75rem;">
|
|
<img src="icons/terminal.svg" alt="Terminal" class="icon-sm">
|
|
Software Developer
|
|
</div>
|
|
|
|
<h1 class="mb-6">
|
|
Building.<br>
|
|
Secure.<br>
|
|
Efficient.
|
|
</h1>
|
|
|
|
<p class="text-muted mb-8" style="max-width: 600px; font-size: 1.125rem;">
|
|
I develop software solutions ranging from Rust-based AI agents to self-hosted infrastructure.
|
|
Focused on security, performance, and modern tech.
|
|
</p>
|
|
|
|
<div class="flex gap-2 mb-8" style="flex-wrap: wrap;">
|
|
<span class="text-sm text-muted py-1">Focus:</span>
|
|
<span class="tag">AI Agents</span>
|
|
<span class="tag">Security</span>
|
|
<span class="tag">Infrastructure</span>
|
|
</div>
|
|
|
|
<div class="flex gap-4">
|
|
<a href="#contact" class="btn btn-primary">
|
|
Contact Me
|
|
<img src="icons/arrow-right.svg" alt="Arrow Right" class="icon-sm">
|
|
</a>
|
|
<a href="https://git.zerozipp.dev/explore/repos" target="_blank" class="btn btn-secondary">
|
|
<img src="icons/github.svg" alt="Git">
|
|
Git
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tech Strip -->
|
|
<div class="tech-strip">
|
|
<div class="container tech-strip-inner">
|
|
<span>Rust</span>
|
|
<span>//</span>
|
|
<span>Kotlin</span>
|
|
<span>//</span>
|
|
<span>Docker</span>
|
|
<span>//</span>
|
|
<span>Alpine Linux</span>
|
|
<span>//</span>
|
|
<span>Arch Linux</span>
|
|
<span>//</span>
|
|
<span>Node.js</span>
|
|
<span>//</span>
|
|
<span>Caddy</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects Section -->
|
|
<section id="projects" class="section">
|
|
<div class="container">
|
|
<div class="flex"
|
|
style="justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 2rem;">
|
|
<h2>Selected Projects</h2>
|
|
<span class="text-sm font-mono text-muted">03 / REPOS</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<!-- Project 1 -->
|
|
<div class="grid-item project-card">
|
|
<div style="flex: 1;">
|
|
<div class="flex gap-4 mb-4 items-center">
|
|
<img src="icons/chip.svg" alt="Chip" class="icon-md text-muted">
|
|
<h3>Folyo</h3>
|
|
</div>
|
|
<p class="text-muted mb-6" style="max-width: 600px;">
|
|
AI Agent Device Control System. Enables AI agents to control physical and virtual devices
|
|
through a high-performance Rust server.
|
|
</p>
|
|
<div class="flex gap-2 mb-6" style="flex-wrap: wrap;">
|
|
<span class="tag">Rust</span>
|
|
<span class="tag">Agents</span>
|
|
<span class="tag">IoT</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-links">
|
|
<a href="https://git.zerozipp.dev/folyo/server" target="_blank" class="btn btn-secondary"
|
|
style="padding: 0.5rem 1rem; font-size: 0.75rem; justify-content: space-between;">
|
|
Git <img src="icons/external-link.svg" alt="External Link" class="icon-sm">
|
|
</a>
|
|
<a href="https://folyo.dev" target="_blank" class="btn btn-secondary"
|
|
style="padding: 0.5rem 1rem; font-size: 0.75rem; justify-content: space-between;">
|
|
Website <img src="icons/external-link.svg" alt="External Link" class="icon-sm">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 2 -->
|
|
<div class="grid-item project-card">
|
|
<div style="flex: 1;">
|
|
<div class="flex gap-4 mb-4 items-center">
|
|
<img src="icons/cube.svg" alt="Cube" class="icon-md text-muted">
|
|
<h3>Agent</h3>
|
|
</div>
|
|
<p class="text-muted mb-6" style="max-width: 600px;">
|
|
A modern Minecraft Mod Loader developed from scratch in Kotlin. Provides
|
|
a flexible architecture for mod developers.
|
|
</p>
|
|
<div class="flex gap-2 mb-6" style="flex-wrap: wrap;">
|
|
<span class="tag">Kotlin</span>
|
|
<span class="tag">Minecraft</span>
|
|
<span class="tag">Plugins</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-links">
|
|
<a href="https://git.zerozipp.dev/zerozipp/agent" target="_blank" class="btn btn-secondary"
|
|
style="padding: 0.5rem 1rem; font-size: 0.75rem; justify-content: space-between;">
|
|
Git <img src="icons/external-link.svg" alt="External Link" class="icon-sm">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 3 -->
|
|
<div class="grid-item project-card">
|
|
<div style="flex: 1;">
|
|
<div class="flex gap-4 mb-4 items-center">
|
|
<img src="icons/globe.svg" alt="Globe" class="icon-md text-muted">
|
|
<h3>Marick Studio</h3>
|
|
</div>
|
|
<p class="text-muted mb-6" style="max-width: 600px;">
|
|
Full-stack development of a corporate website using Next.js and Tailwind CSS. Features
|
|
a booking system, video optimization, and animations.
|
|
</p>
|
|
<div class="flex gap-2 mb-6" style="flex-wrap: wrap;">
|
|
<span class="tag">Next.js</span>
|
|
<span class="tag">React</span>
|
|
<span class="tag">Tailwind</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-links">
|
|
<a href="https://marickstudio.com" target="_blank" class="btn btn-secondary"
|
|
style="padding: 0.5rem 1rem; font-size: 0.75rem; justify-content: space-between;">
|
|
Website <img src="icons/external-link.svg" alt="External Link" class="icon-sm">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About / Stack -->
|
|
<section id="stack" class="section" style="border-top: 1px solid var(--border);">
|
|
<div class="container">
|
|
<div class="grid grid-cols-2" style="border: none; background: transparent; gap: 4rem;">
|
|
<!-- Col 1 -->
|
|
<div>
|
|
<h2 class="mb-6">About</h2>
|
|
<div class="text-muted" style="display: flex; flex-direction: column; gap: 1rem;">
|
|
<p>
|
|
Software development is more than just writing code. It is about understanding systems,
|
|
designing robust architectures, and continuous learning.
|
|
</p>
|
|
<p>
|
|
My work focuses on three core areas: building autonomous AI agents, analyzing systems from a
|
|
security perspective,
|
|
and maintaining full control over infrastructure through self-hosting.
|
|
</p>
|
|
<p>
|
|
In my Home Lab, I deploy services like Matrix, Gitea, and Home Assistant on Alpine Linux
|
|
containers.
|
|
On the desktop, I use Arch Linux to stay close to the system.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Col 2 -->
|
|
<div>
|
|
<h2 class="mb-6">Capabilities</h2>
|
|
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
|
|
<div class="flex gap-4 items-center">
|
|
<img src="icons/code.svg" alt="Code" class="icon-lg text-muted">
|
|
<div>
|
|
<h4 class="mb-1">Languages</h4>
|
|
<p class="text-sm text-muted">Rust, Kotlin, Java, TypeScript, Python</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<img src="icons/server.svg" alt="Server" class="icon-lg text-muted">
|
|
<div>
|
|
<h4 class="mb-1">Infrastructure</h4>
|
|
<p class="text-sm text-muted">Docker, Alpine Linux, Arch Linux, Caddy</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<img src="icons/shield.svg" alt="Shield" class="icon-lg text-muted">
|
|
<div>
|
|
<h4 class="mb-1">Security</h4>
|
|
<p class="text-sm text-muted">Pen Testing Basics, System Hardening</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<img src="icons/layout.svg" alt="Layout" class="icon-lg text-muted">
|
|
<div>
|
|
<h4 class="mb-1">Web</h4>
|
|
<p class="text-sm text-muted">Node.js, React, Tailwind CSS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Home Lab -->
|
|
<section id="lab" class="section" style="background-color: #18181b33;">
|
|
<div class="container">
|
|
<div class="flex gap-4 mb-8 items-center">
|
|
<img src="icons/server.svg" alt="Server" class="icon-lg">
|
|
<h2>Home Lab</h2>
|
|
</div>
|
|
|
|
<p class="text-muted mb-8" style="max-width: 600px;">
|
|
All services below run on my own hardware with Alpine Linux and Docker.
|
|
Demonstrating practical skills in administration, containerization, and security.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-3">
|
|
<a href="https://matrix.org" class="grid-item lab-item" target="_blank">
|
|
<h3>Matrix</h3>
|
|
<p class="text-sm text-muted">Decentralized communication</p>
|
|
</a>
|
|
<a href="https://about.gitea.com" class="grid-item lab-item" target="_blank">
|
|
<h3>Gitea</h3>
|
|
<p class="text-sm text-muted">Self-hosted Git service</p>
|
|
</a>
|
|
<a href="https://www.home-assistant.io" class="grid-item lab-item" target="_blank">
|
|
<h3>Home Assistant</h3>
|
|
<p class="text-sm text-muted">Smart Home Automation</p>
|
|
</a>
|
|
<a href="https://www.librechat.ai" class="grid-item lab-item" target="_blank">
|
|
<h3>LibreChat</h3>
|
|
<p class="text-sm text-muted">LLM Web Interface</p>
|
|
</a>
|
|
<a href="https://github.com/dani-garcia/vaultwarden" class="grid-item lab-item" target="_blank">
|
|
<h3>Vaultwarden</h3>
|
|
<p class="text-sm text-muted">Password Management</p>
|
|
</a>
|
|
<a href="https://www.portainer.io" class="grid-item lab-item" target="_blank">
|
|
<h3>Portainer</h3>
|
|
<p class="text-sm text-muted">Docker Management</p>
|
|
</a>
|
|
<a href="https://jellyfin.org" class="grid-item lab-item" target="_blank">
|
|
<h3>Jellyfin</h3>
|
|
<p class="text-sm text-muted">Media Streaming</p>
|
|
</a>
|
|
<a href="https://technitium.com/dns/" class="grid-item lab-item" target="_blank">
|
|
<h3>Technitium DNS</h3>
|
|
<p class="text-sm text-muted">Secure DNS Server</p>
|
|
</a>
|
|
<a href="https://nextcloud.com" class="grid-item lab-item" target="_blank">
|
|
<h3>Nextcloud</h3>
|
|
<p class="text-sm text-muted">File Collaboration</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact -->
|
|
<section id="contact" class="section"
|
|
style="border-top: 1px solid var(--border); flex: 1; display: flex; flex-direction: column; justify-content: flex-end;">
|
|
<div class="container">
|
|
<h2 class="mb-12" style="font-size: clamp(2rem, 5vw, 3.5rem);">Let's Connect.</h2>
|
|
<div class="grid grid-cols-2" style="border: none; background: transparent; gap: 2rem;">
|
|
<!-- Matrix -->
|
|
<a href="https://matrix.to/#/@jarne:zerozipp.dev" target="_blank" class="contact-card">
|
|
<div class="flex" style="justify-content: space-between; align-items: flex-start;">
|
|
<div class="icon-box">
|
|
<img src="icons/terminal.svg" alt="Terminal" viewBox="0 0 24 24">
|
|
</div>
|
|
<span class="text-sm font-mono text-muted">PREFERRED</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-2">Matrix</h3>
|
|
<p class="text-sm text-muted font-mono">@jarne:zerozipp.dev</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Email -->
|
|
<a href="mailto:jarne@zerozipp.dev" class="contact-card">
|
|
<div class="flex" style="justify-content: space-between; align-items: flex-start;">
|
|
<div class="icon-box">
|
|
<img src="icons/envelope.svg" alt="Envelope">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-2">Email</h3>
|
|
<p class="text-sm text-muted font-mono">jarne@zerozipp.dev</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container flex font-mono">
|
|
<div>© 2026 Jarne Götz</div>
|
|
<div class="flex gap-4">
|
|
<span>zerozipp.dev</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |