Tatyana Schaefer spent sixteen years in optics: the Fielmann AG academy, managing stores in Hamburg, training hundreds of colleagues across Northern Germany, then Moscow and the “Healthy Vision” research project. Today she consults optical stores, eye-care specialists, and manufacturers. For that practice I built a personal-brand site: a landing page and a longread biography.
The design is built around the idea of German precision. Deep green, champagne gold, thin ledger-style hairlines, sharp corners, a barely visible film grain. Under the hood it is a small design system: about fifty CSS tokens, so the whole look changes in one place.
The landing page starts by asking the visitor who they are. A store owner, an optometrist, and a manufacturer each get a separate track: familiar pains, formats of cooperation, a before-and-after case with numbers. The FAQ answers 18 uncomfortable questions, from staff “star fever” to competing with retail chains, and is mirrored in FAQPage markup for search engines.
The biography is the second page, nine chapters: from the Fielmann academy in an old castle in Plön to a gold medal of the Russian Academy of Sciences for a vision-protection program. A table of contents travels alongside the text; inside the chapters there are 11 photos and fact insets.
We worked in short iterations: Tatyana sent screenshots with notes, I shipped a new version. In two weeks the landing page went through 50 iterations and the biography through 14 more; each one is frozen in the repository archive, and the reasoning lives in a version journal.
Under the hood it’s plain HTML, CSS, and JavaScript: no frameworks, no build step. Submissions go through a PHP handler with a bot trap, an SQLite rate limit, and an SMTP email that carries the visitor’s UTM tags. For the Russian personal-data law there is a policy page, a cookie notice, and a mandatory consent checkbox. Deployment is a single git push: GitHub Actions assembles the production set and syncs it to the hosting.
Technologies: HTML5, CSS (дизайн-токены), Vanilla JS, Motion, GLightbox, PHP / PHPMailer, SQLite, Typograf, GitHub Actions, Beget
glazami-schaefer.ru