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

Finalized the About page for now

Browse Source
This commit is contained in:
Lobo
2025-11-29 15:13:47 +01:00
parent 664aed47a6
commit 839b7c9ba5
11 changed files with 410 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.routes.ts
View File

@@ -1,6 +1,10 @@
import { Routes } from '@angular/router';
import {AboutComponent} from './pages/about/about.component';
import {ProjectsComponent} from './pages/projects/projects.component';
export const routes: Routes = [
{ path: '', component: AboutComponent },
{ path: 'about', component: AboutComponent},
{ path: 'projects', component: ProjectsComponent},
];

5
src/app/constants/AssetsConstants.ts
View File

@@ -6,8 +6,9 @@
static readonly FLAG_EN = '/assets/flags/gb.svg';
//logos
static readonly TH_BINGEN_LOGO = '/assets/logos/assyst_gmbh_logo.jpg';
static readonly ASSYST_LOG = '/assets/logos/bingen-logo-white.svg';
static readonly CHAMAELEON_LOGO = '/assets/logos/logo_chamaeleon.svg';
static readonly TH_BINGEN_LOGO = '/assets/logos/bingen-logo-white.svg';
static readonly ASSYST_LOG = '/assets/logos/assyst_gmbh_logo.jpg';
static readonly COLORDIGITAL_LOGO = '/assets/logos/dmixcloud_logo.jpg';
static readonly TERAPORT_LOGO = '/assets/logos/teraport_gmbh_logo.jpg';

4
src/app/layout/topbar/topbar.component.html
View File

@@ -12,8 +12,8 @@
<nav class="nav">
<a routerLink="/about" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
<a routerLink="/projects" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
<a routerLink="/hobbys" mat-button>{{ 'TOPBAR.HOBBY' | translate }}</a>
<a routerLink="/contact" mat-button>{{ 'TOPBAR.CONTACT' | translate }}</a>
<a routerLink="/projects" mat-button>{{ 'TOPBAR.HOBBY' | translate }}</a>
<a routerLink="/projects" mat-button>{{ 'TOPBAR.CONTACT' | translate }}</a>
</nav>
<span class="spacer"></span>

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

@@ -38,17 +38,6 @@
<a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
</div>
</div>
<div class="actions">
<a mat-flat-button color="primary" [href]="cvHref" target="_blank" rel="noopener">
<mat-icon>picture_as_pdf</mat-icon>
{{ 'ABOUT.DOWNLOAD_CV' | translate }}
</a>
<a mat-stroked-button routerLink="/projects">
<mat-icon>work_outline</mat-icon>
{{ 'ABOUT.VIEW_PROJECTS' | translate }}
</a>
</div>
</div>
</mat-card>
@@ -77,8 +66,6 @@
<mat-card class="experience">
<h2>{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
<div class="xp-list">
@for (entry of xpKeys; track entry) {
<div class="xp-item">
@@ -94,9 +81,6 @@
<div class="head-row">
<strong>{{ (entry.key + '.ROLE') | translate }}</strong>
<span class="time">{{ (entry.key + '.TIME') | translate }}</span>
<div class="company-row">
{{ (entry.key + '.COMPANY') | translate }}
</div>
</div>
<div class="company-row">
@@ -124,32 +108,45 @@
<h2>{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>
<div class="xp-list">
@for (entry of projectKeys; track entry) {
<div class="xp-item">
<div class="xp-head">
<strong>{{ 'ABOUT.XP.T1.ROLE' | translate }}</strong>
<span class="time">{{ 'ABOUT.XP.T1.TIME' | translate }}</span>
<div class="head-row">
<strong>{{ (entry.key + '.TITLE') | translate }}</strong>
</div>
<div class="company-row">
{{ (entry.key + '.DESCRIPTION') | translate }}
</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"
href="{{entry.internalLink}}"
rel="noopener noreferrer">
<mat-icon>link</mat-icon>
{{ (entry.key + '.LINK_INTERNAL') | translate }}
</a>
</div>
<div class="highlights-noMargin">
<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 class="xp-sub">{{ 'ABOUT.XP.T1.COMPANY' | translate }}</div>
<ul>
<li>{{ 'ABOUT.XP.T1.P1' | translate }}</li>
<li>{{ 'ABOUT.XP.T1.P2' | translate }}</li>
<li>{{ 'ABOUT.XP.T1.P3' | translate }}</li>
</ul>
</div>
<mat-divider></mat-divider>
<div class="xp-item">
<div class="xp-head">
<strong>{{ 'ABOUT.XP.T2.ROLE' | translate }}</strong>
<span class="time">{{ 'ABOUT.XP.T2.TIME' | translate }}</span>
</div>
<div class="xp-sub">{{ 'ABOUT.XP.T2.COMPANY' | translate }}</div>
<ul>
<li>{{ 'ABOUT.XP.T2.P1' | translate }}</li>
<li>{{ 'ABOUT.XP.T2.P2' | translate }}</li>
</ul>
</div>
@if(entry.key !== projectKeys.at(projectKeys.length-1)?.key)
{
<mat-divider></mat-divider>
}
}
</div>
</mat-card>
@@ -158,30 +155,20 @@
<div class="xp-list">
<div class="xp-item">
<div class="xp-head">
<strong>{{ 'ABOUT.XP.T1.ROLE' | translate }}</strong>
<span class="time">{{ 'ABOUT.XP.T1.TIME' | translate }}</span>
</div>
<div class="xp-sub">{{ 'ABOUT.XP.T1.COMPANY' | translate }}</div>
<ul>
<li>{{ 'ABOUT.XP.T1.P1' | translate }}</li>
<li>{{ 'ABOUT.XP.T1.P2' | translate }}</li>
<li>{{ 'ABOUT.XP.T1.P3' | translate }}</li>
</ul>
</div>
@for (entry of educationKeys; track entry) {
<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>
<mat-divider></mat-divider>
<div class="xp-item">
<div class="xp-head">
<strong>{{ 'ABOUT.XP.T2.ROLE' | translate }}</strong>
<span class="time">{{ 'ABOUT.XP.T2.TIME' | translate }}</span>
</div>
<div class="xp-sub">{{ 'ABOUT.XP.T2.COMPANY' | translate }}</div>
<ul>
<li>{{ 'ABOUT.XP.T2.P1' | translate }}</li>
<li>{{ 'ABOUT.XP.T2.P2' | translate }}</li>
</ul>
@if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
{
<mat-divider style="margin-top: .5rem; margin-bottom: .5rem"></mat-divider>
}
}
</div>
</div>
</mat-card>

37
src/app/pages/about/about.component.scss
View File

@@ -29,7 +29,7 @@
.lead { opacity:.9; margin: .25rem 0 0.5rem; }
.meta {
display:flex; flex-direction:column; gap:.25rem;
display:flex; flex-direction:column; gap:.25rem; margin-bottom: 0.5rem;
.row {
display:flex; align-items:center; gap:.4rem;
a { color: inherit; }
@@ -37,8 +37,9 @@
}
.actions {
display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; margin-bottom: 1rem;
display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;
.mat-icon { margin-right:.25rem; }
}
}
}
@@ -48,11 +49,13 @@
border-radius: 16px;
padding: 5px;
background: var(--app-card-background);
h2 { margin-top: .25rem; margin-left: .25rem; }
.chip-groups {
margin-left: .25rem;
display:grid; gap:1rem;
grid-template-columns: 1fr 1fr;
margin-bottom: .5rem;
h3 { margin: .2rem 0 .4rem; font-size: .95rem; opacity:.85; }
mat-chip-set {
display:flex; flex-wrap:wrap; gap:.4rem;
@@ -146,6 +149,7 @@
height: 48px;
object-fit: contain;
opacity: .9;
border-radius: 10%;
background-color: var(--app-logo-bg);
}
@@ -173,6 +177,27 @@
opacity: .85;
}
.link-row {
grid-row: 2;
grid-column: 2;
margin-top: .1rem;
opacity: .85;
vertical-align: center;
}
.link-with-icon {
display: inline-flex;
align-items: center;
gap: .35rem;
line-height: 1;
}
.link-with-icon mat-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
.highlights {
margin-top: .4rem;
margin-left: .75rem;
@@ -182,3 +207,11 @@
margin: .2rem 0;
}
}
.highlights-noMargin {
margin-top: .4rem;
li {
margin: .2rem 0;
}
}

58
src/app/pages/about/about.component.ts
View File

@@ -6,7 +6,6 @@ import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { TranslateModule } from '@ngx-translate/core';
import {RouterLink} from '@angular/router';
import {UrlConstants} from '../../constants/UrlConstants';
import {AssetsConstants} from '../../constants/AssetsConstants';
@@ -17,7 +16,7 @@ import {AssetsConstants} from '../../constants/AssetsConstants';
imports: [
CommonModule, NgOptimizedImage,
MatCardModule, MatChipsModule, MatIconModule, MatButtonModule, MatDividerModule,
TranslateModule, RouterLink
TranslateModule
],
templateUrl: './about.component.html',
styleUrl: './about.component.scss'
@@ -27,16 +26,20 @@ export class AboutComponent {
xpKeys = [
{
key: 'ABOUT.XP.COMPANY7',
key: 'ABOUT.XP.COMPANY8',
logo: AssetsConstants.TERAPORT_LOGO
},
{
key: 'ABOUT.XP.COMPANY7',
logo: AssetsConstants.COLORDIGITAL_LOGO
},
{
key: 'ABOUT.XP.COMPANY6',
logo: AssetsConstants.COLORDIGITAL_LOGO
},
{
key: 'ABOUT.XP.COMPANY5',
logo: AssetsConstants.COLORDIGITAL_LOGO
logo: AssetsConstants.ASSYST_LOG
},
{
key: 'ABOUT.XP.COMPANY4',
@@ -48,7 +51,7 @@ export class AboutComponent {
},
{
key: 'ABOUT.XP.COMPANY2',
logo: AssetsConstants.ASSYST_LOG
logo: AssetsConstants.TH_BINGEN_LOGO
},
{
key: 'ABOUT.XP.COMPANY1',
@@ -56,10 +59,52 @@ export class AboutComponent {
},
{
key: 'ABOUT.XP.COMPANY0',
logo: AssetsConstants.TH_BINGEN_LOGO
logo: AssetsConstants.CHAMAELEON_LOGO
}
];
projectKeys = [
{
key: 'ABOUT.PROJECT.P2',
externalLink: 'https://andreas-dahm.eu/',
internalLink: 'projects'
},
{
key: 'ABOUT.PROJECT.P1',
externalLink: 'https://store.steampowered.com/app/1532640/El_Mucho/',
internalLink: 'projects'
},
{
key: 'ABOUT.PROJECT.P0',
externalLink: 'https://itch.io/c/6628860/lobos-collection',
internalLink: 'projects'
}
];
educationKeys = [
{
key: 'ABOUT.EDUCATION.E6'
},
{
key: 'ABOUT.EDUCATION.E5'
},
{
key: 'ABOUT.EDUCATION.E4'
},
{
key: 'ABOUT.EDUCATION.E3'
},
{
key: 'ABOUT.EDUCATION.E2'
},
{
key: 'ABOUT.EDUCATION.E1'
},
{
key: 'ABOUT.EDUCATION.E0'
}
]
primarySkills = [
'ABOUT.SKILLS.JAVA',
'ABOUT.SKILLS.SPRING',
@@ -74,6 +119,7 @@ export class AboutComponent {
toolset = [
'ABOUT.TOOLS.GIT',
'ABOUT.TOOLS.GITHUB',
'ABOUT.TOOLS.GITLAB',
'ABOUT.TOOLS.JENKINS',
'ABOUT.TOOLS.K8S',
'ABOUT.TOOLS.POSTGRES',

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

@@ -1 +1 @@
<p>projects works!</p>
<p>Working in progress!</p>