Changed some structure and basics

src/app/constants/AssetsConstants.ts

@@ -36,4 +36,5 @@
   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

@@ -26,9 +26,11 @@
             [src]="img.url"
             [alt]="project.title | translate"
           />
-          <div class="slide-source">
+          @if (img.source) {
-            {{ 'PROJECTS.IMAGE_SOURCE' | translate }}: {{ img.source }}
+            <div class="slide-source">
-          </div>
+              {{ 'PROJECTS.IMAGE_SOURCE' | translate }}: {{ img.source }}
+            </div>
+          }
         </swiper-slide>
       }
     </swiper-container>
@@ -41,11 +43,11 @@
   </mat-chip-set>
 
   <div class="link-section">
-    @if (project.link)
+    @for(link of project.links; track link)
     {
-      <a mat-button href="{{project.link}}" target="_blank" rel="noopener noreferrer">
+      <a mat-button href="{{link.url}}" target="_blank" rel="noopener noreferrer">
         <mat-icon>open_in_new</mat-icon>
-        {{ 'PROJECTS.LINK_TO_PROJECT' | translate }}
+        {{ link.name | translate }}
       </a>
     }
 

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

@@ -17,6 +17,11 @@
   background: rgba(0,0,0,.75);
 }
 
+.my-swiper {
+  background-color: #222;
+  border-radius: 12px;
+}
+
 .my-swiper::part(pagination) {
   bottom: 12px;
 }
@@ -25,7 +30,7 @@
   width: 100%;
   height: auto;
   max-height: 512px !important;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: 12px;
   display: block;
 }

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

@@ -21,7 +21,10 @@ export interface Projects {
   }[],
   icon: string,
   assets: string,
-  link: string,
+  links: {
+    name: string,
+    url: string
+  }[],
   bulletPoints: string[],
   isFeatured: boolean,
   technologies: string[]
@@ -55,7 +58,7 @@ export class ProjectsComponent {
         images: [],
         icon: 'web',
         assets: '',
-        link: 'https://andreas-dahm.eu',
+        links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://andreas-dahm.eu'}],
         bulletPoints: [
           'PROJECTS.PLAYGROUND.BULLET_1',
           'PROJECTS.PLAYGROUND.BULLET_2',
@@ -78,7 +81,7 @@ export class ProjectsComponent {
         ],
         icon: 'sports_esports',
         assets: '',
-        link: 'https.store.steampowered.com/app/1532640/El_Mucho/',
+        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',
@@ -100,7 +103,7 @@ export class ProjectsComponent {
         ],
         icon: 'videogame_asset',
         assets: '',
-        link: 'https.itch.io/c/6628860/lobos-collection',
+        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',
@@ -125,7 +128,7 @@ export class ProjectsComponent {
         ],
         icon: 'history_edu',
         assets: AssetsConstants.DIPLOMA,
-        link: 'https.www.th-bingen.de',
+        links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https.www.th-bingen.de'}],
         bulletPoints: [
           'PROJECTS.DIPLOMA.BULLET_1',
           'PROJECTS.DIPLOMA.BULLET_2',
@@ -148,7 +151,16 @@ export class ProjectsComponent {
         ],
         icon: 'dns',
         assets: '',
-        link: 'https://andreas-dahm.eu',
+        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',