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

fix: performance

Browse Source
This commit is contained in:
fraujulian
2026-04-27 15:53:19 +02:00
parent ef10c2efe7
commit 65e5249512
5 changed files with 142 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/home.component.html
+4
View File
@@ -67,6 +67,8 @@
<img
class="hero-feature-image"
[src]="currentPortraitHighlight.image"
[attr.srcset]="currentPortraitHighlight.imageSrcset"
[attr.sizes]="currentPortraitHighlight.imageSizes"
width="560"
height="420"
[alt]="currentPortraitHighlight.text + ' Image'"
@@ -143,6 +145,8 @@
class="project-icon"
[class.project-icon-circle]="project.CircleIcon !== false"
[src]="project.icon"
[attr.srcset]="project.iconSrcset ?? null"
[attr.sizes]="project.iconSizes ?? null"
[alt]="project.title + ' icon'"
/>
}
src/assets/unoptimized/logos/synhost.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

src/global.ts
+43 -3
View File
@@ -4,11 +4,15 @@ export interface PortfolioProject {
description: string;
languages: string[];
icon?: string;
iconSrcset?: string;
iconSizes?: string;
CircleIcon?: boolean;
}
export interface PortraitHighlight {
image: string;
imageSrcset: string;
imageSizes: string;
text: string;
}
@@ -75,26 +79,50 @@ export const global: Global = {
portraitHighlights: [
{
image: 'assets/optimized/portrait/me.webp',
imageSrcset:
'assets/optimized/portrait/me-320.webp 320w, assets/optimized/portrait/me-480.webp 480w, assets/optimized/portrait/me-640.webp 640w, assets/optimized/portrait/me.webp 900w',
imageSizes:
'(max-width: 700px) calc(100vw - 2rem), (max-width: 900px) min(100vw - 6rem, 560px), 560px',
text: 'ME',
},
{
image: 'assets/optimized/portrait/love.webp',
imageSrcset:
'assets/optimized/portrait/love-320.webp 320w, assets/optimized/portrait/love-480.webp 480w, assets/optimized/portrait/love-640.webp 640w, assets/optimized/portrait/love.webp 900w',
imageSizes:
'(max-width: 700px) calc(100vw - 2rem), (max-width: 900px) min(100vw - 6rem, 560px), 560px',
text: 'My Love',
},
{
image: 'assets/optimized/portrait/scuba.webp',
imageSrcset:
'assets/optimized/portrait/scuba-320.webp 320w, assets/optimized/portrait/scuba-480.webp 480w, assets/optimized/portrait/scuba-640.webp 640w, assets/optimized/portrait/scuba.webp 900w',
imageSizes:
'(max-width: 700px) calc(100vw - 2rem), (max-width: 900px) min(100vw - 6rem, 560px), 560px',
text: 'Scuba Diving',
},
{
image: 'assets/optimized/portrait/trains.webp',
imageSrcset:
'assets/optimized/portrait/trains-320.webp 320w, assets/optimized/portrait/trains-480.webp 480w, assets/optimized/portrait/trains-640.webp 640w, assets/optimized/portrait/trains.webp 900w',
imageSizes:
'(max-width: 700px) calc(100vw - 2rem), (max-width: 900px) min(100vw - 6rem, 560px), 560px',
text: 'Trains',
},
{
image: 'assets/optimized/portrait/traveling.webp',
imageSrcset:
'assets/optimized/portrait/traveling-320.webp 320w, assets/optimized/portrait/traveling-480.webp 480w, assets/optimized/portrait/traveling-640.webp 640w, assets/optimized/portrait/traveling.webp 900w',
imageSizes:
'(max-width: 700px) calc(100vw - 2rem), (max-width: 900px) min(100vw - 6rem, 560px), 560px',
text: 'Traveling',
},
{
image: 'assets/optimized/portrait/culture.webp',
imageSrcset:
'assets/optimized/portrait/culture-320.webp 320w, assets/optimized/portrait/culture-480.webp 480w, assets/optimized/portrait/culture-640.webp 640w, assets/optimized/portrait/culture.webp 900w',
imageSizes:
'(max-width: 700px) calc(100vw - 2rem), (max-width: 900px) min(100vw - 6rem, 560px), 560px',
text: 'Culture',
},
],
@@ -106,6 +134,9 @@ export const global: Global = {
'I currently work primarily for the viennese company SobIT GmbH. This company develops software for the healthcare industry. - Development of modern desktop, mobile, and web applications to support healthcare delivery.',
languages: ['TypeScript', 'C#', 'WPF', 'YML', 'XAML'],
icon: 'assets/optimized/logos/sobit.webp',
iconSrcset:
'assets/optimized/logos/sobit-64.webp 64w, assets/optimized/logos/sobit-128.webp 128w, assets/optimized/logos/sobit.webp 216w',
iconSizes: '(max-width: 700px) 64px, 108px',
CircleIcon: false,
},
{
@@ -114,7 +145,10 @@ export const global: Global = {
description:
'A support system integrating various platforms and media to offer employees a unified overview.',
languages: ['TypeScript'],
icon: 'https://gerlach-systems.de/IMAGES/SYNHOST/SYNHOST_DARK.png',
icon: 'assets/optimized/logos/synhost.webp',
iconSrcset:
'assets/optimized/logos/synhost-64.webp 64w, assets/optimized/logos/synhost-128.webp 128w, assets/optimized/logos/synhost.webp 216w',
iconSizes: '(max-width: 700px) 64px, 108px',
CircleIcon: false,
},
{
@@ -123,7 +157,10 @@ export const global: Global = {
description:
'A support system integrating various platforms and media to offer employees a unified overview.',
languages: ['TypeScript'],
icon: 'https://gerlach-systems.de/IMAGES/SYNHOST/SYNHOST_DARK.png',
icon: 'assets/optimized/logos/synhost.webp',
iconSrcset:
'assets/optimized/logos/synhost-64.webp 64w, assets/optimized/logos/synhost-128.webp 128w, assets/optimized/logos/synhost.webp 216w',
iconSizes: '(max-width: 700px) 64px, 108px',
CircleIcon: false,
},
{
@@ -132,7 +169,10 @@ export const global: Global = {
description:
'A support system integrating various platforms and media to offer employees a unified overview.',
languages: ['TypeScript'],
icon: 'https://gerlach-systems.de/IMAGES/SYNHOST/SYNHOST_DARK.png',
icon: 'assets/optimized/logos/synhost.webp',
iconSrcset:
'assets/optimized/logos/synhost-64.webp 64w, assets/optimized/logos/synhost-128.webp 128w, assets/optimized/logos/synhost.webp 216w',
iconSizes: '(max-width: 700px) 64px, 108px',
CircleIcon: false,
},
],
src/index.html
+52 -8
View File
@@ -3,22 +3,66 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta
name="description"
content="Portfolio of Julian Lechner, an Austrian full-stack developer building stable web, desktop, and business software."
/>
<base href="/" />
<link rel="icon" type="image/webp" href="assets/optimized/portrait/me.webp" />
<link rel="icon" type="image/webp" sizes="128x128" href="assets/optimized/portrait/me-128.webp" />
<title>Lechner Julian</title>
</head>
<body>
<app-root></app-root>
<script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
<script>
kofiWidgetOverlay.draw('fraujulian', {
type: 'floating-chat',
'floating-chat.donateButton.text': 'Tip me',
'floating-chat.donateButton.background-color': '#ff5f5f',
'floating-chat.donateButton.text-color': '#fff',
});
(() => {
const widgetTitle = 'Ko-fi donation chat';
let hasLoadedWidget = false;
const titleKofiFrames = () => {
document.querySelectorAll('iframe[id^="kofi-wo-container"]').forEach((frame) => {
frame.setAttribute('title', widgetTitle);
});
};
const drawWidget = () => {
window.kofiWidgetOverlay.draw('fraujulian', {
type: 'floating-chat',
'floating-chat.donateButton.text': 'Tip me',
'floating-chat.donateButton.background-color': '#ff5f5f',
'floating-chat.donateButton.text-color': '#fff',
});
window.setTimeout(titleKofiFrames, 300);
};
const loadWidget = () => {
if (hasLoadedWidget) {
return;
}
hasLoadedWidget = true;
const script = document.createElement('script');
script.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.js';
script.async = true;
script.onload = drawWidget;
document.body.appendChild(script);
};
window.addEventListener(
'load',
() => {
const observer = new MutationObserver(titleKofiFrames);
observer.observe(document.body, { childList: true, subtree: true });
window.addEventListener('pointerdown', loadWidget, { once: true, passive: true });
window.addEventListener('touchstart', loadWidget, { once: true, passive: true });
window.addEventListener('scroll', loadWidget, { once: true, passive: true });
window.addEventListener('keydown', loadWidget, { once: true });
},
{ once: true },
);
})();
</script>
</body>
</html>