# Johannes Beier – Portfolio

> Johannes Beier: Full-Stack Marketer und Technological Creative mit Fokus auf ganzheitliche Unternehmenskommunikation. M.Eng. Medientechnik & Medienproduktion (OTH Amberg-Weiden), B.Eng. Medienproduktion & Medientechnik.

## Person

- **Name:** Johannes Beier
- **Abschlüsse:** M.Eng. Medientechnik & Medienproduktion, B.Eng. Medienproduktion & Medientechnik (OTH Amberg-Weiden)
- **Schwerpunkte:** Unternehmenskommunikation, Grafikdesign, Corporate Design, Digital Marketing, Videoproduktion, Webentwicklung (React/Next.js), KI-gestützte Werbung (ComfyUI, Stable Diffusion, FLUX), 3D-Visualisierung (Blender)
- **Berufserfahrung:** Werkstudent Marketing bei Reichenbacher Hamuel GmbH (Maschinenbau, seit 2023), Praktikant Corporate Marketing & Communications bei Preh Group (Automobilzulieferer, 2022)
- **Sprache der Website:** Deutsch

## Portfolio – Über dieses Portfolio

- **URL:** https://www.johannesbeier.me/arbeitsproben/portfolio
- **Projektrahmen:** Persönliches Projekt
- **Kernaussage:** Über dieses Portfolio – die eigene Plattform als Arbeitsprobe.
- **Kategorien:** Grafikdesign, Konzeption, Typografie, UI/UX, Webdesign, Webengineering
- **Technologien:** Next.js, React, Tailwind CSS, TypeScript, HeroUI, Framer Motion, Lucide React; Hosting: Vercel; Rendering: Server-Side Rendering (SSR)

### Anforderungen und Strategie

- **Moderne Web-Technologien:** Next.js, React und Tailwind CSS für hohe Performance und exzellente Developer Experience.
- **Interaktive Arbeitsproben:** Eigens entwickelte Komponenten für Galerien (Lightbox, ImageGallery), Prozessdarstellungen (VorgangSchritt), Flipbook-Magazin, PDF-Präsentationen und Glossar.
- **Visueller Anspruch:** Dark-Mode-Support, cleaner und seriöser Look, typografisch überzeugend (u. a. Schweizer Stil, OKLAB-Farbwelt), subtile Animationen – professionell und seriös, ohne bieder zu wirken.
- **Zielgruppenspezifische Kommunikation:** Glossar für Fachbegriffe – Verständlichkeit für Recruiter:innen bei gleichzeitigem fachlichem Tiefgang für Entscheider:innen.

### Umsetzung

- **Design:** Typografie- und Farbsystem (Primary-, Secondary- und Neutral-Paletten mit Kontrastberechnung nach WCAG), responsive Layouts, Dark Mode.
- **Engineering:** Server-Side Rendering, Dateisystem-nahe Content-Struktur, eigene Search (SearchModal, SearchContext), Performance-Optimierung.
- **AI-Readability (diese Ebene):** robots.txt, sitemap.xml, llms.txt/llms-full.txt, Markdown-Spiegel jeder Seite mit Alternate-Links, semantisches HTML, JSON-LD (Person, WebSite) – siehe AGENTS.md.

### Ergebnis

Eine individuelle Portfolio-Website als Full-Stack-Beleg für Webentwicklung, Webdesign, UX und typografische Gestaltung.

## Kontakt

- **Name:** Johannes Beier
- **E-Mail:** hallo@johannesbeier.me
- **LinkedIn:** https://www.linkedin.com/in/johannes-beier/
- **Website:** https://www.johannesbeier.me