2025 – Підприємець. Людина дії. Нетворкер.
Markus Bodo Wieseler
Послуги
Розробка персонального лендингу
Клієнт
Markus Bodo Wieseler
Дата
2025
Технології
Next.js · Tailwind CSS · Netlify · Framer Motion
Одна особистість. Усі проєкти. Одне місце.
Markus Bodo Wieseler (творчий псевдонім — Bodo) — підприємець, людина дії та нетворкер, глибоко вкорінений у регіоні Рейн-Лан. Він водночас веде кілька компаній і проєктів: від кейтерингу на заходах і чищення систем розливу напоїв до освітнього центру, нерухомості та культового пабу в Даузенау на річці Лан.
Завдання було чітким: створити персональний лендинг, який збирає всі його проєкти, сайти й компанії в одному місці, — цифрову візитівку та головну точку контакту для бізнес-партнерів, клієнтів і всіх зацікавлених.
Результат — мінімалістична, швидка й елегантна сторінка особистого бренду на Next.js і Tailwind CSS з хостингом на Netlify: плавні анімації, чітка сітка карток з усіма проєктами та персональний перший екран із портретом.
- Концепція та структура особистого бренду
- Розробка на Next.js (App Router)
- Дизайн на Tailwind CSS і адаптивна верстка
- Анімації на Framer Motion
- Сітка карток проєктів із кольоровими акцентами
- Інтеграція соцмереж (LinkedIn, Instagram, Facebook, YouTube)
- Деплой на Netlify і CI/CD
- Impressum (вихідні дані) і політика конфіденційності за DSGVO (GDPR)
Фірмовий стиль
Дизайн сторінки відображає те, яким є Markus: чіткий, прагматичний і гідний довіри. Палітра побудована на світлому блакитно-сірому тлі (#E7F0F6), темних сланцевих відтінках для тексту та індивідуальних кольорових акцентах для кожного проєкту — від синього для Bodo Events до зеленого для WIECO. Типографіка поєднує Syne (display) і Geist (sans) — сучасно й добре читається.
Структура й проєкти
Односторінкова структура має три частини: перший екран із портретом і особистим зверненням, розділ «Чим я займаюся» зі структурованими описами діяльності та адаптивна сітка карток з усіма проєктами й сайтами (Bodo Events, ReiBo, WIECO, My Lobby, Zum schiefen Turm, нерухомість). Кожна картка отримала власний кольоровий акцент і пряме посилання на відповідний сайт.
Швидкодія й технології
Сторінку розроблено на Next.js 15 (App Router) і Tailwind CSS та розгорнуто на Netlify. Плавні анімації під час прокручування на Framer Motion забезпечують якісний користувацький досвід. Сторінка має майже ідеальні показники Core Web Vitals: швидке завантаження, повна адаптивність на всіх пристроях і відповідність DSGVO — з повідомленням про cookie та політикою конфіденційності.
Великим планом
