Added new project for my homeserver

src/app/constants/AssetsConstants.ts

@@ -31,4 +31,9 @@
   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/projects/dialog/project-dialog.component.html

@@ -23,9 +23,12 @@
         <swiper-slide>
           <img
             class="slide-img"
-            [src]="img"
+            [src]="img.url"
             [alt]="project.title | translate"
           />
+          <div class="slide-source">
+            {{ 'PROJECTS.IMAGE_SOURCE' | translate }}: {{ img.source }}
+          </div>
         </swiper-slide>
       }
     </swiper-container>

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

@@ -30,6 +30,17 @@
   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;

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

@@ -6,7 +6,7 @@
         <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]" [alt]="project.title | translate">
+        <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>
@@ -32,7 +32,7 @@
         <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]" [alt]="project.title | translate">
+        <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>

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

@@ -15,7 +15,10 @@ export interface Projects {
   title: string,
   shortDescription: string,
   introduction: string,
-  images: string[],
+  images: {
+    url: string,
+    source: string
+  }[],
   icon: string,
   assets: string,
   link: string,
@@ -67,7 +70,12 @@ export class ProjectsComponent {
         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/',
@@ -85,7 +93,11 @@ export class ProjectsComponent {
         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',
@@ -103,7 +115,14 @@ export class ProjectsComponent {
         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',
@@ -115,6 +134,29 @@ export class ProjectsComponent {
         ],
         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: '',
+        link: 'https://andreas-dahm.eu',
+        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']
       }
     ]
 

src/assets/i18n/de.json

@@ -231,6 +231,7 @@
     "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.",
@@ -240,6 +241,15 @@
       "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": "Trouble with tribbles",
+      "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.",

src/assets/i18n/en.json

@@ -231,6 +231,7 @@
     "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.",
@@ -240,6 +241,15 @@
       "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 tribbles",
+      "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.",