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

Fixed hero page

Browse Source
This commit is contained in:
Lobo
2026-02-23 09:07:33 +01:00
parent d0c4ad770b
commit e66206c518
2 changed files with 58 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,37 +1,39 @@
<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 />
</div>
<div class="hero-flex-container">
<div class="photo">
<img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
draggable="false" oncontextmenu="return false;" priority />
</div>
<div class="intro">
<h1>{{ 'ABOUT.HELLO' | translate }}</h1>
<p class="lead">
{{ 'ABOUT.LEAD' | translate }}
</p>
<div class="intro">
<h1>{{ 'ABOUT.HELLO' | translate }}</h1>
<p class="lead">
{{ 'ABOUT.LEAD' | translate }}
</p>
<div class="meta">
<div class="row">
<mat-icon aria-hidden="true">work</mat-icon>
<span>{{ 'ABOUT.ROLE' | translate }}</span>
</div>
<div class="row">
<mat-icon aria-hidden="true">location_on</mat-icon>
<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>
</div>
<div class="row">
<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 class="meta">
<div class="row">
<mat-icon aria-hidden="true">work</mat-icon>
<span>{{ 'ABOUT.ROLE' | translate }}</span>
</div>
<div class="row">
<mat-icon aria-hidden="true">location_on</mat-icon>
<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>
</div>
<div class="row">
<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>

42
src/styles.scss
View File

@@ -477,28 +477,22 @@ app-root {
}
.hero {
display: block;
border-radius: var(--card-radius);
background: var(--card-bg);
padding: clamp(1rem, 3vw, 1.5rem);
overflow: hidden;
}
.hero .photo {
float: left;
margin-right: clamp(1rem, 4vw, 1.5rem);
margin-bottom: 0.5rem;
max-width: 100%;
.hero-flex-container {
display: flex;
flex-wrap: wrap;
gap: clamp(1rem, 4vw, 2rem);
padding: clamp(1rem, 3vw, 1.5rem);
align-items: flex-start;
}
@media (max-width: 720px) {
.hero .photo {
float: none;
margin-right: 0;
margin-bottom: 1rem;
display: flex;
justify-content: center;
}
.hero .photo {
flex: 0 0 auto;
max-width: 100%;
}
.hero .photo img {
@@ -512,7 +506,23 @@ app-root {
}
.hero .intro {
display: block;
flex: 1 1 400px;
}
@media (max-width: 850px) {
.hero-flex-container {
justify-content: center;
}
.hero .photo {
width: 100%;
display: flex;
justify-content: center;
}
.hero .intro {
flex-basis: 100%;
}
}
.hero .intro h1 {