Projekte aktualisiert und Design ueberarbeitet
All checks were successful
Deploy go.vanityontour.de / deploy (push) Successful in 7s
All checks were successful
Deploy go.vanityontour.de / deploy (push) Successful in 7s
VanityCast fehlte komplett, obwohl die App in Version 1.4 im App Store ist. Neu dazu kommt eine Karte fuer Code & Infrastruktur (Forgejo/GitHub). News und Stats bleiben aussen vor - beide leiten auf /admin bzw. /login und sind nicht oeffentlich nutzbar. Design: Abstands- und Typo-Skala ueber Custom Properties statt frei gewaehlter Pixelwerte, Karten-Grid auf auto-fit umgestellt, je Projekt ein eigener Akzent als Farbkante. Dazu Fokus-Ringe fuer Tastaturnutzung, prefers-reduced-motion und scroll-margin, damit der Sticky-Header keine Ankerziele verdeckt. Ausgehende Links laufen jetzt ueber die eigenen Kurzlinks, womit die Seite Klickstatistiken bekommt. Impressum, Datenschutz und Mailto bleiben direkt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
94d3a2bae5
commit
03c1a526bd
2 changed files with 383 additions and 179 deletions
204
index.html
204
index.html
|
|
@ -3,18 +3,23 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src 'none'; frame-src 'none'; object-src 'none'; upgrade-insecure-requests; block-all-mixed-content;" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests; block-all-mixed-content;" />
|
||||
<meta name="referrer" content="strict-origin-when-cross-origin" />
|
||||
<meta name="description" content="Vanity on Tour: Vanlife trifft Technik – Apps, Tools, Blog & Projekte." />
|
||||
<title>Vanity on Tour – Go</title>
|
||||
<meta name="description" content="Vanity on Tour: Vanlife trifft Technik. VanityCast, StaySense, Expense Logbook, Blog und Open-Source-Projekte – gebündelt an einem Ort." />
|
||||
<meta name="theme-color" content="#0b0f14" />
|
||||
<title>Vanity on Tour – Alle Projekte an einem Ort</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:title" content="Vanity on Tour – Alle Projekte an einem Ort" />
|
||||
<meta property="og:description" content="VanityCast, StaySense, Expense Logbook, Blog und Open Source. Vanlife trifft Technik." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="de_DE" />
|
||||
<meta property="og:site_name" content="Vanity on Tour" />
|
||||
<meta property="og:url" content="https://go.vanityontour.de/" />
|
||||
<meta property="og:image" content="https://go.vanityontour.de/assets/img/og.jpg" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
|
||||
<link rel="canonical" href="https://go.vanityontour.de/" />
|
||||
<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml" />
|
||||
<link rel="stylesheet" href="/assets/css/style.css" />
|
||||
</head>
|
||||
|
|
@ -24,18 +29,18 @@
|
|||
|
||||
<header class="site-header">
|
||||
<div class="container header-inner">
|
||||
<div class="brand">
|
||||
<a class="brand" href="/" aria-label="Vanity on Tour – Startseite">
|
||||
<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>
|
||||
<span class="brand-text">
|
||||
<span class="brand-title">Vanity on Tour</span>
|
||||
<span class="brand-sub">Vanlife trifft Technik</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
<a class="nav-link" href="#social">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -47,24 +52,24 @@
|
|||
<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.
|
||||
Apps, Tools, Blog und Open Source – 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>
|
||||
<a class="btn primary" href="#projekte">Projekte ansehen</a>
|
||||
<a class="btn ghost" href="https://go.vanityontour.de/blog" 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>
|
||||
<ul class="hero-badges" aria-label="Eigenschaften">
|
||||
<li class="badge">Ohne Konto nutzbar</li>
|
||||
<li class="badge">Kein Tracking durch Dritte</li>
|
||||
<li class="badge">Selbst gehostet</li>
|
||||
</ul>
|
||||
</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="">
|
||||
<svg viewBox="0 0 540 420" focusable="false">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="currentColor" stop-opacity="0.35" />
|
||||
|
|
@ -92,64 +97,105 @@
|
|||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>Projekte</h2>
|
||||
<p>Das Zeug, das wirklich klickt. (Und hoffentlich dein Vanlife leichter macht.)</p>
|
||||
<p>Apps und Werkzeuge, die im Van entstanden sind – und dort auch benutzt werden.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<article class="card is-cast">
|
||||
<div class="card-top">
|
||||
<span class="pill">Neu</span>
|
||||
<h3>StaySense</h3>
|
||||
<p class="card-meta">
|
||||
<span class="pill">iOS App</span>
|
||||
<span class="card-tag">Version 1.4</span>
|
||||
</p>
|
||||
<h3>VanityCast</h3>
|
||||
<p>
|
||||
Standort-Infos für Camper: Umwelt‑Kontext, Umgebung & nützliche Hinweise –
|
||||
direkt im Browser. <strong>Spots in der Nähe</strong> sind geplant (2026).
|
||||
Die Podcast-App für bewusstes Hören: eigene Audio-Engine mit
|
||||
Lautstärke-Angleichung und Smart Speed, smarte Inbox, Hörstatistiken
|
||||
und Playlisten. Läuft auf iPhone und CarPlay – <strong>komplett ohne Konto</strong>.
|
||||
</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="https://landing.staysense.vanityontour.de" target="_blank" rel="noopener noreferrer">Was kann das?</a>
|
||||
<a class="btn primary" href="https://go.vanityontour.de/vanitycast-ios" rel="noopener">Im App Store laden</a>
|
||||
<a class="btn ghost" href="https://go.vanityontour.de/vanitycast-web" rel="noopener">Alle Funktionen</a>
|
||||
<a class="btn ghost" href="https://go.vanityontour.de/vanitycast" rel="noopener">Beta testen</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<article class="card is-stay">
|
||||
<div class="card-top">
|
||||
<span class="pill subtle">App</span>
|
||||
<p class="card-meta">
|
||||
<span class="pill subtle">Web-App</span>
|
||||
</p>
|
||||
<h3>StaySense</h3>
|
||||
<p>
|
||||
Standort-Check fürs Vanlife: Umwelt-Kontext, Umgebung und nützliche
|
||||
Hinweise – direkt im Browser, ohne Store-Download.
|
||||
<strong>Spots in der Nähe</strong> sind für 2026 geplant.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<a class="btn primary" href="https://go.vanityontour.de/staysense" rel="noopener">StaySense öffnen</a>
|
||||
<a class="btn ghost" href="https://go.vanityontour.de/staysense-info" rel="noopener">Was kann das?</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card is-expense">
|
||||
<div class="card-top">
|
||||
<p class="card-meta">
|
||||
<span class="pill subtle">App</span>
|
||||
</p>
|
||||
<h3>Vanity Expense Logbook</h3>
|
||||
<p>
|
||||
Ausgaben & Fahrten im Griff – fürs Leben unterwegs.
|
||||
Ausgaben und 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://app.vanityontour.de" target="_blank" rel="noopener">Mehr erfahren</a>
|
||||
<a class="btn primary" href="https://go.vanityontour.de/expense" rel="noopener">Mehr erfahren</a>
|
||||
<a class="btn ghost" href="mailto:app@vanityontour.de">Feedback geben</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<article class="card is-code">
|
||||
<div class="card-top">
|
||||
<span class="pill subtle">Blog</span>
|
||||
<h3>Vanity on Tour</h3>
|
||||
<p class="card-meta">
|
||||
<span class="pill subtle">Open Source</span>
|
||||
</p>
|
||||
<h3>Code & Infrastruktur</h3>
|
||||
<p>
|
||||
Produkttests, Stellplatz‑Tests, Technik‑Kram und gesellschaftliche Themen –
|
||||
ohne Marketing-Zuckerguss.
|
||||
Werkzeuge, Landingpages und Automatisierungen liegen offen –
|
||||
auf der eigenen Forgejo-Instanz und gespiegelt nach GitHub.
|
||||
Selbst gehostet, weil es geht.
|
||||
</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>
|
||||
<a class="btn primary" href="https://go.vanityontour.de/git" rel="noopener">Forgejo</a>
|
||||
<a class="btn ghost" href="https://go.vanityontour.de/github" rel="noopener">GitHub</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<article class="card is-blog">
|
||||
<div class="card-top">
|
||||
<p class="card-meta">
|
||||
<span class="pill subtle">Blog</span>
|
||||
</p>
|
||||
<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://go.vanityontour.de/blog" rel="noopener">Zum Blog</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div style="height: 3rem;"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="support" class="section alt">
|
||||
<div class="container split">
|
||||
<div>
|
||||
<div class="split-copy">
|
||||
<h2>Support</h2>
|
||||
<p>
|
||||
Wenn dir meine Tools, Tests oder Artikel helfen: Ein kleiner Support ist wie ein
|
||||
|
|
@ -157,7 +203,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="support-actions">
|
||||
<a class="btn primary" href="https://ko-fi.com/vanityontour" target="_blank" rel="noopener">Support-Seite öffnen</a>
|
||||
<a class="btn primary" href="https://go.vanityontour.de/support" rel="noopener">Support-Seite öffnen</a>
|
||||
<a class="btn ghost" href="#contact">Kooperation anfragen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -166,26 +212,29 @@
|
|||
<section id="social" class="section">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>Social & Kontakt</h2>
|
||||
<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/OliverGiertz" target="_blank" rel="noopener" aria-label="GitHub">💻 GitHub</a>
|
||||
<a class="social-link" href="https://www.instagram.com/vanity.on.tour/" target="_blank" rel="noopener" aria-label="Instagram">📷 Instagram</a>
|
||||
<a class="social-link" href="https://bsky.app/profile/olivergiertz.bsky.social" target="_blank" rel="noopener" aria-label="Bluesky">🦋 Bluesky</a>
|
||||
<a class="social-link" href="https://x.com/olivergiertz" target="_blank" rel="noopener" aria-label="X">𝕏 Twitter</a>
|
||||
</div>
|
||||
<nav class="social" aria-label="Social-Media-Kanäle">
|
||||
<a class="social-link" href="https://go.vanityontour.de/blog" rel="noopener"><span aria-hidden="true">🌐</span> Website</a>
|
||||
<a class="social-link" href="https://go.vanityontour.de/git" rel="noopener"><span aria-hidden="true">🧑💻</span> Forgejo</a>
|
||||
<a class="social-link" href="https://go.vanityontour.de/github" rel="noopener"><span aria-hidden="true">💻</span> GitHub</a>
|
||||
<a class="social-link" href="https://go.vanityontour.de/instagram" rel="noopener"><span aria-hidden="true">📷</span> Instagram</a>
|
||||
<a class="social-link" href="https://go.vanityontour.de/bluesky" rel="noopener"><span aria-hidden="true">🦋</span> Bluesky</a>
|
||||
<a class="social-link" href="https://go.vanityontour.de/x" rel="noopener"><span aria-hidden="true">𝕏</span> Twitter</a>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
Für Kooperationen, Presse oder „Kannst du mal eben…?“<br />
|
||||
<a class="contact-mail" href="mailto:kontakt@vanityontour.de">kontakt@vanityontour.de</a>
|
||||
</p>
|
||||
<p class="fineprint">
|
||||
Fragen zu einer App? Dann direkt an
|
||||
<a href="mailto:app@vanityontour.de">app@vanityontour.de</a>.
|
||||
</p>
|
||||
<div style="height: 2rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -193,45 +242,66 @@
|
|||
<section id="faq" class="section alt">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>Mini‑FAQ</h2>
|
||||
<h2>Mini-FAQ</h2>
|
||||
<p>Damit niemand raten muss, was Sache ist.</p>
|
||||
</div>
|
||||
|
||||
<details class="faq">
|
||||
<summary>Was ist VanityCast?</summary>
|
||||
<div class="faq-body">
|
||||
<p>
|
||||
Eine Podcast-App für iPhone und CarPlay, die auf bewusstes Hören ausgelegt ist:
|
||||
smarte Inbox statt endloser Feed-Liste, Hörstatistiken, eigene Audio-Engine.
|
||||
Es gibt keinen Account und keine Registrierung.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<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>
|
||||
ohne Store-Download.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq">
|
||||
<summary>StaySense - Warum keine Spots?</summary>
|
||||
<summary>StaySense – 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.
|
||||
Fokus auf Standort-Infos statt „hier ist ein Spot“. Spots in der Nähe sind geplant –
|
||||
aber erst, wenn es sauber und sinnvoll umgesetzt ist.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq">
|
||||
<summary>Warum laufen die Links über go.vanityontour.de?</summary>
|
||||
<div class="faq-body">
|
||||
<p>
|
||||
Alle Weiterleitungen laufen über einen selbst gehosteten Kurzlink-Dienst auf dem
|
||||
eigenen Server. Kein Bitly, keine Weitergabe an Dritte – und Ziele bleiben
|
||||
änderbar, ohne dass ein gedruckter QR-Code neu gemacht werden muss.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-inner">
|
||||
<div>
|
||||
<p class="footer-brand">
|
||||
<strong>Oliver / Vanity on Tour</strong><br/>
|
||||
<span class="muted">Vanlife seit Jahren – Technik im Kopf, Staub an den Reifen.</span>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<div class="footer-links">
|
||||
<nav class="footer-links" aria-label="Rechtliches">
|
||||
<a href="https://vanityontour.de/impressum" target="_blank" rel="noopener">Impressum</a>
|
||||
<a href="https://vanityontour.de/datenschutz" target="_blank" rel="noopener">Datenschutz</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue