# Adam Gaiswinkler

## Individueller Teil: Adam Gaiswinkler
**Entwicklung von CMS‑Modulen & Frontend-Design**

- **Schwerpunkt**:
  - Oqtane-Theme
  - Hall-of-Fame-Modul
  - Anmeldetool
- **Ziel**: 
  - Moderne, responsive Website für den SZU Absolventenverein

---

## Ausgangslage & Motivation
- **Ausgangssituation**: Moderne Frontend‑Plattform für den Absolventenverein (responsive, neue Features).
- **Persönliche Motivation**:
  - Team‑Verkleinerung (6 → 3) → mehr Verantwortung.
  - Projektidentifikation & Praxis‑Blazor/ASP.NET.
- **Ziele**:
  - Oqtane‑Module (Anmeldetool, Hall‑of‑Fame).
  - Responsives UI/UX.

---

## Eingesetzte Technologien

::: columns

:::: column
- **Tech‑Stack**: 
  - Bootstrap 
  - Custom‑CSS
  - QuestPDF
  - Gitea
  - Visual Studio 2022 → Visual Studio Code (macOS).
::::

:::: column
\begin{tikzpicture}
\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.8\columnwidth]{Images/Technologien.png}};
\end{tikzpicture}
::::

:::

---

## Oqtane Theme

::: columns

:::: column
- Eigen‑Navigation (Bootstrap-Komponenten haben nicht gepasst).
- Systemseiten per LINQ ausblenden.
- Responsive CSS‑Media‑Queries + reines CSS‑Burger‑Menu.
- Cookie‑Consent (erforderlich für DSGVO-Konformität und Gesamtheit der Website).
::::

:::: column
\begin{tikzpicture}
\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/BurgerMenuLiveDesign.png}};
\end{tikzpicture}
::::

:::

---

## Hall of Fame

::: columns

:::: column
- **Karten‑Grid**: Responsive Übersicht, Live‑Suche & Sortierung **in Echtzeit – kein Seitenreload** (Blazor).
- **Detail‑Seite**: Glasmorphismus‑Design (halbtransparente Karten mit Blur-Effekt).
::::

:::: column
\begin{tikzpicture}
\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFamePdfNeuBesser.png}};
\end{tikzpicture}
::::

:::

---

## Hall of Fame – Workflow & Export

::: columns

:::: column
- **Workflow**: Rich‑Text‑Editor, Bild‑Upload mit **Live-Vorschau** (max 5 MB), Status (Entwurf/Veröffentlicht) inkl. Eigentümer‑Check.
- **PDF‑Export**: Professionelle Profil-PDFs server-seitig mit QuestPDF.
- **Moderation**: Meldesystem über separates Interfaces‑Paket → saubere Logik-Trennung.
::::

:::: column
\begin{tikzpicture}[
  node distance=12mm,
  every node/.style={font=\small},
  state/.style={rectangle, rounded corners=3pt, draw=accent, fill=accent!10, minimum width=2.4cm, minimum height=8mm, align=center, font=\small\bfseries},
  arr/.style={->,>=stealth,thick,accent}
]
\node[coordinate] (start) {};
\node[state, right=10mm of start] (draft) {Entwurf};
\node[state, below=18mm of draft] (pub) {Veröffentlicht};
\draw[arr] (start) -- node[above] {\scriptsize Erstellen} (draft);
\draw[arr] (draft) to[out=135, in=45, looseness=4] node[above] {\scriptsize Speichern} (draft);
\draw[arr, bend left=25] (draft) to node[right] {\scriptsize Veröffentlichen} (pub);
\draw[arr, bend left=25] (pub) to node[left] {\scriptsize Zurückziehen} (draft);
\end{tikzpicture}
::::

:::

---

## Anmeldetool
\vspace{1cm}
\begin{tikzpicture}[remember picture, overlay]
\node at (current page.center) {
\begin{tabular}{@{}c@{\hspace{4mm}}c@{}}
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{UI}, width=6.5cm, height=2cm, valign=center]
\centering Ja/Nein-Buttons (grün/rot)
\end{tcolorbox}
&
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Live-Feedback}, width=6.5cm, height=2cm, valign=center]
\centering Sofort via Blazor
\end{tcolorbox}
\\[3mm]
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Mobile}, width=6.5cm, height=2cm, valign=center]
\centering Sauberes Touch-Handling
\end{tcolorbox}
&
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Architektur}, width=6.5cm, height=2cm, valign=center]
\centering UI \& Backend-API getrennt
\end{tcolorbox}
\end{tabular}
};
\end{tikzpicture}

---

## Herausforderungen & Lösungen

\vspace{5mm}
\begin{tikzpicture}[remember picture, overlay,
  problem/.style={rectangle, rounded corners=3pt, draw=red!60!black, fill=red!8, minimum width=5cm, minimum height=1.4cm, align=center, font=\small},
  solution/.style={rectangle, rounded corners=3pt, draw=green!60!black, fill=green!8, minimum width=5cm, minimum height=1.4cm, align=center, font=\small},
  header/.style={font=\small\bfseries\color{gray!70}}
]
% Spalten-Header
\node[header] at ([xshift=-2.5cm, yshift=2.2cm]current page.center) {Herausforderung};
\node[header] at ([xshift=2.5cm, yshift=2.2cm]current page.center) {Lösung};

% Reihe 1
\node[problem] at ([xshift=-2.5cm, yshift=0.9cm]current page.center) (p1) {$\triangle$\;\textbf{Plattformwechsel}\\[-1mm]{\scriptsize Windows $\rightarrow$ macOS}};
\node[solution] at ([xshift=2.5cm, yshift=0.9cm]current page.center) (s1) {\checkmark\;\textbf{Visual Studio Code}\\[-1mm]{\scriptsize Plattformübergreifend}};

% Reihe 2
\node[problem] at ([xshift=-2.5cm, yshift=-1.1cm]current page.center) (p2) {$\triangle$\;\textbf{Kein CMS verfügbar}\\[-1mm]{\scriptsize Sommer 2025, Event steht an}};
\node[solution] at ([xshift=2.5cm, yshift=-1.1cm]current page.center) (s2) {\checkmark\;\textbf{Node.js/HTML}\\[-1mm]{\scriptsize Übergangslösung}};

% Reihe 3
\node[problem] at ([xshift=-2.5cm, yshift=-3.1cm]current page.center) (p3) {$\triangle$\;\textbf{UI-Fehler am Handy}\\[-1mm]{\scriptsize Clipping-Probleme}};
\node[solution] at ([xshift=2.5cm, yshift=-3.1cm]current page.center) (s3) {\checkmark\;\textbf{Testen und Anpassen}\\[-1mm]{\scriptsize Debuggen und Verbessern der UI}};
\end{tikzpicture}

---

## Learnings

\vspace{1cm}
\begin{tikzpicture}[remember picture, overlay,
  every node/.style={font=\small},
  branch/.style={thick, accent},
  cat/.style={rectangle, rounded corners=3pt, draw=accent, fill=accent!15, font=\small\bfseries, minimum height=7mm, align=center},
  item/.style={font=\scriptsize, align=left}
]
\node[circle, draw=accent, fill=accent!20, font=\bfseries, minimum size=1.5cm] at (current page.center) (center) {Learnings};

% Technisch - links
\node[cat] at ([xshift=-3.5cm, yshift=0.8cm]current page.center) (tech) {Technisch};
\draw[branch] (center) -- (tech);
\node[item, anchor=east] at ([xshift=-1mm, yshift=5mm]tech.west) {Git};
\node[item, anchor=east] at ([xshift=-1mm]tech.west) {CSS-Flexbox};
\node[item, anchor=east] at ([xshift=-1mm, yshift=-5mm]tech.west) {Blazor};

% Methodisch - rechts oben
\node[cat] at ([xshift=3.5cm, yshift=0.8cm]current page.center) (meth) {Methodisch};
\draw[branch] (center) -- (meth);
\node[item, anchor=west] at ([xshift=1mm, yshift=3mm]meth.east) {Aufgaben-};
\node[item, anchor=west] at ([xshift=1mm, yshift=-3mm]meth.east) {verteilung};
\node[item, anchor=west] at ([xshift=1mm, yshift=-9mm]meth.east) {Meetings};

% Persönlich - unten
\node[cat] at ([yshift=-2cm]current page.center) (pers) {Persönlich};
\draw[branch] (center) -- (pers);
\node[item] at ([yshift=-7mm]pers.south) {Eigeninitiative \& Verantwortung};
\end{tikzpicture}