DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d6e75ce56ac667e73ee99449bcf181c3ecaa0b31
dogfather-universe/webdesign/portfolio.html
T
DogFatherGitandClaude Opus 5 d6e75ce56a Kacheln: Licht folgt dem Zeiger, Rand glueht mit 
"ich will das die kacheln richtig speziell sind und modern ... dass viel
mehr auffaellt und doch modern und profissionell"

Die Kacheln hatten Verlaufsrand, Verlaufsflaeche, Schatten und
Lichtkante -- alles richtig, alles STATISCH. Was fehlte, war das Gefuehl
von Material: eine Flaeche, die auf Licht reagiert.

ZWEI EBENEN

Ein weicher Lichtfleck folgt dem Zeiger ueber die Flaeche. Und -- der
Teil, der wirklich auffaellt -- der RAND glueht an derselben Stelle auf
und verlaeuft nach beiden Seiten aus.

Das geht ohne zusaetzliches Element: Die Kachel hat bereits zwei
Hintergrundebenen (Flaeche padding-box, Verlaufsrand border-box). Beim
Ueberfahren bekommt die Randebene einen Lichtpunkt an der Zeigerstelle.
Der Rand ist nur einen Pixel breit -- genau dort laesst sich Licht am
staerksten zeigen, ohne kitschig zu werden. Ein Lichtfleck OHNE
mitleuchtende Kante wirkt wie ein Fleck AUF der Kachel; mit ihr wirkt
die ganze Kachel beleuchtet.

Die Flaeche selbst bleibt beim Ueberfahren unveraendert -- sonst wuerde
der Text flackern.

VIER ENTSCHEIDUNGEN GEGEN BILLIGE OPTIK

Die Farbe folgt der Kachel: blaue leuchten blau, lila lila. Sonst braeche
der Effekt die Farbordnung, die ueberall sonst Bedeutung traegt.

Nur bei echtem Zeiger (hover: hover, pointer: fine). Auf dem Handy gibt
es keinen; dort bliebe der Lichtfleck an einer zufaelligen Stelle kleben.

Aus bei prefers-reduced-motion. Auch wenn sich nichts bewegt: Etwas, das
dem Zeiger folgt, ist Bewegung.

Erste Fassung war mit 13 % zu zurueckhaltend -- am Screenshot geprueft
und auf 22 % angehoben. "Man soll es spueren" ist richtig, aber es muss
auch ankommen.

SPARSAM GEBAUT

EIN Zuhoerer am Dokument statt einem je Kachel -- sonst muesste jede
nachgeladene Kachel einzeln nachgeruestet werden. Geschrieben wird erst
im naechsten Bildaufbau: Der Zeiger meldet sich bis zu tausendmal je
Sekunde, der Bildschirm zeichnet sechzigmal; ohne Drosselung rechnet der
Browser neunhundertmal umsonst.

Der Inhalt bekommt z-index 1. Ohne das legt sich der absolut gesetzte
Lichtfleck ueber den Text -- absolut positionierte Elemente malen ueber
Fluss-Inhalt, auch wenn sie im Quelltext davor stehen. Das Ergebnis waere
ein Schleier auf der Schrift, den man erst beim Vergleich zweier Kacheln
bemerkt. Eigens geprueft.

GEPRUEFT: 7 Pruefungen fuer den Effekt selbst -- unsichtbar im
Ruhezustand, erscheint beim Ueberfahren, folgt dem Zeiger auf 6 Pixel
genau, Inhalt liegt darueber, lila Kacheln leuchten lila, bei
Bewegungsempfindlichkeit vollstaendig abgeschaltet.

Gestaltung 0 Befunde, Designsystem 5, Verwaltung 69, Portal 32.

Versionsstempel und Cache auf v19.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-23 18:53:05 +02:00

199 lines
9.9 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de" data-i18n-titel="seiten_titel">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio — Dogfather Webdesign</title>
<meta name="description" content="Echte Projekte statt erfundener Beispiele: Dogfather Universe und Van's DIY & Bastelbedarf — mit Ausgangslage, Lösung und Ergebnis." />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<meta name="theme-color" content="#05070b" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
<style>
.pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.pfo-bild {
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
border-bottom: 1px solid var(--wd-rand);
}
.pfo-inhalt { padding: clamp(1.3rem, 3vw, 2rem); }
.pfo-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
.pfo-kopf h2 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 1.9rem); }
.pfo-block { margin-bottom: 1.1rem; }
.pfo-block h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .35em; }
.wd-karte--lila .pfo-block h3 { color: var(--wd-lila); }
.pfo-block p { margin: 0; }
/* Die Detailangaben stecken in einem aufklappbaren Bereich: die Karte
bleibt beim Überfliegen kurz, wer mehr will, klappt auf. Bewusst das
native Klapp-Element des Browsers, damit Tastatur und Screenreader
ohne Zusatzcode funktionieren.
(Der Tag-Name steht hier absichtlich nicht ausgeschrieben — sonst
zählt ihn die Tag-Balance-Prüfung in server/pruefe-webdesign-i18n.mjs
als öffnendes Element mit und meldet einen Fehler, den es nicht gibt.) */
.pfo-mehr { margin-top: .4rem; }
.pfo-mehr > summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .4rem;
min-height: 44px; padding: .5rem .1rem;
font-weight: 700; color: var(--wd-blau); font-size: .95rem;
}
.wd-karte--lila .pfo-mehr > summary { color: var(--wd-lila); }
.pfo-mehr > summary::-webkit-details-marker { display: none; }
.pfo-mehr > summary::after { content: "▾"; transition: transform var(--wd-zeit) ease; }
.pfo-mehr[open] > summary::after { transform: rotate(180deg); }
.pfo-mehr-inhalt { padding-top: .6rem; border-top: 1px solid var(--wd-rand); margin-top: .3rem; }
</style>
</head>
<body class="wd">
<div id="wd-kopf"></div>
<main id="wd-inhalt">
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:clamp(2.4rem,6vw,4rem)">
<div class="wd-container">
<span class="wd-eyebrow" data-i18n="pf_eyebrow">Portfolio</span>
<h1 data-i18n="pf_h1">Zwei Projekte, die man anfassen kann</h1>
<p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Beide Seiten laufen wirklich, unter ihrer eigenen Adresse, auf einem eigenen Server. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe.</p>
</div>
</section>
<section class="wd-abschnitt" style="padding-top:0">
<div class="wd-container">
<!-- ---------------- Projekt 1 ---------------- -->
<article class="wd-karte pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-universe.jpg"
alt="Startseite von dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p1_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p1_h2">Dogfather Universe</h2>
<span class="wd-tag" data-i18n="p1_art">Umfangreiche Website</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p1_ausgang">Drei getrennte Welten sollten unter ein Dach, ohne dass Besucher sich verlaufen.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p1_loesung">Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p1_ergebnis">Seit August 2026 öffentlich und im täglichen Einsatz.</p>
</div>
<details class="pfo-mehr">
<summary data-i18n="pf_details">Details ansehen</summary>
<div class="pfo-mehr-inhalt">
<div class="pfo-block">
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
<ul class="wd-liste">
<li data-i18n="p1_f1">Fünf Sprachen, inklusive echtem Schweizerdeutsch</li>
<li data-i18n="p1_f2">Verwaltungsbereich mit Rollen und Rechten</li>
<li data-i18n="p1_f3">Bewerbungssystem mit Statusverfolgung</li>
<li data-i18n="p1_f4">Supporter-Abo mit Zahlungsanbindung</li>
<li data-i18n="p1_f5">Automatische Live-Erkennung des Streams</li>
<li data-i18n="p1_f6">Als App installierbar</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p1_stil">Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.</p>
</div>
</div>
</details>
<div class="wd-btn-reihe" style="margin-top:1rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
</div>
</div>
</article>
<!-- ---------------- Projekt 2 ---------------- -->
<article class="wd-karte wd-karte--lila pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-vandiy.jpg"
alt="Startseite von vans-diy-bastelbedarf.com" width="1200" height="696" loading="lazy" decoding="async"
data-i18n-attr="alt:p2_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p2_h2">Van's DIY &amp; Bastelbedarf</h2>
<span class="wd-tag wd-tag--lila" data-i18n="p2_art">Onlineshop</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p2_ausgang">Handgemachtes wurde bis dahin über Nachrichten verkauft.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p2_loesung">Ein vollständiger Shop mit Kategorien, Artikeln, Warenkorb und Gutscheincodes.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p2_ergebnis">Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit.</p>
</div>
<details class="pfo-mehr">
<summary data-i18n="pf_details">Details ansehen</summary>
<div class="pfo-mehr-inhalt">
<div class="pfo-block">
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
<ul class="wd-liste">
<li data-i18n="p2_f1">Kategorien, Artikel und Varianten</li>
<li data-i18n="p2_f2">Warenkorb und Kasse, auf dem Handy geprüft</li>
<li data-i18n="p2_f3">Gutscheincodes und Versandregeln</li>
<li data-i18n="p2_f4">Adminbereich für die eigenständige Artikelpflege</li>
<li data-i18n="p2_f5">Mehrsprachig</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p2_stil">Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.</p>
</div>
</div>
</details>
<div class="wd-btn-reihe" style="margin-top:1rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://vans-diy-bastelbedarf.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
</div>
</div>
</article>
<!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
<div class="wd-notiz wd-auf">
<p><strong data-i18n="pf_regeln_titel">Was hier bewusst fehlt</strong><br />
<span data-i18n="pf_regeln_text">Es steht kein einziges Kundenzitat auf dieser Seite. Nicht, weil es keine zufriedenen Kunden gäbe, sondern weil noch niemand ein Zitat geschrieben und freigegeben hat.</span></p>
</div>
</div>
</section>
<section class="wd-abschnitt wd-abschnitt--gehoben">
<div class="wd-container wd-container--schmal" style="text-align:center">
<h2 data-i18n="pf_cta_h2">Soll deins das dritte sein?</h2>
<p class="wd-lead" data-i18n="pf_cta_p">Ob dein Projekt hier später auftaucht, entscheidest ausschließlich du — die Aufnahme ins Portfolio ist von der Veröffentlichung deiner Seite getrennt und braucht deine ausdrückliche Erlaubnis.</p>
<div class="wd-btn-reihe" style="justify-content:center">
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
</div>
</div>
</section>
</main>
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd19"></script>
<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink