171 lines
6.7 KiB
HTML
171 lines
6.7 KiB
HTML
<main class="page-shell home-page">
|
|
<section class="hero-section panel">
|
|
<div class="hero-copy">
|
|
<div class="hero-copy-main">
|
|
<p id="portfolio-eyebrow" class="eyebrow">Portfolio</p>
|
|
<h1>
|
|
<span class="hero-name-part" [attr.data-name]="global.firstname">{{ global.firstname }}</span>
|
|
<span class="hero-name-part" [attr.data-name]="global.lastname">{{ global.lastname }}</span>
|
|
</h1>
|
|
<p class="hero-intro">
|
|
Full-stack development, thoughtful interfaces, and tailored digital products for companies, associations, and private clients.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="hero-actions">
|
|
<div class="hero-contact-block">
|
|
<p class="hero-contact-title">Contact me</p>
|
|
|
|
<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>
|
|
|
|
<a href="tel:{{ global.hrefContactPhone }}" aria-label="Call phone number">
|
|
<fa-icon class="fab" [icon]="faPhone" size="lg"></fa-icon>
|
|
</a>
|
|
|
|
<a href="https://discord.com/users/860206216893693973" aria-label="Discord profile">
|
|
<fa-icon class="fab" [icon]="faDiscord" size="lg"></fa-icon>
|
|
</a>
|
|
|
|
<a href="https://github.com/fraujulian" aria-label="GitHub profile">
|
|
<fa-icon class="fab" [icon]="faGithub" size="lg"></fa-icon>
|
|
</a>
|
|
|
|
<a href="https://www.linkedin.com/in/julian-lechner-98b377356/" aria-label="LinkedIn profile">
|
|
<fa-icon class="fab" [icon]="faLinkedin" size="lg"></fa-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-action-links">
|
|
<button class="action-link" type="button" (click)="scrollToProjectsSection()">View projects</button>
|
|
<button class="action-link" type="button" (click)="scrollToAboutSection()">About me</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-meta">
|
|
<div>
|
|
<span class="meta-label">{{ currentBioEntry.label }}</span>
|
|
<strong>{{ currentBioEntry.value }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
@if (currentPortraitHighlight) {
|
|
<div class="portrait-highlight">
|
|
<button
|
|
type="button"
|
|
class="portrait-highlight-button"
|
|
(click)="showNextPortraitHighlight()"
|
|
[attr.aria-label]="'Show next highlight image'"
|
|
[title]="portraitHighlights.length > 1 ? 'Show next image' : 'Single image'"
|
|
>
|
|
<div class="portrait-media" [class.portrait-media-switching]="isPortraitSwitching">
|
|
<img
|
|
class="hero-feature-image"
|
|
[src]="currentPortraitHighlight.image"
|
|
width="560"
|
|
height="420"
|
|
[alt]="currentPortraitHighlight.text + ' Image'"
|
|
/>
|
|
@if (currentPortraitHighlightIndex === 0) {
|
|
<span class="portrait-click-hint">Click me!</span>
|
|
}
|
|
<span class="portrait-caption">{{ currentPortraitHighlight.text }}</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="story-section panel about-scroll-anim-enabled">
|
|
<div class="section-heading">
|
|
<p class="eyebrow">About me</p>
|
|
</div>
|
|
|
|
<div class="story-grid">
|
|
<div class="story-copy">
|
|
<p>
|
|
My name is {{ global.firstname }}, many people also call me Julie. I'm {{ age }} years old and come from Austria, where I spend a
|
|
lot of time traveling by train between projects, meetings, and clients.
|
|
</p>
|
|
<p>
|
|
I work across modern web technologies and practical business software. My focus is not on noise or unnecessary complexity, but on
|
|
systems that are stable, clear, and actually useful in day-to-day work.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="story-detail">
|
|
<button class="detail-toggle" type="button" (click)="toggleBio()">
|
|
<span>{{ isLongBioShown ? 'Hide extended profile' : 'Read extended profile' }}</span>
|
|
<fa-icon [icon]="isLongBioShown ? faArrowDown : faArrowRight"></fa-icon>
|
|
</button>
|
|
|
|
@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.
|
|
</p>
|
|
<p>
|
|
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>
|
|
<button class="inline-link inline-link-button" type="button" (click)="scrollToContactLinks()">Get in touch</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects" class="projects-section">
|
|
<div class="section-heading section-heading-centered">
|
|
<p class="eyebrow">current Jobs & Projects</p>
|
|
</div>
|
|
|
|
<div class="project-list">
|
|
@for (project of projects; track project.link + '-' + $index; let i = $index) {
|
|
<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"
|
|
[class.project-icon-circle]="project.CircleIcon !== false"
|
|
[src]="project.icon"
|
|
[alt]="project.title + ' icon'"
|
|
/>
|
|
}
|
|
|
|
<div class="project-copy">
|
|
<div class="project-header">
|
|
<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>
|
|
|
|
<p class="project-description">{{ project.description }}</p>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<app-footer ngSkipHydration></app-footer>
|