WinniePatGG
383 lines
14 KiB
HTML
383 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Winnie | Developer & Gamer</title>
|
|
<meta name="description" content="Hi, I'm Winnie - a passionate developer building digital experiences with code and creativity. Check out my projects and get in touch!"/>
|
|
<meta property="og:title" content="Winnie | Developer & Gamer" />
|
|
<meta property="og:description" content="Building digital experiences with code and creativity. Passionate about crafting elegant solutions and open-source projects."/>
|
|
<meta property="og:url" content="https://winniepat.de" />
|
|
<link rel="canonical" href="https://winniepat.de" />
|
|
<link rel="icon" href="favicon.ico" />
|
|
<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=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body class="noise-bg">
|
|
<div class="animated-background" aria-hidden="true">
|
|
<div class="bg-grid"></div>
|
|
<div class="orb orb-primary"></div>
|
|
<div class="orb orb-accent"></div>
|
|
<div class="orb orb-primary-small"></div>
|
|
<div class="particles" id="particles"></div>
|
|
</div>
|
|
|
|
<header class="site-header" id="site-header">
|
|
<div class="container header-inner">
|
|
<a class="logo" href="#">
|
|
<img class="avatar" src="profile-image.png" alt="Winnie" />
|
|
<span>winnie</span>
|
|
</a>
|
|
|
|
<nav class="nav-links" aria-label="Primary">
|
|
<a href="#about">About</a>
|
|
<a href="#projects">Projects</a>
|
|
<a href="#skills">Skills</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
|
|
<a class="btn btn-primary desktop-only" href="#contact">Get in touch</a>
|
|
|
|
<button
|
|
class="menu-toggle"
|
|
id="menu-toggle"
|
|
aria-expanded="false"
|
|
aria-controls="mobile-menu"
|
|
>
|
|
<span class="sr-only">Toggle menu</span>
|
|
<i class="icon" data-lucide="menu"></i>
|
|
<i class="icon icon-close" data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mobile-menu" id="mobile-menu">
|
|
<nav class="mobile-nav" aria-label="Mobile">
|
|
<a href="#about">About</a>
|
|
<a href="#projects">Projects</a>
|
|
<a href="#skills">Skills</a>
|
|
<a href="#contact">Contact</a>
|
|
<a class="btn btn-primary" href="#contact">Get in touch</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero" id="top">
|
|
<div class="container hero-inner">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title reveal" data-reveal style="--delay: 0s;">
|
|
Hey, I'm <span class="text-gradient">Winnie</span>
|
|
</h1>
|
|
<p class="hero-subtitle reveal" data-reveal style="--delay: 0.1s;">
|
|
<span class="mono text-primary"><</span>
|
|
Developer & Gamer
|
|
<span class="mono text-primary">/></span>
|
|
</p>
|
|
<p class="hero-description reveal" data-reveal style="--delay: 0.2s;">
|
|
Building cool software with code and creativity. Passionate about
|
|
learning new things and open-source projects.
|
|
</p>
|
|
<div class="hero-social reveal" data-reveal style="--delay: 0.3s;">
|
|
<a
|
|
class="social-link social-link--github"
|
|
href="https://git.winniepat.de/winnie"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Gitea"
|
|
>
|
|
<i class="icon" data-lucide="git-branch"></i>
|
|
</a>
|
|
<a
|
|
class="social-link"
|
|
href="mailto:winniepatgg@web.de"
|
|
aria-label="Email"
|
|
>
|
|
<i class="icon" data-lucide="mail"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="scroll-indicator" href="#projects">
|
|
<span class="mono">scroll</span>
|
|
<i class="icon" data-lucide="arrow-down"></i>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="about">
|
|
<div class="container">
|
|
<div class="section-header reveal" data-reveal>
|
|
<span class="mono text-primary">// about me</span>
|
|
<h2>Who <span class="text-gradient">I Am</span></h2>
|
|
</div>
|
|
|
|
<div class="about-grid">
|
|
<div class="about-text reveal" data-reveal style="--delay: 0.1s;">
|
|
<p>
|
|
Hi! I'm a developer who loves turning ideas into reality through
|
|
code. I specialize in building minecraft plugins and web
|
|
applications with a focus on user experiences.
|
|
</p>
|
|
<p>
|
|
When I'm not coding, you'll find me exploring new repositories,
|
|
pushing to docker hub, or enjoying a good can of monster while
|
|
brainstorming the next big idea.
|
|
</p>
|
|
<p>
|
|
I believe in writing code that not only works but is also clean,
|
|
scalable, and elegant. Every project is an opportunity to learn
|
|
and grow.
|
|
</p>
|
|
|
|
<div class="facts">
|
|
<span class="tag">
|
|
<i class="icon" data-lucide="map-pin"></i>
|
|
Based in Germany
|
|
</span>
|
|
<span class="tag">
|
|
<i class="icon" data-lucide="coffee"></i>
|
|
Monster Energy Enthusiast
|
|
</span>
|
|
<span class="tag">
|
|
<i class="icon" data-lucide="sparkles"></i>
|
|
Open Source Lover
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-card reveal" data-reveal style="--delay: 0.2s;">
|
|
<div class="stats-grid">
|
|
<div class="stat">
|
|
<div class="stat-value text-gradient">2+</div>
|
|
<div class="stat-label">Years Coding</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value text-gradient" id="stat-repos">...</div>
|
|
<div class="stat-label">Projects</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value text-gradient" id="stat-commits">
|
|
...
|
|
</div>
|
|
<div class="stat-label">Commits</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value text-gradient">∞</div>
|
|
<div class="stat-label">Monster Energy</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="terminal">
|
|
<div class="terminal-bar">
|
|
<span class="dot dot-red"></span>
|
|
<span class="dot dot-yellow"></span>
|
|
<span class="dot dot-green"></span>
|
|
</div>
|
|
<code>
|
|
<span class="text-primary">const</span> winnie = {
|
|
<br />
|
|
passion:
|
|
<span class="terminal-string">"coding"</span>,
|
|
<br />
|
|
focus:
|
|
<span class="terminal-string">"web dev"</span>,
|
|
<br />
|
|
learning:
|
|
<span class="terminal-boolean">true</span>
|
|
<br />
|
|
};
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="projects">
|
|
<div class="container">
|
|
<div class="section-header reveal" data-reveal>
|
|
<span class="mono text-primary">// my work</span>
|
|
<h2>Open Source <span class="text-gradient">Projects</span></h2>
|
|
<p class="section-subtitle">
|
|
A collection of my public repositories on Gitea
|
|
</p>
|
|
</div>
|
|
|
|
<div class="repos-state" id="repos-loading">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
<div class="repos-state hidden" id="repos-error">
|
|
<p>Unable to load repositories. Please try again later.</p>
|
|
</div>
|
|
<div class="repo-grid" id="repo-grid"></div>
|
|
|
|
<div class="section-footer reveal" data-reveal style="--delay: 0.2s;">
|
|
<a
|
|
class="btn btn-ghost"
|
|
href="https://git.winniepat.de/winnie"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
View all on Gitea
|
|
<i class="icon" data-lucide="external-link"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="skills">
|
|
<div class="container">
|
|
<div class="section-header reveal" data-reveal>
|
|
<span class="mono text-primary">// skills & tools</span>
|
|
<h2>Tech <span class="text-gradient">Stack</span></h2>
|
|
<p class="section-subtitle">
|
|
Technologies and tools I work with daily
|
|
</p>
|
|
</div>
|
|
|
|
<div class="skills-grid">
|
|
<div class="skill-card reveal" data-reveal>
|
|
<div class="skill-header">
|
|
<span class="skill-icon">
|
|
<i class="icon" data-lucide="globe"></i>
|
|
</span>
|
|
<h3>Frontend</h3>
|
|
</div>
|
|
<ul>
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
<li>Next.js</li>
|
|
</ul>
|
|
</div>
|
|
<div class="skill-card reveal" data-reveal style="--delay: 0.05s;">
|
|
<div class="skill-header">
|
|
<span class="skill-icon">
|
|
<i class="icon" data-lucide="database"></i>
|
|
</span>
|
|
<h3>Backend</h3>
|
|
</div>
|
|
<ul>
|
|
<li>Node.js</li>
|
|
<li>Python</li>
|
|
<li>Express.js</li>
|
|
<li>Flask</li>
|
|
</ul>
|
|
</div>
|
|
<div class="skill-card reveal" data-reveal style="--delay: 0.1s;">
|
|
<div class="skill-header">
|
|
<span class="skill-icon">
|
|
<i class="icon" data-lucide="cloud"></i>
|
|
</span>
|
|
<h3>DevOps</h3>
|
|
</div>
|
|
<ul>
|
|
<li>Docker</li>
|
|
<li>Portainer</li>
|
|
<li>Nginx</li>
|
|
<li>Dash.</li>
|
|
<li>Ubuntu</li>
|
|
</ul>
|
|
</div>
|
|
<div class="skill-card reveal" data-reveal style="--delay: 0.15s;">
|
|
<div class="skill-header">
|
|
<span class="skill-icon">
|
|
<i class="icon" data-lucide="terminal"></i>
|
|
</span>
|
|
<h3>Tools</h3>
|
|
</div>
|
|
<ul>
|
|
<li>Git</li>
|
|
<li>VSCode</li>
|
|
<li>Webstorm</li>
|
|
<li>Intellij</li>
|
|
<li>Termius</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="contact">
|
|
<div class="container">
|
|
<div class="section-header reveal" data-reveal>
|
|
<span class="mono text-primary">// get in touch</span>
|
|
<h2>Let's <span class="text-gradient">Connect</span></h2>
|
|
<p class="section-subtitle">
|
|
Have a project in mind or just want to say hello? I'm always open
|
|
to discussing new opportunities and ideas.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="cta-actions reveal" data-reveal style="--delay: 0.1s;">
|
|
<a class="btn btn-primary" href="mailto:winniepatgg@web.de">
|
|
<i class="icon" data-lucide="mail"></i>
|
|
Send an Email
|
|
<i class="icon icon-sm" data-lucide="send"></i>
|
|
</a>
|
|
<a
|
|
class="btn btn-outline btn-github"
|
|
href="https://git.winniepat.de/winnie"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<i class="icon" data-lucide="git-branch"></i>
|
|
Follow on Gitea
|
|
</a>
|
|
</div>
|
|
|
|
<div class="divider reveal" data-reveal style="--delay: 0.2s;"></div>
|
|
|
|
<div class="email-pill reveal" data-reveal style="--delay: 0.3s;">
|
|
<i class="icon" data-lucide="message-square"></i>
|
|
<span class="mono">winniepatgg@web.de</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container footer-content">
|
|
<div class="footer-brand">
|
|
<img class="avatar avatar--sm" src="profile-image.png" alt="Winnie" />
|
|
<span>winniepat.de</span>
|
|
</div>
|
|
|
|
<nav class="footer-links" aria-label="Footer">
|
|
<a href="https://status.winniepat.de">Status</a>
|
|
<a href="https://server.winniepat.de">Server Load</a>
|
|
</nav>
|
|
|
|
<div class="footer-social">
|
|
<a
|
|
href="https://git.winniepat.de/winnie"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Gitea"
|
|
class="footer-social-link footer-social-link--github"
|
|
>
|
|
<i class="icon" data-lucide="git-branch"></i>
|
|
</a>
|
|
<a
|
|
href="mailto:winniepatgg@web.de"
|
|
aria-label="Email"
|
|
class="footer-social-link"
|
|
>
|
|
<i class="icon" data-lucide="mail"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>
|
|
© <span id="current-year"></span> WinniePatGG. Built with 🍯 and lots of Monster Energy.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html>
|