fraujulian/Personal-Portfolio-Website
1
0
Fork 0
Code Issues Pull Requests 7 Actions Projects Releases 2 Wiki Activity

Updated my Website

Browse Source 
- other (better) Theme
- added more Features
- changed Text
- added more animations
This commit is contained in:
fraujulian
2024-01-05 22:49:17 +01:00
committed by GitHub
parent f27aba8a9a
commit 0225da051b
8 changed files with 260 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/donation.css
+69 -69
View File
@@ -1,70 +1,70 @@
:root { :root {
--donation-modal-height: 200px; --donation-modal-height: 200px;
--donation-modal-width: 600px; --donation-modal-width: 600px;
--donation-modal-top: 50%; --donation-modal-top: 50%;
} }
#donate { #donate {
text-decoration-line: underline; text-decoration-line: underline;
} }
#donate:hover { #donate:hover {
cursor: pointer; cursor: pointer;
} }
#donateModal { #donateModal {
display: none; display: none;
} }
.modal { .modal {
top: 0; top: 0;
right: 0; right: 0;
position: absolute; position: absolute;
margin: auto; margin: auto;
height: 100vh; height: 100vh;
width: 100%; width: 100%;
} }
.modal .card { .modal .card {
opacity: 1; opacity: 1;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
height: var(--donation-modal-height); height: var(--donation-modal-height);
width: var(--donation-modal-width); width: var(--donation-modal-width);
max-width: 100%; max-width: 100%;
} }
.refer-area { .refer-area {
text-decoration-line: underline; text-decoration-line: underline;
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
:root { :root {
--donation-modal-height: 350px; --donation-modal-height: 350px;
--donation-modal-width: 600px; --donation-modal-width: 600px;
--donation-modal-top: 50%; --donation-modal-top: 50%;
} }
.modal .card { .modal .card {
vertical-align: middle; vertical-align: middle;
width: 80%; width: 80%;
opacity: 1; opacity: 1;
} }
.modal { .modal {
position: absolute; position: absolute;
margin: auto; margin: auto;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
} }
html, html,
body { body {
height: 100% !important; height: 100% !important;
} }
} }
css/github.css
+5 -8
View File
@@ -1,13 +1,13 @@
/* GitHub Projects */ /* GitHub Projects */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--hover-bg-color: #161616; --hover-bg-color: #001e3d;
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--hover-bg-color: #e5e5e5; --hover-bg-color: #001e3d;
} }
} }
@@ -21,7 +21,7 @@
} }
#github_projects .stars { #github_projects .stars {
color: #6c757d !important; color: var(--main-txt-color) !important;
} }
#github_projects a { #github_projects a {
@@ -40,7 +40,7 @@
} }
#github_projects .card a { #github_projects .card a {
color: var(--main-txt-color); color: var(--main-txt-color) !important;
} }
#github_projects .card p { #github_projects .card p {
@@ -59,18 +59,15 @@
max-width: 100%; max-width: 100%;
} }
/* width */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;
height: 5px; height: 5px;
} }
/* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
/* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #888; background: #eaebfe;
} }
css/style.css
+29 -20
View File
@@ -13,19 +13,19 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--main-bg-color: #1e2437; --main-bg-color: #144272;
--main-ac-color: #3d4254; --main-ac-color: #0A2647;
--main-txt-color: #b6e2eb; --main-txt-color: #eaebfe;
--hover-bg-color: #161616; --hover-bg-color: #144272;
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--main-bg-color: #fff; --main-bg-color: #144272;
--main-ac-color: #fff; --main-ac-color: #0A2647;
--main-txt-color: #000; --main-txt-color: #eaebfe;
--hover-bg-color: #e5e5e5; --hover-bg-color: #144272;
} }
} }
@@ -54,7 +54,6 @@ footer a {
text-decoration-line: underline; text-decoration-line: underline;
} }
/* Slide */
.js-reminder { .js-reminder {
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
@@ -99,8 +98,6 @@ footer a {
background: var(--main-bg-color); background: var(--main-bg-color);
} }
/* End Slide */
.social { .social {
border: 0; border: 0;
margin: auto; margin: auto;
@@ -117,7 +114,7 @@ footer a {
height: auto; height: auto;
transition: .5s ease; transition: .5s ease;
backface-visibility: hidden; backface-visibility: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(2, 41, 84, 0.8);
transition: 0.3s; transition: 0.3s;
} }
@@ -149,7 +146,7 @@ footer a {
display: grid; display: grid;
grid-template-columns: 24% 24% 24% 24%; grid-template-columns: 24% 24% 24% 24%;
justify-content: space-between; justify-content: space-between;
/* margin-bottom: 2em; */ margin-bottom: 2em;
} }
.portfolio-done-item { .portfolio-done-item {
@@ -163,10 +160,9 @@ footer a {
ul.nav { ul.nav {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
/* padding: 0; */
overflow: hidden; overflow: hidden;
background-color: var(--main-ac-color); background-color: var(--main-ac-color);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(2, 41, 84, 0.8);
transition: 0.3s; transition: 0.3s;
} }
@@ -198,13 +194,13 @@ ul.nav li.left {
.card-projects { .card-projects {
display: grid; display: grid;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(2, 41, 84, 0.8);
transition: 0.3s; transition: 0.3s;
background: var(--main-ac-color); background: var(--main-ac-color);
} }
.card-projects:hover { .card-projects:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 16px 0 rgba(2, 41, 84, 0.8);
} }
.icon-area i { .icon-area i {
@@ -226,7 +222,7 @@ ul.nav li.left {
.card { .card {
margin-top: var(--main-padding); margin-top: var(--main-padding);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(2, 41, 84, 0.8);
transition: 0.3s; transition: 0.3s;
background: var(--main-ac-color); background: var(--main-ac-color);
padding: var(--main-padding); padding: var(--main-padding);
@@ -261,7 +257,7 @@ ul.nav li.left {
} }
.card:hover { .card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 16px 0 rgba(2, 41, 84, 0.8);
} }
.container { .container {
@@ -398,7 +394,6 @@ ul.nav li.left {
.hover-items { .hover-items {
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
/* center vertically */
align-items: center; align-items: center;
} }
@@ -410,3 +405,17 @@ ul.nav li.left {
margin: auto; margin: auto;
padding: 10px; padding: 10px;
} }
@media only screen and (min-width: 1025px) {
.circle {
height: 24px;
width: 24px;
border-radius: 24px;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
}
}
index.html
+98 -22
View File
@@ -7,7 +7,7 @@
<title>Julian Lechner</title> <title>Julian Lechner</title>
<link rel="stylesheet" type="text/css" href="fontawesome/css/all.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/github.css" /> <link rel="stylesheet" type="text/css" href="css/github.css" />
<link rel="stylesheet" type="text/css" href="css/donation.css" /> <link rel="stylesheet" type="text/css" href="css/donation.css" />
@@ -25,25 +25,83 @@
</head> </head>
<body> <body>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="container"> <div class="container">
<div class="card profile"> <div class="card profile">
<img src="img/logo.png" alt="Julian Lechner Bitmoji"> <img src="img/logo.png">
<h1>Hy! 👋 I'm Julian Lechner!</h1> <h1>Hy! 👋 I'm Julian Lechner!</h1>
<h2>aka. FrauJulian</h2>
<hr>
<div class="max60"> <div class="max60">
<hr>
<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 onclick="plausible('expandprofile')"> 🖱️ A young enthusiastic developer from Austria! 🖱️ </a> <a onclick="plausible('expandprofile')">A young enthusiastic developer from Austria!</a>
<i id="right-arrow" class="fas fa-arrow-left"></i> <i id="right-arrow" class="fas fa-arrow-left"></i>
</div> </div>
</div> </div>
<div class="bio-text hidden"> <div class="bio-text hidden">
<p> <p>
My name ist Julian I'm 14 years old and i live in the beautiful Lower Austria! My name is Julian I'm 14 years old and I live in the beautiful Lower Austria!
In my spare time I mainly sit in front of the PC and work on my projects, I also often go scuba diving! In my spare time I mainly sit in front of the PC and work on my projects, I also often go scuba diving!
<br /> <br />
I am currently in my final year! Next year, 2024, I would like to start an apprenticeship as an IT specialist for application development! Preferably in the field of web development. I am currently in my final year! Next year, 2024, I would like to start an apprenticeship as an IT specialist for application development!
<br /> <br />
<br /> <br />
I mainly work for SynHost.de, which is a German hosting company. I help the customers and program new features! I mainly work for SynHost.de, which is a German hosting company. I help the customers and program new features!
@@ -53,21 +111,10 @@
<br /> <br />
Currently you can hire my services as a NodeJS (Discord.JS) Developer! I program Discord bots of any kind for you, with already existing features as well as completely new ones. Just contact me! Currently you can hire my services as a NodeJS (Discord.JS) Developer! I program Discord bots of any kind for you, with already existing features as well as completely new ones. Just contact me!
<br /> <br />
<br />
<h3>Contact me!</h3>
<a href="mailto:fraujulian@lechner.top" class="contact-link">E-Mail ➜ fraujulian@lechner.top</a>
<br />
<a href="tel:+436609254001" class="contact-link">Phone ➜ +43 660 9254001</a>
<br />
<br />
<a href="https://discord.com/users/860206216893693973" class="contact-link">Discord ➜ fraujulian</a>
<br />
<a href="https://github.com/fraujulian" class="contact-link">Github ➜ fraujulian</a>
</p> </p>
</div> </div>
<hr> <hr>
<p class="js-reminder">Enable JavaScript to see what I do.</p> <p class="js-reminder">ENABLE JAVASCRIPT</p>
<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 code with</h1>
@@ -90,6 +137,9 @@
<div class="grid-item"> <div class="grid-item">
<h1>JavaScript</h1> <h1>JavaScript</h1>
</div> </div>
<div class="grid-item">
<h1>Java</h1>
</div>
<div class="grid-item"> <div class="grid-item">
<h1>Linux</h1> <h1>Linux</h1>
</div> </div>
@@ -97,23 +147,49 @@
<h1>MySQL</h1> <h1>MySQL</h1>
</div> </div>
</div> </div>
<div class="icon-area">
<a href="mailto:fraujulian@lechner.top" onclick="plausible('envelope')" target="_blank">
<i class="fa-solid fa-envelope fa-3x"></i></a>
<a href="tel:+436609254001" onclick="plausible('phone')" target="_blank">
<i class="fa-solid fa-phone fa-3x"></i></a>
<a href="https://discord.com/users/860206216893693973" onclick="plausible('discord')" target="_blank">
<i class="fab fa-discord fa-3x"></i></a>
<a href="https://github.com/fraujulian" onclick="plausible('github')" target="_blank">
<i class="fab fa-github fa-3x"></i></a>
</div>
</div> </div>
<div id="github_projects" class="card"> <div id="github_projects" class="card">
Loading... Loading...
</div> </div>
</div> </div>
<!-- Footer -->
<footer> <footer>
<p> <p>
&copy; 2023 Julian Lechner &copy; 2024 Julian Lechner
</p> </p>
<!-- JS Imports -->
<script src="js/jquery-3.5.1.min.js"></script> <script src="js/jquery-3.5.1.min.js"></script>
<script src="js/slide.js"></script> <script src="js/slide.js"></script>
<script src="js/github.js"></script> <script src="js/github.js"></script>
<script src="js/donation.js"></script> <script src="js/donation.js"></script>
<script src="js/dynamic.js"></script> <script src="js/dynamic.js"></script>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="fraujuliannn" data-description="Support me on Buy me a coffee!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-33TY5MDJ3X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-33TY5MDJ3X');
</script>
</footer> </footer>
</body> </body>
js/dynamic.js
+48 -5
View File
@@ -10,8 +10,8 @@ bioBtn.onclick = function () {
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 = "initial"; leftArrow.style.position = "relative";
rightArrow.style.position = "initial"; rightArrow.style.position = "relative";
unfade(bioModel); unfade(bioModel);
} else { } else {
bioModel.classList.add("hidden"); bioModel.classList.add("hidden");
@@ -34,7 +34,7 @@ bioModel.onclick = function (evt) {
}; };
function fade(element) { function fade(element) {
var op = 1; // initial opacity var op = 1;
var timer = setInterval(function () { var timer = setInterval(function () {
if (op <= 0.1) { if (op <= 0.1) {
clearInterval(timer); clearInterval(timer);
@@ -47,7 +47,7 @@ function fade(element) {
} }
function unfade(element) { function unfade(element) {
var op = 0.1; // initial opacity var op = 0.1;
element.style.display = 'block'; element.style.display = 'block';
var timer = setInterval(function () { var timer = setInterval(function () {
if (op >= 1) { if (op >= 1) {
@@ -57,4 +57,47 @@ function unfade(element) {
element.style.filter = 'alpha(opacity=' + op * 100 + ")"; element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1; op += op * 0.1;
}, 5); }, 5);
} }
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
const colors = [
"#b0b8ce"
];
circles.forEach(function (circle, index) {
circle.x = 1;
circle.y = 1;
circle.style.backgroundColor = colors[index % colors.length];
});
window.addEventListener("mousemove", function(e){
coords.x = e.clientX;
coords.y = e.clientY;
});
function animateCircles() {
let x = coords.x;
let y = coords.y;
circles.forEach(function (circle, index) {
circle.style.left = x - 10 + "px";
circle.style.top = y - 10 + "px";
circle.style.scale = (circles.length - index) / circles.length;
circle.x = x;
circle.y = y;
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.08;
y += (nextCircle.y - y) * 0.08;
});
requestAnimationFrame(animateCircles);
}
animateCircles();
js/events.js
-2
View File
@@ -1,9 +1,7 @@
fetch("https://api.github.com/users/fraujulian/events") fetch("https://api.github.com/users/fraujulian/events")
.then(response => response.json()) .then(response => response.json())
.then(events => { .then(events => {
// inserting
let updates = document.getElementById("commits"); let updates = document.getElementById("commits");
// empty div
updates.innerHTML = ""; updates.innerHTML = "";
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
let singleCommit = document.createElement("div"); let singleCommit = document.createElement("div");
js/github.js
+9 -8
View File
@@ -1,6 +1,6 @@
window.onload = function () { window.onload = function () {
let script = document.createElement("script"); let script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"; script.src = "https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js";
document.body.appendChild(script); document.body.appendChild(script);
const sortOnKey = (key, desc) => { const sortOnKey = (key, desc) => {
@@ -14,7 +14,7 @@
String.prototype.replaceAt = function (index, replacement) { String.prototype.replaceAt = function (index, replacement) {
return this.substr(0, index) + replacement + this.substr(index + replacement.length); return this.substr(0, index) + replacement + this.substr(index + replacement.length);
} }
fetch("https://api.github.com/users/fraujulian/repos?per_page=100") fetch("https://api.github.com/users/fraujulian/repos?per_page=999")
.then(response => response.json()) .then(response => response.json())
.then(projects => { .then(projects => {
projects = projects.sort(sortOnKey("stargazers_count", true)); projects = projects.sort(sortOnKey("stargazers_count", true));
@@ -27,7 +27,9 @@
let project = projects[i]; let project = projects[i];
if (project != undefined) { if (project != undefined) {
if (project.description == null) if (project.description == null)
project.description = "No description."; project.description = "This project has no description";
if (project.language == null)
project.language = "No language stored!";
project.name = project.name.replaceAll('_', ' ').replaceAll('-', ' '); project.name = project.name.replaceAll('_', ' ').replaceAll('-', ' ');
projectDiv.innerHTML = ` projectDiv.innerHTML = `
<div class="media"> <div class="media">
@@ -36,8 +38,8 @@
<strong class="d-block text-gray-dark">${project.name}</strong> <strong class="d-block text-gray-dark">${project.name}</strong>
</a> </a>
<div class="stars" style="float:right;"> <div class="stars" style="float:right;">
📕 ${project.language} 📕 ${project.language} <br>
<i class="far fa-star stargazers"></i>⭐ ${project.stargazers_count} ⭐ ${project.stargazers_count}
</div> </div>
</div> </div>
<p>${project.description}</p> <p>${project.description}</p>
@@ -46,7 +48,6 @@
fetch(`https://raw.githubusercontent.com/${project.full_name}/master/README.md`) fetch(`https://raw.githubusercontent.com/${project.full_name}/master/README.md`)
.then(response => response.text()) .then(response => response.text())
.then(text => { .then(text => {
// Convert markdown to html
let converter = new showdown.Converter(); let converter = new showdown.Converter();
let html = converter.makeHtml(text); let html = converter.makeHtml(text);
let projectModal = document.createElement("div"); let projectModal = document.createElement("div");
@@ -62,8 +63,8 @@
projectDiv.onclick = function () { projectDiv.onclick = function () {
projectModal.classList.remove("hidden"); projectModal.classList.remove("hidden");
document.body.scrollTop = 0; // For Safari document.body.scrollTop = 0; // Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera document.documentElement.scrollTop = 0; // Chrome Firefox IE Opera
document.body.style.opacity = 0.2; document.body.style.opacity = 0.2;
}; };
js/jquery-3.5.1.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long