overworked the project detail pages

2026-02-23 09:37:26 +01:00
parent 45c11e42cd
commit c160fb4bc8
8 changed files with 386 additions and 136 deletions
--- a/src/app/pages/projects/dialog/project-dialog.component.html
+++ b/src/app/pages/projects/dialog/project-dialog.component.html
@@ -1,63 +1,90 @@
 <h2 mat-dialog-title>{{ project.title | translate }}</h2>
 <mat-dialog-content #dialogContent>
-  <p>{{ project.introduction | translate }}</p>
+  <div class="project-dialog-layout">
+    <div class="project-info">
+      <p class="introduction">{{ project.introduction | translate }}</p>

-  <ul>
-    @for(bullet of project.bulletPoints; track bullet) {
-      <li>{{ bullet | translate }}</li>
-    }
-  </ul>
+      <div class="features-list">
+        <ul>
+          @for(bullet of project.bulletPoints; track bullet) {
+          <li>{{ bullet | translate }}</li>
+          }
+        </ul>
+      </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) {
+      <div class="insight-grid">
+        <div class="insight-card technical">
+          <div class="insight-header">
+            <mat-icon>settings_suggest</mat-icon>
+            <h3>{{ 'PROJECTS.SECTION.TECHNICAL' | translate }}</h3>
+          </div>
+          <ul>
+            @for(challenge of project.challenges; track challenge) {
+            <li>{{ challenge | translate }}</li>
+            }
+          </ul>
+        </div>
+
+        <div class="insight-card softskills">
+          <div class="insight-header">
+            <mat-icon>psychology</mat-icon>
+            <h3>{{ 'PROJECTS.SECTION.LEARNINGS' | translate }}</h3>
+          </div>
+          <ul>
+            @for(learning of project.learnings; track learning) {
+            <li>{{ learning | translate }}</li>
+            }
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    @if (project.images.length > 0)
+    {
+    <div class="media-section">
+      <swiper-container class="my-swiper" [attr.slides-per-view]="1" [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"
-          />
+          <img class="slide-img" [src]="img.url" [alt]="project.title | translate" />
          @if (img.source) {
-            <div class="slide-source">
-              {{ img.source }}
-            </div>
+          <div class="slide-source">
+            {{ 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>
+        }
+      </swiper-container>
+    </div>
    }

-    @if(project.assets)
-    {
-      <a mat-button href="{{project.assets}}" rel="noopener noreferrer">
-        <mat-icon>download</mat-icon>
-        {{ 'PROJECTS.DOWNLOAD' | translate}}
-      </a>
-    }
+    <div class="footer-details">
+      <div class="tech-stack">
+        <mat-chip-set aria-label="Technologies">
+          @for(tech of project.technologies; track tech) {
+          <mat-chip>{{tech}}</mat-chip>
+          }
+        </mat-chip-set>
+      </div>
+
+      <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>
+    </div>
  </div>

 </mat-dialog-content>
--- a/src/app/pages/projects/dialog/project-dialog.component.scss
+++ b/src/app/pages/projects/dialog/project-dialog.component.scss
@@ -0,0 +1,117 @@
+.project-dialog-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.introduction {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  opacity: 0.9;
+  margin-bottom: 1rem;
+}
+
+.features-list {
+  margin-bottom: 1.5rem;
+  ul {
+    padding-left: 1.2rem;
+    li {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+.insight-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.insight-card {
+  padding: 1.25rem;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+
+  .insight-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+    color: var(--link-color);
+
+    mat-icon {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 0.9rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 600;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding-left: 1.2rem;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    opacity: 0.85;
+
+    li {
+      margin-bottom: 0.4rem;
+    }
+  }
+}
+
+.dark .insight-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.media-section {
+  margin: 1rem 0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #000;
+}
+
+.footer-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.dark .footer-details {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+.tech-stack {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.link-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
+@media (max-width: 600px) {
+  .insight-grid {
+    grid-template-columns: 1fr;
+  }
+}
--- a/src/app/pages/projects/projects.component.ts
+++ b/src/app/pages/projects/projects.component.ts
@@ -26,6 +26,8 @@ export interface Projects {
    url: string
  }[],
  bulletPoints: string[],
+  challenges: string[],
+  learnings: string[],
  isFeatured: boolean,
  technologies: string[]
 }
@@ -67,6 +69,14 @@ export class ProjectsComponent implements OnInit, OnDestroy {
        'PROJECTS.PLAYGROUND.BULLET_3',
        'PROJECTS.PLAYGROUND.BULLET_4',
      ],
+      challenges: [
+        'PROJECTS.PLAYGROUND.CHALLENGE_1',
+        'PROJECTS.PLAYGROUND.CHALLENGE_2',
+      ],
+      learnings: [
+        'PROJECTS.PLAYGROUND.LEARNING_1',
+        'PROJECTS.PLAYGROUND.LEARNING_2',
+      ],
      isFeatured: false,
      technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'GitHub Actions', 'Docker']
    },
@@ -85,6 +95,15 @@ export class ProjectsComponent implements OnInit, OnDestroy {
        'PROJECTS.EL_MUCHO.BULLET_3',
        'PROJECTS.EL_MUCHO.BULLET_4',
      ],
+      challenges: [
+        'PROJECTS.EL_MUCHO.CHALLENGE_1',
+        'PROJECTS.EL_MUCHO.CHALLENGE_2',
+        'PROJECTS.EL_MUCHO.CHALLENGE_3',
+      ],
+      learnings: [
+        'PROJECTS.EL_MUCHO.LEARNING_1',
+        'PROJECTS.EL_MUCHO.LEARNING_2',
+      ],
      isFeatured: true,
      technologies: ['Unity', 'C#', 'Steamworks', 'Git']
    },
@@ -103,6 +122,14 @@ export class ProjectsComponent implements OnInit, OnDestroy {
        'PROJECTS.GAME_JAMS.BULLET_3',
        'PROJECTS.GAME_JAMS.BULLET_4',
      ],
+      challenges: [
+        'PROJECTS.GAME_JAMS.CHALLENGE_1',
+        'PROJECTS.GAME_JAMS.CHALLENGE_2',
+      ],
+      learnings: [
+        'PROJECTS.GAME_JAMS.LEARNING_1',
+        'PROJECTS.GAME_JAMS.LEARNING_2',
+      ],
      isFeatured: false,
      technologies: ['Unity', 'C#', 'Git']
    },
@@ -121,6 +148,14 @@ export class ProjectsComponent implements OnInit, OnDestroy {
        'PROJECTS.DIPLOMA.BULLET_3',
        'PROJECTS.DIPLOMA.BULLET_4',
      ],
+      challenges: [
+        'PROJECTS.DIPLOMA.CHALLENGE_1',
+        'PROJECTS.DIPLOMA.CHALLENGE_2',
+      ],
+      learnings: [
+        'PROJECTS.DIPLOMA.LEARNING_1',
+        'PROJECTS.DIPLOMA.LEARNING_2',
+      ],
      isFeatured: false,
      technologies: ['C++', 'OpenGL', 'Qt', '3D-Scanner']
    },
@@ -133,7 +168,7 @@ export class ProjectsComponent implements OnInit, OnDestroy {
        { url: AssetsConstants.TRIBBLE_IMAGES[0], source: 'https://upload.wikimedia.org/wikipedia/commons/0/03/Hostinger_Logo.png' },
        { url: AssetsConstants.TRIBBLE_IMAGES[1], source: 'https://dashboardicons.com/icons/docker-engine' },
        { url: AssetsConstants.TRIBBLE_IMAGES[2], source: 'https://dashboardicons.com/icons/gitea' },
-        { url: AssetsConstants.TRIBBLE_IMAGES[3], source: 'https://commons.wikimedia.org/wiki/File:Traefik.logo.png' }
+        { url: AssetsConstants.TRIBBLE_IMAGES[3], source: 'https://dashboardicons.com/icons/traefik' }
      ],
      icon: 'dns',
      assets: '',
@@ -153,6 +188,14 @@ export class ProjectsComponent implements OnInit, OnDestroy {
        'PROJECTS.TRIBBLE.BULLET_3',
        'PROJECTS.TRIBBLE.BULLET_4',
      ],
+      challenges: [
+        'PROJECTS.TRIBBLE.CHALLENGE_1',
+        'PROJECTS.TRIBBLE.CHALLENGE_2',
+      ],
+      learnings: [
+        'PROJECTS.TRIBBLE.LEARNING_1',
+        'PROJECTS.TRIBBLE.LEARNING_2',
+      ],
      isFeatured: false,
      technologies: ['Ubuntu Server', 'Docker', 'Traefik', 'Gitea', 'Jellyfin', 'AdGuard Home', 'Paperless-ngx', 'Tailscale']
    }