Extended project page a little bit

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

@@ -9,13 +9,54 @@
         </mat-panel-description>
       </mat-expansion-panel-header>
       <p>{{ project.introduction | translate }}</p>
+
+      @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>
+        </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>
+        </div>
+      }
+
       @if (project.images.length > 0)
       {
-        <div class="gallery">
+        <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) {
-            <img class="gallery-img" [src]="img" [alt]="project.title | translate" />
+            <swiper-slide>
+              <img
+                class="slide-img"
+                [src]="img"
+                [alt]="project.title | translate"
+                (click)="openImage(project.title, img)"
+              />
+            </swiper-slide>
           }
-        </div>
+        </swiper-container>
       }
     </mat-expansion-panel>
   }