Extended about page and fixed internal links

src/app/constants/AssetsConstants.ts

@@ -31,4 +31,10 @@
   static readonly DIPLOMA_5 = '/assets/projects/diploma/5.jpg';
   static readonly DIPLOMA_6 = '/assets/projects/diploma/6.jpg';
 
+  static readonly TRIBBLE_1 = '/assets/projects/tribble-the-homeserver/2.png';
+  static readonly TRIBBLE_2 = '/assets/projects/tribble-the-homeserver/1.png';
+  static readonly TRIBBLE_3 = '/assets/projects/tribble-the-homeserver/3.png';
+  static readonly TRIBBLE_4 = '/assets/projects/tribble-the-homeserver/4.png';
+
+
 }

src/app/pages/about/about.component.ts

@@ -93,6 +93,12 @@ export class AboutComponent {
       externalLink: '',
       internalLink: 'projects',
       identifier: 'diploma',
+    },
+    {
+      key: 'ABOUT.PROJECT.TRIBBLE',
+      externalLink: '',
+      internalLink: 'projects',
+      identifier: 'tribble-the-homeserver',
     }
   ];
 

src/app/pages/projects/dialog/project-dialog.component.html

@@ -0,0 +1,66 @@
+<h2 mat-dialog-title>{{ project.title | translate }}</h2>
+<mat-dialog-content>
+  <p>{{ project.introduction | translate }}</p>
+
+  <ul>
+    @for(bullet of project.bulletPoints; track bullet) {
+      <li>{{ bullet | translate }}</li>
+    }
+  </ul>
+
+  @if (project.images.length > 0)
+  {
+    <swiper-container
+      class="my-swiper"
+      [attr.slides-per-view]="1.2"
+      [attr.space-between]="12"
+      [attr.navigation]="true"
+      [attr.pagination]="true"
+      [attr.keyboard]="true"
+      style="width: 100%;"
+    >
+      @for (img of project.images; track img) {
+        <swiper-slide>
+          <img
+            class="slide-img"
+            [src]="img.url"
+            [alt]="project.title | translate"
+          />
+          @if (img.source) {
+            <div class="slide-source">
+              {{ 'PROJECTS.IMAGE_SOURCE' | translate }}: {{ img.source }}
+            </div>
+          }
+        </swiper-slide>
+      }
+    </swiper-container>
+  }
+
+  <mat-chip-set aria-label="Technologies">
+    @for(tech of project.technologies; track tech) {
+      <mat-chip>{{tech}}</mat-chip>
+    }
+  </mat-chip-set>
+
+  <div class="link-section">
+    @for(link of project.links; track link)
+    {
+      <a mat-button href="{{link.url}}" target="_blank" rel="noopener noreferrer">
+        <mat-icon>open_in_new</mat-icon>
+        {{ link.name | translate }}
+      </a>
+    }
+
+    @if(project.assets)
+    {
+      <a mat-button href="{{project.assets}}" rel="noopener noreferrer">
+        <mat-icon>download</mat-icon>
+        {{ 'PROJECTS.DOWNLOAD' | translate}}
+      </a>
+    }
+  </div>
+
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>{{ 'PROJECTS.CLOSE' | translate }}</button>
+</mat-dialog-actions>

src/app/pages/projects/dialog/project-dialog.component.scss

@@ -0,0 +1,76 @@
+.my-swiper::part(button-prev),
+.my-swiper::part(button-next) {
+  width: 35px;
+  height: 35px;
+  padding: 5px;
+  border-radius: 999px;
+  background: rgba(0,0,0,.5);
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.my-swiper::part(button-prev):hover,
+.my-swiper::part(button-next):hover {
+  background: rgba(0,0,0,.75);
+}
+
+.my-swiper {
+  background-color: #222;
+  border-radius: 12px;
+}
+
+.my-swiper::part(pagination) {
+  bottom: 12px;
+}
+
+.slide-img {
+  width: 100%;
+  height: auto;
+  max-height: 512px !important;
+  object-fit: contain;
+  border-radius: 12px;
+  display: block;
+}
+
+.slide-source {
+  font-size: 0.75rem;
+  color: white;
+  background: rgba(0,0,0,.5);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+}
+
+ul {
+  padding-left: 20px;
+  margin-bottom: 1.5rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+mat-chip-set {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.link-section {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+  flex-wrap: wrap;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+mat-dialog-actions {
+  justify-content: flex-end;
+}

src/app/pages/projects/dialog/project-dialog.component.ts

@@ -0,0 +1,35 @@
+import {Component, inject, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogTitle
+} from '@angular/material/dialog';
+import {Projects} from '../projects.component';
+import {TranslatePipe} from '@ngx-translate/core';
+import {MatIcon} from '@angular/material/icon';
+import {MatChip, MatChipSet} from '@angular/material/chips';
+import {MatButton} from '@angular/material/button';
+
+@Component({
+  selector: 'app-project-dialog',
+  templateUrl: './project-dialog.component.html',
+  styleUrls: ['./project-dialog.component.scss'],
+  standalone: true,
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    TranslatePipe,
+    MatIcon,
+    MatChip,
+    MatChipSet,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ProjectDialogComponent {
+  project: Projects = inject(MAT_DIALOG_DATA);
+}

src/app/pages/projects/projects.component.html

@@ -1,63 +1,54 @@
-<mat-accordion class="project-headers-align">
-  @for (project of allProjects; track project) {
-    <mat-expansion-panel [expanded]="isExpanded(project.identifier)">
-      <mat-expansion-panel-header>
-        <mat-panel-title>{{ project.title | translate }}</mat-panel-title>
-        <mat-panel-description>
-          {{ project.shortDescription | translate}}
-          <mat-icon>{{ project.icon }}</mat-icon>
-        </mat-panel-description>
-      </mat-expansion-panel-header>
+<div class="project-grid">
+  @if (featuredProject(); as project) {
+    <mat-card class="project-card featured">
+      <mat-card-header>
+        <mat-card-title>{{ project.title | translate }}</mat-card-title>
+        <mat-card-subtitle>{{ project.shortDescription | translate }}</mat-card-subtitle>
+      </mat-card-header>
+      @if(project.images.length > 0) {
+        <img mat-card-image [src]="project.images[0].url" [alt]="project.title | translate">
+      } @else {
+        <div class="icon-container">
+          <mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
+        </div>
+      }
+      <mat-card-content>
         <p>{{ project.introduction | translate }}</p>
+        <mat-chip-set aria-label="Technologies">
+          @for(tech of project.technologies; track tech) {
+            <mat-chip>{{tech}}</mat-chip>
+          }
+        </mat-chip-set>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button (click)="openProjectDialog(project)">{{ 'PROJECTS.READ_MORE' | translate }}</button>
+      </mat-card-actions>
+    </mat-card>
+  }
 
-      @if (project.link)
-      {
-        <div class="link-row">
-          <a class="link-with-icon"
-             href="{{project.link}}"
-             target="_blank"
-             rel="noopener noreferrer">
-            <mat-icon>open_in_new</mat-icon>
-            {{project.link}}
-          </a>
+  @for (project of otherProjects(); track project) {
+    <mat-card class="project-card">
+      <mat-card-header>
+        <mat-card-title>{{ project.title | translate }}</mat-card-title>
+      </mat-card-header>
+       @if(project.images.length > 0) {
+        <img mat-card-image [src]="project.images[0].url" [alt]="project.title | translate">
+      } @else {
+        <div class="icon-container">
+          <mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
         </div>
       }
-
-      @if(project.assets)
-      {
-        <div class="link-row">
-          <a class="link-with-icon"
-             href="{{project.assets}}"
-             rel="noopener noreferrer">
-            <mat-icon>download</mat-icon>
-            {{ 'PROJECTS.DOWNLOAD' | translate}}
-          </a>
+      <mat-card-content>
+        <p>{{ project.shortDescription | translate }}</p>
+        <mat-chip-set aria-label="Technologies">
+          @for(tech of project.technologies; track tech) {
+            <mat-chip>{{tech}}</mat-chip>
+          }
+        </mat-chip-set>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button (click)="openProjectDialog(project)">{{ 'PROJECTS.READ_MORE' | translate }}</button>
+      </mat-card-actions>
+    </mat-card>
+  }
 </div>
-      }
-
-      @if (project.images.length > 0)
-      {
-        <swiper-container
-          class="my-swiper"
-          [attr.slides-per-view]="1.2"
-          [attr.space-between]="12"
-          [attr.navigation]="true"
-          [attr.pagination]="true"
-          [attr.keyboard]="true"
-          style="width: 100%;"
-        >
-          @for (img of project.images; track img) {
-            <swiper-slide>
-              <img
-                class="slide-img"
-                [src]="img"
-                [alt]="project.title | translate"
-                (click)="openImage(project.title, img)"
-              />
-            </swiper-slide>
-          }
-        </swiper-container>
-      }
-    </mat-expansion-panel>
-  }
-</mat-accordion>

src/app/pages/projects/projects.component.scss

@@ -1,40 +1,60 @@
-.project-headers-align .mat-expansion-panel-header-description {
-  justify-content: space-between;
-  align-items: center;
+.project-grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 }
 
-.project-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
-  margin-left: 8px;
-}
-
-.slide-img {
-  width: 100%;
-  height: auto;
-  max-height: 512px !important;
-  object-fit: cover;
-  border-radius: 12px;
-  display: block;
-  cursor: pointer;
-}
-
-.my-swiper::part(button-prev),
-.my-swiper::part(button-next) {
-  width: 35px;
-  height: 35px;
-  padding: 5px;
-  border-radius: 999px;
-  background: rgba(0,0,0,.5);
-
+.project-card {
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+  }
+
+  &.featured {
+    grid-column: 1 / -1; // Span full width
+  }
+
+  mat-card-header {
+    padding-bottom: 1rem;
+  }
+
+  mat-card-content {
+    flex-grow: 1; // Ensure content area expands
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  mat-chip-set {
+    padding-top: 1rem;
+  }
+
+  mat-card-actions {
+    margin-top: auto; // Push actions to the bottom
+  }
+}
+
+.icon-container {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  height: 200px; /* Or a height that fits your design */
+  background-color: #f0f0f0; /* A light background for the icon */
 }
 
-.my-swiper::part(button-prev):hover,
-.my-swiper::part(button-next):hover {
-  background: rgba(0,0,0,.75);
+.fallback-icon {
+  font-size: 4rem;
+  width: 4rem;
+  height: 4rem;
+  color: #666;
 }
 
-.my-swiper::part(pagination) {
-  bottom: 12px;
+// Ensure images don't exceed the card width and maintain aspect ratio
+img[mat-card-image] {
+  width: 100%;
+  height: 250px;
+  object-fit: cover;
 }

src/app/pages/projects/projects.component.ts

@@ -1,11 +1,13 @@
-import {Component, inject, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {MatAccordion, MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelHeader, MatExpansionPanelTitle} from '@angular/material/expansion';
+import {Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {MatCardModule} from '@angular/material/card';
+import {MatChipsModule} from '@angular/material/chips';
 import {MatIcon} from '@angular/material/icon';
 import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 import {ActivatedRoute} from '@angular/router';
 import {AssetsConstants} from '../../constants/AssetsConstants';
 import {MatDialog} from '@angular/material/dialog';
-import {ImageDialogComponent} from '../../layout/imageDialog/image.component';
+import {MatButtonModule} from '@angular/material/button';
+import {ProjectDialogComponent} from './dialog/project-dialog.component';
 
 
 export interface Projects {
@@ -13,23 +15,29 @@ export interface Projects {
   title: string,
   shortDescription: string,
   introduction: string,
-  images: string[],
+  images: {
+    url: string,
+    source: string
+  }[],
   icon: string,
   assets: string,
-  link: string,
+  links: {
+    name: string,
+    url: string
+  }[],
   bulletPoints: string[],
+  isFeatured: boolean,
+  technologies: string[]
 }
 
 @Component({
   selector: 'app-projects',
   imports: [
-    MatAccordion,
-    MatExpansionPanel,
-    MatExpansionPanelHeader,
-    MatExpansionPanelTitle,
-    MatExpansionPanelDescription,
+    MatCardModule,
+    MatChipsModule,
     MatIcon,
-    TranslatePipe
+    TranslatePipe,
+    MatButtonModule
   ],
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss',
@@ -41,8 +49,6 @@ export class ProjectsComponent {
     private readonly dialog = inject(MatDialog);
     private readonly translateService = inject(TranslateService);
 
-    selectedKey = signal<string | null>(null);
-
     allProjects: Projects[] = [
       {
         identifier: "playground",
@@ -52,65 +58,140 @@ export class ProjectsComponent {
         images: [],
         icon: 'web',
         assets: '',
-        link: 'https://andreas-dahm.eu',
-        bulletPoints: []
+        links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://andreas-dahm.eu'}],
+        bulletPoints: [
+          'PROJECTS.PLAYGROUND.BULLET_1',
+          'PROJECTS.PLAYGROUND.BULLET_2',
+          'PROJECTS.PLAYGROUND.BULLET_3',
+          'PROJECTS.PLAYGROUND.BULLET_4',
+        ],
+        isFeatured: false,
+        technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'GitHub Actions', 'Docker']
       },
       {
         identifier: "elmucho",
         title: 'PROJECTS.EL_MUCHO.TITLE',
         shortDescription: 'PROJECTS.EL_MUCHO.SHORT_DESCRIPTION',
         introduction: 'PROJECTS.EL_MUCHO.INTRODUCTION',
-        images: [AssetsConstants.EL_MUCHO_1, AssetsConstants.EL_MUCHO_2, AssetsConstants.EL_MUCHO_3, AssetsConstants.EL_MUCHO_4],
+        images: [
+          { url: AssetsConstants.EL_MUCHO_1, source: ''},
+          { url: AssetsConstants.EL_MUCHO_2, source: ''},
+          { url: AssetsConstants.EL_MUCHO_3, source: ''},
+          { url: AssetsConstants.EL_MUCHO_4, source: ''}
+        ],
         icon: 'sports_esports',
         assets: '',
-        link: 'https://store.steampowered.com/app/1532640/El_Mucho/',
-        bulletPoints: []
+        links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https.store.steampowered.com/app/1532640/El_Mucho/'}],
+        bulletPoints: [
+          'PROJECTS.EL_MUCHO.BULLET_1',
+          'PROJECTS.EL_MUCHO.BULLET_2',
+          'PROJECTS.EL_MUCHO.BULLET_3',
+          'PROJECTS.EL_MUCHO.BULLET_4',
+        ],
+        isFeatured: true,
+        technologies: ['Unity', 'C#', 'Steamworks', 'Git']
       },
       {
         identifier: "gamejams",
         title: 'PROJECTS.GAME_JAMS.TITLE',
         shortDescription: 'PROJECTS.GAME_JAMS.SHORT_DESCRIPTION',
         introduction: 'PROJECTS.GAME_JAMS.INTRODUCTION',
-        images: [AssetsConstants.GAME_JAMS_1, AssetsConstants.GAME_JAMS_2, AssetsConstants.GAME_JAMS_3],
+        images: [
+          { url: AssetsConstants.GAME_JAMS_1, source: ''},
+          { url: AssetsConstants.GAME_JAMS_2, source: ''},
+          { url: AssetsConstants.GAME_JAMS_3, source: ''}
+        ],
         icon: 'videogame_asset',
         assets: '',
-        link: 'https://itch.io/c/6628860/lobos-collection',
-        bulletPoints: []
+        links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https.itch.io/c/6628860/lobos-collection'}],
+        bulletPoints: [
+          'PROJECTS.GAME_JAMS.BULLET_1',
+          'PROJECTS.GAME_JAMS.BULLET_2',
+          'PROJECTS.GAME_JAMS.BULLET_3',
+          'PROJECTS.GAME_JAMS.BULLET_4',
+        ],
+        isFeatured: false,
+        technologies: ['Unity', 'C#', 'Git']
       },
       {
         identifier: "diploma",
         title: 'PROJECTS.DIPLOMA.TITLE',
         shortDescription: 'PROJECTS.DIPLOMA.SHORT_DESCRIPTION',
         introduction: 'PROJECTS.DIPLOMA.INTRODUCTION',
-        images: [AssetsConstants.DIPLOMA_1, AssetsConstants.DIPLOMA_2, AssetsConstants.DIPLOMA_3, AssetsConstants.DIPLOMA_4, AssetsConstants.DIPLOMA_5, AssetsConstants.DIPLOMA_6],
+        images: [
+          { url: AssetsConstants.DIPLOMA_1, source: ''},
+          { url: AssetsConstants.DIPLOMA_2, source: ''},
+          { url: AssetsConstants.DIPLOMA_3, source: ''},
+          { url: AssetsConstants.DIPLOMA_4, source: ''},
+          { url: AssetsConstants.DIPLOMA_5, source: ''},
+          { url: AssetsConstants.DIPLOMA_6, source: ''}
+        ],
         icon: 'history_edu',
         assets: AssetsConstants.DIPLOMA,
-        link: 'https://www.th-bingen.de',
-        bulletPoints: []
+        links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https.www.th-bingen.de'}],
+        bulletPoints: [
+          'PROJECTS.DIPLOMA.BULLET_1',
+          'PROJECTS.DIPLOMA.BULLET_2',
+          'PROJECTS.DIPLOMA.BULLET_3',
+          'PROJECTS.DIPLOMA.BULLET_4',
+        ],
+        isFeatured: false,
+        technologies: ['C++', 'OpenGL', 'Qt', '3D-Scanner']
+      },
+      {
+        identifier: "tribble-the-homeserver",
+        title: 'PROJECTS.TRIBBLE.TITLE',
+        shortDescription: 'PROJECTS.TRIBBLE.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.TRIBBLE.INTRODUCTION',
+        images: [
+          { url: AssetsConstants.TRIBBLE_1, source: 'https://dashboardicons.com/icons/docker-engine'},
+          { url: AssetsConstants.TRIBBLE_2, source: 'https://upload.wikimedia.org/wikipedia/commons/0/03/Hostinger_Logo.png'},
+          { url: AssetsConstants.TRIBBLE_3, source: 'https://dashboardicons.com/icons/gitea'},
+          { url: AssetsConstants.TRIBBLE_4, source: 'https://commons.wikimedia.org/wiki/File:Traefik.logo.png'}
+        ],
+        icon: 'dns',
+        assets: '',
+        links: [
+          {name: 'Ubuntu Server', url: 'https://ubuntu.com/server'},
+          {name: 'Docker', url: 'https://www.docker.com/'},
+          {name: 'Traefik', url: 'https://traefik.io/'},
+          {name: 'Gitea', url: 'https://gitea.io/'},
+          {name: 'Jellyfin', url: 'https://jellyfin.org/'},
+          {name: 'AdGuard Home', url: 'https://adguard.com/en/adguard-home/overview.html'},
+          {name: 'Paperless-ngx', url: 'https://paperless-ngx.com/'},
+          {name: 'Tailscale', url: 'https://tailscale.com/'}
+        ],
+        bulletPoints: [
+          'PROJECTS.TRIBBLE.BULLET_1',
+          'PROJECTS.TRIBBLE.BULLET_2',
+          'PROJECTS.TRIBBLE.BULLET_3',
+          'PROJECTS.TRIBBLE.BULLET_4',
+        ],
+        isFeatured: false,
+        technologies: ['Ubuntu Server', 'Docker', 'Traefik', 'Gitea', 'Jellyfin', 'AdGuard Home', 'Paperless-ngx', 'Tailscale']
       }
     ]
 
+  featuredProject = computed(() => this.allProjects.find(p => p.isFeatured));
+  otherProjects = computed(() => this.allProjects.filter(p => !p.isFeatured));
+
   constructor() {
     this.route.queryParamMap.subscribe(params => {
-      this.selectedKey.set(params.get('project'));
+      const projectIdentifier = params.get('project');
+      if (projectIdentifier) {
+        const project = this.allProjects.find(p => p.identifier === projectIdentifier);
+        if (project) {
+          this.openProjectDialog(project);
+        }
+      }
     });
   }
 
-  isExpanded(projectKey: string): boolean {
-    return this.selectedKey() === projectKey;
-  }
-
-  openImage(title: string, src: string) {
-      const translatedTitle = this.translateService.instant(title);
-      this.dialog.open(ImageDialogComponent, {
-        data: { title: translatedTitle, src },
-        width: '96vw',
-        height: '96vh',
-        maxWidth: '96vw',
-        maxHeight: '96vh',
-        panelClass: 'image-dialog-panel',
-        autoFocus: false,
-        restoreFocus: true,
+  openProjectDialog(project: Projects) {
+    this.dialog.open(ProjectDialogComponent, {
+      data: project,
+      width: '90vw',
+      maxWidth: '900px',
     });
   }
 }

src/assets/i18n/de.json

@@ -186,6 +186,16 @@
           "P2": "Verstehen und Einschätzen von wissenschaftlichen Arbeiten.",
           "P3": "Adaption und Weiterentwicklung von vorausgegangenen Forschungsarbeiten."
         }
+      },
+      "TRIBBLE": {
+        "TITLE": "Homeserver 'Tribble'",
+        "DESCRIPTION": "In diesem Projekt geht es um die Einrichtung und Wartung meines eigenen Homeservers. Er betreibt mehrere Docker-Container wie Gitea, Jellyfin und mehr. Es ist eine großartige Lernerfahrung im Bereich Self-Hosting und Systemadministration.",
+        "LINK_INTERNAL": "Projektdetails",
+        "HIGHLIGHTS": {
+          "P1": "Self-Hosting verschiedener Dienste mit Docker.",
+          "P2": "CI/CD-Pipeline für die persönliche Website mit Gitea.",
+          "P3": "Sicherer Fernzugriff mit Tailscale und Traefik."
+        }
       }
     },
     "EDUCATION": {
@@ -228,25 +238,54 @@
   },
   "PROJECTS": {
     "DOWNLOAD": "Herunterladen",
+    "READ_MORE": "Mehr erfahren",
+    "LINK_TO_PROJECT": "Zum Projekt",
+    "CLOSE": "Schließen",
+    "IMAGE_SOURCE": "Bildquelle",
     "PLAYGROUND": {
       "TITLE": "Playground Website",
       "SHORT_DESCRIPTION": "Hier geht es um diese Webseite.",
-      "INTRODUCTION": "Dieses Projekt ist hauptsächlich als eine Art 'Spielwiese' gestartet, daher der Name. Es ist geplant, die Seite mit der Zeit weiter auszubauen. Dabei werden hier neue Projekte auftauchen, oder ich werde die Seite an für sich weiter ausbauen, weil ich neue Sachen im Rahmen von Web Technologien ausprobieren möchte."
+      "INTRODUCTION": "Dieses Projekt ist hauptsächlich als eine Art 'Spielwiese' gestartet, daher der Name. Es ist geplant, die Seite mit der Zeit weiter auszubauen. Dabei werden hier neue Projekte auftauchen, oder ich werde die Seite an für sich weiter ausbauen, weil ich neue Sachen im Rahmen von Web Technologien ausprobieren möchte.",
+      "BULLET_1": "Verwendung moderner Technologien und CI/CD-Pipelines (Angular 20+, Spring Boot 4, GitHub).",
+      "BULLET_2": "Präsentation persönlicher Projekte und kontinuierliche Verbesserung algorithmischer Fähigkeiten.",
+      "BULLET_3": "Vertiefung von JavaScript/TypeScript-, Angular- und Spring-Boot-Kenntnissen durch praktisches Arbeiten.",
+      "BULLET_4": "Die Seite ist Open Source und auf GitHub verfügbar."
+    },
+    "TRIBBLE": {
+      "TITLE": "Ärger mit meinem Homeserver Tribble",
+      "SHORT_DESCRIPTION": "Ein Projekt, das die Einrichtung und Wartung eines Homeservers beschreibt, auf dem verschiedene Docker-Container für Self-Hosting-Dienste laufen.",
+      "INTRODUCTION": "Dieses Projekt dokumentiert die Einrichtung eines persönlichen Homeservers mit dem Spitznamen \"Tribble\". Es umfasst die Installation von Ubuntu Server und die Containerisierung von Diensten wie Gitea für die Versionskontrolle, Jellyfin für das Mediastreaming und AdGuard Home für das Blockieren von Werbung im Netzwerk. Der Server ist über Traefik als Reverse-Proxy und Tailscale für eine sichere Netzwerkverbindung mit dem Internet verbunden, was das Self-Hosting der CI/CD-Pipeline dieser Website ermöglicht.",
+      "BULLET_1": "Self-Hosting verschiedener Dienste mit Docker.",
+      "BULLET_2": "CI/CD-Pipeline für die persönliche Website mit Gitea.",
+      "BULLET_3": "Sicherer Fernzugriff mit Tailscale und Traefik.",
+      "BULLET_4": "Netzwerkweites Blockieren von Werbung mit AdGuard Home."
     },
     "EL_MUCHO": {
       "TITLE": "El Mucho",
       "SHORT_DESCRIPTION": "Hier geht es um mein ersten Spiel auf Steam.",
-      "INTRODUCTION": "El Mucho ist ein rundenbasiertes taktisches RPG in einer fiktiven Welt namens Liberika. Es ist angelehnt an alte Klassiker wie Langrisser aka Warsong. In El Mucho geht es darum, die Welt gegen die Angriffe der fiesen Monster zu verteidigen."
+      "INTRODUCTION": "El Mucho ist ein rundenbasiertes taktisches RPG in einer fiktiven Welt namens Liberika. Es ist angelehnt an alte Klassiker wie Langrisser aka Warsong. In El Mucho geht es darum, die Welt gegen die Angriffe der fiesen Monster zu verteidigen.",
+      "BULLET_1": "Veröffentlichung eines Spiels auf Steam und Integration der Steam-API.",
+      "BULLET_2": "Konzeption, Planung und vollständige Entwicklung eines eigenen Spiels.",
+      "BULLET_3": "Implementierung komplexer Algorithmen wie einer eigenen A*-Pfadfindungslogik und Spiel-KI.",
+      "BULLET_4": "Das Spiel wurde mit Unity und C# entwickelt."
     },
     "GAME_JAMS": {
       "TITLE": "Game Jams",
       "SHORT_DESCRIPTION": "Hier geht es meine Teilnahme an mehreren Game Jams.",
-      "INTRODUCTION": "Da ich mich für die Entwicklung von Spielen interessiert, sind Game Jams für mich optimal, um fokussiert an neuen Ideen zu arbeiten und dabei Prototypen zu entwickeln, um zu sehen, ob Spielideen funktionieren oder nicht. In den letzten Jahren habe ich an einigen Game Jams teilgenommen und fasse das hier zusammen."
+      "INTRODUCTION": "Da ich mich für die Entwicklung von Spielen interessiert, sind Game Jams für mich optimal, um fokussiert an neuen Ideen zu arbeiten und dabei Prototypen zu entwickeln, um zu sehen, ob Spielideen funktionieren oder nicht. In den letzten Jahren habe ich an einigen Game Jams teilgenommen und fasse das hier zusammen.",
+      "BULLET_1": "Planung eines realistischen Projektumfangs mit einem Team, der innerhalb von 48 Stunden umsetzbar ist.",
+      "BULLET_2": "Lernen, fokussiert und effizient unter strengen Zeitvorgaben zu arbeiten.",
+      "BULLET_3": "Die Freude zu erleben, in kurzer Zeit ein spielbares Projekt zu erstellen und andere damit spielen zu sehen.",
+      "BULLET_4": "Alle Projekte sind auf Itch.io verfügbar und spielbar."
     },
     "DIPLOMA": {
       "TITLE": "Diplomarbeit",
       "SHORT_DESCRIPTION": "Kollisionserkennung und Behandlung von komplexen Kleidungsstücken.",
-      "INTRODUCTION": "Die Diplomarbeit handelt von der Erkennung und der Behandlung von Kollisionen zwischen, sowie innerhalb, einzelnen Kleidungsstücken in Echtzeit. Das ist gerade aufgrund der Flexibilität von Stoffen und deren unterschiedlichen Eigenschaften besonders herausfordernd."
+      "INTRODUCTION": "Die Diplomarbeit handelt von der Erkennung und der Behandlung von Kollisionen zwischen, sowie innerhalb, einzelnen Kleidungsstücken in Echtzeit. Das ist gerade aufgrund der Flexibilität von Stoffen und deren unterschiedlichen Eigenschaften besonders herausfordernd.",
+      "BULLET_1": "Echtzeit behandlung von Kollisionserkennung und Behandlung.",
+      "BULLET_2": "Verstehen und Einschätzen von wissenschaftlichen Arbeiten.",
+      "BULLET_3": "Adaption und Weiterentwicklung von vorausgegangenen Forschungsarbeiten.",
+      "BULLET_4": "Die Arbeit wurde mit C++ und OpenGL geschrieben und in die Vidya-Software integriert."
     }
   },
   "IMPRINT": {

src/assets/i18n/en.json

@@ -186,6 +186,16 @@
           "P2": "Understanding and evaluating scientific papers.",
           "P3": "Adaptation and further development of previous research work."
         }
+      },
+      "TRIBBLE": {
+        "TITLE": "Homeserver 'Tribble'",
+        "DESCRIPTION": "This project is about setting up and maintaining my own homeserver. It runs several Docker containers like Gitea, Jellyfin, and more. It's a great learning experience in self-hosting and system administration.",
+        "LINK_INTERNAL": "Project details",
+        "HIGHLIGHTS": {
+          "P1": "Self-hosting of various services using Docker.",
+          "P2": "CI/CD pipeline for the personal website using Gitea.",
+          "P3": "Secure remote access with Tailscale and Traefik."
+        }
       }
     },
     "EDUCATION": {
@@ -228,25 +238,54 @@
   },
   "PROJECTS": {
     "DOWNLOAD": "Download",
+    "READ_MORE": "Read More",
+    "LINK_TO_PROJECT": "To the project",
+    "CLOSE": "Close",
+    "IMAGE_SOURCE": "Image source",
     "PLAYGROUND": {
       "TITLE": "Playground Website",
       "SHORT_DESCRIPTION": "This is about this website.",
-      "INTRODUCTION": "This project was mainly started as a kind of “playground”, hence the name. The plan is to expand the site over time. New projects will appear here, or I will continue to expand the site itself because I want to try out new things in the field of web technologies."
+      "INTRODUCTION": "This project was mainly started as a kind of “playground”, hence the name. The plan is to expand the site over time. New projects will appear here, or I will continue to expand the site itself because I want to try out new things in the field of web technologies.",
+      "BULLET_1": "Using modern technologies and CI/CD pipelines (Angular 20+, Spring Boot 4, GitHub).",
+      "BULLET_2": "Showcasing personal projects and improving algorithmic skills over time.",
+      "BULLET_3": "Deepening knowledge in JavaScript/TypeScript, Angular, Spring Boot and related technologies through hands-on practice.",
+      "BULLET_4": "The site is open source and available on GitHub."
+    },
+    "TRIBBLE": {
+      "TITLE": "Trouble with my homeserver tribble",
+      "SHORT_DESCRIPTION": "A project detailing the setup and maintenance of a home server running various Docker containers for self-hosting services.",
+      "INTRODUCTION": "This project documents the journey of setting up a personal home server, nicknamed \"Tribble\". It involves installing Ubuntu Server and containerizing services like Gitea for version control, Jellyfin for media streaming, and AdGuard Home for network-wide ad-blocking. The server is connected via Traefik as a reverse proxy and Tailscale for secure networking, enabling the self-hosted CI/CD pipeline for this website.",
+      "BULLET_1": "Self-hosting of various services using Docker.",
+      "BULLET_2": "CI/CD pipeline for the personal website using Gitea.",
+      "BULLET_3": "Secure remote access with Tailscale and Traefik.",
+      "BULLET_4": "Network-wide ad-blocking with AdGuard Home."
     },
     "EL_MUCHO": {
       "TITLE": "El Mucho",
       "SHORT_DESCRIPTION": "This is about my first game on steam.",
-      "INTRODUCTION": "El Mucho is a turn-based tactical RPG set in a fictional world called Liberika. It is inspired by old classics such as Langrisser, also known as Warsong. El Mucho is about defending the world against attacks from nasty monsters."
+      "INTRODUCTION": "El Mucho is a turn-based tactical RPG set in a fictional world called Liberika. It is inspired by old classics such as Langrisser, also known as Warsong. El Mucho is about defending the world against attacks from nasty monsters.",
+      "BULLET_1": "Publishing a game on Steam and integrating the Steam API.",
+      "BULLET_2": "Designing, planning and developing a complete game from scratch.",
+      "BULLET_3": "Implementing complex algorithms, including a custom A* pathfinding system and game AI logic.",
+      "BULLET_4": "The game was developed with Unity and C#."
     },
     "GAME_JAMS": {
       "TITLE": "Game Jams",
       "SHORT_DESCRIPTION": "This is about my participation at several game jams.",
-      "INTRODUCTION": "Since I am interested in game development, game jams are ideal for me to focus on new ideas and develop prototypes to see whether game ideas work or not. I have participated in several game jams over the past few years and summarise my experiences here."
+      "INTRODUCTION": "Since I am interested in game development, game jams are ideal for me to focus on new ideas and develop prototypes to see whether game ideas work or not. I have participated in several game jams over the past few years and summarise my experiences here.",
+      "BULLET_1": "Planning a realistic project scope with a team that can be built within 48 hours.",
+      "BULLET_2": "Learning to stay focused and work effectively under strict time constraints.",
+      "BULLET_3": "Experiencing the joy of creating a playable game in a short timeframe and seeing others enjoy it.",
+      "BULLET_4": "All projects are available and playable on Itch.io."
     },
     "DIPLOMA": {
       "TITLE": "Diploma thesis",
       "SHORT_DESCRIPTION": "Collision detection and handling of complex garments.",
-      "INTRODUCTION": "The thesis deals with the detection and handling of collisions between and within individual items of clothing in real time. This is particularly challenging due to the flexibility of fabrics and their varying properties."
+      "INTRODUCTION": "The thesis deals with the detection and handling of collisions between and within individual items of clothing in real time. This is particularly challenging due to the flexibility of fabrics and their varying properties.",
+      "BULLET_1": "Real-time handling of collision detection and response.",
+      "BULLET_2": "Understanding and evaluating scientific papers.",
+      "BULLET_3": "Adaptation and further development of previous research work.",
+      "BULLET_4": "The thesis was written with C++ and OpenGL and integrated into the Vidya software."
     }
   },
   "IMPRINT": {