diff --git a/imprint/index.html b/IMPRINT/index.html similarity index 81% rename from imprint/index.html rename to IMPRINT/index.html index be653fe..eef0dc3 100644 --- a/imprint/index.html +++ b/IMPRINT/index.html @@ -3,16 +3,15 @@ - Julian Lechner - + - + + - + + @@ -32,24 +31,17 @@
-

-

Represented by:

- Julian Lechner -

- -
-

Contact:

Phone: +43 (0) 660 9254001
- E-Mail: julian@lechner.top + E-Mail: contact@fraujulian.xyz


Abuse Contact:

- E-Mail: julian@lechner.top + E-Mail: abuse@fraujulian.xyz


@@ -108,7 +100,7 @@
- +

Back

 @@ -121,21 +113,10 @@
- \ No newline at end of file + diff --git a/Javascript.js b/Javascript.js deleted file mode 100644 index fc6f9bc..0000000 --- a/Javascript.js +++ /dev/null @@ -1,175 +0,0 @@ - -var slideIndex = 0; -carousel(); - -function carousel() { - var items = []; - var bioContainer = document.getElementsByClassName("bio")[0]; - bioContainer.style = "display: grid !important;"; - document.getElementsByClassName("js-reminder")[0].style = "display: none !important;"; - var rawListItems = bioContainer.getElementsByTagName("div"); - for (var i = 1; i < rawListItems.length; i++) { - rawListItems[i].style = "display: none;"; - } - slideIndex++; - if (slideIndex > rawListItems.length || slideIndex == 1) { - slideIndex = 2 - } - rawListItems[slideIndex - 1].style.display = "block"; - setTimeout(carousel, 1000); -} -window.onload = function () { - let script = document.createElement("script"); - script.src = "https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"; - document.body.appendChild(script); - - const sortOnKey = (key, desc) => { - return (a, b) => { - a = a[key]; - b = b[key]; - return desc ? b - a : a - b; - }; - }; - - String.prototype.replaceAt = function (index, replacement) { - return ( - this.substr(0, index) + - replacement + - this.substr(index + replacement.length) - ); - }; - - fetch("https://api.github.com/users/fraujulian/repos?per_page=999") - .then((response) => response.json()) - .then((projects) => { - projects = projects.sort(sortOnKey("stargazers_count", true)); - let projectsDiv = document.getElementById("github_projects"); - projectsDiv.innerHTML = ""; - projectsDiv.classList = ""; - for (let i = 0; i < 16; i++) { - let projectDiv = document.createElement("div"); - projectDiv.classList = "card hoverable"; - let project = projects[i]; - if (project != undefined) { - if (project.description == null) - project.description = ""; - if (project.language == null) - project.language = ""; - project.name = project.name.replaceAll("_", " ").replaceAll("-", " "); - projectDiv.innerHTML = ` -
-
- - ${project.name} - -
- ${project.language} - ${project.stargazers_count} -
-
-

${project.description}

-
- `; - fetch( - `https://raw.githubusercontent.com/${project.full_name}/master/README.md` - ) - .then((response) => response.text()) - .then((text) => { - let converter = new showdown.Converter(); - let html = converter.makeHtml(text); - let projectModal = document.createElement("div"); - projectModal.classList = "modal github-modal hidden"; - projectModal.innerHTML = ` -
- ❌ - Visit on GitHub -
-
- ${html} -
- `; - - projectDiv.onclick = function () { - projectModal.classList.remove("hidden"); - document.body.scrollTop = 0; // Safari - document.documentElement.scrollTop = 0; // Chrome Firefox IE Opera - document.body.style.opacity = 0.2; - }; - - projectModal.onclick = function (evt) { - if (evt.target == projectModal) { - projectModal.classList.add("hidden"); - document.body.style.opacity = 1; - } - }; - document - .getElementsByTagName("html")[0] - .appendChild(projectModal); - }); - projectsDiv.appendChild(projectDiv); - } - } - }); -}; - -let bioBtn = document.getElementById('short-desc'); -let bioModel = document.getElementsByClassName('bio-text')[0]; -let leftArrow = document.getElementById("left-arrow"); -let rightArrow = document.getElementById("right-arrow"); -let hidden = true; - -bioBtn.onclick = function () { - if (hidden) { - bioModel.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"; - unfade(bioModel); - } else { - bioModel.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"; - fade(bioModel); - } - hidden = !hidden; -}; - -bioModel.onclick = function (evt) { - if (evt.target == bioModel) { - bioModel.classList.add("hidden"); - document.body.style.opacity = 1; - } -}; - -function fade(element) { - var op = 1; - var timer = setInterval(function () { - if (op <= 0.1) { - clearInterval(timer); - element.style.display = 'none'; - } - element.style.opacity = op; - element.style.filter = 'alpha(opacity=' + op * 100 + ")"; - op -= op * 0.1; - }, 5); -} - -function unfade(element) { - var op = 0.1; - element.style.display = 'block'; - var timer = setInterval(function () { - if (op >= 1) { - clearInterval(timer); - } - element.style.opacity = op; - element.style.filter = 'alpha(opacity=' + op * 100 + ")"; - op += op * 0.1; - }, 5); -} 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/Images/Background.webp b/Resources/Images/Background.webp new file mode 100644 index 0000000..f295911 Binary files /dev/null and b/Resources/Images/Background.webp differ diff --git a/img/logo.png b/Resources/Images/Logo.webp similarity index 100% rename from img/logo.png rename to Resources/Images/Logo.webp diff --git a/Resources/Javascript.js b/Resources/Javascript.js new file mode 100644 index 0000000..1c9a1cf --- /dev/null +++ b/Resources/Javascript.js @@ -0,0 +1,262 @@ +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 (_pathName.endsWith("/IMPRINT/index.html") || _pathName.endsWith("/IMPRINT/")) { + ReplaceCurrentYearPlaceholder(); +} else { + LoadHomepage(); +} + +function LoadHomepage() { + ReplacePlaceholders(); + LoadGithubProjects(); + KnowledgeCarousel(); +} + +function ReplacePlaceholders() { + document.getElementById("loading-text").innerHTML = "Projekte werden geladen!"; + + ReplaceAgePlaceholder(); + ReplaceCurrentYearPlaceholder(); +} + +function ReplaceAgePlaceholder() { + let birthDate = new Date(_birthdayDate); + let diffTime = Math.abs(_todayDate - birthDate); + 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().toString(); + document.body.innerHTML = document.body.innerHTML.replace("%CURRENT_YEAR%", fullCurrentYear); +} + +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]; + b = b[key]; + return descending ? b - a : a - b; + }; + } + + fetch(`https://api.github.com/users/fraujulian/repos?per_page=${_numberOfLoadedRepositories}`) + .then((rawResponse) => rawResponse.json()) + .then((allProjects) => { + allProjects = allProjects.sort(sortOnKey("stargazers_count", true)); + + let projectsDiv = document.getElementById("github_projects"); + projectsDiv.innerHTML = ""; + projectsDiv.classList = ""; + + for (let i = 0; i < _customProjects.length; i++) { + let currentProjectDiv = document.createElement("div"); + currentProjectDiv.classList = "card hoverable"; + + currentProjectDiv.innerHTML = ` +
+
+ + ${_customProjects[i].Title} + +
+ ${_customProjects[i].Language} +
+
+

${_customProjects[i].Description}

+
+ `; + + 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) return; + if (currentProject.description == null) currentProject.description = ""; + if (currentProject.language == null) currentProject.language = ""; + + currentProject.name = currentProject.name + .replaceAll("_", " ") + .replaceAll("-", " "); + + currentProjectDiv.innerHTML = ` +
+
+ + ${currentProject.name} + +
+ ${currentProject.language} + ${currentProject.stargazers_count} +
+
+

${currentProject.description}

+
+ `; + + 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"; + + projectReadmeModalDiv.innerHTML = ` +
+ ❌ + Visit on GitHub +
+
+ ${readmeInHtml} +
+ `; + + 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(); + } + } + + document + .getElementsByTagName("html")[0] + .appendChild(projectReadmeModalDiv); + }); + + projectsDiv.appendChild(currentProjectDiv); + + } + }); +} + +let longBioText = document.getElementsByClassName("long-bio-text")[0]; +let isLongBioTextShown = false; + +document.getElementById("short-bio-text").onclick = function () { + let leftArrow = document.getElementById("left-arrow"); + let rightArrow = document.getElementById("right-arrow"); + + 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"; + FadeIn(longBioText); + } else { + 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"; + FadeOut(longBioText); + } +}; + +longBioText.onclick = function (mouseClick) { + if (mouseClick.target === longBioText) { + longBioText.classList.add("hidden"); + document.body.style.opacity = 1.0.toString(); + } +}; + +function FadeOut(element) { + let transparency = 1; + const interval = setInterval(() => { + if (transparency <= 0.1) { + clearInterval(interval) + element.style.display = 'none'; + return; + } + + transparency *= 0.9; + ApplyTransparency(element, transparency); + }, 5); +} + +function FadeIn(element) { + let transparency = 0.1; + element.style.display = 'block'; + const interval = setInterval(() => { + if (transparency >= 1) { + clearInterval(interval); + ApplyTransparency(element, 1); + return; + } + + transparency *= 1.1; + ApplyTransparency(element, transparency); + }, 5); +} + +function ApplyTransparency(element, transparency) { + element.style.opacity = transparency; + element.style.filter = `alpha(opacity=${Math.round(transparency * 100)})`; +} diff --git a/Style.css b/Resources/Style.css similarity index 72% rename from Style.css rename to Resources/Style.css index 4b8f1cf..860e68f 100644 --- a/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("../img/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 { @@ -133,6 +151,7 @@ ul.nav li.left { #github_projects .stars { color: var(--main-txt-color) !important; + float: right; } #github_projects a { @@ -167,43 +186,43 @@ ul.nav li.left { backdrop-filter: blur(150px); } -.bio-text { - font-size: 20px; +.long-bio-text { + 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); } @@ -216,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; } @@ -232,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); } @@ -264,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; @@ -272,15 +291,15 @@ ul.nav li.left { } .hoverable:hover { - backdrop-filter: blur(150px); + backdrop-filter: blur(var(--blur-large)); cursor: pointer; } -.icon-area a { - color: var(#9ee700); +.contact-area a { + color: var(--main-txt-color); } -.icon-area i { +.contact-area i { justify-content: space-between; width: var(--main-icon-width); padding-top: var(--main-padding); @@ -288,19 +307,19 @@ ul.nav li.left { border-radius: var(--main-border-radius); } -.icon-area i:hover { +.contact-area i:hover { cursor: pointer; - backdrop-filter: blur(150px); + backdrop-filter: blur(var(--blur-large)); } -.js-reminder { +.warning-text { font-style: normal; font-weight: 900; padding: var(--main-padding); } .max60 { - max-width: 90%; + max-width: var(--max-width-large); margin: auto; } @@ -343,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 { @@ -367,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%; @@ -456,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, @@ -479,14 +501,8 @@ ul.nav li.left { } @media screen and (max-width:700px) { - :root { - --mobile-margin: 5px; - --main-container-width: 95%; - --mobile-width: 90%; - } - footer { - width: var(--main-container-width); + width: 90%; } ul.nav li, @@ -508,7 +524,7 @@ ul.nav li.left { margin-left: 10px; } - .bio-text { + .long-bio-text { width: 95% !important; } @@ -516,7 +532,7 @@ ul.nav li.left { grid-template-columns: auto; } - .icon-area i { + .contact-area i { margin-top: var(--mobile-margin); } @@ -537,4 +553,4 @@ ul.nav li.left { .short_desc { width: var(--mobile-width); } -} \ No newline at end of file +} diff --git a/img/background.webp b/img/background.webp deleted file mode 100644 index 7b6cbe3..0000000 Binary files a/img/background.webp and /dev/null differ diff --git a/index.html b/index.html index ae1c98a..692011b 100644 --- a/index.html +++ b/index.html @@ -3,36 +3,34 @@ - + Julian Lechner - + - + + - + + -
+
- - -

Hii! 👋 I'm Julian Lechner!

+ Online Profilbild von Julian Lechner +

Hallo! 👋 I'm Julian Lechner!

📍 Austria, Vienna


-
- - -
- \ No newline at end of file +