2026-04-11 21:48:34 +00:00
<!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 | MiyaKarate< / 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 >
2026-04-12 23:24:27 +00:00
{{ $um := .Site.Data.uebermich }}
2026-04-11 21:48:34 +00:00
< 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 = "/" class = "text-2xl font-black text-pink-600 dark:text-pink-400 italic font-headline tracking-tight uppercase" > MiyaKarate< / 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" >
2026-04-12 23:24:27 +00:00
< span class = "text-primary font-bold tracking-[0.2em] uppercase text-sm mb-4 block" > {{ $um.hero.badge }}< / span >
2026-04-11 21:48:34 +00:00
< h1 class = "text-6xl md:text-8xl font-headline font-extrabold text-on-surface leading-[0.9] tracking-tighter mb-8" >
2026-04-12 23:24:27 +00:00
{{ $um.hero.heading_line1 }} < span class = "text-glass-gradient" > {{ $um.hero.heading_line2 }}< / span > {{ $um.hero.heading_suffix }}
2026-04-11 21:48:34 +00:00
< / h1 >
< p class = "text-xl text-on-surface-variant leading-relaxed max-w-xl" >
2026-04-12 23:24:27 +00:00
{{ $um.hero.description }}
2026-04-11 21:48:34 +00:00
< / p >
< / div >
< div class = "lg:col-span-5 relative" >
< div class = "aspect-[4/5] rounded-xl overflow-hidden editorial-shadow bg-surface-container-highest" >
2026-04-12 23:24:27 +00:00
{{ if $um.hero.image }}
< img class = "w-full h-full object-cover" src = "/uebermich/{{ $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 }}
2026-04-11 21:48:34 +00:00
< / 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 >
2026-04-12 23:24:27 +00:00
< 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 >
2026-04-11 21:48:34 +00:00
< / 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 >
2026-04-12 23:24:27 +00:00
< 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 >
2026-04-11 21:48:34 +00:00
< / 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" >
2026-04-12 23:24:27 +00:00
{{ range $um.gurtweg.gurte }}
{{ $aktiv := eq .name $um.gurtweg.aktiver_gurt }}
< div class = "flex flex-col items-center gap-4 {{ 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 " Grün " } } opacity-50 { { else } } opacity-40 { { end } } { { end } } " >
< div class = "w-24 {{ if $aktiv }}h-6 shadow-lg ring-4 ring-primary/20{{ else }}h-4{{ end }} {{ .farbe }} rounded-full" > < / div >
< span class = "font-bold text-xs uppercase tracking-tighter {{ if $aktiv }}text-primary{{ end }}" > {{ .name }}{{ if $aktiv }} ✓{{ end }}< / span >
2026-04-11 21:48:34 +00:00
< / div >
2026-04-12 23:24:27 +00:00
{{ end }}
2026-04-11 21:48:34 +00:00
< / div >
< / div >
< / section >
2026-04-12 23:24:27 +00:00
<!-- Meilensteine -->
2026-04-11 21:48:34 +00:00
< 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" >
2026-04-12 23:24:27 +00:00
<!-- Haupterfolg -->
2026-04-11 21:48:34 +00:00
< 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 >
2026-04-12 23:24:27 +00:00
< span id = "he-titel" class = "font-headline font-extrabold text-2xl uppercase italic" > {{ $um.haupterfolg.titel }}< / span >
2026-04-11 21:48:34 +00:00
< / div >
2026-04-12 23:24:27 +00:00
< 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 >
2026-04-11 21:48:34 +00:00
< / div >
< div class = "mt-12 flex items-center gap-6 relative z-10" >
< div class = "text-left" >
2026-04-12 23:24:27 +00:00
< 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 >
2026-04-11 21:48:34 +00:00
< / div >
< div class = "h-10 w-[1px] bg-outline-variant/30" > < / div >
< div class = "text-left" >
2026-04-12 23:24:27 +00:00
< div id = "he-kat" class = "text-3xl font-black text-on-surface" > {{ $um.haupterfolg.kategorie }}< / div >
2026-04-11 21:48:34 +00:00
< 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 >
2026-04-12 23:24:27 +00:00
<!-- Weitere Erfolge -->
2026-04-11 21:48:34 +00:00
< 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 >
2026-04-12 23:24:27 +00:00
{{ $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 }}">
2026-04-11 21:48:34 +00:00
< div class = "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center shrink-0" >
2026-04-12 23:24:27 +00:00
< span class = "material-symbols-outlined text-xl" > {{ index $icons $i }}< / span >
2026-04-11 21:48:34 +00:00
< / div >
< div >
2026-04-12 23:24:27 +00:00
< p class = "font-bold" > {{ $e.titel }}< / p >
< p class = "text-sm opacity-80" > {{ $e.detail }}< / p >
2026-04-11 21:48:34 +00:00
< / div >
< / div >
2026-04-12 23:24:27 +00:00
{{ end }}
2026-04-11 21:48:34 +00:00
< / div >
<!-- Stats -->
2026-04-12 23:24:27 +00:00
{{ range $i, $s := $um.stats }}
{{ if eq $i 0 }}
2026-04-11 21:48:34 +00:00
< div class = "bg-secondary-container rounded-xl p-8 flex flex-col justify-center gap-2" >
2026-04-12 23:24:27 +00:00
< 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 >
2026-04-11 21:48:34 +00:00
< / div >
2026-04-12 23:24:27 +00:00
{{ else if eq $i 1 }}
2026-04-11 21:48:34 +00:00
< div class = "bg-surface-container-highest rounded-xl p-8 flex flex-col justify-center gap-2" >
2026-04-12 23:24:27 +00:00
< 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 >
2026-04-11 21:48:34 +00:00
< / div >
2026-04-12 23:24:27 +00:00
{{ else }}
2026-04-11 21:48:34 +00:00
< div class = "bg-white rounded-xl p-8 editorial-shadow flex flex-col justify-center gap-2 border-t-4 border-pink-500" >
2026-04-12 23:24:27 +00:00
< 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 >
2026-04-11 21:48:34 +00:00
< / div >
2026-04-12 23:24:27 +00:00
{{ end }}
{{ end }}
2026-04-11 21:48:34 +00:00
< / 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" >
2026-04-12 23:24:27 +00:00
"{{ $um.zitat.text }}"
2026-04-11 21:48:34 +00:00
< / blockquote >
2026-04-12 23:24:27 +00:00
< p class = "mt-8 font-bold uppercase tracking-widest text-on-surface-variant" > — {{ $um.zitat.autor }}< / p >
2026-04-11 21:48:34 +00:00
< / 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" >
< div class = "text-lg font-bold text-zinc-900 dark:text-zinc-100 font-headline uppercase italic" > MiyaKarate< / 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 = "#" > Instagram< / a >
< a class = "hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity" href = "#" > YouTube< / a >
< a class = "hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity" href = "#" > Email< / a >
< / div >
< div class = "text-zinc-500 opacity-80" > © 2024 MiyaKarate. Alle Rechte vorbehalten.< / div >
< / div >
< / footer >
2026-04-12 23:24:27 +00:00
< 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 >
2026-04-11 21:48:34 +00:00
< / body >
< / html >
