feat: reworked portfolio
This commit is contained in:
+145
-135
@@ -1,146 +1,156 @@
|
||||
<section class="container">
|
||||
<div class="card profile">
|
||||
|
||||
<img
|
||||
ngSrc="Logo.webp"
|
||||
width="200"
|
||||
height="200"
|
||||
priority
|
||||
fetchpriority="high"
|
||||
alt="profile picture"
|
||||
srcset="Logo.webp 1x, Logo.webp 2x"
|
||||
(click)="openStalkerInfo()"/>
|
||||
<h1>Hallo! 👋 I'm {{ globalFields.firstname }} {{ globalFields.lastname }}!</h1>
|
||||
<h3>📍 Austria, Vienna</h3>
|
||||
|
||||
<br>
|
||||
<hr>
|
||||
|
||||
<div class="max60">
|
||||
<div id="short-bio-text" class="hover-items" (click)="toggleBio()">
|
||||
<fa-icon id="left-arrow" [icon]=" isLongBioShown ? faArrowDown : faArrowRight "></fa-icon>
|
||||
|
||||
<a>
|
||||
<u>
|
||||
<h3>A young full-stack software developer from Austria.</h3>
|
||||
</u>
|
||||
</a>
|
||||
|
||||
<fa-icon id="right-arrow" [icon]=" isLongBioShown ? faArrowDown : faArrowLeft "></fa-icon>
|
||||
<main class="page-shell home-page">
|
||||
<section class="hero-section panel">
|
||||
<div class="hero-copy">
|
||||
<div class="hero-copy-main">
|
||||
<p class="eyebrow">Portfolio</p>
|
||||
<h1>
|
||||
<span class="hero-name-part">{{ global.firstname }}</span>
|
||||
<span class="hero-name-part">{{ 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>
|
||||
|
||||
<div class="long-bio-text" *ngIf="isLongBioShown" @fadeInOut (click)="closeOnOverlayClick($event)">
|
||||
<p>
|
||||
My name is {{ globalFields.firstname }}, many people also call me Julie. I'm {{ age }} years old and come from
|
||||
beautiful Austria.
|
||||
I travel extensively within Austria, so I spend a great deal of my time on trains.
|
||||
<br/>
|
||||
<br/>
|
||||
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 the depths. I try to practice this hobby as often as
|
||||
possible for fun and my health.
|
||||
<br/>
|
||||
<br/>
|
||||
I currently work mainly for the Viennese company SobIT Gmbh. This company develops software for most
|
||||
care companies in Austria. - A universal management tool for the care sector.
|
||||
<br/>
|
||||
<br/>
|
||||
I also work as a freelancer for various associations, companies, and private clients. The software sector is in
|
||||
high demand, and I’m fully immersed in planning, programming, and delivering custom solutions upon request.
|
||||
<br/>
|
||||
<br/>
|
||||
<a [href]="contactSafeMail">
|
||||
<b><u><h3>Just contact me!</h3></u></b>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<div class="contact-area hero-contact-area">
|
||||
<a [href]="contactSafeMail" aria-label="Send mail">
|
||||
<fa-icon class="fab" [icon]="faEnvelope" size="lg"></fa-icon>
|
||||
</a>
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
<a href="tel:{{ global.hrefContactPhone }}" aria-label="Call phone number">
|
||||
<fa-icon class="fab" [icon]="faPhone" size="lg"></fa-icon>
|
||||
</a>
|
||||
|
||||
<div class="bio grid-container">
|
||||
<div class="grid-item-start">
|
||||
<h1>I work with</h1>
|
||||
<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 class="hero-action-links">
|
||||
<a class="action-link" href="#projects">View projects</a>
|
||||
<a class="action-link" href="#about">About me</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item" *ngFor="let bioText of bioTextsList; let i = index" [hidden]="i !== currentIndex">
|
||||
<h1>{{ bioText }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-area">
|
||||
<a [href]="contactSafeMail">
|
||||
<fa-icon class="fab" [icon]="faEnvelope" size="3x"></fa-icon>
|
||||
</a>
|
||||
|
||||
<a href="tel:{{globalFields.hrefContactTel}}">
|
||||
<fa-icon class="fab" [icon]="faPhone" size="3x"></fa-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://discord.com/users/860206216893693973">
|
||||
<fa-icon class="fab" [icon]="faDiscord" size="3x"></fa-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/fraujulian">
|
||||
<fa-icon class="fab" [icon]="faGithub" size="3x"></fa-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://www.xing.com/profile/Julian_Lechner03274">
|
||||
<fa-icon class="fab" [icon]="faXing" size="3x"></fa-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://www.linkedin.com/in/julian-lechner-98b377356/">
|
||||
<fa-icon class="fab" [icon]="faLinkedin" size="3x"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="github_projects">
|
||||
<div *ngFor="let project of projects">
|
||||
<div class="container" [class.clickable]="project.Clickable" [class.disabled]="!project.Clickable"
|
||||
[style.cursor]="project.Clickable ? 'pointer' : 'default'"
|
||||
(click)="project.Clickable && (project.IsReadmeShown = true)">
|
||||
<div class="card">
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<a href="{{project.Link}}">
|
||||
<u><strong class="d-block text-gray-dark">{{ project.Title }}</strong></u>
|
||||
</a>
|
||||
<div class="stars">
|
||||
{{ project.Languages.join(' | ') }}
|
||||
<ng-container *ngIf="project.Stars != null">
|
||||
<fa-icon [icon]="faStar"></fa-icon>
|
||||
{{ project.Stars }}
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ project.Description }}</p>
|
||||
<div class="hero-meta">
|
||||
<div>
|
||||
<span class="meta-label">my stack</span>
|
||||
<strong>{{ global.bioTextsList[currentIndex] }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</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]="global.firstname + ' highlight'"
|
||||
/>
|
||||
@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">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">About me</p>
|
||||
<h2>Direct communication, solid implementation, and software that stays understandable.</h2>
|
||||
</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 (isLongBioShown) {
|
||||
<div class="detail-panel detail-panel-enter">
|
||||
<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>
|
||||
<a class="inline-link" [href]="contactSafeMail">Get in touch</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects" class="projects-section">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Selected Projects</p>
|
||||
<h2>A compact look at products, platforms, and systems I have helped shape.</h2>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
@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>
|
||||
<a class="project-link" href="{{ project.link }}">{{ project.title }}</a>
|
||||
</div>
|
||||
<div class="project-languages">{{ project.languages.join(' · ') }}</div>
|
||||
</div>
|
||||
|
||||
<p class="project-description">{{ project.description }}</p>
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<app-footer ngSkipHydration></app-footer>
|
||||
|
||||
<div *ngFor="let project of projects">
|
||||
<div *ngIf="project.IsReadmeShown" class="modal github-modal">
|
||||
<div class="modal github-modal card big-card">
|
||||
<a class="modalClose" (click)="project.IsReadmeShown = false">❌</a>
|
||||
<a href="{{project.Link}}">Visit on GitHub</a>
|
||||
<br>
|
||||
<br>
|
||||
<div [innerHTML]="project.Readme"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="isApiRateLimitExceeded" class="modal github-modal">
|
||||
<div class="modal github-modal card mini-card">
|
||||
<a class="modalClose" (click)="isApiRateLimitExceeded = false">❌</a>
|
||||
<br>
|
||||
<br>
|
||||
<h1 style="text-align: center">You have exceeded the today's github api request limits!</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user