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"> <section class="about">
<mat-card class="hero"> <mat-card class="hero">
<div class="photo"> <div class="hero-flex-container">
<img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}" <div class="photo">
draggable="false" oncontextmenu="return false;" priority /> <img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
</div> draggable="false" oncontextmenu="return false;" priority />
</div>
<div class="intro"> <div class="intro">
<h1>{{ 'ABOUT.HELLO' | translate }}</h1> <h1>{{ 'ABOUT.HELLO' | translate }}</h1>
<p class="lead"> <p class="lead">
{{ 'ABOUT.LEAD' | translate }} {{ 'ABOUT.LEAD' | translate }}
</p> </p>
<div class="meta"> <div class="meta">
<div class="row"> <div class="row">
<mat-icon aria-hidden="true">work</mat-icon> <mat-icon aria-hidden="true">work</mat-icon>
<span>{{ 'ABOUT.ROLE' | translate }}</span> <span>{{ 'ABOUT.ROLE' | translate }}</span>
</div> </div>
<div class="row"> <div class="row">
<mat-icon aria-hidden="true">location_on</mat-icon> <mat-icon aria-hidden="true">location_on</mat-icon>
<span>{{ 'ABOUT.LOCATION' | translate }}</span> <span>{{ 'ABOUT.LOCATION' | translate }}</span>
</div> </div>
<div class="row"> <div class="row">
<mat-icon aria-hidden="true">email</mat-icon> <mat-icon aria-hidden="true">email</mat-icon>
<a href="" (click)="SharedFunctions.openMail($event)"> <a href="" (click)="SharedFunctions.openMail($event)">
{{ 'ABOUT.CONTACT_ME' | translate }} {{ 'ABOUT.CONTACT_ME' | translate }}
</a> </a>
</div> </div>
<div class="row"> <div class="row">
<mat-icon>data_object</mat-icon> <mat-icon>data_object</mat-icon>
<a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a> <a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a>
<span>·</span> <span>·</span>
<mat-icon svgIcon="linkedin"></mat-icon> <mat-icon svgIcon="linkedin"></mat-icon>
<a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a> <a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
</div>
</div> </div>
</div> </div>
</div> </div>

42
src/styles.scss
View File

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