diff --git a/LICENSE.md b/LICENSE.md
index 19ee8a4..2b7027c 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
# License Agreement
-**Copyright © 2024 Julian Lechner. All rights reserved.**
+**Copyright © 2025 Julian Lechner. All rights reserved.**
## 1. Grant of License
diff --git a/README.md b/README.md
index fe04ad9..ad23ab0 100644
--- a/README.md
+++ b/README.md
@@ -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/).
diff --git a/Resources/Javascript.js b/Resources/Javascript.js
index 4449a15..1c9a1cf 100644
--- a/Resources/Javascript.js
+++ b/Resources/Javascript.js
@@ -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 = `
+
+ `;
+
+ 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 = `
`;
- 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 = `
`;
- 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)})`;
}
diff --git a/Resources/Style.css b/Resources/Style.css
index 2d3c055..860e68f 100644
--- a/Resources/Style.css
+++ b/Resources/Style.css
@@ -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%;
}
diff --git a/index.html b/index.html
index c4dc3c8..692011b 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
+
Julian Lechner
@@ -41,23 +42,25 @@
- 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.
-
-
+ 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.
+
+
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.
-
-
- 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.
-
-
- I also work for the company GERLACH SYSTEMS or SynHost. They rent out servers, domains, web servers,
- game servers etc. in various locations.
-
-
-
+ possible for fun and my health.
+
+
+ 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.
+
+
+ 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.
+
+
+
Just contact me!
@@ -119,10 +122,19 @@
Java
+
+
Github
+
+
+
Gitlab
+
+
+
Azure Devops
+
@@ -147,7 +167,7 @@