From 1b5762a8493da0ae6e161cb4972accaab09fe153 Mon Sep 17 00:00:00 2001 From: Oliver G Date: Tue, 24 Feb 2026 11:13:29 +0100 Subject: [PATCH] Initial commit: Vanity on Tour Linktree landing page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .claude/settings.local.json | 10 ++ .github/workflows/deploy.yml | 29 ++++ CNAME | 1 + CODEX_NOTES.md | 38 +++++ DOMAINS.md | 54 +++++++ README.md | 62 ++++++++ assets/css/style.css | 284 +++++++++++++++++++++++++++++++++++ assets/img/favicon.svg | 13 ++ assets/img/og.jpg | 2 + assets/img/van.svg | 7 + index.html | 264 ++++++++++++++++++++++++++++++++ 11 files changed, 764 insertions(+) create mode 100644 .claude/settings.local.json create mode 100644 .github/workflows/deploy.yml create mode 100644 CNAME create mode 100644 CODEX_NOTES.md create mode 100644 DOMAINS.md create mode 100644 README.md create mode 100644 assets/css/style.css create mode 100644 assets/img/favicon.svg create mode 100644 assets/img/og.jpg create mode 100644 assets/img/van.svg create mode 100644 index.html diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..56a3277 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,10 @@ +{ + "permissions": { + "allow": [ + "Bash(git init)", + "Bash(git add .)" + ], + "deny": [], + "ask": [] + } +} \ No newline at end of file diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..7bc177a --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,29 @@ +name: Deploy go.vanityontour.de + +on: + push: + branches: [ "main" ] + workflow_dispatch: + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Install rsync + run: sudo apt-get update && sudo apt-get install -y rsync + + - name: Setup SSH + shell: bash + run: | + mkdir -p ~/.ssh + echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519 + chmod 600 ~/.ssh/id_ed25519 + ssh-keyscan -p "${{ secrets.SSH_PORT }}" "${{ secrets.SSH_HOST }}" >> ~/.ssh/known_hosts + + - name: Deploy via rsync + shell: bash + run: | + rsync -az --delete --exclude ".git/" --exclude ".github/" -e "ssh -p ${{ secrets.SSH_PORT }} -i ~/.ssh/id_ed25519" ./ "${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.DEPLOY_PATH }}" diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..f02c111 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +go.vanityontour.de diff --git a/CODEX_NOTES.md b/CODEX_NOTES.md new file mode 100644 index 0000000..3ba75f8 --- /dev/null +++ b/CODEX_NOTES.md @@ -0,0 +1,38 @@ +# CODEX_NOTES.md – Deploy & Betrieb (Copy/Paste fĂŒr Codex) + +## Ziel +Statische Landingpage soll automatisch bei jedem Push auf `main` nach `go.vanityontour.de` deployed werden. + +## Repo-Struktur +- `index.html` +- `assets/css/style.css` +- `assets/img/*` +- `.github/workflows/deploy.yml` + +## Deployment-Mechanik +- GitHub Actions Workflow: + - Checkout Repo + - SSH-Key in Runner schreiben + - `rsync` der Dateien auf Server + - Optional: Berechtigungen setzen + +## GitHub Secrets (Actions) +- `SSH_HOST`: Hostname oder IP +- `SSH_USER`: SSH-User +- `SSH_PORT`: SSH-Port (default 22) +- `SSH_PRIVATE_KEY`: Private Key (PEM/OPENSSH) +- `DEPLOY_PATH`: Zielpfad auf dem Server (CloudPanel: `/home/cloudpanel/htdocs/go.vanityontour.de/`) + +## Server Anforderungen +- SSH aktiv +- `rsync` installiert +- Zielordner existiert und ist beschreibbar +- Webserver (Nginx/Apache) zeigt auf `DEPLOY_PATH` + +## DNS +- `go.vanityontour.de` → A/AAAA auf Server-IP +- SSL via Let's Encrypt (CloudPanel kann das) + +## Hinweise +- OpenGraph Bild: ersetze `assets/img/og.jpg` (1200x630) +- Links in `index.html` aktualisieren (App Store, GitHub Repo URLs, Social URLs) diff --git a/DOMAINS.md b/DOMAINS.md new file mode 100644 index 0000000..30ff252 --- /dev/null +++ b/DOMAINS.md @@ -0,0 +1,54 @@ +# Vanity on Tour – Domain Brainstorm + +## Ultra Kurz (Branding-Level) +- vot.one +- vot.zone +- vot.page +- vot.run +- vot.tools +- vot.live +- vot.link +- vot.bio +- vot.to +- vot.app + +## Mit Vanity im Fokus +- vanitygo.de +- vanityhub.de +- vanity.tools +- vanity.live +- vanity.page +- vanity.bio +- vanity.click +- vanity-now.de +- vanity.app +- vanity.run + +## Vanlife + Tech Touch +- vanitytech.de +- vantech.life +- vanity.dev +- vanity.tools +- vot.dev +- vanity.digital +- vanity.systems +- vanity.space +- vanity.network +- vot.systems + +## Persönlicher Ansatz +- olivergo.de +- go-oliver.de +- giertz.link +- giertz.tech +- giertz.dev + +--- + +## Empfohlene Favoriten + +1. vot.to +2. vanity.link +3. vot.app +4. vanity.tools +5. go.vanityontour.de diff --git a/README.md b/README.md new file mode 100644 index 0000000..b0a2fca --- /dev/null +++ b/README.md @@ -0,0 +1,62 @@ +# go.vanityontour.de – Static Landing + +Diese Seite ist **komplett statisch** (HTML/CSS). Kein Build-Step, kein Node, kein Stress. + +## Lokal testen +Einfach den Ordner öffnen – oder z.B. mit Python: + +```bash +python3 -m http.server 8080 +``` + +Dann im Browser: http://localhost:8080 + +## Links anpassen +In `index.html` sind ein paar **Platzhalter-Links** (z.B. GitHub Repo / App-Store). Ersetze sie durch deine echten URLs. + +--- + +# Deployment via GitHub Actions (SSH + rsync) + +Die Workflow-Datei liegt hier: +`.github/workflows/deploy.yml` + +## Voraussetzungen auf dem Server +- SSH-Zugriff +- Zielverzeichnis existiert (z.B. CloudPanel): + - `/home/cloudpanel/htdocs/go.vanityontour.de/` (hĂ€ufig) + - oder dein eigener Pfad + +- `rsync` installiert: + - Debian/Ubuntu: `sudo apt-get update && sudo apt-get install -y rsync` + +## GitHub Secrets anlegen (Repo → Settings → Secrets and variables → Actions) +- `SSH_HOST` (z.B. `your-server.example`) +- `SSH_USER` (z.B. `root` oder `cloudpanel`) +- `SSH_PORT` (z.B. `22`) +- `SSH_PRIVATE_KEY` (private key fĂŒr den Deploy-User) +- `DEPLOY_PATH` (z.B. `/home/cloudpanel/htdocs/go.vanityontour.de/`) + +## DNS (go.vanityontour.de) +Setze einen **A-Record** (oder AAAA) auf die Server-IP. +Alternativ ein CNAME auf eine passende Ziel-Subdomain, wenn du das so betreibst. + +## Nginx (Beispiel) +Wenn du Nginx selbst konfigurierst: + +```nginx +server { + server_name go.vanityontour.de; + root /home/cloudpanel/htdocs/go.vanityontour.de; + index index.html; + + location / { + try_files $uri $uri/ =404; + } +} +``` + +Danach: +```bash +sudo nginx -t && sudo systemctl reload nginx +``` diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..d2f65bb --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,284 @@ +:root{ + --bg:#0b0f14; + --panel:#0f1720; + --panel2:#0c141c; + --text:#e9eef6; + --muted:#a8b3c2; + --line:rgba(255,255,255,.10); + --accent:#ff9b54; + --accent2:#ffd29a; + --shadow: 0 18px 60px rgba(0,0,0,.45); + --radius:18px; + --max:1100px; + --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; +} + +*{ box-sizing:border-box; } +html,body{ height:100%; } +body{ + margin:0; + font-family:var(--font); + background: radial-gradient(1200px 700px at 20% -10%, rgba(255,155,84,.18), transparent 65%), + radial-gradient(900px 600px at 85% 5%, rgba(255,210,154,.12), transparent 60%), + var(--bg); + color:var(--text); + line-height:1.55; +} + +a{ color:inherit; text-decoration:none; } +a:hover{ text-decoration:underline; } + +.container{ + width: min(var(--max), calc(100% - 40px)); + margin: 0 auto; +} + +.skip{ + position:absolute; left:-999px; top:auto; + width:1px; height:1px; overflow:hidden; +} +.skip:focus{ + left:20px; top:16px; width:auto; height:auto; + padding:10px 14px; border-radius:10px; + background:var(--panel); border:1px solid var(--line); + z-index:999; +} + +.site-header{ + position:sticky; top:0; z-index:50; + background: rgba(11,15,20,.75); + backdrop-filter: blur(10px); + border-bottom:1px solid var(--line); +} +.header-inner{ + display:flex; + justify-content:space-between; + align-items:center; + padding: 14px 0; + gap:16px; +} + +.brand{ display:flex; align-items:center; gap:12px; } +.brand-mark{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); } +.brand-title{ font-weight:800; letter-spacing:.2px; } +.brand-sub{ font-size:.92rem; color:var(--muted); } + +.top-nav{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; } +.nav-link{ + padding:8px 10px; + border-radius:10px; + border:1px solid transparent; + color:var(--muted); +} +.nav-link:hover{ + text-decoration:none; + color:var(--text); + border-color: var(--line); + background: rgba(255,255,255,.03); +} + +.hero{ padding: 56px 0 36px; } +.hero-inner{ + display:grid; + grid-template-columns: 1.2fr .8fr; + gap: 28px; + align-items:center; +} +.kicker{ + display:inline-block; + padding:6px 10px; + border-radius:999px; + border:1px solid var(--line); + background: rgba(255,255,255,.03); + color:var(--muted); + margin:0 0 14px; +} +h1{ + margin:0 0 14px; + font-size: clamp(2.0rem, 3.4vw, 3.2rem); + line-height:1.1; + letter-spacing:-.6px; +} +.accent{ color: var(--accent2); } +.lead{ + margin:0 0 18px; + color:var(--muted); + max-width: 52ch; +} + +.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; } +.btn{ + display:inline-flex; align-items:center; justify-content:center; + padding: 11px 14px; + border-radius: 12px; + border:1px solid var(--line); + background: rgba(255,255,255,.03); + box-shadow: 0 0 0 rgba(0,0,0,0); + font-weight:700; + transition: transform .12s ease, background .12s ease, border-color .12s ease; + white-space:nowrap; +} +.btn:hover{ text-decoration:none; transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); } +.btn.primary{ + border-color: rgba(255,155,84,.55); + background: linear-gradient(180deg, rgba(255,155,84,.28), rgba(255,155,84,.10)); +} +.btn.ghost{ color:var(--text); } + +.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; } +.badge{ + font-size:.88rem; + padding:6px 10px; + border-radius:999px; + border:1px solid var(--line); + color:var(--muted); + background: rgba(255,255,255,.02); +} + +.hero-art{ + color: var(--accent); + background: linear-gradient(180deg, rgba(255,155,84,.16), rgba(255,155,84,.05)); + border: 1px solid rgba(255,255,255,.10); + border-radius: var(--radius); + box-shadow: var(--shadow); + padding: 14px; +} +.hero-art svg{ width:100%; height:auto; display:block; } + +.section{ padding: 44px 0; } +.section.alt{ + background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); +} +.section-head h2{ + margin:0 0 6px; + font-size: 1.6rem; + letter-spacing:-.2px; +} +.section-head p{ margin:0 0 18px; color:var(--muted); } + +.grid{ + display:grid; + grid-template-columns: repeat(2, minmax(0,1fr)); + gap: 16px; +} +.card{ + border-radius: var(--radius); + background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); + border:1px solid var(--line); + box-shadow: 0 10px 40px rgba(0,0,0,.25); + padding: 18px; + display:flex; + flex-direction:column; + justify-content:space-between; + min-height: 210px; +} +.card h3{ margin:8px 0 10px; font-size:1.25rem; } +.card p{ margin:0 0 14px; color:var(--muted); } + +.card-actions{ display:flex; gap:10px; flex-wrap:wrap; } +.pill{ + display:inline-flex; + align-items:center; + justify-content:center; + padding: 5px 10px; + border-radius: 999px; + background: rgba(255,155,84,.18); + border:1px solid rgba(255,155,84,.35); + font-size:.85rem; + font-weight:800; + color: var(--accent2); +} +.pill.subtle{ + background: rgba(255,255,255,.05); + border-color: var(--line); + color: var(--muted); +} + +.note{ + margin-top: 16px; + padding: 14px 16px; + border-radius: 14px; + border:1px dashed rgba(255,255,255,.18); + background: rgba(255,255,255,.02); + color: var(--muted); +} + +.split{ + display:flex; + align-items:center; + justify-content:space-between; + gap: 18px; + flex-wrap:wrap; +} +.support-actions{ display:flex; gap:10px; flex-wrap:wrap; } + +.social{ + display:flex; + gap:10px; + flex-wrap:wrap; + margin-bottom: 18px; +} +.social-link{ + border:1px solid var(--line); + background: rgba(255,255,255,.03); + padding: 10px 12px; + border-radius: 12px; + color: var(--text); +} +.social-link:hover{ text-decoration:none; transform: translateY(-1px); } + +.contact{ + border-radius: var(--radius); + border:1px solid var(--line); + background: rgba(255,255,255,.02); + padding: 16px; +} +.contact h3{ margin:0 0 8px; } +.fineprint{ margin:10px 0 0; color:var(--muted); font-size:.92rem; } + +.faq{ + border-radius: var(--radius); + border:1px solid var(--line); + background: rgba(255,255,255,.02); + padding: 12px 14px; + margin: 10px 0; +} +.faq summary{ + cursor:pointer; + font-weight:800; +} +.faq-body{ color:var(--muted); padding-top: 10px; } +code{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: .95em; + background: rgba(255,255,255,.06); + border: 1px solid var(--line); + padding: 2px 6px; + border-radius: 8px; +} + +.site-footer{ + padding: 22px 0; + border-top:1px solid var(--line); + color: var(--muted); +} +.footer-inner{ + display:flex; + justify-content:space-between; + align-items:flex-start; + gap: 12px; + flex-wrap:wrap; +} +.footer-links{ display:flex; gap:12px; flex-wrap:wrap; } +.footer-links a{ color: var(--muted); } +.footer-links a:hover{ color: var(--text); text-decoration:none; } + +.muted{ color: var(--muted); } + +@media (max-width: 900px){ + .hero-inner{ grid-template-columns: 1fr; } + .hero-art{ order: -1; } + .grid{ grid-template-columns: 1fr; } +} diff --git a/assets/img/favicon.svg b/assets/img/favicon.svg new file mode 100644 index 0000000..54d6438 --- /dev/null +++ b/assets/img/favicon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/img/og.jpg b/assets/img/og.jpg new file mode 100644 index 0000000..c0cb4d9 --- /dev/null +++ b/assets/img/og.jpg @@ -0,0 +1,2 @@ +This is a placeholder file. Replace it with a real OpenGraph image (recommended: 1200x630 JPG/PNG) at: +assets/img/og.jpg diff --git a/assets/img/van.svg b/assets/img/van.svg new file mode 100644 index 0000000..4150db4 --- /dev/null +++ b/assets/img/van.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf868d9 --- /dev/null +++ b/index.html @@ -0,0 +1,264 @@ + + + + + + + Vanity on Tour – Go + + + + + + + + + + + + + + + +
+
+
+ +
+
Vanity on Tour
+
Vanlife trifft Technik
+
+
+ + +
+
+ +
+
+
+
+

🚐 unterwegs. technisch. ehrlich.

+

Alles Wichtige von Vanity on Tour – an einem Ort.

+

+ Tools, Apps, Blog & Projekte – fĂŒr Menschen, die lieber frei stehen als still sitzen. +

+ +
+ Aktuelle Projekte + Zum Blog +
+ +
+ Schnell + Mobile‑first + DSGVO‑freundlich +
+
+ + +
+
+ +
+
+
+

Projekte

+

Das Zeug, das wirklich klickt. (Und hoffentlich dein Vanlife leichter macht.)

+
+ +
+
+
+ Neu +

StaySense

+

+ Standort-Infos fĂŒr Camper: Wetter‑Kontext, Umgebung & nĂŒtzliche Hinweise – + direkt im Browser. Spots in der NĂ€he sind geplant (2026). +

+
+
+ StaySense öffnen + Was kann das? +
+
+ +
+
+ App +

Vanity Expense Logbook

+

+ Ausgaben & Fahrten im Griff – fĂŒrs Leben unterwegs. + Ideal, wenn du wissen willst, wohin dein Geld fĂ€hrt. +

+
+
+ Mehr erfahren + Feedback geben +
+
+ +
+
+ Blog +

Vanity on Tour

+

+ Produkttests, Stellplatz‑Tests, Technik‑Kram und gesellschaftliche Themen – + ohne Marketing-Zuckerguss. +

+
+
+ Zum Blog + Neueste Artikel +
+
+ +
+
+ Tooling +

RSS‑News‑Bot

+

+ Automatisches Einlesen, Umformulieren, Tagging & EntwĂŒrfe fĂŒr WordPress – + fĂŒr News ohne Copy‑Paste‑Marathon. +

+
+
+ GitHub (Repo) + Wie lÀuft das? +
+
+
+ +
+ Tipp: Ersetze „Mehr erfahren“ / „GitHub (Repo)“ durch deine finalen Links (App‑Store, Repo‑URL etc.). +
+
+
+ +
+
+
+

Support

+

+ Wenn dir meine Tools, Tests oder Artikel helfen: Ein kleiner Support ist wie ein + Monster Energy – nicht zwingend gesund, aber sehr effektiv. 😄 +

+
+
+ Support-Seite öffnen + Kooperation anfragen +
+
+
+ +
+
+
+

Social & Kontakt

+

Such dir den Kanal aus – ich bin nicht wĂ€hlerisch.

+
+ + + +
+

Kontakt

+

+ FĂŒr Kooperationen, Presse oder „Kannst du mal eben
?“ +
+ kontakt@vanityontour.de +

+

+ Hinweis: Diese Seite ist bewusst statisch & leichtgewichtig. Tracking nur, wenn du es aktiv einbaust. +

+
+
+
+ +
+
+
+

Mini‑FAQ

+

Damit niemand raten muss, was Sache ist.

+
+ +
+ Ist StaySense eine App? +
+

+ Eher eine Website, die sich wie eine App anfĂŒhlt. Du kannst sie ĂŒberall nutzen – + ohne Store‑Download: staysense.vanityontour.de +

+
+
+ +
+ Warum keine Spots? +
+

+ Fokus auf Standort‑Infos statt „hier ist ein Spot“. Spots in der NĂ€he sind geplant – + aber erst, wenn es sauber & sinnvoll umgesetzt ist. +

+
+
+ +
+ Kann ich das Layout schnell anpassen? +
+

+ Ja: Links & Texte findest du in index.html. Styling in assets/css/style.css. + Kein Build‑Step, kein Framework, kein Drama. +

+
+
+
+
+
+ + + +