diff --git a/imprint/index.html b/IMPRINT/index.html similarity index 90% rename from imprint/index.html rename to IMPRINT/index.html index be653fe..6065d65 100644 --- a/imprint/index.html +++ b/IMPRINT/index.html @@ -8,11 +8,11 @@ Julian Lechner - + + - + + @@ -32,13 +32,6 @@
-

-

Represented by:

- Julian Lechner -

- -
-

Contact:

Phone: +43 (0) 660 9254001
@@ -49,7 +42,7 @@

Abuse Contact:

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


@@ -133,9 +126,9 @@ - + - \ 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/img/background.webp b/Resources/Images/background.webp similarity index 100% rename from img/background.webp rename to Resources/Images/background.webp diff --git a/Resources/Javascript.js b/Resources/Javascript.js new file mode 100644 index 0000000..4449a15 --- /dev/null +++ b/Resources/Javascript.js @@ -0,0 +1,197 @@ +let _todayDate = new Date(); + +if (window.location.pathname.endsWith("index.html")) { + LoadHomepage(); +} else { + ReplaceCurrentYearPlaceholder(); +} + +function LoadHomepage() { + ReplacePlaceholders(); + LoadGithubProjects(999, 16); +} + +function ReplacePlaceholders() { + document.getElementById("loading-text").innerHTML = "Projekte werden geladen!"; + + ReplaceAgePlaceholder(); + ReplaceCurrentYearPlaceholder(); +} + +function ReplaceAgePlaceholder() { + let birthDate = new Date('2009-03-03'); + let diffTime = Math.abs(_todayDate - birthDate); + let diffTimeInYears = diffTime / (1000 * 60 * 60 * 24 * 365.25); + let age = diffTimeInYears.toFixed(1); + document.body.innerHTML = document.body.innerHTML.replace("%AGE%", age); +} + +function ReplaceCurrentYearPlaceholder() { + let fullCurrentYear = _todayDate.getFullYear(); + document.body.innerHTML = document.body.innerHTML.replace("%CURRENT_YEAR%", fullCurrentYear); +} + +function LoadGithubProjects(numberOfLoadedRepositories, numberOfShownRepositories) { + 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 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 = ""; + + 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 _shortBioTextButton = document.getElementById("short-bio-text"); +let _longBioText = document.getElementsByClassName("long-bio-text")[0]; +let _isLongBioTextShown = true; + +_shortBioTextButton.onclick = function () { + let leftArrow = document.getElementById("left-arrow"); + let rightArrow = document.getElementById("right-arrow"); + + 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); + } 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"; + FadeIn(_longBioText); + } + + _isLongBioTextShown = !_isLongBioTextShown; +}; + +_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); + element.style.display = 'none'; + return; + } + + setElementOpacity(element, currentOpacity); + currentOpacity *= 0.9; + }, 5); +} + +function FadeIn(element) { + let currentOpacity = 0.1; + element.style.display = 'block'; + const fadeInterval = setInterval(() => { + if (currentOpacity >= 1) { + clearInterval(fadeInterval); + return; + } + + setElementOpacity(element, currentOpacity); + currentOpacity *= 1.1; + }, 5); +} + +function setElementOpacity(element, opacity) { + const opacityPercentage = opacity * 100; + element.style.opacity = opacity; + element.style.filter = `alpha(opacity=${opacityPercentage})`; +} diff --git a/Style.css b/Resources/Style.css similarity index 97% rename from Style.css rename to Resources/Style.css index 4b8f1cf..2d3c055 100644 --- a/Style.css +++ b/Resources/Style.css @@ -44,7 +44,7 @@ html { background-repeat: no-repeat; background-size: cover; background-attachment: fixed; - background-image: url("../img/background.webp"); + background-image: url("Images/background.webp"); /*background-color: #2f3136; */ height: 100%; } @@ -133,6 +133,7 @@ ul.nav li.left { #github_projects .stars { color: var(--main-txt-color) !important; + float: right; } #github_projects a { @@ -167,7 +168,7 @@ ul.nav li.left { backdrop-filter: blur(150px); } -.bio-text { +.long-bio-text { font-size: 20px; opacity: 0; width: 60%; @@ -276,11 +277,11 @@ ul.nav li.left { cursor: pointer; } -.icon-area a { +.contact-area a { color: var(#9ee700); } -.icon-area i { +.contact-area i { justify-content: space-between; width: var(--main-icon-width); padding-top: var(--main-padding); @@ -288,12 +289,12 @@ ul.nav li.left { border-radius: var(--main-border-radius); } -.icon-area i:hover { +.contact-area i:hover { cursor: pointer; backdrop-filter: blur(150px); } -.js-reminder { +.warning-text { font-style: normal; font-weight: 900; padding: var(--main-padding); @@ -486,7 +487,7 @@ ul.nav li.left { } footer { - width: var(--main-container-width); + width: 90%; } ul.nav li, @@ -508,7 +509,7 @@ ul.nav li.left { margin-left: 10px; } - .bio-text { + .long-bio-text { width: 95% !important; } @@ -516,7 +517,7 @@ ul.nav li.left { grid-template-columns: auto; } - .icon-area i { + .contact-area i { margin-top: var(--mobile-margin); } @@ -537,4 +538,4 @@ ul.nav li.left { .short_desc { width: var(--mobile-width); } -} \ No newline at end of file +} diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index 42c56f1..0000000 Binary files a/img/logo.png and /dev/null differ diff --git a/index.html b/index.html index ae1c98a..c4dc3c8 100644 --- a/index.html +++ b/index.html @@ -3,36 +3,33 @@ - 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 +