fraujulian/Personal-Portfolio-Website
1
0
Fork 0
Code Issues Pull Requests 7 Actions Projects Releases 2 Wiki Activity

feat: style

Browse Source
This commit is contained in:
fraujulian
2026-04-20 22:59:35 +02:00
parent 7a967e4d55
commit 38f391d525
6 changed files with 353 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/home.component.html
+27 -10
View File
@@ -13,7 +13,7 @@
</div>
<div class="hero-actions">
<div class="contact-area hero-contact-area">
<div id="contact-links" class="contact-area hero-contact-area">
<a [href]="contactSafeMail" aria-label="Send mail">
<fa-icon class="fab" [icon]="faEnvelope" size="lg"></fa-icon>
</a>
@@ -78,7 +78,12 @@
</div>
</section>
<section id="about" class="story-section panel">
<section
id="about"
class="story-section panel about-scroll-anim-enabled"
[class.about-scroll-in-view]="isAboutSectionInView"
[class.about-scroll-anim-ready]="isAboutSectionAnimationReady"
>
<div class="section-heading">
<p class="eyebrow">About me</p>
</div>
@@ -101,8 +106,8 @@
<fa-icon [icon]="isLongBioShown ? faArrowDown : faArrowRight"></fa-icon>
</button>
@if (isLongBioShown) {
<div class="detail-panel detail-panel-enter">
@if (isLongBioMounted) {
<div class="detail-panel" [class.detail-panel-enter]="isLongBioShown" [class.detail-panel-leave]="!isLongBioShown">
<p>
My biggest hobby apart from software development is scuba diving. Floating in deep water and only thinking about the here and
now always brings me back to a calmer pace.
@@ -111,7 +116,7 @@
I currently work mainly for the Viennese company SobIT GmbH and also take on freelance projects for companies, associations,
and private clients. The common thread is always the same: practical software, well delivered.
</p>
<a class="inline-link" [href]="contactSafeMail">Get in touch</a>
<a class="inline-link" href="#contact-links">Get in touch</a>
</div>
}
</div>
@@ -125,7 +130,15 @@
<div class="project-list">
@for (project of projects; track project.link + '-' + $index; let i = $index) {
<article class="panel project-entry" [class.project-entry-reverse]="i % 2 === 1">
<a
class="panel project-entry"
[class.project-entry-reverse]="i % 2 === 1"
[class.project-entry-from-right]="i % 2 === 0"
[class.project-entry-from-left]="i % 2 === 1"
[href]="project.link"
[attr.aria-label]="'Open project ' + project.title"
[attr.data-project-index]="i"
>
@if (project.icon) {
<img
class="project-icon"
@@ -137,15 +150,19 @@
<div class="project-copy">
<div class="project-header">
<div>
<a class="project-link" href="{{ project.link }}">{{ project.title }}</a>
<div class="project-title-wrap">
<span class="project-link">{{ project.title }}</span>
</div>
<div class="project-languages" aria-label="Project languages">
@for (language of project.languages; track language + '-' + $index) {
<span class="project-language-chip">{{ language }}</span>
}
</div>
<div class="project-languages">{{ project.languages.join(' · ') }}</div>
</div>
<p class="project-description">{{ project.description }}</p>
</div>
</article>
</a>
}
</div>
</section>
src/app/home/home.component.ts
+144 -3
View File
@@ -1,4 +1,4 @@
import type { OnDestroy, OnInit } from '@angular/core';
import type { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
import { Component, inject, NgZone } from '@angular/core';
import { faArrowRight, faArrowDown, faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons';
import { faDiscord, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
@@ -19,12 +19,14 @@ import { FooterComponent } from '../footer/footer.component';
imports: [FooterComponent, FaIconComponent],
templateUrl: './home.component.html',
})
export class HomeComponent implements OnInit, OnDestroy {
export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
private readonly sanitizer = inject(DomSanitizer);
private readonly zone = inject(NgZone);
private preloadedImages: HTMLImageElement[] = [];
private tallestPortraitAspectRatio: number | null = null;
private lockedHeroSectionMinHeight: number = 0;
private projectEntryObserver: IntersectionObserver | null = null;
private aboutSectionObserver: IntersectionObserver | null = null;
private scrollAnimationFrameId: number | null = null;
private heroHeightAnimationFrameId: number | null = null;
private readonly scheduleNameGradientUpdate: () => void = (): void => {
@@ -53,6 +55,9 @@ export class HomeComponent implements OnInit, OnDestroy {
protected readonly age: number | string = this.calculateAge(global.birthdate);
protected isLongBioShown: boolean = false;
protected isLongBioMounted: boolean = false;
protected isAboutSectionInView: boolean = true;
protected isAboutSectionAnimationReady: boolean = false;
protected readonly faArrowRight: IconDefinition = faArrowRight;
protected readonly faArrowDown: IconDefinition = faArrowDown;
protected readonly faEnvelope: IconDefinition = faEnvelope;
@@ -70,6 +75,7 @@ export class HomeComponent implements OnInit, OnDestroy {
protected readonly projects: PortfolioProject[] = global.projects;
protected readonly fallbackBioEntry: BioTextEntry = { label: 'my stack', value: '' };
private sub!: Subscription;
private bioHideTimeoutId: number | null = null;
constructor() {
this.contactSafeMail = this.sanitizer.bypassSecurityTrustUrl(`mailto:${global.contactMail}`);
@@ -88,13 +94,54 @@ export class HomeComponent implements OnInit, OnDestroy {
});
}
ngAfterViewInit(): void {
this.initProjectEntryRevealObserver();
this.initAboutSectionScrollAnimation();
}
ngOnDestroy(): void {
this.sub.unsubscribe();
if (this.bioHideTimeoutId !== null) {
window.clearTimeout(this.bioHideTimeoutId);
this.bioHideTimeoutId = null;
}
this.destroyNameGradientScrollAnimation();
this.destroyProjectEntryRevealObserver();
this.destroyAboutSectionScrollAnimation();
}
protected toggleBio(): void {
this.isLongBioShown = !this.isLongBioShown;
if (this.isLongBioShown) {
this.isLongBioShown = false;
if (typeof window !== 'undefined') {
if (this.bioHideTimeoutId !== null) {
window.clearTimeout(this.bioHideTimeoutId);
}
this.bioHideTimeoutId = window.setTimeout((): void => {
this.isLongBioMounted = false;
this.bioHideTimeoutId = null;
}, 300);
} else {
this.isLongBioMounted = false;
}
return;
}
if (this.bioHideTimeoutId !== null && typeof window !== 'undefined') {
window.clearTimeout(this.bioHideTimeoutId);
this.bioHideTimeoutId = null;
}
this.isLongBioMounted = true;
if (typeof window !== 'undefined') {
window.requestAnimationFrame((): void => {
window.requestAnimationFrame((): void => {
this.isLongBioShown = true;
});
});
} else {
this.isLongBioShown = true;
}
}
protected get currentPortraitHighlight(): PortraitHighlight | null {
@@ -219,6 +266,100 @@ export class HomeComponent implements OnInit, OnDestroy {
this.scheduleHeroSectionHeightUpdate();
}
private initProjectEntryRevealObserver(): void {
if (typeof window === 'undefined') {
return;
}
const projectEntries: NodeListOf<Element> = document.querySelectorAll('.project-entry');
projectEntries.forEach((entry: Element): void => {
entry.classList.add('project-entry-reveal-pending');
});
if (typeof IntersectionObserver === 'undefined') {
projectEntries.forEach((entry: Element): void => {
entry.classList.add('project-entry-visible');
entry.classList.remove('project-entry-reveal-pending');
});
return;
}
this.projectEntryObserver = new IntersectionObserver(
(entries: IntersectionObserverEntry[]): void => {
for (const entry of entries) {
const element: Element = entry.target;
if (entry.isIntersecting) {
window.requestAnimationFrame((): void => {
element.classList.add('project-entry-visible');
element.classList.remove('project-entry-reveal-pending');
});
continue;
}
element.classList.add('project-entry-reveal-pending');
element.classList.remove('project-entry-visible');
}
},
{
root: null,
threshold: 0.18,
rootMargin: '0px 0px -8% 0px',
},
);
projectEntries.forEach((entry: Element): void => {
this.projectEntryObserver?.observe(entry);
});
}
private destroyProjectEntryRevealObserver(): void {
this.projectEntryObserver?.disconnect();
this.projectEntryObserver = null;
}
private initAboutSectionScrollAnimation(): void {
if (typeof window === 'undefined') {
return;
}
const aboutSection: HTMLElement | null = document.getElementById('about');
if (aboutSection === null) {
return;
}
const initialRect: DOMRect = aboutSection.getBoundingClientRect();
const viewportHeight: number = window.innerHeight || document.documentElement.clientHeight;
this.isAboutSectionInView =
initialRect.top < viewportHeight * 0.95 && initialRect.bottom > viewportHeight * 0.1;
this.isAboutSectionAnimationReady = true;
if (typeof IntersectionObserver === 'undefined') {
return;
}
this.aboutSectionObserver = new IntersectionObserver(
(entries: IntersectionObserverEntry[]): void => {
for (const entry of entries) {
this.zone.run((): void => {
this.isAboutSectionInView = entry.isIntersecting;
});
}
},
{
root: null,
threshold: 0.05,
rootMargin: '0px 0px -6% 0px',
},
);
this.aboutSectionObserver.observe(aboutSection);
}
private destroyAboutSectionScrollAnimation(): void {
this.aboutSectionObserver?.disconnect();
this.aboutSectionObserver = null;
}
private destroyNameGradientScrollAnimation(): void {
if (typeof window === 'undefined') {
return;