179 lines
7.7 KiB
HTML
179 lines
7.7 KiB
HTML
<section class="grid gap-fluid-md max-w-app mx-4 mt-auto">
|
|
<mat-card>
|
|
<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"
|
|
[ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
|
|
draggable="false" oncontextmenu="return false;" priority />
|
|
</div>
|
|
|
|
<div class="flex-[999_1_min(100%,400px)]">
|
|
<h1 class="mt-0 mb-2 text-[clamp(1.5rem,5vw,2.5rem)]">{{ 'ABOUT.HELLO' | translate }}</h1>
|
|
<p class="opacity-90 my-2 mb-4 text-[clamp(1rem,2.5vw,1.15rem)]">
|
|
{{ 'ABOUT.LEAD' | translate }}
|
|
</p>
|
|
|
|
<div class="flex flex-col gap-1 mb-2">
|
|
<div class="flex items-center flex-wrap gap-[0.4rem]">
|
|
<mat-icon aria-hidden="true">work</mat-icon>
|
|
<span>{{ 'ABOUT.ROLE' | translate }}</span>
|
|
</div>
|
|
<div class="flex items-center flex-wrap gap-[0.4rem]">
|
|
<mat-icon aria-hidden="true">location_on</mat-icon>
|
|
<span>{{ 'ABOUT.LOCATION' | translate }}</span>
|
|
</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)">
|
|
{{ 'ABOUT.CONTACT_ME' | translate }}
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center flex-wrap gap-[0.4rem]">
|
|
<mat-icon>data_object</mat-icon>
|
|
<a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a>
|
|
<span>·</span>
|
|
<mat-icon svgIcon="linkedin"></mat-icon>
|
|
<a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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.SKILLS' | translate }}</h2>
|
|
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,250px),1fr))] gap-fluid-sm ml-1 mb-2">
|
|
<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>
|
|
}
|
|
</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>
|
|
@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>
|
|
}
|
|
</div>
|
|
|
|
@if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
|
|
{
|
|
<mat-divider></mat-divider>
|
|
}
|
|
}
|
|
</div>
|
|
</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>
|
|
|
|
<div class="ml-1 grid gap-fluid-sm">
|
|
@for (entry of projectKeys; track entry.key) {
|
|
<div>
|
|
<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 + '.TITLE') | translate }}</strong>
|
|
</div>
|
|
<div class="mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
|
|
{{ (entry.key + '.DESCRIPTION') | translate }}
|
|
</div>
|
|
@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>
|
|
{{ (entry.key + '.LINK_EXTERNAL') | translate }}
|
|
</a>
|
|
</div>
|
|
}
|
|
<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>
|
|
{{ (entry.key + '.LINK_INTERNAL') | translate }}
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
|
|
@if(entry.key !== projectKeys.at(projectKeys.length-1)?.key)
|
|
{
|
|
<mat-divider></mat-divider>
|
|
}
|
|
}
|
|
</div>
|
|
</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.EDUCATION' | translate }}</h2>
|
|
|
|
<div class="ml-1 grid gap-fluid-sm">
|
|
<div>
|
|
@for (entry of educationKeys; track entry.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>
|
|
</div>
|
|
<div class="mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
|
|
{{ (entry.key + '.WHAT') | translate }}
|
|
</div>
|
|
|
|
@if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
|
|
{
|
|
<mat-divider class="!my-2"></mat-divider>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
</mat-card>
|
|
</section>
|