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
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%;
}