Oliver G
1b5762a849
- Static HTML/CSS Linktree-style landing page - Responsive design with dark theme - Project showcase (StaySense, Expense Logbook, Blog, RSS-Bot) - Social media links and contact information - GitHub Actions workflow for automated deployment - Complete documentation and setup instructions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
264 lines
11 KiB
HTML
264 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<meta name="description" content="Vanity on Tour: Vanlife trifft Technik – Apps, Tools, Blog & Projekte." />
|
||
<title>Vanity on Tour – Go</title>
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="Vanity on Tour – Go" />
|
||
<meta property="og:description" content="Vanlife trifft Technik – Apps, Tools, Blog & Projekte an einem Ort." />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://go.vanityontour.de/" />
|
||
<meta property="og:image" content="https://go.vanityontour.de/assets/img/og.jpg" />
|
||
|
||
<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml" />
|
||
<link rel="stylesheet" href="/assets/css/style.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<a class="skip" href="#content">Zum Inhalt springen</a>
|
||
|
||
<header class="site-header">
|
||
<div class="container header-inner">
|
||
<div class="brand">
|
||
<img class="brand-mark" src="/assets/img/van.svg" alt="" width="40" height="40" />
|
||
<div class="brand-text">
|
||
<div class="brand-title">Vanity on Tour</div>
|
||
<div class="brand-sub">Vanlife trifft Technik</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="top-nav" aria-label="Schnellzugriff">
|
||
<a class="nav-link" href="#projekte">Projekte</a>
|
||
<a class="nav-link" href="#support">Support</a>
|
||
<a class="nav-link" href="#social">Social</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="content">
|
||
<section class="hero">
|
||
<div class="container hero-inner">
|
||
<div class="hero-copy">
|
||
<p class="kicker">🚐 unterwegs. technisch. ehrlich.</p>
|
||
<h1>Alles Wichtige von <span class="accent">Vanity on Tour</span> – an einem Ort.</h1>
|
||
<p class="lead">
|
||
Tools, Apps, Blog & Projekte – für Menschen, die lieber frei stehen als still sitzen.
|
||
</p>
|
||
|
||
<div class="hero-cta">
|
||
<a class="btn primary" href="#projekte">Aktuelle Projekte</a>
|
||
<a class="btn ghost" href="https://vanityontour.de" target="_blank" rel="noopener">Zum Blog</a>
|
||
</div>
|
||
|
||
<div class="hero-badges" aria-label="Highlights">
|
||
<span class="badge">Schnell</span>
|
||
<span class="badge">Mobile‑first</span>
|
||
<span class="badge">DSGVO‑freundlich</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-art" aria-hidden="true">
|
||
<!-- Lightweight inline SVG (no external images required) -->
|
||
<svg viewBox="0 0 540 420" role="img" aria-label="">
|
||
<defs>
|
||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="currentColor" stop-opacity="0.35" />
|
||
<stop offset="100%" stop-color="currentColor" stop-opacity="0.05" />
|
||
</linearGradient>
|
||
<filter id="b" x="-20%" y="-20%" width="140%" height="140%">
|
||
<feGaussianBlur stdDeviation="18" />
|
||
</filter>
|
||
</defs>
|
||
<rect x="40" y="40" width="460" height="300" rx="26" fill="url(#g)" />
|
||
<circle cx="390" cy="140" r="78" fill="currentColor" opacity="0.14" filter="url(#b)"/>
|
||
<circle cx="180" cy="260" r="96" fill="currentColor" opacity="0.10" filter="url(#b)"/>
|
||
<path d="M140 250h230c20 0 36 16 36 36v22H104v-22c0-20 16-36 36-36z" fill="currentColor" opacity="0.16"/>
|
||
<path d="M160 244l26-66h168l26 66" fill="none" stroke="currentColor" stroke-opacity="0.28" stroke-width="10" stroke-linecap="round" />
|
||
<circle cx="175" cy="324" r="22" fill="currentColor" opacity="0.22"/>
|
||
<circle cx="355" cy="324" r="22" fill="currentColor" opacity="0.22"/>
|
||
<path d="M220 196h100" stroke="currentColor" stroke-opacity="0.18" stroke-width="10" stroke-linecap="round"/>
|
||
<path d="M240 148h60" stroke="currentColor" stroke-opacity="0.18" stroke-width="10" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="projekte" class="section">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2>Projekte</h2>
|
||
<p>Das Zeug, das wirklich klickt. (Und hoffentlich dein Vanlife leichter macht.)</p>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<article class="card">
|
||
<div class="card-top">
|
||
<span class="pill">Neu</span>
|
||
<h3>StaySense</h3>
|
||
<p>
|
||
Standort-Infos für Camper: Wetter‑Kontext, Umgebung & nützliche Hinweise –
|
||
direkt im Browser. <strong>Spots in der Nähe</strong> sind geplant (2026).
|
||
</p>
|
||
</div>
|
||
<div class="card-actions">
|
||
<a class="btn primary" href="https://staysense.vanityontour.de" target="_blank" rel="noopener">StaySense öffnen</a>
|
||
<a class="btn ghost" href="#faq">Was kann das?</a>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card-top">
|
||
<span class="pill subtle">App</span>
|
||
<h3>Vanity Expense Logbook</h3>
|
||
<p>
|
||
Ausgaben & Fahrten im Griff – fürs Leben unterwegs.
|
||
Ideal, wenn du wissen willst, wohin dein Geld fährt.
|
||
</p>
|
||
</div>
|
||
<div class="card-actions">
|
||
<a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Mehr erfahren</a>
|
||
<a class="btn ghost" href="#contact">Feedback geben</a>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card-top">
|
||
<span class="pill subtle">Blog</span>
|
||
<h3>Vanity on Tour</h3>
|
||
<p>
|
||
Produkttests, Stellplatz‑Tests, Technik‑Kram und gesellschaftliche Themen –
|
||
ohne Marketing-Zuckerguss.
|
||
</p>
|
||
</div>
|
||
<div class="card-actions">
|
||
<a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Zum Blog</a>
|
||
<a class="btn ghost" href="https://vanityontour.de" target="_blank" rel="noopener">Neueste Artikel</a>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card-top">
|
||
<span class="pill subtle">Tooling</span>
|
||
<h3>RSS‑News‑Bot</h3>
|
||
<p>
|
||
Automatisches Einlesen, Umformulieren, Tagging & Entwürfe für WordPress –
|
||
für News ohne Copy‑Paste‑Marathon.
|
||
</p>
|
||
</div>
|
||
<div class="card-actions">
|
||
<a class="btn primary" href="https://github.com/" target="_blank" rel="noopener">GitHub (Repo)</a>
|
||
<a class="btn ghost" href="#faq">Wie läuft das?</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>Tipp:</strong> Ersetze „Mehr erfahren“ / „GitHub (Repo)“ durch deine finalen Links (App‑Store, Repo‑URL etc.).
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="support" class="section alt">
|
||
<div class="container split">
|
||
<div>
|
||
<h2>Support</h2>
|
||
<p>
|
||
Wenn dir meine Tools, Tests oder Artikel helfen: Ein kleiner Support ist wie ein
|
||
Monster Energy – nicht zwingend gesund, aber sehr effektiv. 😄
|
||
</p>
|
||
</div>
|
||
<div class="support-actions">
|
||
<a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Support-Seite öffnen</a>
|
||
<a class="btn ghost" href="#contact">Kooperation anfragen</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="social" class="section">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2>Social & Kontakt</h2>
|
||
<p>Such dir den Kanal aus – ich bin nicht wählerisch.</p>
|
||
</div>
|
||
|
||
<div class="social">
|
||
<a class="social-link" href="https://vanityontour.de" target="_blank" rel="noopener" aria-label="Website">🌐 Website</a>
|
||
<a class="social-link" href="https://github.com/" target="_blank" rel="noopener" aria-label="GitHub">💻 GitHub</a>
|
||
<a class="social-link" href="https://youtube.com" target="_blank" rel="noopener" aria-label="YouTube">▶️ YouTube</a>
|
||
<a class="social-link" href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram">📷 Instagram</a>
|
||
<a class="social-link" href="https://bsky.app" target="_blank" rel="noopener" aria-label="Bluesky">🦋 Bluesky</a>
|
||
<a class="social-link" href="https://x.com" target="_blank" rel="noopener" aria-label="X">𝕏 X</a>
|
||
</div>
|
||
|
||
<div id="contact" class="contact">
|
||
<h3>Kontakt</h3>
|
||
<p>
|
||
Für Kooperationen, Presse oder „Kannst du mal eben…?“
|
||
<br />
|
||
<a href="mailto:kontakt@vanityontour.de">kontakt@vanityontour.de</a>
|
||
</p>
|
||
<p class="fineprint">
|
||
Hinweis: Diese Seite ist bewusst statisch & leichtgewichtig. Tracking nur, wenn du es aktiv einbaust.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="faq" class="section alt">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2>Mini‑FAQ</h2>
|
||
<p>Damit niemand raten muss, was Sache ist.</p>
|
||
</div>
|
||
|
||
<details class="faq">
|
||
<summary>Ist StaySense eine App?</summary>
|
||
<div class="faq-body">
|
||
<p>
|
||
Eher eine Website, die sich wie eine App anfühlt. Du kannst sie überall nutzen –
|
||
ohne Store‑Download: <a href="https://staysense.vanityontour.de" target="_blank" rel="noopener">staysense.vanityontour.de</a>
|
||
</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary>Warum keine Spots?</summary>
|
||
<div class="faq-body">
|
||
<p>
|
||
Fokus auf Standort‑Infos statt „hier ist ein Spot“. Spots in der Nähe sind geplant –
|
||
aber erst, wenn es sauber & sinnvoll umgesetzt ist.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary>Kann ich das Layout schnell anpassen?</summary>
|
||
<div class="faq-body">
|
||
<p>
|
||
Ja: Links & Texte findest du in <code>index.html</code>. Styling in <code>assets/css/style.css</code>.
|
||
Kein Build‑Step, kein Framework, kein Drama.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="container footer-inner">
|
||
<div>
|
||
<strong>Oliver / Vanity on Tour</strong><br/>
|
||
<span class="muted">Vanlife seit Jahren – Technik im Kopf, Staub an den Reifen.</span>
|
||
</div>
|
||
|
||
<div class="footer-links">
|
||
<a href="https://vanityontour.de" target="_blank" rel="noopener">Impressum</a>
|
||
<a href="https://vanityontour.de" target="_blank" rel="noopener">Datenschutz</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|