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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Julian Lechner</title> <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="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" /> <link rel="stylesheet" type="text/css" href="../Resources/Style.css" />
@@ -35,7 +34,7 @@
<p> <p>
<h4>Contact:</h4> <h4>Contact:</h4>
Phone: +43 (0) 660 9254001 <br> Phone: +43 (0) 660 9254001 <br>
E-Mail: julian@lechner.top E-Mail: contact@fraujulian.xyz
</p> </p>
<br> <br>
@@ -101,7 +100,7 @@
<div class="max60"> <div class="max60">
<div id="short-desc" class="hover-items"> <div id="short-desc" class="hover-items">
<i id="left-arrow" class="fas fa-arrow-right"></i> <i id="left-arrow" class="fas fa-arrow-right"></i>
<a href="/#"> <a href="../index.html">
<u> <u>
<h3>Back</h3> <h3>Back</h3>
</u> </u>
@@ -114,20 +113,9 @@
</div> </div>
<footer> <footer>
<!-- FOOTER -->
<p> <p>
<a href="/imprint/">Imprint</a> <a href="/IMPRINT/">IMPRINT</a> | &copy; 2023 - %CURRENT_YEAR% Julian Lechner - All rights reserved.
|
&copy;
2023 -
<script>document.write(new Date().getFullYear())</script> Julian Lechner - All rights reserved.
</p> </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> </footer>
</body> </body>
LICENSE.md
+1 -1
View File
@@ -1,6 +1,6 @@
# License Agreement # License Agreement
**Copyright © 2024 Julian Lechner. All rights reserved.** **Copyright © 2025 Julian Lechner. All rights reserved.**
## 1. Grant of License ## 1. Grant of License
README.md
+1 -10
View File
@@ -1,21 +1,12 @@
# 🖼️ FrauJulian's Portfolio Website # 🖼️ FrauJulian's Portfolio Website
**My portfolio resume website!**
## 👀 Features ### [🙋‍♂️ Website Preview](https://fraujulian.xyz/)
- view all github repositories
- view readme
- view primary language
- view stars
## 👂 Languages/Framework/Packages: ## 👂 Languages/Framework/Packages:
- Javascript - Javascript
- CSS - CSS
- HTML - HTML
## 🙋‍♂️ Usefull Links:
- [Website](https://fraujulian.xyz/)
## 📋 Credits: ## 📋 Credits:
~ made by [**FrauJulian**](https://fraujulian.xyz/). ~ 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 _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")) { if (_pathName.endsWith("/IMPRINT/index.html") || _pathName.endsWith("/IMPRINT/")) {
LoadHomepage();
} else {
ReplaceCurrentYearPlaceholder(); ReplaceCurrentYearPlaceholder();
} else {
LoadHomepage();
} }
function LoadHomepage() { function LoadHomepage() {
ReplacePlaceholders(); ReplacePlaceholders();
LoadGithubProjects(999, 16); LoadGithubProjects();
KnowledgeCarousel();
} }
function ReplacePlaceholders() { function ReplacePlaceholders() {
@@ -19,19 +44,40 @@ function ReplacePlaceholders() {
} }
function ReplaceAgePlaceholder() { function ReplaceAgePlaceholder() {
let birthDate = new Date('2009-03-03'); let birthDate = new Date(_birthdayDate);
let diffTime = Math.abs(_todayDate - birthDate); let diffTime = Math.abs(_todayDate - birthDate);
let diffTimeInYears = diffTime / (1000 * 60 * 60 * 24 * 365.25); let diffTimeInYearsCalculation = diffTime / (1000 * 60 * 60 * 24 * 365.25);
let age = diffTimeInYears.toFixed(1); 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); document.body.innerHTML = document.body.innerHTML.replace("%AGE%", age);
} }
function ReplaceCurrentYearPlaceholder() { function ReplaceCurrentYearPlaceholder() {
let fullCurrentYear = _todayDate.getFullYear(); let fullCurrentYear = _todayDate.getFullYear().toString();
document.body.innerHTML = document.body.innerHTML.replace("%CURRENT_YEAR%", fullCurrentYear); 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) => { const sortOnKey = (key, descending) => {
return (a, b) => { return (a, b) => {
a = a[key]; 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((rawResponse) => rawResponse.json())
.then((allProjects) => { .then((allProjects) => {
allProjects = allProjects.sort(sortOnKey("stargazers_count", true)); allProjects = allProjects.sort(sortOnKey("stargazers_count", true));
@@ -49,22 +95,42 @@ function LoadGithubProjects(numberOfLoadedRepositories, numberOfShownRepositorie
projectsDiv.innerHTML = ""; projectsDiv.innerHTML = "";
projectsDiv.classList = ""; 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"); let currentProjectDiv = document.createElement("div");
currentProjectDiv.classList = "card hoverable"; currentProjectDiv.classList = "card hoverable";
let currentProject = allProjects[currentProjectIndex]; let currentProject = allProjects[currentProjectIndex];
if (currentProject !== undefined && if (currentProject === undefined || currentProject.fork === true) return;
currentProject.fork !== true) { if (currentProject.description == null) currentProject.description = "";
if (currentProject.description == null) currentProject.description = ""; if (currentProject.language == null) currentProject.language = "";
if (currentProject.language == null) currentProject.language = "";
currentProject.name = currentProject.name currentProject.name = currentProject.name
.replaceAll("_", " ") .replaceAll("_", " ")
.replaceAll("-", " "); .replaceAll("-", " ");
currentProjectDiv.innerHTML = ` currentProjectDiv.innerHTML = `
<div class="media"> <div class="media">
<div class="media-body"> <div class="media-body">
<a href="${currentProject.html_url}"> <a href="${currentProject.html_url}">
@@ -79,119 +145,118 @@ function LoadGithubProjects(numberOfLoadedRepositories, numberOfShownRepositorie
</div> </div>
`; `;
fetch(`https://raw.githubusercontent.com/${currentProject.full_name}/${currentProject.default_branch}/README.md`) fetch(`https://raw.githubusercontent.com/${currentProject.full_name}/${currentProject.default_branch}/README.md`)
.then((rawResponse) => rawResponse.text()) .then((rawResponse) => rawResponse.text())
.then((readmeText) => { .then((readmeText) => {
let markdownToHtmlConverter = new showdown.Converter(); let markdownToHtmlConverter = new showdown.Converter();
let readmeInHtml = markdownToHtmlConverter.makeHtml(readmeText); let readmeInHtml = markdownToHtmlConverter.makeHtml(readmeText);
let projectReadmeModalDiv = document.createElement("div"); let projectReadmeModalDiv = document.createElement("div");
projectReadmeModalDiv.classList = "modal github-modal hidden"; projectReadmeModalDiv.classList = "modal github-modal hidden";
projectReadmeModalDiv.innerHTML = ` projectReadmeModalDiv.innerHTML = `
<div class="card"> <div class="card">
<a onclick="" id="projectReadmeModalDiv-Close" style="float: right"> ❌</a> <a id="projectReadmeModalDiv-Close" style="float: right; cursor: pointer;">❌</a>
<a href="${currentProject.html_url}"> Visit on GitHub</a> <a href="${currentProject.html_url}">Visit on GitHub</a>
<br> <br>
<br> <br>
${readmeInHtml} ${readmeInHtml}
</div> </div>
`; `;
currentProjectDiv.onclick = function () { currentProjectDiv.onclick = function () {
projectReadmeModalDiv.classList.remove("hidden"); projectReadmeModalDiv.classList.remove("hidden");
document.body.scrollTop = 0; document.body.scrollTop = 0;
document.documentElement.scrollTop = 0; document.documentElement.scrollTop = 0;
document.body.style.opacity = 0.2.toString(); 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) { document
if (mouseClick.target === projectReadmeModalDiv || .getElementsByTagName("html")[0]
mouseClick.target === document.getElementById("projectReadmeModalDiv-Close")) { .appendChild(projectReadmeModalDiv);
projectReadmeModalDiv.classList.add("hidden"); });
document.body.style.opacity = 1.0.toString();
}
}
document projectsDiv.appendChild(currentProjectDiv);
.getElementsByTagName("html")[0]
.appendChild(projectReadmeModalDiv);
});
projectsDiv.appendChild(currentProjectDiv);
}
} }
}); });
} }
let _shortBioTextButton = document.getElementById("short-bio-text"); let longBioText = document.getElementsByClassName("long-bio-text")[0];
let _longBioText = document.getElementsByClassName("long-bio-text")[0]; let isLongBioTextShown = false;
let _isLongBioTextShown = true;
_shortBioTextButton.onclick = function () { document.getElementById("short-bio-text").onclick = function () {
let leftArrow = document.getElementById("left-arrow"); let leftArrow = document.getElementById("left-arrow");
let rightArrow = document.getElementById("right-arrow"); let rightArrow = document.getElementById("right-arrow");
if (_isLongBioTextShown) { isLongBioTextShown = !isLongBioTextShown;
_longBioText.classList.remove("hidden");
if (isLongBioTextShown) {
longBioText.classList.remove("hidden");
leftArrow.classList.remove("fa-arrow-right"); leftArrow.classList.remove("fa-arrow-right");
leftArrow.classList.add("fa-arrow-down"); leftArrow.classList.add("fa-arrow-down");
rightArrow.classList.remove("fa-arrow-left"); rightArrow.classList.remove("fa-arrow-left");
rightArrow.classList.add("fa-arrow-down"); rightArrow.classList.add("fa-arrow-down");
leftArrow.style.position = "relative"; leftArrow.style.position = "relative";
rightArrow.style.position = "relative"; rightArrow.style.position = "relative";
FadeOut(_longBioText); FadeIn(longBioText);
} else { } else {
_longBioText.classList.add("hidden"); longBioText.classList.add("hidden");
leftArrow.classList.remove("fa-arrow-down"); leftArrow.classList.remove("fa-arrow-down");
leftArrow.classList.add("fa-arrow-right"); leftArrow.classList.add("fa-arrow-right");
rightArrow.classList.remove("fa-arrow-down"); rightArrow.classList.remove("fa-arrow-down");
rightArrow.classList.add("fa-arrow-left"); rightArrow.classList.add("fa-arrow-left");
leftArrow.style.position = "relative"; leftArrow.style.position = "relative";
rightArrow.style.position = "relative"; rightArrow.style.position = "relative";
FadeIn(_longBioText); FadeOut(longBioText);
} }
_isLongBioTextShown = !_isLongBioTextShown;
}; };
_longBioText.onclick = function (mouseClick) { longBioText.onclick = function (mouseClick) {
if (mouseClick.target === _longBioText) { if (mouseClick.target === longBioText) {
_longBioText.classList.add("hidden"); longBioText.classList.add("hidden");
document.body.style.opacity = 1.0.toString(); document.body.style.opacity = 1.0.toString();
} }
}; };
function FadeOut(element) { function FadeOut(element) {
let currentOpacity = 1; let transparency = 1;
const fadeInterval = setInterval(() => { const interval = setInterval(() => {
if (currentOpacity <= 0.1) { if (transparency <= 0.1) {
clearInterval(fadeInterval); clearInterval(interval)
element.style.display = 'none'; element.style.display = 'none';
return; return;
} }
setElementOpacity(element, currentOpacity); transparency *= 0.9;
currentOpacity *= 0.9; ApplyTransparency(element, transparency);
}, 5); }, 5);
} }
function FadeIn(element) { function FadeIn(element) {
let currentOpacity = 0.1; let transparency = 0.1;
element.style.display = 'block'; element.style.display = 'block';
const fadeInterval = setInterval(() => { const interval = setInterval(() => {
if (currentOpacity >= 1) { if (transparency >= 1) {
clearInterval(fadeInterval); clearInterval(interval);
ApplyTransparency(element, 1);
return; return;
} }
setElementOpacity(element, currentOpacity); transparency *= 1.1;
currentOpacity *= 1.1; ApplyTransparency(element, transparency);
}, 5); }, 5);
} }
function setElementOpacity(element, opacity) { function ApplyTransparency(element, transparency) {
const opacityPercentage = opacity * 100; element.style.opacity = transparency;
element.style.opacity = opacity; element.style.filter = `alpha(opacity=${Math.round(transparency * 100)})`;
element.style.filter = `alpha(opacity=${opacityPercentage})`;
} }
Resources/Style.css
+61 -46
View File
@@ -1,14 +1,14 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: var(--scroll-width);
height: 5px; height: var(--scroll-width);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #eaebfe; background: var(--scroll-thumb-bg);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: var(--scroll-track-bg);
} }
:root { :root {
@@ -22,11 +22,30 @@
--padding-big: 20px; --padding-big: 20px;
--padding-small: 5px; --padding-small: 5px;
--main-container-width: 750px; --main-container-width: 750px;
--main-txt-color: #dbe9f4; --main-txt-color: White;
--main-shadow-color: #634b28ad; --main-shadow-color: #6F3E38;
--donation-modal-height: 200px; --donation-modal-height: 200px;
--donation-modal-width: 600px; --donation-modal-width: 600px;
--donation-modal-top: 50%; --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, a,
@@ -44,13 +63,12 @@ html {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
background-image: url("Images/background.webp"); background-image: var(--background-image);
/*background-color: #2f3136; */
height: 100%; height: 100%;
} }
footer { footer {
padding-bottom: 5px; padding-bottom: var(--main-padding);
max-width: 100%; max-width: 100%;
} }
@@ -67,9 +85,9 @@ ul.nav {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(150px); backdrop-filter: blur(var(--blur-large));
box-shadow: 0 4px 8px 0 var(--main-shadow-color); box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--main-shadow-color);
transition: 0.3s; transition: var(--transition-duration-short);
} }
ul.nav li { ul.nav li {
@@ -169,42 +187,42 @@ ul.nav li.left {
} }
.long-bio-text { .long-bio-text {
font-size: 20px; font-size: var(--font-size-large);
opacity: 0; opacity: 0;
width: 60%; width: var(--width-medium);
margin-bottom: 15px !important; margin-bottom: var(--main-padding) !important;
margin: auto; margin: auto;
padding: 10px; padding: var(--main-margin);
} }
.card { .card {
margin-top: var(--main-padding); margin-top: var(--main-padding);
box-shadow: 0 4px 8px 0 var(--main-shadow-color); box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--main-shadow-color);
transition: 0.3s; transition: var(--transition-duration-short);
backdrop-filter: blur(20px); backdrop-filter: blur(var(--blur-small));
padding: var(--main-padding); padding: var(--main-padding);
text-align: center; text-align: center;
color: var(#9ee700); color: var(--main-txt-color);
} }
.card-projects { .card-projects {
display: grid; display: grid;
box-shadow: 0 4px 8px 0 var(--main-shadow-color); box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--main-shadow-color);
transition: 0.3s; transition: var(--transition-duration-short);
backdrop-filter: blur(150px); backdrop-filter: blur(var(--blur-large));
} }
.card-projects:hover { .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 { .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 { .container {
background: transparent; background: transparent;
backdrop-filter: blur(20px); backdrop-filter: blur(var(--blur-small));
margin: auto; margin: auto;
width: var(--main-container-width); width: var(--main-container-width);
} }
@@ -217,8 +235,8 @@ ul.nav li.left {
max-width: 100%; max-width: 100%;
} }
.github-modal>.card { .github-modal > .card {
height: 80% !important; height: var(--modal-card-height) !important;
overflow-y: auto; overflow-y: auto;
text-align: start; text-align: start;
} }
@@ -233,7 +251,7 @@ ul.nav li.left {
.grid-item { .grid-item {
width: var(--main-bio-size); width: var(--main-bio-size);
margin-left: var(--main-padding); margin-left: var(--main-padding);
backdrop-filter: blur(150px); backdrop-filter: blur(var(--blur-large));
border-radius: var(--main-border-radius); border-radius: var(--main-border-radius);
} }
@@ -265,7 +283,7 @@ ul.nav li.left {
.hover-items, .hover-items,
.hover-items a { .hover-items a {
color: var(--main-txt-color); color: var(--main-txt-color);
padding: var(--main-padding) 10px; padding: var(--main-padding) var(--main-margin);
font-size: large; font-size: large;
margin: auto; margin: auto;
line-height: 1.5em; line-height: 1.5em;
@@ -273,12 +291,12 @@ ul.nav li.left {
} }
.hoverable:hover { .hoverable:hover {
backdrop-filter: blur(150px); backdrop-filter: blur(var(--blur-large));
cursor: pointer; cursor: pointer;
} }
.contact-area a { .contact-area a {
color: var(#9ee700); color: var(--main-txt-color);
} }
.contact-area i { .contact-area i {
@@ -291,7 +309,7 @@ ul.nav li.left {
.contact-area i:hover { .contact-area i:hover {
cursor: pointer; cursor: pointer;
backdrop-filter: blur(150px); backdrop-filter: blur(var(--blur-large));
} }
.warning-text { .warning-text {
@@ -301,7 +319,7 @@ ul.nav li.left {
} }
.max60 { .max60 {
max-width: 90%; max-width: var(--max-width-large);
margin: auto; margin: auto;
} }
@@ -344,13 +362,13 @@ ul.nav li.left {
.portfolio-done { .portfolio-done {
display: grid; display: grid;
grid-template-columns: 24% 24% 24% 24%; grid-template-columns: repeat(4, var(--grid-column-width));
justify-content: space-between; justify-content: space-between;
margin-bottom: 2em; margin-bottom: 2em;
} }
.portfolio-done-item { .portfolio-done-item {
height: 128px; height: var(--portfolio-item-height);
} }
.profile img { .profile img {
@@ -368,14 +386,14 @@ ul.nav li.left {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
transition: .5s ease; transition: var(--transition-duration-long) ease;
backface-visibility: hidden; backface-visibility: hidden;
box-shadow: 0 4px 8px 0 var(--main-shadow-color); box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--main-shadow-color);
transition: 0.3s; transition: var(--transition-duration-short);
} }
.project p { .project p {
transition: .5s ease; transition: var(--transition-duration-long) ease;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -457,6 +475,9 @@ ul.nav li.left {
--donation-modal-height: 350px; --donation-modal-height: 350px;
--donation-modal-width: 600px; --donation-modal-width: 600px;
--donation-modal-top: 50%; --donation-modal-top: 50%;
--mobile-margin: 5px;
--main-container-width: 95%;
--mobile-width: 90%;
} }
body, body,
@@ -480,12 +501,6 @@ ul.nav li.left {
} }
@media screen and (max-width:700px) { @media screen and (max-width:700px) {
:root {
--mobile-margin: 5px;
--main-container-width: 95%;
--mobile-width: 90%;
}
footer { footer {
width: 90%; width: 90%;
} }
index.html
+37 -17
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Julian Lechner</title> <title>Julian Lechner</title>
<link rel="icon" href="favicon.ico" /> <link rel="icon" href="favicon.ico" />
@@ -41,23 +42,25 @@
<div class="long-bio-text hidden"> <div class="long-bio-text hidden">
<p> <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. My name is Julian, many people also call me Julie. I'm %AGE% years old and come from beautiful Austria.
<br /> I spend most of my time in trains.
<br /> <br/>
<br/>
My biggest hobby apart from software development is diving. Floating in deep water and only thinking 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 about the here and now always brings me back to the depths. I try to practice this hobby as often as
possible. possible for fun and my health.
<br /> <br/>
<br /> <br/>
I currently work mainly for the Viennese company SobIT Gmbh. This company develops software for any I currently work mainly for the Viennese company SobIT Gmbh. This company develops software for most
care company, for scheduling employees as well as recording the status of patients. care companies in Austria, both for staff scheduling and for patient registration.
<br /> <br/>
<br /> <br/>
I also work for the company GERLACH SYSTEMS or SynHost. They rent out servers, domains, web servers, I also work for a company called GERLACH SYSTEMS, which is the owner of the SynRadio and SynHost
game servers etc. in various locations. projects. Their main business is the rental of servers, domains, web servers, game servers, etc. at
<br /> various locations.
<br /> <br/>
<a href="mailto:fraujulian@lechner.top"> <br/>
<a href="mailto:contact@fraujulian.xyz">
<h3>Just contact me!</h3> <h3>Just contact me!</h3>
</a> </a>
</p> </p>
@@ -119,10 +122,19 @@
<div class="grid-item"> <div class="grid-item">
<h1>Java</h1> <h1>Java</h1>
</div> </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>
<div class="contact-area"> <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> <i class="fa-solid fa-envelope fa-3x"></i>
</a> </a>
@@ -137,6 +149,14 @@
<a href="https://github.com/fraujulian"> <a href="https://github.com/fraujulian">
<i class="fab fa-github fa-3x"></i> <i class="fab fa-github fa-3x"></i>
</a> </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>
</div> </div>
@@ -147,7 +167,7 @@
<footer> <footer>
<p> <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> </p>
</footer> </footer>
</body> </body>