mirror of
https://github.com/superschnups/Emy.git
synced 2026-06-22 03:13:10 +00:00
280 lines
16 KiB
HTML
280 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html class="scroll-smooth" lang="de">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Über mich | {{ .Site.Data.homepage.siteTitle | default .Site.Title }}</title>
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"tertiary-container": "#ffffff", "surface-bright": "#f5f6f7",
|
|
"on-tertiary-container": "#636262", "error-dim": "#a70138",
|
|
"on-surface-variant": "#595c5d", "surface-tint": "#b30065",
|
|
"surface-container-highest": "#dadddf", "on-secondary-fixed-variant": "#7d21a4",
|
|
"inverse-on-surface": "#9b9d9e", "inverse-surface": "#0c0f10",
|
|
"surface-container": "#e6e8ea", "surface": "#f5f6f7",
|
|
"primary-fixed": "#ff6ea9", "surface-container-low": "#eff1f2",
|
|
"secondary": "#8930b0", "tertiary": "#5c5b5b",
|
|
"on-secondary": "#ffedff", "secondary-dim": "#7c20a3",
|
|
"secondary-container": "#f0c1ff", "surface-dim": "#d1d5d7",
|
|
"primary": "#b30065", "on-primary-fixed": "#000000",
|
|
"surface-container-high": "#e0e3e4", "primary-fixed-dim": "#ff4e9e",
|
|
"primary-dim": "#9d0058", "outline": "#757778",
|
|
"error": "#b41340", "outline-variant": "#abadae",
|
|
"secondary-fixed": "#f0c1ff", "secondary-fixed-dim": "#eaaeff",
|
|
"tertiary-fixed-dim": "#f3f0ef", "on-surface": "#2c2f30",
|
|
"on-tertiary-fixed-variant": "#6e6d6d", "on-tertiary": "#f5f2f1",
|
|
"tertiary-fixed": "#ffffff", "background": "#f5f6f7",
|
|
"on-primary": "#ffeff2", "surface-container-lowest": "#ffffff",
|
|
"inverse-primary": "#ff479c", "primary-container": "#ff6ea9",
|
|
"on-primary-fixed-variant": "#5c0031", "on-secondary-container": "#72129a",
|
|
"error-container": "#f74b6d", "surface-variant": "#dadddf",
|
|
"on-background": "#2c2f30", "on-error": "#ffefef",
|
|
"on-tertiary-fixed": "#515050", "tertiary-dim": "#504f4f",
|
|
"on-primary-container": "#4b0027", "on-secondary-fixed": "#580079",
|
|
"on-error-container": "#510017"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Lexend"], "body": ["Be Vietnam Pro"], "label": ["Be Vietnam Pro"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
|
.text-glass-gradient {
|
|
background: linear-gradient(135deg, #b30065, #ff6ea9);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.editorial-shadow { box-shadow: 0 24px 40px -10px rgba(44, 47, 48, 0.06); }
|
|
</style>
|
|
</head>
|
|
{{ $um := .Site.Data.uebermich }}
|
|
<body class="bg-surface font-body text-on-surface">
|
|
|
|
<!-- TopAppBar -->
|
|
<header class="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-lg fixed top-0 left-0 w-full z-50 shadow-xl shadow-pink-500/5">
|
|
<div class="flex justify-between items-center h-20 px-6 md:px-12 max-w-screen-2xl mx-auto">
|
|
<a href="{{ "/" | relURL }}" class="flex items-center gap-3 text-2xl font-black text-pink-600 dark:text-pink-400 italic font-headline tracking-tight uppercase group hover:opacity-80 transition-opacity">
|
|
<span>{{ .Site.Data.homepage.siteTitle | default .Site.Title }}</span>
|
|
</a>
|
|
<nav class="hidden md:flex items-center space-x-8 font-headline tracking-tight uppercase font-bold">
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/">Home</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/galerie/">Galerie</a>
|
|
<a class="text-pink-600 dark:text-pink-400 border-b-2 border-pink-500 pb-1" href="/uebermich/">Über mich</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/erfolge/">Erfolge</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/gaestebuch/">Gästebuch</a>
|
|
</nav>
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-3 rounded-xl font-bold font-headline uppercase tracking-wider scale-95 active:scale-90 transition-transform">
|
|
Kontakt
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="pt-32 pb-20">
|
|
<!-- Hero -->
|
|
<section class="max-w-7xl mx-auto px-6 mb-24">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
<div class="lg:col-span-7">
|
|
<span class="text-primary font-bold tracking-[0.2em] uppercase text-sm mb-4 block">{{ $um.hero.badge }}</span>
|
|
<h1 class="text-6xl md:text-8xl font-headline font-extrabold text-on-surface leading-[0.9] tracking-tighter mb-8">
|
|
{{ $um.hero.heading_line1 }} <span class="text-glass-gradient">{{ $um.hero.heading_line2 }}</span> {{ $um.hero.heading_suffix }}
|
|
</h1>
|
|
<p class="text-xl text-on-surface-variant leading-relaxed max-w-xl">
|
|
{{ $um.hero.description }}
|
|
</p>
|
|
</div>
|
|
<div class="lg:col-span-5 relative">
|
|
<div class="aspect-[4/5] rounded-xl overflow-hidden editorial-shadow bg-surface-container-highest">
|
|
{{ if $um.hero.image }}
|
|
<img class="w-full h-full object-cover" src="/uebermich-img/{{ $um.hero.image }}" alt="{{ $um.hero.image_alt }}"/>
|
|
{{ else }}
|
|
<div class="w-full h-full flex items-center justify-center text-on-surface-variant text-sm">Kein Bild hochgeladen</div>
|
|
{{ end }}
|
|
</div>
|
|
<div class="absolute -bottom-10 -left-10 bg-white p-8 rounded-lg editorial-shadow hidden md:block">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-full bg-secondary flex items-center justify-center text-on-secondary">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-bold uppercase tracking-widest text-secondary">{{ $um.hero.rang_label }}</div>
|
|
<div class="text-2xl font-headline font-black text-on-surface">{{ $um.hero.rang_value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gürtel-Fortschritt -->
|
|
<section class="bg-surface-container-low py-24 rounded-t-[5rem]">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
|
<div>
|
|
<h2 class="text-4xl font-headline font-bold text-on-surface mb-2">{{ $um.gurtweg.title }}</h2>
|
|
<p class="text-on-surface-variant">{{ $um.gurtweg.subtitle }}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<span class="px-4 py-2 bg-secondary text-on-secondary rounded-full text-xs font-bold uppercase tracking-widest">Aktiver Status</span>
|
|
<span class="px-4 py-2 bg-surface-container-highest text-on-surface-variant rounded-full text-xs font-bold uppercase tracking-widest">Wettkampf-Athletin</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap justify-between gap-4">
|
|
{{ range $um.gurtweg.gurte }}
|
|
{{ $aktiv := eq .name $um.gurtweg.aktiver_gurt }}
|
|
<div class="group relative flex flex-col items-center gap-4 cursor-pointer {{ if not $aktiv }}{{ if eq .name "Schwarz" }}opacity-10{{ else if eq .name "Braun" }}opacity-20{{ else if eq .name "Lila" }}opacity-30{{ else if eq .name "Blau" }}opacity-40{{ else }}opacity-70{{ end }}{{ end }} hover:!opacity-100 transition-all duration-300">
|
|
<div class="w-24 {{ if $aktiv }}h-6 shadow-[0_0_20px_rgba(16,185,129,0.5)] ring-4 ring-belt-green/30{{ else }}h-4{{ end }} {{ .farbe }} rounded-full transition-transform duration-300 group-hover:scale-110"></div>
|
|
<span class="font-bold text-xs uppercase tracking-tighter transition-colors {{ if $aktiv }}text-primary drop-shadow-[0_0_10px_rgba(179,0,101,0.5)]{{ else }}group-hover:text-primary{{ end }}">{{ .name }}{{ if $aktiv }} ✓{{ end }}</span>
|
|
|
|
<!-- Tooltip Popup -->
|
|
<div class="absolute bottom-full mb-4 w-56 p-4 bg-zinc-900/95 dark:bg-white/95 backdrop-blur-md text-white dark:text-zinc-900 text-xs rounded-2xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-20 pointer-events-none scale-90 group-hover:scale-100 origin-bottom border border-white/10 dark:border-black/10">
|
|
<div class="font-headline font-bold text-sm mb-2 text-primary">{{ .name }}-Gürtel</div>
|
|
<div class="opacity-90 leading-relaxed">{{ .geschichte }}</div>
|
|
<!-- Popup Pfeil -->
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 border-[6px] border-transparent border-t-zinc-900/95 dark:border-t-white/95"></div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Meilensteine -->
|
|
<section class="max-w-7xl mx-auto px-6 mt-24">
|
|
<h2 class="text-5xl font-headline font-black mb-16 tracking-tight">MEILENSTEINE DES <span class="text-primary italic">ERFOLGS</span></h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Haupterfolg -->
|
|
<div class="md:col-span-2 bg-surface-container-lowest rounded-xl p-10 editorial-shadow flex flex-col justify-between relative overflow-hidden group">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<span class="material-symbols-outlined text-4xl text-primary" style="font-variation-settings: 'FILL' 1;">military_tech</span>
|
|
<span id="he-titel" class="font-headline font-extrabold text-2xl uppercase italic">{{ $um.haupterfolg.titel }}</span>
|
|
</div>
|
|
<h3 id="he-platz" class="text-4xl font-headline font-bold text-on-surface mb-4">{{ $um.haupterfolg.platz }}</h3>
|
|
<p id="he-desc" class="text-on-surface-variant max-w-md text-lg">{{ $um.haupterfolg.beschreibung }}</p>
|
|
</div>
|
|
<div class="mt-12 flex items-center gap-6 relative z-10">
|
|
<div class="text-left">
|
|
<div id="he-jahr" class="text-3xl font-black text-on-surface">{{ $um.haupterfolg.jahr }}</div>
|
|
<div id="he-ort" class="text-xs uppercase tracking-widest font-bold text-primary">{{ $um.haupterfolg.ort }}</div>
|
|
</div>
|
|
<div class="h-10 w-[1px] bg-outline-variant/30"></div>
|
|
<div class="text-left">
|
|
<div id="he-kat" class="text-3xl font-black text-on-surface">{{ $um.haupterfolg.kategorie }}</div>
|
|
<div class="text-xs uppercase tracking-widest font-bold text-primary">Kategorie</div>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined absolute -bottom-10 -right-10 text-[15rem] text-surface-container opacity-20 group-hover:opacity-30 transition-opacity">sports_martial_arts</span>
|
|
</div>
|
|
|
|
<!-- Weitere Erfolge -->
|
|
<div class="bg-primary rounded-xl p-8 text-on-primary flex flex-col gap-8 shadow-2xl shadow-primary/20">
|
|
<h4 class="font-headline font-bold text-xl border-b border-on-primary/20 pb-4">Weitere Erfolge</h4>
|
|
{{ $icons := slice "star" "emoji_events" "rewarded_ads" "military_tech" "workspace_premium" }}
|
|
{{ range $i, $e := $um.weitere_erfolge }}
|
|
<div class="weitere-erfolg-item flex gap-4 cursor-pointer rounded-lg p-2 -m-2 hover:bg-white/10 transition-all active:scale-95"
|
|
data-titel="{{ $e.titel }}"
|
|
data-detail="{{ $e.detail }}"
|
|
data-beschreibung="{{ $e.beschreibung }}"
|
|
data-jahr="{{ $e.jahr }}"
|
|
data-ort="{{ $e.ort }}"
|
|
data-kategorie="{{ $e.kategorie }}">
|
|
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center shrink-0">
|
|
<span class="material-symbols-outlined text-xl">{{ index $icons $i }}</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">{{ $e.titel }}</p>
|
|
<p class="text-sm opacity-80">{{ $e.detail }}</p>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
{{ range $i, $s := $um.stats }}
|
|
{{ if eq $i 0 }}
|
|
<div class="bg-secondary-container rounded-xl p-8 flex flex-col justify-center gap-2">
|
|
<span class="text-on-secondary-container font-headline font-black text-6xl italic">{{ $s.wert }}</span>
|
|
<span class="text-secondary font-bold uppercase tracking-[0.2em] text-sm">{{ $s.label }}</span>
|
|
</div>
|
|
{{ else if eq $i 1 }}
|
|
<div class="bg-surface-container-highest rounded-xl p-8 flex flex-col justify-center gap-2">
|
|
<span class="text-on-surface font-headline font-black text-6xl italic">{{ $s.wert }}</span>
|
|
<span class="text-on-surface-variant font-bold uppercase tracking-[0.2em] text-sm">{{ $s.label }}</span>
|
|
</div>
|
|
{{ else }}
|
|
<div class="bg-white rounded-xl p-8 editorial-shadow flex flex-col justify-center gap-2 border-t-4 border-pink-500">
|
|
<span class="text-pink-600 font-headline font-black text-6xl italic">{{ $s.wert }}</span>
|
|
<span class="text-zinc-500 font-bold uppercase tracking-[0.2em] text-sm">{{ $s.label }}</span>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Zitat -->
|
|
<section class="max-w-4xl mx-auto px-6 py-32 text-center">
|
|
<span class="material-symbols-outlined text-primary text-6xl mb-8" style="font-variation-settings: 'FILL' 1;">format_quote</span>
|
|
<blockquote class="text-3xl md:text-5xl font-headline font-bold text-on-surface leading-tight tracking-tight italic">
|
|
"{{ $um.zitat.text }}"
|
|
</blockquote>
|
|
<p class="mt-8 font-bold uppercase tracking-widest text-on-surface-variant">— {{ $um.zitat.autor }}</p>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-zinc-50 dark:bg-zinc-950 w-full rounded-t-[3rem] mt-20">
|
|
<div class="flex flex-col md:flex-row justify-between items-center py-12 px-8 max-w-7xl mx-auto gap-6 text-sm tracking-wide">
|
|
{{ $social := .Site.Data.global.social }}
|
|
<div class="text-lg font-bold text-zinc-900 dark:text-zinc-100 font-headline uppercase italic">{{ .Site.Data.homepage.siteTitle | default .Site.Title }}</div>
|
|
<div class="flex gap-8 text-zinc-500">
|
|
<a class="hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity" href="{{ $social.instagram }}">Instagram</a>
|
|
<a class="hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity" href="{{ $social.youtube }}">YouTube</a>
|
|
<a class="hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity" href="mailto:{{ $social.email }}">Email</a>
|
|
</div>
|
|
<div class="text-zinc-500 opacity-80">© 2024 {{ .Site.Data.homepage.siteTitle | default .Site.Title }}. Alle Rechte vorbehalten.</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.querySelectorAll('.weitere-erfolg-item').forEach(function(item) {
|
|
item.addEventListener('click', function() {
|
|
const titel = this.dataset.titel;
|
|
const detail = this.dataset.detail;
|
|
const beschreibung = this.dataset.beschreibung || '';
|
|
const jahr = this.dataset.jahr || '';
|
|
const ort = this.dataset.ort || '';
|
|
const kategorie = this.dataset.kategorie || '';
|
|
|
|
// Hauptkarte tauschen
|
|
document.getElementById('he-titel').textContent = titel;
|
|
document.getElementById('he-platz').textContent = detail;
|
|
document.getElementById('he-desc').textContent = beschreibung;
|
|
document.getElementById('he-jahr').textContent = jahr;
|
|
document.getElementById('he-ort').textContent = ort;
|
|
document.getElementById('he-kat').textContent = kategorie;
|
|
|
|
// Aktives Item hervorheben
|
|
document.querySelectorAll('.weitere-erfolg-item').forEach(function(el) {
|
|
el.classList.remove('bg-white/20', 'ring-2', 'ring-white/40');
|
|
});
|
|
this.classList.add('bg-white/20', 'ring-2', 'ring-white/40');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|