oliver/landingpage-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit: Vanity on Tour Linktree landing page

Browse source 
- 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>
This commit is contained in:
Oliver 2026-02-24 11:13:29 +01:00
commit 1b5762a849
No known key found for this signature in database
11 changed files with 764 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

264
index.html Normal file
View file

@ -0,0 +1,264 @@
<!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>