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

Fixed topbar

Browse Source
This commit is contained in:
Lobo
2026-02-22 12:48:20 +01:00
parent c6edc922fe
commit 6330d45b4e
4 changed files with 135 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/app/pages/about/about.component.html
View File

@@ -1,13 +1,8 @@
<section class="about">
<mat-card class="hero">
<div class="photo">
<img
[ngSrc]="AssetsConstants.ME"
width="421" height="512"
alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
draggable="false"
oncontextmenu="return false;"
priority />
<img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
draggable="false" oncontextmenu="return false;" priority />
</div>
<div class="intro">
@@ -26,10 +21,10 @@
<span>{{ 'ABOUT.LOCATION' | translate }}</span>
</div>
<div class="row">
<mat-icon aria-hidden="true">email</mat-icon>
<a href="" (click)="SharedFunctions.openMail($event)">
{{ 'ABOUT.CONTACT_ME' | translate }}
</a>
<mat-icon aria-hidden="true">email</mat-icon>
<a href="" (click)="SharedFunctions.openMail($event)">
{{ 'ABOUT.CONTACT_ME' | translate }}
</a>
</div>
<div class="row">
<mat-icon svgIcon="github"></mat-icon>
@@ -49,7 +44,7 @@
<h3>{{ 'ABOUT.SECTION.PRIMARY' | translate }}</h3>
<mat-chip-set aria-label="Primary skills">
@for (s of primarySkills; track s) {
<mat-chip >{{ s | translate }}</mat-chip>
<mat-chip>{{ s | translate }}</mat-chip>
}
</mat-chip-set>
</div>
@@ -57,8 +52,8 @@
<div>
<h3>{{ 'ABOUT.SECTION.TOOLSET' | translate }}</h3>
<mat-chip-set aria-label="Toolset">
@for (t of toolset; track t) {
<mat-chip>{{ t | translate }}</mat-chip>
@for (t of toolset; track t) {
<mat-chip>{{ t | translate }}</mat-chip>
}
</mat-chip-set>
</div>
@@ -69,39 +64,34 @@
<h2 style="margin-left: 0.5rem;">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
<div class="xp-list">
@for (entry of xpKeys; track entry.key) {
<div class="xp-item">
<div class="xp-head-grid">
<div class="logo-wrap">
<img
src="{{entry.logo}}"
alt=""
class="company-logo"
aria-hidden="true"
/>
</div>
<div class="head-row">
<strong>{{ (entry.key + '.ROLE') | translate }}</strong>
<span class="time">{{ (entry.key + '.TIME') | translate }}</span>
</div>
<div class="company-row">
{{ (entry.key + '.COMPANY') | translate }}
</div>
<div class="xp-item">
<div class="xp-head-grid">
<div class="logo-wrap">
<img src="{{entry.logo}}" alt="" class="company-logo" aria-hidden="true" />
</div>
<div class="highlights">
<ul>
<li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
<li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
<li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
</ul>
<div class="head-row">
<strong>{{ (entry.key + '.ROLE') | translate }}</strong>
<span class="time">{{ (entry.key + '.TIME') | translate }}</span>
</div>
<div class="company-row">
{{ (entry.key + '.COMPANY') | translate }}
</div>
</div>
<div class="highlights">
<ul>
<li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
<li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
<li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
</ul>
</div>
</div>
@if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
{
<mat-divider></mat-divider>
}
@if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
{
<mat-divider></mat-divider>
}
}
</div>
</mat-card>
@@ -118,21 +108,16 @@
{{ (entry.key + '.DESCRIPTION') | translate }}
</div>
@if (entry.externalLink) {
<div class="link-row">
<a class="link-with-icon"
href="{{entry.externalLink}}"
target="_blank"
rel="noopener noreferrer">
<mat-icon>open_in_new</mat-icon>
{{ (entry.key + '.LINK_EXTERNAL') | translate }}
</a>
</div>
<div class="link-row">
<a class="link-with-icon" href="{{entry.externalLink}}" target="_blank" rel="noopener noreferrer">
<mat-icon>open_in_new</mat-icon>
{{ (entry.key + '.LINK_EXTERNAL') | translate }}
</a>
</div>
}
<div class="link-row">
<a class="link-with-icon"
[routerLink]="['/projects']"
[queryParams]="{ project: entry.identifier }"
rel="noopener noreferrer">
<a class="link-with-icon" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
rel="noopener noreferrer">
<mat-icon>link</mat-icon>
{{ (entry.key + '.LINK_INTERNAL') | translate }}
</a>
@@ -148,9 +133,9 @@
@if(entry.key !== projectKeys.at(projectKeys.length-1)?.key)
{
<mat-divider></mat-divider>
<mat-divider></mat-divider>
}
}
}
</div>
</mat-card>
@@ -160,20 +145,20 @@
<div class="xp-list">
<div class="xp-item">
@for (entry of educationKeys; track entry.key) {
<div class="head-row">
<strong>{{ (entry.key + '.WHERE') | translate }}</strong>
<span class="time">{{ (entry.key + '.WHEN') | translate }}</span>
</div>
<div class="company-row">
{{ (entry.key + '.WHAT') | translate }}
</div>
<div class="head-row">
<strong>{{ (entry.key + '.WHERE') | translate }}</strong>
<span class="time">{{ (entry.key + '.WHEN') | translate }}</span>
</div>
<div class="company-row">
{{ (entry.key + '.WHAT') | translate }}
</div>
@if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
{
<mat-divider style="margin-top: .5rem; margin-bottom: .5rem"></mat-divider>
}
@if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
{
<mat-divider style="margin-top: .5rem; margin-bottom: .5rem"></mat-divider>
}
}
</div>
</div>
</mat-card>
</section>
</section>