New Version - dev to main (#2)
This commit was merged in pull request #2.
This commit is contained in:
@@ -3,16 +3,15 @@
|
|||||||
|
|
||||||
<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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/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">
|
||||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
<link rel="stylesheet" type="text/css" href="../Resources/Style.css" />
|
||||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="../Style.css" />
|
<script rel="preload" src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
|
||||||
|
<script async rel="preload" src="../Resources/Javascript.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -32,24 +31,17 @@
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<p>
|
|
||||||
<h4>Represented by:</h4>
|
|
||||||
Julian Lechner
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<h4>Abuse Contact:</h4>
|
<h4>Abuse Contact:</h4>
|
||||||
E-Mail: julian@lechner.top
|
E-Mail: abuse@fraujulian.xyz
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
@@ -108,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>
|
||||||
@@ -121,21 +113,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
|
||||||
<p>
|
<p>
|
||||||
<a href="/imprint/">Imprint</a>
|
<a href="/IMPRINT/">IMPRINT</a> | © 2023 - %CURRENT_YEAR% Julian Lechner - All rights reserved.
|
||||||
|
|
|
||||||
©
|
|
||||||
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="../Javascript.js"></script>
|
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
-175
@@ -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 = `
|
|
||||||
<div class="media">
|
|
||||||
<div class="media-body">
|
|
||||||
<a href="${project.html_url}" onclick="plausible('${project.name}')" target="_blank">
|
|
||||||
<strong class="d-block text-gray-dark">${project.name}</strong>
|
|
||||||
</a>
|
|
||||||
<div class="stars" style="float:right;">
|
|
||||||
${project.language}
|
|
||||||
<i class="far fa-star stargazers"></i>${project.stargazers_count}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>${project.description}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
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 = `
|
|
||||||
<div class="card">
|
|
||||||
<a onclick="location.reload()" href="#" style="float: right"> ❌</a>
|
|
||||||
<a href="${project.html_url}" target="blank" style="float: left"> Visit on GitHub</a>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
${html}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
+1
-1
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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/).
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
|
Before Width: | Height: | Size: 352 KiB After Width: | Height: | Size: 352 KiB |
@@ -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 = `
|
||||||
|
<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) return;
|
||||||
|
if (currentProject.description == null) currentProject.description = "";
|
||||||
|
if (currentProject.language == null) currentProject.language = "";
|
||||||
|
|
||||||
|
currentProject.name = currentProject.name
|
||||||
|
.replaceAll("_", " ")
|
||||||
|
.replaceAll("-", " ");
|
||||||
|
|
||||||
|
currentProjectDiv.innerHTML = `
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-body">
|
||||||
|
<a href="${currentProject.html_url}">
|
||||||
|
<strong class="d-block text-gray-dark">${currentProject.name}</strong>
|
||||||
|
</a>
|
||||||
|
<div class="stars">
|
||||||
|
${currentProject.language}
|
||||||
|
<i class="far fa-star stargazers"></i>${currentProject.stargazers_count}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>${currentProject.description}</p>
|
||||||
|
</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);
|
||||||
|
|
||||||
|
let projectReadmeModalDiv = document.createElement("div");
|
||||||
|
projectReadmeModalDiv.classList = "modal github-modal hidden";
|
||||||
|
|
||||||
|
projectReadmeModalDiv.innerHTML = `
|
||||||
|
<div class="card">
|
||||||
|
<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();
|
||||||
|
}
|
||||||
|
|
||||||
|
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)})`;
|
||||||
|
}
|
||||||
@@ -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("../img/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 {
|
||||||
@@ -133,6 +151,7 @@ ul.nav li.left {
|
|||||||
|
|
||||||
#github_projects .stars {
|
#github_projects .stars {
|
||||||
color: var(--main-txt-color) !important;
|
color: var(--main-txt-color) !important;
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#github_projects a {
|
#github_projects a {
|
||||||
@@ -167,43 +186,43 @@ ul.nav li.left {
|
|||||||
backdrop-filter: blur(150px);
|
backdrop-filter: blur(150px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
||||||
}
|
}
|
||||||
@@ -216,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;
|
||||||
}
|
}
|
||||||
@@ -232,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);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -264,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;
|
||||||
@@ -272,15 +291,15 @@ ul.nav li.left {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hoverable:hover {
|
.hoverable:hover {
|
||||||
backdrop-filter: blur(150px);
|
backdrop-filter: blur(var(--blur-large));
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-area a {
|
.contact-area a {
|
||||||
color: var(#9ee700);
|
color: var(--main-txt-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-area i {
|
.contact-area i {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: var(--main-icon-width);
|
width: var(--main-icon-width);
|
||||||
padding-top: var(--main-padding);
|
padding-top: var(--main-padding);
|
||||||
@@ -288,19 +307,19 @@ ul.nav li.left {
|
|||||||
border-radius: var(--main-border-radius);
|
border-radius: var(--main-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-area i:hover {
|
.contact-area i:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
backdrop-filter: blur(150px);
|
backdrop-filter: blur(var(--blur-large));
|
||||||
}
|
}
|
||||||
|
|
||||||
.js-reminder {
|
.warning-text {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
padding: var(--main-padding);
|
padding: var(--main-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
.max60 {
|
.max60 {
|
||||||
max-width: 90%;
|
max-width: var(--max-width-large);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -343,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 {
|
||||||
@@ -367,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%;
|
||||||
@@ -456,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,
|
||||||
@@ -479,14 +501,8 @@ 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: var(--main-container-width);
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.nav li,
|
ul.nav li,
|
||||||
@@ -508,7 +524,7 @@ ul.nav li.left {
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bio-text {
|
.long-bio-text {
|
||||||
width: 95% !important;
|
width: 95% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -516,7 +532,7 @@ ul.nav li.left {
|
|||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-area i {
|
.contact-area i {
|
||||||
margin-top: var(--mobile-margin);
|
margin-top: var(--mobile-margin);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -537,4 +553,4 @@ ul.nav li.left {
|
|||||||
.short_desc {
|
.short_desc {
|
||||||
width: var(--mobile-width);
|
width: var(--mobile-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 937 KiB |
+82
-65
@@ -3,36 +3,34 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/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">
|
||||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
<link rel="stylesheet" type="text/css" href="Resources/Style.css" />
|
||||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="Style.css" />
|
<script rel="preload" src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
|
||||||
|
<script async rel="preload" src="Resources/Javascript.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<section class="container">
|
||||||
<div class="card profile">
|
<div class="card profile">
|
||||||
|
|
||||||
<!-- BASIC INFORMATION -->
|
<img src="Resources/Images/Logo.webp" width="200px" height="200px" fetchpriority="high" alt="Online Profilbild von Julian Lechner"/>
|
||||||
<img src="img/logo.png" width="200px" height="200px" fetchpriority="low">
|
<h1>Hallo! 👋 I'm Julian Lechner!</h1>
|
||||||
<h1>Hii! 👋 I'm Julian Lechner!</h1>
|
|
||||||
<h3>📍 Austria, Vienna</h3>
|
<h3>📍 Austria, Vienna</h3>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<!-- CLICKABLE TEXT > TO SEE BIO TEXT-->
|
|
||||||
<div class="max60">
|
<div class="max60">
|
||||||
<div id="short-desc" class="hover-items">
|
<div id="short-bio-text" class="hover-items">
|
||||||
<i id="left-arrow" class="fas fa-arrow-right"></i>
|
<i id="left-arrow" class="fas fa-arrow-right"></i>
|
||||||
|
|
||||||
<a onclick="plausible('expandprofile')">
|
<a>
|
||||||
<u>
|
<u>
|
||||||
<h3>A young enthusiastic developer from Austria!</h3>
|
<h3>A young enthusiastic developer from Austria!</h3>
|
||||||
</u>
|
</u>
|
||||||
@@ -42,28 +40,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- HIDDEN BIO TEXT -->
|
<div class="long-bio-text hidden">
|
||||||
<div class="bio-text hidden">
|
|
||||||
<p>
|
<p>
|
||||||
My name is Julian, many people also call me Julie. I'm
|
My name is Julian, many people also call me Julie. I'm %AGE% years old and come from beautiful Austria.
|
||||||
<script>let startDate = new Date('2009-03-03'); let today = new Date(); let diffTime = Math.abs(today - startDate); let diffYears = diffTime / (1000 * 60 * 60 * 24 * 365.25); document.write(diffYears.toFixed(1));</script>
|
I spend most of my time in trains.
|
||||||
years old and come from beautiful Austria. I spend most of my time in front of the computer.
|
<br/>
|
||||||
<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" onclick="plausible('envelope')" target="_blank">
|
<br/>
|
||||||
|
<a href="mailto:contact@fraujulian.xyz">
|
||||||
<h3>Just contact me!</h3>
|
<h3>Just contact me!</h3>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
@@ -72,13 +69,13 @@
|
|||||||
<hr>
|
<hr>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- JAVASCRIPT REMINDER -->
|
<noscript>
|
||||||
<p class="js-reminder">Enable JavaScript to see what I do.</p>
|
<h2 class="warning-text">Enable JavaScript to see more.</h2>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
<!-- TOOLS/LANGUAGES/FRAMEWORKS -->
|
|
||||||
<div class="bio grid-container">
|
<div class="bio grid-container">
|
||||||
<div class="grid-item-start">
|
<div class="grid-item-start">
|
||||||
<h1>I code with</h1>
|
<h1>I work with</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-item">
|
<div class="grid-item">
|
||||||
<h1>NodeJS</h1>
|
<h1>NodeJS</h1>
|
||||||
@@ -105,54 +102,74 @@
|
|||||||
<h1>WPF</h1>
|
<h1>WPF</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-item">
|
<div class="grid-item">
|
||||||
<h1>Docker</h1>
|
<h1>Avalonia</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-item">
|
<div class="grid-item">
|
||||||
<h1>Linux</h1>
|
<h1>Ubuntu</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-item">
|
<div class="grid-item">
|
||||||
<h1>Jetbrains</h1>
|
<h1>WebStorm</h1>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item">
|
||||||
|
<h1>Rider</h1>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item">
|
||||||
|
<h1>SSMS</h1>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item">
|
||||||
|
<h1>MySQL</h1>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item">
|
||||||
|
<h1>Java</h1>
|
||||||
|
</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>
|
||||||
|
|
||||||
<!-- ICONS -->
|
<div class="contact-area">
|
||||||
<div class="icon-area">
|
<a href="mailto:contact@fraujulian.xyz">
|
||||||
<a href="mailto:contact@fraujulian.xyz" onclick="plausible('envelope')" target="_blank">
|
<i class="fa-solid fa-envelope fa-3x"></i>
|
||||||
<i class="fa-solid fa-envelope fa-3x"></i></a>
|
</a>
|
||||||
|
|
||||||
<a href="tel:+436609254001" onclick="plausible('phone')" target="_blank">
|
<a href="tel:+436609254001">
|
||||||
<i class="fa-solid fa-phone fa-3x"></i></a>
|
<i class="fa-solid fa-phone fa-3x"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a href="https://discord.com/users/860206216893693973" onclick="plausible('discord')" target="_blank">
|
<a href="https://discord.com/users/860206216893693973">
|
||||||
<i class="fab fa-discord fa-3x"></i></a>
|
<i class="fab fa-discord fa-3x"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a href="https://github.com/fraujulian" onclick="plausible('github')" target="_blank">
|
<a href="https://github.com/fraujulian">
|
||||||
<i class="fab fa-github fa-3x"></i></a>
|
<i class="fab fa-github fa-3x"></i>
|
||||||
|
</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>
|
||||||
|
|
||||||
<!-- GITHUB PROJECTS -->
|
|
||||||
<div id="github_projects" class="card">
|
<div id="github_projects" class="card">
|
||||||
<h2>Loading...</h2>
|
<h2 id="loading-text" class="warning-text">Enable JavaScript to see more.</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
|
||||||
<p>
|
<p>
|
||||||
<a href="/imprint/">Imprint</a>
|
<a href="IMPRINT/index.html">IMPRINT</a> | © 2023 - %CURRENT_YEAR% Julian Lechner - All rights reserved.
|
||||||
|
|
|
||||||
©
|
|
||||||
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="Javascript.js"></script>
|
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user