207 lines
7.0 KiB
Markdown
207 lines
7.0 KiB
Markdown
# 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}
|
||
|
||
|
||
|
||
|