55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
<div class="card-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>
|
|
}
|
|
|
|
@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>
|
|
}
|
|
<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>
|