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

updated website

Browse Source
This commit is contained in:
Lechner Julian
2025-03-14 10:53:44 +01:00
parent 85d8edae9e
commit 442c34e0d6
6 changed files with 246 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IMPRINT/index.html
+4 -16
View File
@@ -3,10 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Julian Lechner</title>
<link rel="shortcut icon" type="image/png" href="favicon.ico" />
<link rel="icon" href="../favicon.ico" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="../Resources/Style.css" />
@@ -35,7 +34,7 @@
<p>
<h4>Contact:</h4>
Phone: +43 (0) 660 9254001 <br>
E-Mail: julian@lechner.top
E-Mail: contact@fraujulian.xyz
</p>
<br>
@@ -101,7 +100,7 @@
<div class="max60">
<div id="short-desc" class="hover-items">
<i id="left-arrow" class="fas fa-arrow-right"></i>
<a href="/#">
<a href="../index.html">
<u>
<h3>Back</h3>
</u>
@@ -114,20 +113,9 @@
</div>
<footer>
<!-- FOOTER -->
<p>
<a href="/imprint/">Imprint</a>
|
&copy;
2023 -
<script>document.write(new Date().getFullYear())</script> Julian Lechner - All rights reserved.
<a href="/IMPRINT/">IMPRINT</a> | &copy; 2023 - %CURRENT_YEAR% Julian Lechner - All rights reserved.
</p>
<!-- SCRIPTS -->
<script defer data-domain="fraujulian.xyz" src="https://plausible.io/js/plausible.js"></script>
<script rel="preload" src="../Resources/Javascript.js"></script>
</footer>
</body>
LICENSE.md
+1 -1
View File
@@ -1,6 +1,6 @@
# License Agreement
**Copyright © 2024 Julian Lechner. All rights reserved.**
**Copyright © 2025 Julian Lechner. All rights reserved.**
## 1. Grant of License
README.md
+1 -10
View File
@@ -1,21 +1,12 @@
# 🖼️ FrauJulian's Portfolio Website
**My portfolio resume website!**
## 👀 Features
- view all github repositories
- view readme
- view primary language
- view stars
### [🙋‍♂️ Website Preview](https://fraujulian.xyz/)
## 👂 Languages/Framework/Packages:
- Javascript
- CSS
- HTML
## 🙋‍♂️ Usefull Links:
- [Website](https://fraujulian.xyz/)
## 📋 Credits:
~ made by [**FrauJulian**](https://fraujulian.xyz/).
Resources/Javascript.js
+142 -77
View File
@@ -1,14 +1,39 @@
let _pathName = window.location.pathname;
let _knowledgeIndex = 0;
let _todayDate = new Date();
let _birthdayDate = "2009-03-03";
let _numberOfLoadedRepositories = 999;
let _numberOfShownRepositories = 999;
let _customProjects = [
{
"Title": "Azure Devops Effort Tracker",
"Description": "🕙 A desktop application to track the effort of your work items in azure devops.",
"Language": "C# - Avalonia",
"Link": ""
},
{
"Title": "SynRadio",
"Description": "🖥️ An internet radio station that is available on various media.",
"Language": "TS | JS | HTML | CSS",
"Link": "https://www.synradio.de/"
},
{
"Title": "SynHost",
"Description": "❓ A support system integrating various platforms and media to offer employees a unified overview.",
"Language": "TS | JS",
"Link": "https://www.synhost.de/"
}];
if (window.location.pathname.endsWith("index.html")) {
LoadHomepage();
} else {
if (_pathName.endsWith("/IMPRINT/index.html") || _pathName.endsWith("/IMPRINT/")) {
ReplaceCurrentYearPlaceholder();
} else {
LoadHomepage();
}
function LoadHomepage() {
ReplacePlaceholders();
LoadGithubProjects(999, 16);
LoadGithubProjects();
KnowledgeCarousel();
}
function ReplacePlaceholders() {
@@ -19,19 +44,40 @@ function ReplacePlaceholders() {
}
function ReplaceAgePlaceholder() {
let birthDate = new Date('2009-03-03');
let birthDate = new Date(_birthdayDate);
let diffTime = Math.abs(_todayDate - birthDate);
let diffTimeInYears = diffTime / (1000 * 60 * 60 * 24 * 365.25);
let age = diffTimeInYears.toFixed(1);
let diffTimeInYearsCalculation = diffTime / (1000 * 60 * 60 * 24 * 365.25);
let tempAge = diffTimeInYearsCalculation.toFixed(1)
let age = tempAge % 1 === 0 ? diffTimeInYearsCalculation.toFixed(0) : diffTimeInYearsCalculation.toFixed(1);
document.body.innerHTML = document.body.innerHTML.replace("%AGE%", age);
}
function ReplaceCurrentYearPlaceholder() {
let fullCurrentYear = _todayDate.getFullYear();
let fullCurrentYear = _todayDate.getFullYear().toString();
document.body.innerHTML = document.body.innerHTML.replace("%CURRENT_YEAR%", fullCurrentYear);
}
function LoadGithubProjects(numberOfLoadedRepositories, numberOfShownRepositories) {
function KnowledgeCarousel() {
let bioContainer = document.getElementsByClassName("bio")[0];
let rawListItems = bioContainer.getElementsByTagName("div");
bioContainer.style = "display: grid !important;";
for (let i = 1; i < rawListItems.length; i++) {
rawListItems[i].style = "display: none;";
}
_knowledgeIndex++;
if (_knowledgeIndex > rawListItems.length || _knowledgeIndex === 1) {
_knowledgeIndex = 2
}
rawListItems[_knowledgeIndex - 1].style.display = "block";
setTimeout(KnowledgeCarousel, 1000);
}
function LoadGithubProjects() {
const sortOnKey = (key, descending) => {
return (a, b) => {
a = a[key];
@@ -40,7 +86,7 @@ function LoadGithubProjects(numberOfLoadedRepositories, numberOfShownRepositorie
};
}
fetch(`https://api.github.com/users/fraujulian/repos?per_page=${numberOfLoadedRepositories}`)
fetch(`https://api.github.com/users/fraujulian/repos?per_page=${_numberOfLoadedRepositories}`)
.then((rawResponse) => rawResponse.json())
.then((allProjects) => {
allProjects = allProjects.sort(sortOnKey("stargazers_count", true));
@@ -49,22 +95,42 @@ function LoadGithubProjects(numberOfLoadedRepositories, numberOfShownRepositorie
projectsDiv.innerHTML = "";
projectsDiv.classList = "";
for (let currentProjectIndex = 0; currentProjectIndex < numberOfShownRepositories; currentProjectIndex++) {
for (let i = 0; i < _customProjects.length; i++) {
let currentProjectDiv = document.createElement("div");
currentProjectDiv.classList = "card hoverable";
currentProjectDiv.innerHTML = `
<div class="media">
<div class="media-body">
<a href="${_customProjects[i].Link}">
<strong class="d-block text-gray-dark">${_customProjects[i].Title}</strong>
</a>
<div class="stars">
${_customProjects[i].Language}
</div>
</div>
<p>${_customProjects[i].Description}</p>
</div>
`;
projectsDiv.appendChild(currentProjectDiv);
}
for (let currentProjectIndex = 0; currentProjectIndex < _numberOfShownRepositories; currentProjectIndex++) {
let currentProjectDiv = document.createElement("div");
currentProjectDiv.classList = "card hoverable";
let currentProject = allProjects[currentProjectIndex];
if (currentProject !== undefined &&
currentProject.fork !== true) {
if (currentProject.description == null) currentProject.description = "";
if (currentProject.language == null) currentProject.language = "";
if (currentProject === undefined || currentProject.fork === true) return;
if (currentProject.description == null) currentProject.description = "";
if (currentProject.language == null) currentProject.language = "";
currentProject.name = currentProject.name
.replaceAll("_", " ")
.replaceAll("-", " ");
currentProject.name = currentProject.name
.replaceAll("_", " ")
.replaceAll("-", " ");
currentProjectDiv.innerHTML = `
currentProjectDiv.innerHTML = `
<div class="media">
<div class="media-body">
<a href="${currentProject.html_url}">
@@ -79,119 +145,118 @@ function LoadGithubProjects(numberOfLoadedRepositories, numberOfShownRepositorie
</div>
`;
fetch(`https://raw.githubusercontent.com/${currentProject.full_name}/${currentProject.default_branch}/README.md`)
.then((rawResponse) => rawResponse.text())
.then((readmeText) => {
let markdownToHtmlConverter = new showdown.Converter();
let readmeInHtml = markdownToHtmlConverter.makeHtml(readmeText);
fetch(`https://raw.githubusercontent.com/${currentProject.full_name}/${currentProject.default_branch}/README.md`)
.then((rawResponse) => rawResponse.text())
.then((readmeText) => {
let markdownToHtmlConverter = new showdown.Converter();
let readmeInHtml = markdownToHtmlConverter.makeHtml(readmeText);
let projectReadmeModalDiv = document.createElement("div");
projectReadmeModalDiv.classList = "modal github-modal hidden";
let projectReadmeModalDiv = document.createElement("div");
projectReadmeModalDiv.classList = "modal github-modal hidden";
projectReadmeModalDiv.innerHTML = `
projectReadmeModalDiv.innerHTML = `
<div class="card">
<a onclick="" id="projectReadmeModalDiv-Close" style="float: right"> ❌</a>
<a href="${currentProject.html_url}"> Visit on GitHub</a>
<a id="projectReadmeModalDiv-Close" style="float: right; cursor: pointer;">❌</a>
<a href="${currentProject.html_url}">Visit on GitHub</a>
<br>
<br>
${readmeInHtml}
</div>
`;
currentProjectDiv.onclick = function () {
projectReadmeModalDiv.classList.remove("hidden");
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
document.body.style.opacity = 0.2.toString();
currentProjectDiv.onclick = function () {
projectReadmeModalDiv.classList.remove("hidden");
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
document.body.style.opacity = 0.2.toString();
}
projectReadmeModalDiv.onclick = function (mouseClick) {
if (mouseClick.target === projectReadmeModalDiv ||
mouseClick.target === document.getElementById("projectReadmeModalDiv-Close")) {
projectReadmeModalDiv.classList.add("hidden");
document.body.style.opacity = 1.0.toString();
}
}
projectReadmeModalDiv.onclick = function (mouseClick) {
if (mouseClick.target === projectReadmeModalDiv ||
mouseClick.target === document.getElementById("projectReadmeModalDiv-Close")) {
projectReadmeModalDiv.classList.add("hidden");
document.body.style.opacity = 1.0.toString();
}
}
document
.getElementsByTagName("html")[0]
.appendChild(projectReadmeModalDiv);
});
document
.getElementsByTagName("html")[0]
.appendChild(projectReadmeModalDiv);
});
projectsDiv.appendChild(currentProjectDiv);
projectsDiv.appendChild(currentProjectDiv);
}
}
});
}
let _shortBioTextButton = document.getElementById("short-bio-text");
let _longBioText = document.getElementsByClassName("long-bio-text")[0];
let _isLongBioTextShown = true;
let longBioText = document.getElementsByClassName("long-bio-text")[0];
let isLongBioTextShown = false;
_shortBioTextButton.onclick = function () {
document.getElementById("short-bio-text").onclick = function () {
let leftArrow = document.getElementById("left-arrow");
let rightArrow = document.getElementById("right-arrow");
if (_isLongBioTextShown) {
_longBioText.classList.remove("hidden");
isLongBioTextShown = !isLongBioTextShown;
if (isLongBioTextShown) {
longBioText.classList.remove("hidden");
leftArrow.classList.remove("fa-arrow-right");
leftArrow.classList.add("fa-arrow-down");
rightArrow.classList.remove("fa-arrow-left");
rightArrow.classList.add("fa-arrow-down");
leftArrow.style.position = "relative";
rightArrow.style.position = "relative";
FadeOut(_longBioText);
FadeIn(longBioText);
} else {
_longBioText.classList.add("hidden");
longBioText.classList.add("hidden");
leftArrow.classList.remove("fa-arrow-down");
leftArrow.classList.add("fa-arrow-right");
rightArrow.classList.remove("fa-arrow-down");
rightArrow.classList.add("fa-arrow-left");
leftArrow.style.position = "relative";
rightArrow.style.position = "relative";
FadeIn(_longBioText);
FadeOut(longBioText);
}
_isLongBioTextShown = !_isLongBioTextShown;
};
_longBioText.onclick = function (mouseClick) {
if (mouseClick.target === _longBioText) {
_longBioText.classList.add("hidden");
longBioText.onclick = function (mouseClick) {
if (mouseClick.target === longBioText) {
longBioText.classList.add("hidden");
document.body.style.opacity = 1.0.toString();
}
};
function FadeOut(element) {
let currentOpacity = 1;
const fadeInterval = setInterval(() => {
if (currentOpacity <= 0.1) {
clearInterval(fadeInterval);
let transparency = 1;
const interval = setInterval(() => {
if (transparency <= 0.1) {
clearInterval(interval)
element.style.display = 'none';
return;
}
setElementOpacity(element, currentOpacity);
currentOpacity *= 0.9;
transparency *= 0.9;
ApplyTransparency(element, transparency);
}, 5);
}
function FadeIn(element) {
let currentOpacity = 0.1;
let transparency = 0.1;
element.style.display = 'block';
const fadeInterval = setInterval(() => {
if (currentOpacity >= 1) {
clearInterval(fadeInterval);
const interval = setInterval(() => {
if (transparency >= 1) {
clearInterval(interval);
ApplyTransparency(element, 1);
return;
}
setElementOpacity(element, currentOpacity);
currentOpacity *= 1.1;
transparency *= 1.1;
ApplyTransparency(element, transparency);
}, 5);
}
function setElementOpacity(element, opacity) {
const opacityPercentage = opacity * 100;
element.style.opacity = opacity;
element.style.filter = `alpha(opacity=${opacityPercentage})`;
function ApplyTransparency(element, transparency) {
element.style.opacity = transparency;
element.style.filter = `alpha(opacity=${Math.round(transparency * 100)})`;
}
Resources/Style.css
+61 -46
View File
@@ -1,14 +1,14 @@
::-webkit-scrollbar {
width: 5px;
height: 5px;
width: var(--scroll-width);
height: var(--scroll-width);
}
::-webkit-scrollbar-thumb {
background: #eaebfe;
background: var(--scroll-thumb-bg);
}
::-webkit-scrollbar-track {
background: transparent;
background: var(--scroll-track-bg);
}
:root {
@@ -22,11 +22,30 @@
--padding-big: 20px;
--padding-small: 5px;
--main-container-width: 750px;
--main-txt-color: #dbe9f4;
--main-shadow-color: #634b28ad;
--main-txt-color: White;
--main-shadow-color: #6F3E38;
--donation-modal-height: 200px;
--donation-modal-width: 600px;
--donation-modal-top: 50%;
--scroll-width: 5px;
--scroll-thumb-bg: Red;
--scroll-track-bg: transparent;
--background-image: url("Images/Background.webp");
--blur-small: 20px;
--blur-large: 160px;
--shadow-y: 4px;
--shadow-blur: 16px;
--shadow-spread: 0;
--shadow-hover-y: 8px;
--shadow-hover-blur: 16px;
--font-size-large: 20px;
--width-medium: 60%;
--max-width-large: 90%;
--grid-column-width: 24%;
--portfolio-item-height: 128px;
--transition-duration-long: 0.5s;
--transition-duration-short: 0.3s;
--modal-card-height: 80%;
}
a,
@@ -44,13 +63,12 @@ html {
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url("Images/background.webp");
/*background-color: #2f3136; */
background-image: var(--background-image);
height: 100%;
}
footer {
padding-bottom: 5px;
padding-bottom: var(--main-padding);
max-width: 100%;
}
@@ -67,9 +85,9 @@ ul.nav {
list-style-type: none;
margin: 0;
overflow: hidden;
backdrop-filter: blur(150px);
box-shadow: 0 4px 8px 0 var(--main-shadow-color);
transition: 0.3s;
backdrop-filter: blur(var(--blur-large));
box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--main-shadow-color);
transition: var(--transition-duration-short);
}
ul.nav li {
@@ -169,42 +187,42 @@ ul.nav li.left {
}
.long-bio-text {
font-size: 20px;
font-size: var(--font-size-large);
opacity: 0;
width: 60%;
margin-bottom: 15px !important;
width: var(--width-medium);
margin-bottom: var(--main-padding) !important;
margin: auto;
padding: 10px;
padding: var(--main-margin);
}
.card {
margin-top: var(--main-padding);
box-shadow: 0 4px 8px 0 var(--main-shadow-color);
transition: 0.3s;
backdrop-filter: blur(20px);
box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--main-shadow-color);
transition: var(--transition-duration-short);
backdrop-filter: blur(var(--blur-small));
padding: var(--main-padding);
text-align: center;
color: var(#9ee700);
color: var(--main-txt-color);
}
.card-projects {
display: grid;
box-shadow: 0 4px 8px 0 var(--main-shadow-color);
transition: 0.3s;
backdrop-filter: blur(150px);
box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--main-shadow-color);
transition: var(--transition-duration-short);
backdrop-filter: blur(var(--blur-large));
}
.card-projects:hover {
box-shadow: 0 8px 16px 0 var(--main-shadow-color);
box-shadow: 0 var(--shadow-hover-y) var(--shadow-hover-blur) var(--shadow-spread) var(--main-shadow-color);
}
.card:hover {
box-shadow: 0 8px 16px 0 var(--main-shadow-color);
box-shadow: 0 var(--shadow-hover-y) var(--shadow-hover-blur) var(--shadow-spread) var(--main-shadow-color);
}
.container {
background: transparent;
backdrop-filter: blur(20px);
backdrop-filter: blur(var(--blur-small));
margin: auto;
width: var(--main-container-width);
}
@@ -217,8 +235,8 @@ ul.nav li.left {
max-width: 100%;
}
.github-modal>.card {
height: 80% !important;
.github-modal > .card {
height: var(--modal-card-height) !important;
overflow-y: auto;
text-align: start;
}
@@ -233,7 +251,7 @@ ul.nav li.left {
.grid-item {
width: var(--main-bio-size);
margin-left: var(--main-padding);
backdrop-filter: blur(150px);
backdrop-filter: blur(var(--blur-large));
border-radius: var(--main-border-radius);
}
@@ -265,7 +283,7 @@ ul.nav li.left {
.hover-items,
.hover-items a {
color: var(--main-txt-color);
padding: var(--main-padding) 10px;
padding: var(--main-padding) var(--main-margin);
font-size: large;
margin: auto;
line-height: 1.5em;
@@ -273,12 +291,12 @@ ul.nav li.left {
}
.hoverable:hover {
backdrop-filter: blur(150px);
backdrop-filter: blur(var(--blur-large));
cursor: pointer;
}
.contact-area a {
color: var(#9ee700);
color: var(--main-txt-color);
}
.contact-area i {
@@ -291,7 +309,7 @@ ul.nav li.left {
.contact-area i:hover {
cursor: pointer;
backdrop-filter: blur(150px);
backdrop-filter: blur(var(--blur-large));
}
.warning-text {
@@ -301,7 +319,7 @@ ul.nav li.left {
}
.max60 {
max-width: 90%;
max-width: var(--max-width-large);
margin: auto;
}
@@ -344,13 +362,13 @@ ul.nav li.left {
.portfolio-done {
display: grid;
grid-template-columns: 24% 24% 24% 24%;
grid-template-columns: repeat(4, var(--grid-column-width));
justify-content: space-between;
margin-bottom: 2em;
}
.portfolio-done-item {
height: 128px;
height: var(--portfolio-item-height);
}
.profile img {
@@ -368,14 +386,14 @@ ul.nav li.left {
display: block;
width: 100%;
height: auto;
transition: .5s ease;
transition: var(--transition-duration-long) ease;
backface-visibility: hidden;
box-shadow: 0 4px 8px 0 var(--main-shadow-color);
transition: 0.3s;
box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--main-shadow-color);
transition: var(--transition-duration-short);
}
.project p {
transition: .5s ease;
transition: var(--transition-duration-long) ease;
opacity: 0;
position: absolute;
top: 50%;
@@ -457,6 +475,9 @@ ul.nav li.left {
--donation-modal-height: 350px;
--donation-modal-width: 600px;
--donation-modal-top: 50%;
--mobile-margin: 5px;
--main-container-width: 95%;
--mobile-width: 90%;
}
body,
@@ -480,12 +501,6 @@ ul.nav li.left {
}
@media screen and (max-width:700px) {
:root {
--mobile-margin: 5px;
--main-container-width: 95%;
--mobile-width: 90%;
}
footer {
width: 90%;
}
index.html
+37 -17
View File
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Julian Lechner</title>
<link rel="icon" href="favicon.ico" />
@@ -41,23 +42,25 @@
<div class="long-bio-text hidden">
<p>
My name is Julian, many people also call me Julie. I'm %AGE% years old and come from beautiful Austria. I spend most of my time in front of the computer.
<br />
<br />
My name is Julian, many people also call me Julie. I'm %AGE% years old and come from beautiful Austria.
I spend most of my time in trains.
<br/>
<br/>
My biggest hobby apart from software development is 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.
<br />
<br />
I currently work mainly for the Viennese company SobIT Gmbh. This company develops software for any
care company, for scheduling employees as well as recording the status of patients.
<br />
<br />
I also work for the company GERLACH SYSTEMS or SynHost. They rent out servers, domains, web servers,
game servers etc. in various locations.
<br />
<br />
<a href="mailto:fraujulian@lechner.top">
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, both for staff scheduling and for patient registration.
<br/>
<br/>
I also work for a company called GERLACH SYSTEMS, which is the owner of the SynRadio and SynHost
projects. Their main business is the rental of servers, domains, web servers, game servers, etc. at
various locations.
<br/>
<br/>
<a href="mailto:contact@fraujulian.xyz">
<h3>Just contact me!</h3>
</a>
</p>
@@ -119,10 +122,19 @@
<div class="grid-item">
<h1>Java</h1>
</div>
<div class="grid-item">
<h1>Github</h1>
</div>
<div class="grid-item">
<h1>Gitlab</h1>
</div>
<div class="grid-item">
<h1>Azure Devops</h1>
</div>
</div>
<div class="contact-area">
<a href="mailto:fraujulian@lechner.top">
<a href="mailto:contact@fraujulian.xyz">
<i class="fa-solid fa-envelope fa-3x"></i>
</a>
@@ -137,6 +149,14 @@
<a href="https://github.com/fraujulian">
<i class="fab fa-github fa-3x"></i>
</a>
<a href="https://www.xing.com/profile/Julian_Lechner03274">
<i class="fab fa-xing fa-3x"></i>
</a>
<a href="https://www.linkedin.com/in/julian-lechner-98b377356/">
<i class="fab fa-linkedin fa-3x"></i>
</a>
</div>
</div>
@@ -147,7 +167,7 @@
<footer>
<p>
<a href="/IMPRINT/">IMPRINT</a> | &copy; 2023 - %CURRENT_YEAR% Julian Lechner - All rights reserved.
<a href="IMPRINT/index.html">IMPRINT</a> | &copy; 2023 - %CURRENT_YEAR% Julian Lechner - All rights reserved.
</p>
</footer>
</body>