Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

refactored projects site

Browse Source
This commit is contained in:
Lobo
2026-01-17 10:27:35 +01:00
parent 93b2a0fed7
commit 24c438a01e
8 changed files with 360 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/app/pages/projects/projects.component.html
View File

@@ -1,63 +1,54 @@
<mat-accordion class="project-headers-align">
@for (project of allProjects; track project) {
<mat-expansion-panel [expanded]="isExpanded(project.identifier)">
<mat-expansion-panel-header>
<mat-panel-title>{{ project.title | translate }}</mat-panel-title>
<mat-panel-description>
{{ project.shortDescription | translate}}
<mat-icon>{{ project.icon }}</mat-icon>
</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 class="project-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]" [alt]="project.title | translate">
} @else {
<div class="icon-container">
<mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
</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)
{
<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) {
<swiper-slide>
<img
class="slide-img"
[src]="img"
[alt]="project.title | translate"
(click)="openImage(project.title, img)"
/>
</swiper-slide>
<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>
}
</swiper-container>
}
</mat-expansion-panel>
</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>
}
</mat-accordion>
@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]" [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>