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

pimped the site a little but and fixed impress

Browse Source
This commit is contained in:
Andreas Dahm committed 2026-08-26 10:48:39 +02:00
1 parent f543a5e2f3
commit 888fb6289d
14 files changed
+1502 -1162
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/pages/about/about.component.html
+68 -67
View File
@@ -1,5 +1,5 @@
<section class="grid gap-fluid-md max-w-app mx-4 mt-auto">
<mat-card>
<mat-card class="card-gradient-bar">
<div class="flex flex-wrap gap-fluid-lg p-fluid-md items-start">
<div class="flex-[1_1_min(100%,425px)] max-w-full flex justify-center">
<img class="block w-full h-auto max-w-[425px] rounded-xl shadow-[0_6px_24px_rgba(0,0,0,0.25)] object-cover"
@@ -13,7 +13,7 @@
{{ 'ABOUT.LEAD' | translate }}
</p>
<div class="flex flex-col gap-1 mb-2">
<div class="flex flex-col gap-1 mb-4">
<div class="flex items-center flex-wrap gap-[0.4rem]">
<mat-icon aria-hidden="true">work</mat-icon>
<span>{{ 'ABOUT.ROLE' | translate }}</span>
@@ -24,18 +24,26 @@
</div>
<div class="flex items-center flex-wrap gap-[0.4rem]">
<mat-icon aria-hidden="true">email</mat-icon>
<a href="" (click)="SharedFunctions.openMail($event)">
<button type="button" class="link-button" data-testid="contact-mail"
(click)="SharedFunctions.openMail($event)">
{{ 'ABOUT.CONTACT_ME' | translate }}
</a>
</button>
</div>
<div class="flex items-center flex-wrap gap-[0.4rem]">
<mat-icon>data_object</mat-icon>
<mat-icon aria-hidden="true">data_object</mat-icon>
<a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a>
<span>·</span>
<mat-icon svgIcon="linkedin"></mat-icon>
<mat-icon svgIcon="linkedin" aria-hidden="true"></mat-icon>
<a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
</div>
</div>
<div class="flex flex-wrap gap-fluid-sm">
<a mat-flat-button [routerLink]="['/projects']">
<mat-icon aria-hidden="true">grid_view</mat-icon>
{{ 'ABOUT.VIEW_PROJECTS' | translate }}
</a>
</div>
</div>
</div>
</mat-card>
@@ -43,72 +51,62 @@
<mat-card class="p-[clamp(5px,2vw,15px)]">
<h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.SKILLS' | translate }}</h2>
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,250px),1fr))] gap-fluid-sm ml-1 mb-2">
@for (group of skillGroups; track group.titleKey) {
<div>
<h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.BACKEND_ARCH' | translate }}</h3>
<mat-chip-set aria-label="Backend and Architecture">
@for (s of skillsArchitecture; track s) {
<mat-chip>{{ s | translate }}</mat-chip>
}
</mat-chip-set>
</div>
<div>
<h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.INFRA_CLOUD' | translate }}</h3>
<mat-chip-set aria-label="Infrastructure and Cloud">
@for (s of skillsCore; track s) {
<mat-chip>{{ s | translate }}</mat-chip>
}
</mat-chip-set>
</div>
<div>
<h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.SIM_ALGO' | translate }}</h3>
<mat-chip-set aria-label="Simulation and Algorithms">
@for (s of skillsEngineering; track s) {
<mat-chip>{{ s | translate }}</mat-chip>
<h3 class="my-1 text-[0.95rem] opacity-85">{{ group.titleKey | translate }}</h3>
<mat-chip-set [attr.aria-label]="group.titleKey | translate">
@for (skillKey of group.skillKeys; track skillKey) {
<mat-chip>{{ skillKey | translate }}</mat-chip>
}
</mat-chip-set>
</div>
}
</div>
</mat-card>
<mat-card class="p-[clamp(5px,2vw,15px)]">
<h2 class="mt-1 ml-2 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
<div class="ml-1 grid gap-fluid-sm">
@for (entry of xpKeys; track entry.key) {
<div>
<div class="grid grid-cols-[auto_1fr] gap-x-3">
<div class="row-span-2 col-start-1 flex items-center">
<img src="{{entry.logo}}" alt="" class="w-10 h-10 object-contain opacity-90 rounded-[10%] bg-logo-bg" aria-hidden="true" />
</div>
<div class="row-start-1 col-start-2 flex flex-wrap items-baseline gap-x-4 gap-y-1">
<strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.ROLE') | translate }}</strong>
<span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.TIME') | translate }}</span>
</div>
<div class="row-start-2 col-start-2 mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
{{ (entry.key + '.COMPANY') | translate }}
</div>
<div class="relative ml-2">
<span class="absolute left-5 top-2 bottom-2 w-px bg-current opacity-15" aria-hidden="true"></span>
@for (entry of visibleExperience(); track entry.key; let i = $index) {
<div class="relative pl-14 pb-fluid-sm">
@if (isFirstRoleAtCompany(i)) {
<img src="{{entry.logo}}" alt="" aria-hidden="true"
class="absolute left-0 top-0 w-10 h-10 object-contain opacity-90 rounded-[10%] bg-logo-bg" />
<div class="font-semibold opacity-90 text-[clamp(0.9rem,2.2vw,1.05rem)] leading-10" data-testid="company">
{{ (entry.key + '.COMPANY') | translate }}
</div>
@if (!entry.no_highlights) {
<div class="mt-[0.4rem] ml-[clamp(0.25rem,1vw,0.75rem)] pl-[clamp(0.8rem,2vw,1.2rem)]">
<ul>
<li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
<li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
<li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
</ul>
</div>
} @else {
<span class="absolute left-5 top-[0.6rem] -translate-x-1/2 w-2 h-2 rounded-full bg-current opacity-30"
aria-hidden="true"></span>
}
<div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
<strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]" data-testid="role">{{ (entry.key + '.ROLE') | translate }}</strong>
<span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.TIME') | translate }}</span>
</div>
<ul class="mt-[0.4rem]">
@for (highlight of highlightKeys(entry); track highlight) {
<li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ highlight | translate }}</li>
}
</ul>
@if (isLastRoleAtCompany(i) && !$last) {
<mat-divider class="mt-fluid-sm!"></mat-divider>
}
</div>
@if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
{
<mat-divider></mat-divider>
}
}
</div>
<button mat-button type="button" class="mt-1 ml-2" data-testid="toggle-experience" (click)="toggleEarlierExperience()"
[attr.aria-expanded]="showEarlierExperience()">
<mat-icon aria-hidden="true">{{ showEarlierExperience() ? 'expand_less' : 'expand_more' }}</mat-icon>
{{ (showEarlierExperience() ? 'ABOUT.SECTION.SHOW_LESS' : 'ABOUT.SECTION.SHOW_EARLIER_XP') | translate }}
</button>
</mat-card>
<mat-card class="p-[clamp(5px,2vw,15px)]">
<h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>
@@ -124,7 +122,7 @@
@if (entry.externalLink) {
<div class="mt-[0.1rem] opacity-85">
<a class="inline-flex items-center gap-[0.35rem] leading-none" href="{{entry.externalLink}}" target="_blank" rel="noopener noreferrer">
<mat-icon class="text-[18px]! w-[18px]! h-[18px]!">open_in_new</mat-icon>
<mat-icon class="text-[18px]! w-[18px]! h-[18px]!" aria-hidden="true">open_in_new</mat-icon>
{{ (entry.key + '.LINK_EXTERNAL') | translate }}
</a>
</div>
@@ -132,7 +130,7 @@
<div class="mt-[0.1rem] opacity-85">
<a class="inline-flex items-center gap-[0.35rem] leading-none" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
rel="noopener noreferrer">
<mat-icon class="text-[18px]! w-[18px]! h-[18px]!">link</mat-icon>
<mat-icon class="text-[18px]! w-[18px]! h-[18px]!" aria-hidden="true">link</mat-icon>
{{ (entry.key + '.LINK_INTERNAL') | translate }}
</a>
</div>
@@ -145,8 +143,7 @@
</div>
</div>
@if(entry.key !== projectKeys.at(projectKeys.length-1)?.key)
{
@if (!$last) {
<mat-divider></mat-divider>
}
}
@@ -158,21 +155,25 @@
<div class="ml-1 grid gap-fluid-sm">
<div>
@for (entry of educationKeys; track entry.key) {
@for (key of visibleEducationKeys(); track key) {
<div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
<strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.WHERE') | translate }}</strong>
<span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.WHEN') | translate }}</span>
<strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]" data-testid="education-where">{{ (key + '.WHERE') | translate }}</strong>
<span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (key + '.WHEN') | translate }}</span>
</div>
<div class="mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
{{ (entry.key + '.WHAT') | translate }}
{{ (key + '.WHAT') | translate }}
</div>
@if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
{
@if (!$last) {
<mat-divider class="my-2!"></mat-divider>
}
}
</div>
</div>
<button mat-button type="button" class="mt-1" data-testid="toggle-education" (click)="toggleEarlierEducation()"
[attr.aria-expanded]="showEarlierEducation()">
<mat-icon aria-hidden="true">{{ showEarlierEducation() ? 'expand_less' : 'expand_more' }}</mat-icon>
{{ (showEarlierEducation() ? 'ABOUT.SECTION.SHOW_LESS' : 'ABOUT.SECTION.SHOW_EARLIER_EDU') | translate }}
</button>
</mat-card>
</section>