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

Using tailwind instead of scss as much as possible
Some checks failed
Build, Test & Push Frontend / docker (pull_request) Has been cancelled
Details
Build, Test & Push Frontend / quality-check (pull_request) Has been cancelled
Details

Browse Source
This commit is contained in:
Andreas Dahm
2026-04-16 11:58:16 +02:00
parent f9797493ce
commit 9a6e91ea9d
32 changed files with 1185 additions and 1353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/pages/projects/dialog/project-dialog.component.html
View File

@@ -1,38 +1,38 @@
<h2 mat-dialog-title>{{ project.title | translate }}</h2>
<mat-dialog-content #dialogContent>
<div class="project-dialog-layout">
<div class="project-info">
<p class="introduction">{{ project.introduction | translate }}</p>
<div class="flex flex-col gap-6">
<div>
<p class="text-lg leading-relaxed opacity-90 mb-4">{{ project.introduction | translate }}</p>
<div class="features-list">
<ul>
<div class="mb-6">
<ul class="pl-5">
@for(bullet of project.bulletPoints; track bullet) {
<li>{{ bullet | translate }}</li>
<li class="mb-2">{{ bullet | translate }}</li>
}
</ul>
</div>
<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 class="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] sm-dialog:grid-cols-1 gap-4 mb-4">
<div class="p-5 rounded-xl bg-black/[.03] border border-black/[.05] dark:bg-white/[.05] dark:border-white/10">
<div class="flex items-center gap-3 mb-3 text-link">
<mat-icon class="!text-[24px] !w-6 !h-6">settings_suggest</mat-icon>
<h3 class="m-0 text-sm uppercase tracking-wider font-semibold">{{ 'PROJECTS.SECTION.TECHNICAL' | translate }}</h3>
</div>
<ul>
<ul class="m-0 pl-5 text-[0.95rem] leading-relaxed opacity-85">
@for(challenge of project.challenges; track challenge) {
<li>{{ challenge | translate }}</li>
<li class="mb-1">{{ 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 class="p-5 rounded-xl bg-black/[.03] border border-black/[.05] dark:bg-white/[.05] dark:border-white/10">
<div class="flex items-center gap-3 mb-3 text-link">
<mat-icon class="!text-[24px] !w-6 !h-6">psychology</mat-icon>
<h3 class="m-0 text-sm uppercase tracking-wider font-semibold">{{ 'PROJECTS.SECTION.LEARNINGS' | translate }}</h3>
</div>
<ul>
<ul class="m-0 pl-5 text-[0.95rem] leading-relaxed opacity-85">
@for(learning of project.learnings; track learning) {
<li>{{ learning | translate }}</li>
<li class="mb-1">{{ learning | translate }}</li>
}
</ul>
</div>
@@ -41,14 +41,14 @@
@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"
<div class="my-4 rounded-xl overflow-hidden bg-black">
<swiper-container class="my-swiper rounded-xl" [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" />
<swiper-slide class="rounded-xl overflow-hidden flex flex-col bg-[#222]">
<img class="w-full h-auto !max-h-[clamp(300px,60vh,512px)] object-contain block shrink-0" [src]="img.url" [alt]="project.title | translate" />
@if (img.source) {
<div class="slide-source">
<div class="text-xs text-[#aaa] bg-[#2a2a2a] p-2 text-right border-t border-[#444]">
{{ img.source }}
</div>
}
@@ -58,8 +58,8 @@
</div>
}
<div class="footer-details">
<div class="tech-stack">
<div class="flex flex-col gap-4 pt-4 border-t border-black/10 dark:border-white/10">
<div class="flex flex-wrap">
<mat-chip-set aria-label="Technologies">
@for(tech of project.technologies; track tech) {
<mat-chip>{{tech}}</mat-chip>
@@ -67,7 +67,7 @@
</mat-chip-set>
</div>
<div class="link-section">
<div class="flex flex-wrap gap-fluid-sm mt-6">
@for(link of project.links; track link)
{
<a mat-button href="{{link.url}}" target="_blank" rel="noopener noreferrer">

117
src/app/pages/projects/dialog/project-dialog.component.scss
View File

@@ -1,117 +0,0 @@
.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;
}
}

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

@@ -1,52 +1,52 @@
<div class="card-grid">
<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
@if (featuredProject(); as project) {
<mat-card class="project-card featured">
<mat-card-header>
<mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full col-span-full hover:-translate-y-[5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
<mat-card-header class="pb-4">
<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">
<img mat-card-image class="w-full h-[clamp(150px,25vw,250px)] object-cover" [src]="project.images[0].url" [alt]="project.title | translate">
} @else {
<div class="icon-container">
<mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
<div class="flex justify-center items-center h-[clamp(150px,20vw,200px)] bg-[#f0f0f0]">
<mat-icon class="text-[clamp(3rem,8vw,4rem)] w-[clamp(3rem,8vw,4rem)] h-[clamp(3rem,8vw,4rem)] text-[#666]">{{ project.icon }}</mat-icon>
</div>
}
<mat-card-content>
<mat-card-content class="grow pt-4 pb-4">
<p>{{ project.introduction | translate }}</p>
<mat-chip-set aria-label="Technologies">
<mat-chip-set class="pt-fluid-sm" aria-label="Technologies">
@for(tech of project.technologies; track tech) {
<mat-chip>{{tech}}</mat-chip>
}
</mat-chip-set>
</mat-card-content>
<mat-card-actions>
<mat-card-actions class="mt-auto">
<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 class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full hover:-translate-y-[5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
<mat-card-header class="pb-4">
<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">
<img mat-card-image class="w-full h-[clamp(150px,25vw,250px)] object-cover" [src]="project.images[0].url" [alt]="project.title | translate">
} @else {
<div class="icon-container">
<mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
<div class="flex justify-center items-center h-[clamp(150px,20vw,200px)] bg-[#f0f0f0]">
<mat-icon class="text-[clamp(3rem,8vw,4rem)] w-[clamp(3rem,8vw,4rem)] h-[clamp(3rem,8vw,4rem)] text-[#666]">{{ project.icon }}</mat-icon>
</div>
}
<mat-card-content>
<mat-card-content class="grow pt-4 pb-4">
<p>{{ project.shortDescription | translate }}</p>
<mat-chip-set aria-label="Technologies">
<mat-chip-set class="pt-fluid-sm" aria-label="Technologies">
@for(tech of project.technologies; track tech) {
<mat-chip>{{tech}}</mat-chip>
}
</mat-chip-set>
</mat-card-content>
<mat-card-actions>
<mat-card-actions class="mt-auto">
<button mat-button (click)="openProjectDialog(project)">{{ 'PROJECTS.READ_MORE' | translate }}</button>
</mat-card-actions>
</mat-card>