correct spelling mistakes

Dokumentation/src/Dokumentation.tex

@@ -10,31 +10,303 @@
 \usepackage[a4paper, margin=0.8in]{geometry} % Set the margin and size of a page
 \usepackage[hidelinks]{hyperref} % Remove Boxes around Hyperlinks
 \usepackage{lastpage} % Custom page numbering
+\usepackage{pgfgantt} % Gantt-Tables
 \usepackage{fancyhdr}
-\usepackage{graphicx} % Custom page numbering
+\usepackage{graphicx}
+\usepackage{xspace}
+\usepackage{mwe}
+\usepackage{caption}
+\usepackage{tcolorbox} % Custom page numbering
+
+\usepackage{titling}
+\usepackage{textcomp}
+\usepackage{wasysym}
+\usepackage[utf8]{inputenc}
+\usepackage[T1]{fontenc}
+\usepackage{enumerate}
+\renewcommand\maketitlehooka{\null\mbox{}\vfill}
+\renewcommand\maketitlehookd{\vfill\null}
+
+\renewcommand*\contentsname{Inhaltsverzeichnis}
+\renewcommand{\figurename}{Abb.}
 
 % Configure page numbering & footer
 \pagestyle{fancy}
 \fancyhf{}
 \lfoot{Tobias Hilfiker}
-\cfoot{Page \thepage \hspace{1pt} of \pageref{LastPage}}
+\cfoot{Seite \thepage \hspace{1pt} von \pageref{LastPage}}
 \rfoot{\today}
 
 % Methadata
-\title{\includegraphics{media/frontpage.jpg}
+\title{
+    \includegraphics[width=\textwidth]{media/curling_logo}
+    \begin{center}
         Modul 152 \\
-Multimediainhalte in einen Webauftritt integrieren}
+        Multimediainhalte in einen Webauftritt integrieren\\
+        E-Portfolio
+    \end{center}}
 \author{Tobias Hilfiker}
 \date{\today}
 
 % Document
 \begin{document}
 
-    % Frontpage
+    %Kapitel Frontpage
+    \begin{titlingpage}
         \maketitle
+    \end{titlingpage}
     \pagebreak
 
-    %Table of contents
+    %Kapitel Table of contents
     \tableofcontents
+    \pagebreak
+
+    %Kapitel 1 - Einleitung
+    \section{Einleitung}
+    Im vorgehenden Storyboard habe ich die Umsetzung der Webseite beschrieben, welche ich im Rahmen dieses Projektes umsetzen darf. Während des
+    E-Portfolios sollten folgende Unteraufgaben erfüllt werden:
+
+    \begin{itemize}
+        \item Responsive-Webseite anhand des Mockups im Storyboard umsetzen
+        \item Video über das gewählte Thema filmen und schneiden
+        \item Minimum drei Bilder machen und diese mit einer Bildmanipulation versehen
+        \item Multimediaelemente aus den letzten zwei Punkten in die Webseite einbinden
+        \item Prozess der oben genannten Punkten in dieser Dokumentation dokumentieren
+    \end{itemize}
+    \\
+    \\
+    Der gesamte Code + \LaTeX\xspace Dokumentation sind auf Github unter folgendem Link zu finden:\\
+    \url{https://github.com/Ramspopoo/Modul_152}\\
+    Das Storyboard wie auch das E-Portfolio habe ich zusätzlich als Release hinzugefügt, damit keine Daten verändert werden können.
+    Um sich die Webseite im Internet anzusehen, wurde sie unter folgender URL veröffentlicht:\\
+    \url{http://webseiten.informatik.sg/2022/ina4a/gruppe4/}
+    \pagebreak
+
+    %Kapitel 2 - Webseite
+    \section{Webseite}
+    Nachfolgend werde ich erläutern, wie ich die Webseite umgesetzt habe. Anfangs werde ich zudem die von mir verwendeten Technologien aufzeigen.
+    Am Schluss werde ich über den Arbeitsprozess der Webseitenerstellung reflektieren.
+
+    %Kapitel 2.1 - Eingesetzte Technologien
+    \subsection{Eingesetzte Technologien}
+    Um die Webseite zu erstellen, habe ich diverse Technologien eingesetzt. Diese möchte ich in den folgenden zwei Abschnitten erläutern.
+
+    %Kapitel 2.1.1 - Basics
+    \subsubsection{Basics}
+    \textbf{Adobe Xd}\\
+    Um Skizzen auf der Webseite zu erstellen, habe ich Adobe Xd verwendet. Dies aus zwei Gründen:
+    \begin{enumerate}
+        \item Ich kann die Assets als SVG exportieren. Diese werden dann nicht allzu gross und können optimal skaliert werden.
+        \item Ich habe bereits das Mockup mit Xd gemacht, daher hatte ich bereits Beispiele darin gezeichnet, welche ich wiederverwenden konnte.
+    \end{enumerate}\\
+    \textbf{Tailwind CSS}\\
+    Da ich nicht oft in der Webentwicklung arbeite, hat mir Timo Tailwindcss als Framework fürs Styling empfohlen. Dadurch kann ich vereinfachte
+    und vorgefertigte CSS-Klassen verwenden. Zudem hat es bereits eingebaute Media-Queries, was es einfacher macht, die Webseite responsive
+    zu gestalten.\\
+    \textbf{Cloudinary}\\
+    Damit ich auf dem Webserver nicht zu viel Speicher für Medien benötige, habe ich Cloudinary für die Bilder verwendet. Mittels Cloudinary
+    kann ich zudem die übertragenen Datenmengen reduzieren, indem ich z.B. die Grösse oder Qualität der Bilder reduziere.\\
+    \textbf{YouTube}\\
+    Da der Film sehr gross geworden ist, habe ich mich entschieden, den Film auf YouTube hochzuladen. Dieser ist nicht öffentlich, sondern nur
+    über den Link abrufbar. So kann man den Film wirklich nur über die Webseite schauen. Mittels der "Einbetten-Funktion" von YouTube ist
+    das Einbinden des Videos auch sehr einfach.
+
+    %Kapitel 2.1.2 - Dev-Server und Plugins
+    \subsubsection{Dev-Server und Plugins}
+    Um bei mir lokal zu entwickeln, Plugins einzubinden und die Webseite zu compilen habe ich den Node Package Manager (NPM) verwendet.
+    Zudem hat Timo mir "Vite" als Entwicklungsserver empfohlen, dieser recompilt die Seite automatisch nach jedem speichern des Files.
+    Dabei zeichnet er sich dadurch aus, dass er diesen Reload sehr schnell ausführt.\\
+    Um so gesehen Komponenten zu erstellen, habe ich ein Handlebar-Plugin für Vite verwendet. Damit kann ich einzelne kleine Files erstellen,
+    welche dann eine Komponente darstellen. In diese Komponente kann ich dann Variablen hineingeben, so kann ich in der Komponente auch sehr
+    einfach z.B. den Text mittels Variable von aussen ändern und reduziere den benötigten Code.
+
+    %Kapitel 2.2 - Umsetzung Webseite
+    \subsection{Umsetzung Webseite}
+    Anfangs war ich etwas verloren in der Umsetzung. Da ich wenig mit Webentwicklung zu tun hatte, wusste ich nicht recht, wo ich anfangen sollte.
+    Aber mit der Zeit kam ich gut in den Flow, und lernte auch immer mehr Tricks mit CSS und Tailwind kennen. Während der Umsetzung wurde die Zeit
+    aber auch schnell knapp wodurch ich einige Abweichungen zum Mockup machen musste. Diese habe ich nachfolgend dokumentiert.\\
+    Ansonsten ging die Umsetzung recht gut vonstatten. Ich habe mir, wenn benötigt, Hilfe von Timo geholt, da er sich in der Webentwicklung wie auch
+    mit Tailwind auskennt.
+
+    %Kapitel 2.3 - Abweichungen Mockup
+    \subsection{Abweichungen zum Mockup}
+    Ich musste aufgrund von knapper Zeit und fehlendem Bild/Videomaterial einige Abweichungen zum Mockup machen. Diese möchte ich hier genauer erläutern.
+
+    %Kapitel 2.3.1 - Seite "How To Play" nicht umgesetzt
+    \subsubsection{Seite "How to Play" nicht umgesetzt}
+    Aufgrund von fehlendem Bildmaterial und auch fehlender Zeit um eine Alternative zu suchen / erstellen, habe ich die Seite "How to Play" nicht umgesetzt.
+    Darauf sollte eigentlich beschrieben sein, wie ein Anfänger mit Curling beginnen soll. Im Nachhinein würde ich mir weniger einzelne Seiten vornehmen, und
+    mir dann auch bereits beim Mockup-Zeichnen genauer Gedanken machen, wie ich die Seite später umsetzen werde.
+
+    %Kapitel 2.3.2 - Seite "Beispiele" umbenannt
+    \subsubsection{Seite "Beispiele" umbenannt}
+    Während des Prozesses habe ich gemerkt, dass der Titel "Beispiele" für die Seite mit allen Bildern und Videos nicht sehr passend ist. Daher habe ich
+    diese umbenannt auf den Namen "Impressionen". Dies passt viel besser zum Inhalt.
+
+    %Kapitel 2.3.3 - Seiten mit Grid statt Banner
+    \subsubsection{Seiten mit Grid statt Banner}
+    Während der Umsetzung habe ich gemerkt, dass ein Banner mit überlappenden Elementen, wie ich es auf vielen Seiten des Mockups hatte, sehr
+    schwierig umzusetzen ist. Es ist dann aber noch schwerer, dieses Banner responsive zu machen. Daher habe ich mich dazu entschieden,
+    diese Elemente mit CSS Grid anzuordnen. So habe ich auch ein behandeltes Thema vom Unterricht in die Webseite eingebunden.
+
+    %Kapitel 2.3.4 - Mobile Home-Page etwas anders gestylt
+    \subsubsection{Mobile Home-Page etwas anders gestylt}
+    Auf Mobile habe ich, statt die Navigationselemente im Banner über- / nebeneinander anzuordnen, diese untereinander angeordnet. Da es, aufgrund
+    der gestrichenen "How to Play" Seite nur noch drei Seiten waren hätte es über- / nebeneinander schlecht ausgesehen, und so ist es auch
+    einfacher für mich die Seite responsive zu machen, da ich nur den flex drehen muss.
+
+    %Kapitel 2.3.5 - Logo und Navigation getauscht
+    \subsubsection{Logo und Navigation getauscht}
+    Um auf Mobile gleich auszusehen bzw. die gleiche Ausrichtung zu haben, habe ich die Position von Logo und Menü-Button im Vergleich zum Mockup
+    getauscht. So ist nun das Menü (wie auf Desktop auch) auf der rechten Seite, und das Logo (wie auf Desktop) auf der linken Seite.
+
+    %Kapitel 2.4 - Reflexion Webseite
+    \subsection{Reflexion Webseite}
+    Schlussendlich kann man sagen, dass ich ohne Hilfe von Timo und Tailwind die Webseite nie so gut hinbekommen hätte. Tailwind hat mir
+    beim Styling und Responsive-Designen extrem viel Arbeit abgenommen, wofür ich sehr dankbar bin. Wie bereits gesagt, hatte ich anfangs etwas
+    Mühe, in den Aufbau und die Entwicklung der Webseite hineinzufinden. Zudem musste ich mich mit Tailwind zuerst zurechtfinden. Ich war zudem
+    eine Woche krank, was dazu geführt hat, dass am Schluss alles schneller gehen musste, als ich mir das eigentlich gewünscht habe. Hätte ich noch
+    eine Woche mehr Zeit könnte ich einige vorher dokumentierte Abweichungen noch ausmerzen und die Webseite gesamt schöner machen.\\
+    Während der Entwicklung der Webseite habe ich viel Neues über Webdesign gelernt und auch sehr vieles verstanden, was ich vorher einfach
+    immer angewendet habe, aber nicht richtig wusste was, wirklich dahinter steckt. So möchte ich mich in nächster Zeit mehr mit Webentwicklung
+    befassen und auch Tailwind noch genauer anschauen, als ich das hier im Rahmen des E-Portfolios gemacht habe.
+
+    \pagebreak
+    %Kapitel 3 - Video
+    \section{Video}
+    In den folgenden Kapiteln werde ich erklären, wie ich das Video gefilmt habe und was die Schwierigkeiten dabei waren. Zudem werde ich
+    erläutern, wie ich das Video geschnitten habe und über den ganzen Prozess reflektieren.
+
+    %Kapitel 3.1 - Erstellung Video
+    \subsection{Filmen Video}
+    Mich stellte die von mir gesetzte Anforderung, dass ich gefilmt haben wollte, wie verschiedene Steine gespielt werden, vor eine Challenge.
+    Denn am besten sieht es aus, wenn man Steine während dem Spiel von oben filmt. Wenn dies zum Beispiel an einer WM oder Olympia gemacht wird,
+    werden über dem Spielfeld sogenannte Seilkameras aufgehängt. Diese sind an Seilen aufgehängt und hängen über dem Spielfeld. Mittels Motoren
+    und Zugseilen können diese dann ferngesteuert werden und über das Spielfeld flitzen. Allerdings haben wir in der Curlinghalle in St. Gallen
+    keine solchen Einrichtungen. Daher muss ich mir anders behelfen.\\
+    Für mich war es am einfachsten, eine Drohne zu verwenden. Auch das war aber nicht sehr einfach. Denn in der Halle selbst habe ich aufgrund
+    des Metalldachs keinen GPS-Empfang, was dazu führt, dass die Drohne nicht stabil an Ort und Stelle bleibt.
+    Als Drohne habe ich eine DJI Mavic Air verwendet, welche eigentlich auch über ein sogenanntes \"FocusTrack\" Feature verfügt. Dieses erlaubt dem
+    Pilot der Drohne, Objekte auszuwählen, welcher die Drohne automatisch folgt. Dieses habe ich aus folgenden zwei Gründen nicht verwendet
+    / verwenden können:
+
+    \begin{enumerate}
+        \item Aufgrund des fehlenden GPS erlaubte mir die Drohne gar nicht, FocusTrack zu verwenden
+        \item Es war mir zu riskant, die Drohne in der Halle automatisch fliegen zu lassen. Die Drohne durfte nämlich auf keinen Fall abstürzen,
+        da sonst das Eis beschädigt werden könnte. Einfach unkontrolliert aufsteigen sollte sie aber auch nicht, da nach wenigen Metern
+        die Hallendecke kommt.
+    \end{enumerate}
+    Daher blieb mir nichts anderes übrig, als die Drohne manuell hinter dem gespielten Stein hinterherzufliegen. Da dies recht anspruchsvoll ist
+    und ich nicht gerade für mein Flugkönnen bekannt bin, habe ich einen Kollegen, welcher auch einige Jahre Curling gespielt hat, angefragt, ob er
+    mir hilft zu filmen. Er fliegt in der Freizeit FPV-Drohnen (Drohne mit VR-Brille, mit welcher man die Perspektive der Drohne sieht) und kennt
+    sich daher sehr gut mit dem Fliegen der Drohnen aus.\\
+    Ich habe zudem geschaut, dass nicht zu viele Personen in der Halle sind, damit einerseits nicht zu viele zusätzliche Personen auf den Bildern
+    sind, andererseits dass wir mit unseren Drohnenflügen nicht viele Personen in Gefahr bringen / stören.\\
+    Abgesehen von den Anfangsschwierigkeiten mit dem GPS hatten wir während des Filmens keine Probleme.
+
+    %Kapitel 3.2 - Schnitt des Videos
+    \subsection{Schnitt des Videos}
+    Ich war mir lange nicht sicher, wie ich das Video schneiden soll. Da ich mehrere einzelne Clips hatte, die ich einerseits kürzen und dann
+    aneinanderreihen musste, brauchte ich ein Tool, welches dafür gut genug war. Bisher hatte ich Videos immer auf dem Handy geschnitten, was
+    besonders mit den grossen Videodateien, welche die Drohne gespeichert hatte, sehr mühsam ist. Zudem hatte ich etwas Erfahrung mit Windows
+    Movie Maker, allerdings gibt es diesen bereits seit Windows 8 nicht mehr. Da ich über die Schule ein Abonnement für die Adobe Creative Cloud
+    habe, habe ich mich dann entschieden, ein Tool daraus zu nutzen. Da ich bereits mit Adobe Premiere Pro gearbeitet hatte und wusste, dass
+    es sehr umfänglich und umständlich ist, wollte ich dieses Mal Adobe Premiere Rush ausprobieren.\\
+    Premiere Rush ist sehr simpel ausgelegt, bietet mir aber alle Tools, die ich benötige. Zudem sind die Output-Files in einer sehr hohen
+    Qualität, womit ich vor allem bei Movie Maker in der Vergangenheit Probleme hatte.\\
+    Da Premiere Rush so einfach ausgelegt ist, war es auch keine grosse Sache das Video zu schneiden. Manchmal hatte der Laptop etwas Mühe,
+    das Video immer flüssig abzuspielen. Ich kann aber nicht definitiv sagen, ob die CPU oder der RAM zu wenig Leistung hatte und so das Programm
+    etwas blockiert hat.\\
+    Ansonsten hat mich das Programm überzeugt, sprich ich werde es auch ein anderes Mal wieder verwenden, wenn ich ein Video schneiden muss.
+
+    %Kapitel 3.3 - Reflexion Video
+    \subsection{Reflexion Video}
+    Das Video ist mir eigentlich sehr gut gelungen. Auch wenn ich einige Schwierigkeiten und Herausforderungen mit der Drohne meistern musste,
+    hat dies sehr gut funktioniert. Allerdings wäre es schöner gewesen, wenn die Technik richtig funktioniert hätte und einige Bilder und vor allem
+    Videos weniger verwackelt gewesen wären. Aber dafür, dass die Drohne manuell gesteuert wurde, sieht das Video sehr gut aus.\\
+    Auch das Schneiden des Videos hat sehr gut geklappt, auch dort abgesehen von den technischen Schwierigkeiten, die ich mit meinem Laptop hatte.
+    Aber ich habe besonders beim Videodreh viel Neues gelernt und werde z.B. das nächste Mal, wenn ich ein Video schneiden muss, wieder Adobe
+    Premiere Rush verwenden.
+
+    %Kapitel 4 - Bildmanipulationen
+    \section{Bildmanipulationen}
+    In den nachfolgenden drei Kapiteln werde ich die einzelnen Bildmanipulationen, die ich auf drei Bilder angewendet habe, genauer erläutern.
+    Die Bilder habe ich ebenso wie das Video mit der Drohne aufgenommen.
+
+    %Kapitel 4.1 - Bildmanipulation 1
+    \subsection{Bildmanipulation 1}
+    Die erste Bildmanipulation habe ich bereits im Storyboard benutzt. Ich habe ein Bild genommen, welches direkt das Haus mit Steinen darin
+    zeigt, welches von gerade oben fotografiert wurde. Dieses Bild habe ich dann mit GIMP schwarz-Weiss eingefärbt, und nur die Steine farbig
+    gemacht. So werden diese besonders hervorgehoben und stechen sehr heraus. Neben diesem Herausstechen verbessert es aber nicht wirklich was
+    am Bild.\\
+    Diese Bildmanipulation ist sehr einfach gelöst, aber meiner Meinung nach sieht sie in diesem Fall sehr gut aus.
+
+    \noindent
+    \begin{minipage}{0.5\textwidth}
+        \includegraphics[width=\linewidth]{media/Black_White_Unedited}
+    \end{minipage}
+    \hfill
+    \begin{minipage}[c]{0.5\textwidth}
+        \includegraphics[width=\linewidth]{media/Black_White_Edited}
+    \end{minipage}
+
+    %Kapitel 4.2 - Bildmanipulation 2
+    \subsection{Bildmanipulation 2}
+    Als zweite Bildmanipulation habe ich auf dem Eis alle Werbungen entfernt. Das war eigentlich recht einfach, wenn das Eis nicht reflektieren
+    würde. Dadurch hatte ich etwas Probleme mit dunkleren und helleren Stellen im Eis, die etwas schwieriger zu ersetzen waren. Wenn man aber
+    nicht erwähnt, dass man Werbungen entfernt hat, würde man es nur beim sehr genauen Betrachten sehen. Eine zusätzliche Herausforderung war die
+    Glasscheibe oben am Ende der Halle, welche die Werbungen noch reflektiert hat. Da es dahinter dunkel ist, kann man nicht genau sehen, was
+    eigentlich an diese Stelle gehört, und da an vielen Stellen die Werbung reflektiert hatte, war es etwas schwierig geeignete Stellen zum
+    Ersetzen zu finden. Aber auch diese Bildmanipulation finde ich sehr passend zum Thema bzw. zum Bild. Denn die Halle wirkt ohne viele Farben
+    auf dem Eis viel aufgeräumter.
+
+    \noindent
+    \begin{minipage}{0.5\textwidth}
+        \includegraphics[width=\linewidth]{media/Advertisment_Unedited}
+    \end{minipage}
+    \hfill
+    \begin{minipage}[c]{0.5\textwidth}
+        \includegraphics[width=\linewidth]{media/Advertisment_Edited}
+    \end{minipage}
+
+    %Kapitel 4.3 - Bildmanipulation 3
+    \subsection{Bildmanipulation 3}
+    Als dritte Bildmanipulation wollte ich die Spiegelung im Eis durch das Licht reduzieren. Obwohl das sehr zum Bild passen würde, habe ich es
+    leider nicht geschafft, den gewünschten Effekt zu erzielen. Ich habe es zwar geschafft die Spiegelung etwas zu reduzieren, ich hätte aber
+    gerne länger experimentiert, bis sie noch mehr weg gewesen wäre. Ich habe hier mehrere verschiedene Möglichkeiten probiert, mit denen man
+    in GIMP eigentlich solche Spiegelungen reduzieren können müsste. Allerdings haben alle bei mir nur so semi-gut funktioniert, dieses Bild
+    ist noch am besten herausgekommen von allen versuchten Methoden.
+
+    \noindent
+    \begin{minipage}{0.5\textwidth}
+        \includegraphics[width=\linewidth]{media/Glare_Unedited}
+    \end{minipage}
+    \hfill
+    \begin{minipage}[c]{0.5\textwidth}
+        \includegraphics[width=\linewidth]{media/Glare_Edited}
+    \end{minipage}
+
+    %Kapitel 4.4 - Reflexion Bildmanipulationen
+    \subsection{Reflexion Bildmanipulationen}
+    Die Bildmanipulationen sind sehr einfach von der Hand gegangen. Ich hatte etwas Mühe, eine dritte Bildbearbeitungsmethode zu finden, was
+    sich meiner Meinung nach bedauerlicherweise auch im Ergebnis bemerkbar, denn das Entfernen der Spiegelung hat nicht sehr gut geklappt. Die anderen
+    beiden Bilder sind aber sehr gelungen, und besonders bei dem Schwarz-Weiss Bild habe ich den Prozess interessant gefunden und konnte mir
+    diesen auch zu einem grossen Teil gut merken und nachvollziehen.
+
+    \pagebreak
+    %Kapitel 5 - Fazit
+    \section{Fazit}
+    Gesamt bin ich der Meinung, dass mein E-Portfolio sehr gut gelungen ist.\\
+    Für die Webseite brauchte ich etwas Hilfe von Timo Kluser und Nico Nussmüller, aber ansonsten konnte ich sehr vieles selbst machen. Die
+    Webentwicklung war teils auch interessanter und schneller, als ich effektiv im Voraus gedacht hatte. Aber einige Kleinigkeiten habe
+    ich dann aber zeitlich total unterschätzt. Dies werde ich in einem nächsten Projekt auf alle Fälle anders berechnen müssen.\\
+    Bei der Webentwicklung habe ich Tailwind kennengelernt und wirklich eine tolle Alternative zu plain-CSS gefunden, welche vor allem für
+    Leute ohne viel Erfahrung ein sehr guter Einstieg ist. Mein Wissen rund um HTML konnte ich im Rahmen dieses Projekts ebenfalls wieder
+    auffrischen.\\ \\
+    Im Storyboard habe ich einen Zeitplan aufgestellt, welchen ich nicht ganz einhalten konnte, da ich mitten drin eine Woche krank war. Daher
+    wurde es besonders gegen Schluss eher knapp. Hätte ich mehr Zeit gehabt, hätte ich die Webseite noch etwas verbessern können und die
+    Bildbearbeitungsmethoden besser umsetzen.\\ \\
+    Mit den Bildbearbeitungsmethoden bin ich so weit auch zufrieden. Sie sind gut ausgewählt und grösstenteils auch gut umgesetzt. Wie aber
+    erwähnt, hätte ich mehr Zeit benötigt, diese auch besser umzusetzen.
 
 \end{document}

Webauftritt/eportfolio/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Webauftritt/eportfolio/counter.js

@@ -0,0 +1,9 @@
+export function setupCounter(element) {
+  let counter = 0
+  const setCounter = (count) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}

Webauftritt/eportfolio/impressions.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/png" href="/curling_logo.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Curling E-Portfolio</title>
+</head>
+<body class="bg-primary flex flex-col min-h-screen">
+
+{{> nav impressionsActive=true}}
+
+<div class="home grow">
+
+    <h1 class="flex justify-center">Impressionen</h1>
+
+    <div class="flex justify-center">
+        <iframe class="w-10/12 md:w-1/2 aspect-video" src="https://www.youtube.com/embed/bruNTJCsZPM?controls=0"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen></iframe>
+    </div>
+
+    <div class="flex flex-col items-center">
+        <img class="w-10/12 md:w-1/2 m-10"
+             src="https://res.cloudinary.com/dgyrt6b4m/image/upload/v1671645823/stones_colored.jpg"/>
+        <img class="w-10/12 md:w-1/2 m-10"
+             src="https://res.cloudinary.com/dgyrt6b4m/image/upload/v1671645801/no_advertisements.jpg"/>
+        <img class="w-10/12 md:w-1/2 m-10"
+             src="https://res.cloudinary.com/dgyrt6b4m/image/upload/v1671645802/anti_glare.jpg"/>
+    </div>
+</div>
+
+{{> footer }}
+<script type="module" src="/main.js"></script>
+</body>
+</html>

Webauftritt/eportfolio/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/png" href="/curling_logo.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Curling E-Portfolio</title>
+</head>
+<body class="bg-primary flex flex-col min-h-screen">
+
+{{> nav homeActive=true }}
+
+<div class="home grow">
+    <h1 class="flex justify-center text-center">Welcome to the world of Curling!</h1>
+
+    <div class="flex h-auto bg-banner md:flex-row flex-col justify-center my-5">
+        {{> banneritem
+        href="rules.html"
+        img="/rules.svg"
+        imgalt="Regeln"
+        text="Regeln"}}
+
+        {{> banneritem
+        href="spiritofcurling.html"
+        img="/spirit.svg"
+        imgalt="Spirit of Curling"
+        text="Spirit of Curling"}}
+
+        {{> banneritem
+        href="impressions.html"
+        img="/extension.svg"
+        imgalt="Beispiele"
+        text="Beispiele"}}
+    </div>
+</div>
+
+{{> footer }}
+<script type="module" src="/main.js"></script>
+</body>
+</html>

Webauftritt/eportfolio/javascript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

Webauftritt/eportfolio/main.js

@@ -0,0 +1 @@
+import './style.scss';

Webauftritt/eportfolio/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "eportfolio",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.19",
+    "sass": "^1.56.1",
+    "tailwindcss": "^3.2.4",
+    "vite": "^3.2.3",
+    "vite-plugin-handlebars": "^1.6.0"
+  }
+}

Webauftritt/eportfolio/partials/banneritem.hbs

@@ -0,0 +1,4 @@
+<a href="{{href}}" class="flex flex-row m-10 md:flex-col md:items-center">
+    <img src="{{img}}" alt="{{imgalt}}" class="w-20 h-20"/>
+    <p class="flex flex-col justify-center ml-5 md:ml-0 md:text-center">{{text}}</p>
+</a>

Webauftritt/eportfolio/partials/footer.hbs

@@ -0,0 +1,9 @@
+<footer class="bg-navbackground bottom-0 w-full h-auto flex md:flex-row flex-col justify-between md:p-10 p-5">
+    <div class="md:p-0 pb-5">
+        <p class="font-bold text-textcolor">© 2022 Tobias Hilfiker</p>
+    </div>
+    <div>
+        <p class="font-bold text-textcolor">Curling selbst ausprobieren in St. Gallen:</p>
+        <a class="text-textcolor" href="https://www.curling-stgallen.ch" target="_blank">Curling Center St. Gallen</a>
+    </div>
+</footer>

Webauftritt/eportfolio/partials/nav.hbs

@@ -0,0 +1,56 @@
+<nav class="p-5 bg-navbackground shadow md:flex md:items-center md:justify-between">
+    <div class="flex justify-between items-center ">
+        <a href="index.html"> <img src="/curling_logo.png" alt="Logo" class="h-28"/></a>
+
+        <span class="text-3xl cursor-pointer mx-2 md:hidden block">
+        <img src="/menu.svg" onclick="function Menu(e){
+            let element = document.getElementById('menu-mobile');
+            element.classList.remove('opacity-0');
+            element.classList.remove('pointer-events-none');
+        }
+            Menu(this)"/>
+      </span>
+    </div>
+
+    <ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute text-textcolor w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500">
+        <li class="mx-4 my-6 md:my-0">
+            <a href="index.html" class="{{#if homeActive}}font-bold{{/if}}">Home</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="impressions.html" class="{{#if impressionsActive}}font-bold{{/if}}">Impressionen</a>
+        </li>
+    </ul>
+
+    <ul id="menu-mobile"
+        class="pointer-events-none opacity-0 fixed backdrop-blur top-0 left-0 right-0 bottom-0 md:hidden flex flex-col items-center content-center text-textcolor">
+        <li class="mx-4 mb-6 mt-10 md:my-0">
+            <img src="/close.svg" class="top-10" onclick="function Menu(e){
+                let element = document.getElementById('menu-mobile');
+                element.classList.add('opacity-0');
+                element.classList.add('pointer-events-none');
+            }
+                Menu(this)"/>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <img src="/curling_logo.png" alt="Logo" class="h-28"/>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="index.html" class="{{#if homeActive}}font-bold{{/if}}">Home</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="impressions.html" class="{{#if impressionsActive}}font-bold{{/if}}">Impressionen</a>
+        </li>
+    </ul>
+</nav>

Webauftritt/eportfolio/partials/ruleitem.hbs

@@ -0,0 +1,5 @@
+<div class="flex items-center flex-col bg-banner p-5">
+    <img src="{{image}}" alt="{{imageAlt}}" class="w-72"/>
+    <p class="font-bold text-center">{{title}}</p>
+    <p>{{description}}</p>
+</div>

Webauftritt/eportfolio/partials/spiritofcurlingitem.hbs

@@ -0,0 +1,7 @@
+<div class="flex flex-row bg-banner mx-auto w-11/12 md:w-96 items-center justify-center">
+    <img src="{{image}}" alt="{{imageAlt}}" class="w-12 h-12 justify-center mr-5 ml-5"/>
+    <div>
+        <p class="font-bold">{{title}}</p>
+        <p class="mr-3 mb-3">{{description}}</p>
+    </div>
+</div>

Webauftritt/eportfolio/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

Webauftritt/eportfolio/public/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m16.5 33.6 7.5-7.5 7.5 7.5 2.1-2.1-7.5-7.5 7.5-7.5-2.1-2.1-7.5 7.5-7.5-7.5-2.1 2.1 7.5 7.5-7.5 7.5ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm0-3q7.1 0 12.05-4.975Q41 31.05 41 24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24 41Zm0-17Z"/></svg>

Webauftritt/eportfolio/public/extension.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M17.8 42H9q-1.2 0-2.1-.9Q6 40.2 6 39v-8.8q2.2-.25 3.775-1.725Q11.35 27 11.35 24.85t-1.575-3.625Q8.2 19.75 6 19.5v-8.8q0-1.2.9-2.1.9-.9 2.1-.9h8.85q.55-2 1.975-3.35T23.25 3q2 0 3.425 1.35Q28.1 5.7 28.65 7.7h8.65q1.2 0 2.1.9.9.9.9 2.1v8.65q2 .55 3.275 2.075 1.275 1.525 1.275 3.525t-1.275 3.35Q42.3 29.65 40.3 30.2V39q0 1.2-.9 2.1-.9.9-2.1.9h-8.8q-.25-2.4-1.775-3.875T23.15 36.65q-2.05 0-3.575 1.475Q18.05 39.6 17.8 42ZM9 39h6.5q1.25-3.05 3.5-4.2 2.25-1.15 4.15-1.15 1.9 0 4.15 1.15 2.25 1.15 3.5 4.2h6.5V27.25h2.25q1 0 1.65-.65.65-.65.65-1.65 0-1-.65-1.65-.65-.65-1.65-.65H37.3V10.7H25.55V8.3q0-1-.65-1.65Q24.25 6 23.25 6q-1 0-1.65.65-.65.65-.65 1.65v2.4H9v6.5q2.4.9 3.875 3t1.475 4.65q0 2.55-1.475 4.65Q11.4 31.6 9 32.5Zm16.45-16.5Z"/></svg>

Webauftritt/eportfolio/public/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"/></svg>

Webauftritt/eportfolio/public/question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M24.2 35.65q.8 0 1.35-.55t.55-1.35q0-.8-.55-1.35t-1.35-.55q-.8 0-1.35.55t-.55 1.35q0 .8.55 1.35t1.35.55Zm-1.75-7.3h2.95q0-1.3.325-2.375T27.75 23.5q1.55-1.3 2.2-2.55.65-1.25.65-2.75 0-2.65-1.725-4.25t-4.575-1.6q-2.45 0-4.325 1.225T17.25 16.95l2.65 1q.55-1.4 1.65-2.175 1.1-.775 2.6-.775 1.7 0 2.75.925t1.05 2.375q0 1.1-.65 2.075-.65.975-1.9 2.025-1.5 1.3-2.225 2.575-.725 1.275-.725 3.375ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm0-3q7.1 0 12.05-4.975Q41 31.05 41 24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24 41Zm0-17Z"/></svg>

Webauftritt/eportfolio/public/rules.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M8 42v-3h24v3Zm11.1-10.6L8 20.3l3.5-3.6 11.2 11.1Zm12.7-12.7L20.7 7.5 24.3 4l11.1 11.1ZM41.9 40 15.1 13.2l2.1-2.1L44 37.9Z"/></svg>

Webauftritt/eportfolio/public/rules/stoneOrder.svg

@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="411" height="283" viewBox="0 0 411 283">
+  <g id="Gruppe_27" data-name="Gruppe 27" transform="translate(-534.75 -92)">
+    <g id="Pfad_7" data-name="Pfad 7" transform="translate(945.75 92) rotate(90)" fill="#fff">
+      <path d="M 282.5 410.5 L 0.5 410.5 L 0.5 0.5 L 282.5 0.5 L 282.5 410.5 Z" stroke="none"/>
+      <path d="M 1 1 L 1 410 L 282 410 L 282 1 L 1 1 M 0 0 L 283 0 L 283 411 L 0 411 L 0 0 Z" stroke="none" fill="#707070"/>
+    </g>
+    <g id="Ellipse_7" data-name="Ellipse 7" transform="translate(623 196)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_8" data-name="Ellipse 8" transform="translate(583 196)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_9" data-name="Ellipse 9" transform="translate(703 196)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_10" data-name="Ellipse 10" transform="translate(663 196)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_11" data-name="Ellipse 11" transform="translate(783 196)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_12" data-name="Ellipse 12" transform="translate(743 196)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_13" data-name="Ellipse 13" transform="translate(623 236)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_14" data-name="Ellipse 14" transform="translate(583 236)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_15" data-name="Ellipse 15" transform="translate(703 236)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_16" data-name="Ellipse 16" transform="translate(663 236)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_17" data-name="Ellipse 17" transform="translate(783 236)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_18" data-name="Ellipse 18" transform="translate(743 236)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_19" data-name="Ellipse 19" transform="translate(863 196)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_20" data-name="Ellipse 20" transform="translate(823 196)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_21" data-name="Ellipse 21" transform="translate(863 236)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <g id="Ellipse_22" data-name="Ellipse 22" transform="translate(823 236)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
+      <circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
+      <circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
+    </g>
+    <text id="_1" data-name="1" transform="translate(595 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">1</tspan></text>
+    <text id="_2" data-name="2" transform="translate(635 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">2</tspan></text>
+    <text id="_3" data-name="3" transform="translate(675 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">3</tspan></text>
+    <text id="_4" data-name="4" transform="translate(715 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">4</tspan></text>
+    <text id="_5" data-name="5" transform="translate(755 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">5</tspan></text>
+    <text id="_6" data-name="6" transform="translate(795 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">6</tspan></text>
+    <text id="_7" data-name="7" transform="translate(835 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">7</tspan></text>
+    <text id="_8" data-name="8" transform="translate(875 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">8</tspan></text>
+    <text id="_9" data-name="9" transform="translate(595 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">9</tspan></text>
+    <text id="_10" data-name="10" transform="translate(630 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">10</tspan></text>
+    <text id="_11" data-name="11" transform="translate(670 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">11</tspan></text>
+    <text id="_12" data-name="12" transform="translate(710 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">12</tspan></text>
+    <text id="_13" data-name="13" transform="translate(749 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">13</tspan></text>
+    <text id="_14" data-name="14" transform="translate(789 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">14</tspan></text>
+    <text id="_15" data-name="15" transform="translate(830 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">15</tspan></text>
+    <text id="_16" data-name="16" transform="translate(870 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">16</tspan></text>
+  </g>
+</svg>

Webauftritt/eportfolio/rules.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/png" href="/curling_logo.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Curling E-Portfolio</title>
+</head>
+<body class="bg-primary flex flex-col min-h-screen">
+
+{{> nav rulesActive=true }}
+
+<div class="home grow">
+
+    <h1 class="flex justify-center">Regeln</h1>
+
+    <div class="h-full grid grid-cols-1 md:grid-cols-3 gap-1 content-start p-16">
+        {{> ruleitem
+        image="/rules/fgz.svg"
+        imageAlt="Free Guard Zone"
+        title="Free Guard Zone (FGZ)"
+        description="Die Free Guard Zone (im Bild grün) definiert, dass bis zum 6. gespielten Stein keine Guard
+        aus dem Spiel genommen werden darf."
+        }}
+
+        {{> ruleitem
+        image="/rules/validStone.svg"
+        imageAlt="Gültigkeitsbereich Steine"
+        title="Gültigkeit der Steine"
+        description="Die Steine sind nicht überall gültig. So müssen sie zwischen Hog-Line und Back-Line liegen, um
+        gültig zu sein.
+        (im Bild grün markiert)"
+        }}
+
+        {{> ruleitem
+        image="/rules/broomVsStone.svg"
+        imageAlt="Wischbereich gegnerischer Stein"
+        title="Wischen des gegnerischen Steins"
+        description="Hinter der Tee-Line (grün eingezeichneter Bereich) darf ein gegnerischer Stein durch jemanden
+        gewischt werden.
+        So kann dieser aus dem Spiel genommen werden."
+        }}
+
+        {{> ruleitem
+        image="/rules/stoneOrder.svg"
+        imageAlt="Steinreihenfolge"
+        title="Steinreihenfolge"
+        description="Die je acht Steine pro Team werden alternierend gespielt. Zu beginn des Spiels wird jeweils
+        ausgelost, welches
+        Team das Recht des letzten Stein bekommt. Das andere Team beginnt dann logischerweise das Spiel."
+        }}
+
+        {{> ruleitem
+        image="/rules/countOrder.svg"
+        imageAlt="Zählung des Spielstands"
+        title="Zählen des Spielstandes"
+        description="Um am Ende eines Spiels den Spielstand herauszufinden, werden die Steine vom Zentrum her weg
+        gezählt. Sobald
+        ein gegnerischer Stein näher ist, zählen nur alle bis dahin gezählten Steine. Im obigen Spielstand wären das
+        zwei Steine für
+        gelb, obwohl noch zwei rote Steine im Haus liegen."
+        }}
+    </div>
+</div>
+
+{{> footer }}
+<script type="module" src="/main.js"></script>
+</body>
+</html>

Webauftritt/eportfolio/spiritofcurling.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/png" href="/curling_logo.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Curling E-Portfolio</title>
+</head>
+<body class="bg-primary flex flex-col min-h-screen">
+
+{{> nav spiritActive=true}}
+
+<div class="home grow">
+
+    <div class="flex flex-col items-center w-full">
+        <h1 class="">Spirit of Curling</h1>
+        <p class="text-center w-6/12">Der Spirit of Curling ist eine Art Regelwerk, welches beschreibt wie
+            ein Curler den Respekt gegenüber den Mitspielern, Gegnern und dem Sport selbst zeigen soll.</p>
+
+        <div class="h-full grid grid-cols-1 md:grid-cols-3 gap-2 content-start my-10">
+            {{> spiritofcurlingitem
+            title="Manieren"
+            description="Ein Curler verhält sich imemr anständig, zuvorkommend und wie ein Gentleman."
+            image="/spiritofcurling/ways.png"
+            imageAlt="Icon Manieren"}}
+
+            {{> spiritofcurlingitem
+            title="Gewinn ist das Ziel"
+            description="Ein Curler spielt um zu gewinnen, nie aber um seinen Gegner zu erniederigen."
+            image="/spiritofcurling/trophy.png"
+            imageAlt="Icon Gewinn"}}
+
+            {{> spiritofcurlingitem
+            title="Keine Ablenkung"
+            description="Ein Curler wird nie versuchen seinen Gegner abzulenken oder ihn daran zu hindern, sein
+            Bestes
+            zu
+            tun."
+            image="/spiritofcurling/distraction.png"
+            imageAlt="Icon Ablenkung"}}
+
+            {{> spiritofcurlingitem
+            title="Keine Vorteile verschaffen"
+            description="Ein Curler versucht nie, mit anderen Mitteln als mit den spielerischen Möglichkeiten,
+            Vorteile
+            zu
+            erzielen."
+            image="/spiritofcurling/plus.png"
+            imageAlt="Icon Vorteile"}}
+
+            {{> spiritofcurlingitem
+            title="Zuerst verlieren lernen"
+            description="Ein Curler muss zuerst lernen zu verlieren, erst dann ist er auch würdig zu gewinnen."
+            image="/spiritofcurling/psychology.png"
+            imageAlt="Icon Psychologie"}}
+
+            {{> spiritofcurlingitem
+            title="Niederlage über ungerechtem Sieg"
+            description="Ein Curler zieht eine Niederlage einem ungerecheten Sieg vor."
+            image="/spiritofcurling/disappointed.png"
+            imageAlt="Icon Niederlage"}}
+
+            {{> spiritofcurlingitem
+            title="Keine verstösse gegen Spielregeln"
+            description="Ein Curler verstösst nie absichtlich gegen Spielregeln oder eine der geschriebenen oder
+            ungeschriebenen
+            Überlieferungen"
+            image="/spiritofcurling/prohibited.png"
+            imageAlt="Icon Verboten"}}
+
+            {{> spiritofcurlingitem
+            title="Keine unerwarteten Handlungen"
+            description="Ein Curler wird nie etwas tun, was er auch von seinen Mitspielern nicht erwartet."
+            image="/spiritofcurling/magic.png"
+            imageAlt="Icon unerwartet"}}
+
+            {{> spiritofcurlingitem
+            title="Gegnerfreundlich"
+            description="Ein Curler entscheidet sich in Streitfragen immer zu Gunsten seines Gegners."
+            image="/spiritofcurling/friendly.png"
+            imageAlt="Icon Freundlich"}}
+        </div>
+    </div>
+</div>
+
+{{> footer }}
+<script type="module" src="/main.js"></script>
+</body>
+</html>

Webauftritt/eportfolio/style.scss

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+h1 {
+  @apply text-s-h1;
+
+  @screen md {
+    @apply text-h1;
+  }
+}

Webauftritt/eportfolio/tailwind.config.cjs

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./*.{html,js}",
+    "./partials/*.hbs"],
+    theme: {
+        extend: {
+            colors: {
+                textcolor: '#CCDBDC',
+                navbackground: '#003249',
+                primary: '#9AD1D4',
+                banner: '#007EA7'
+            },
+            fontSize: {
+                's-h1': '50px',
+                h1: '56px'
+            }
+        },
+    },
+    plugins: [],
+}

Webauftritt/eportfolio/vite.config.js

@@ -0,0 +1,19 @@
+import {resolve} from 'path';
+import handlebars from 'vite-plugin-handlebars';
+
+export default {
+    base: './',
+    build: {
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, 'index.html'),
+                rules: resolve(__dirname, 'rules.html'),
+                impressions: resolve(__dirname, 'impressions.html'),
+                spiritofcurling: resolve(__dirname, 'spiritofcurling.html'),
+            },
+        }
+    },
+    plugins: [handlebars({
+        partialDirectory: resolve(__dirname, 'partials'),
+    })],
+};

Webauftritt/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-</body>
-</html>