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 {
--donation-modal-height: 200px;
--donation-modal-width: 600px;
--donation-modal-top: 50%;
}
#donate {
text-decoration-line: underline;
}
#donate:hover {
cursor: pointer;
}
#donateModal {
display: none;
}
.modal {
top: 0;
right: 0;
position: absolute;
margin: auto;
height: 100vh;
width: 100%;
}
.modal .card {
opacity: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: var(--donation-modal-height);
width: var(--donation-modal-width);
max-width: 100%;
}
.refer-area {
text-decoration-line: underline;
}
@media screen and (max-width: 700px) {
:root {
--donation-modal-height: 350px;
--donation-modal-width: 600px;
--donation-modal-top: 50%;
}
.modal .card {
vertical-align: middle;
width: 80%;
opacity: 1;
}
.modal {
position: absolute;
margin: auto;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
html,
body {
height: 100% !important;
}
:root {
--donation-modal-height: 200px;
--donation-modal-width: 600px;
--donation-modal-top: 50%;
}
#donate {
text-decoration-line: underline;
}
#donate:hover {
cursor: pointer;
}
#donateModal {
display: none;
}
.modal {
top: 0;
right: 0;
position: absolute;
margin: auto;
height: 100vh;
width: 100%;
}
.modal .card {
opacity: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: var(--donation-modal-height);
width: var(--donation-modal-width);
max-width: 100%;
}
.refer-area {
text-decoration-line: underline;
}
@media screen and (max-width: 700px) {
:root {
--donation-modal-height: 350px;
--donation-modal-width: 600px;
--donation-modal-top: 50%;
}
.modal .card {
vertical-align: middle;
width: 80%;
opacity: 1;
}
.modal {
position: absolute;
margin: auto;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
html,
body {
height: 100% !important;
}
}
css/github.css
+5 -8
View File
@@ -1,13 +1,13 @@
/* GitHub Projects */
@media (prefers-color-scheme: dark) {
:root {
--hover-bg-color: #161616;
--hover-bg-color: #001e3d;
}
}
@media (prefers-color-scheme: light) {
:root {
--hover-bg-color: #e5e5e5;
--hover-bg-color: #001e3d;
}
}
@@ -21,7 +21,7 @@
}
#github_projects .stars {
color: #6c757d !important;
color: var(--main-txt-color) !important;
}
#github_projects a {
@@ -40,7 +40,7 @@
}
#github_projects .card a {
color: var(--main-txt-color);
color: var(--main-txt-color) !important;
}
#github_projects .card p {
@@ -59,18 +59,15 @@
max-width: 100%;
}
/* width */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
background: #eaebfe;
}
css/style.css
+29 -20
View File
@@ -13,19 +13,19 @@
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #1e2437;
--main-ac-color: #3d4254;
--main-txt-color: #b6e2eb;
--hover-bg-color: #161616;
--main-bg-color: #144272;
--main-ac-color: #0A2647;
--main-txt-color: #eaebfe;
--hover-bg-color: #144272;
}
}
@media (prefers-color-scheme: light) {
:root {
--main-bg-color: #fff;
--main-ac-color: #fff;
--main-txt-color: #000;
--hover-bg-color: #e5e5e5;
--main-bg-color: #144272;
--main-ac-color: #0A2647;
--main-txt-color: #eaebfe;
--hover-bg-color: #144272;
}
}
@@ -54,7 +54,6 @@ footer a {
text-decoration-line: underline;
}
/* Slide */
.js-reminder {
font-style: normal;
font-weight: 900;
@@ -99,8 +98,6 @@ footer a {
background: var(--main-bg-color);
}
/* End Slide */
.social {
border: 0;
margin: auto;
@@ -117,7 +114,7 @@ footer a {
height: auto;
transition: .5s ease;
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;
}
@@ -149,7 +146,7 @@ footer a {
display: grid;
grid-template-columns: 24% 24% 24% 24%;
justify-content: space-between;
/* margin-bottom: 2em; */
margin-bottom: 2em;
}
.portfolio-done-item {
@@ -163,10 +160,9 @@ footer a {
ul.nav {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
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;
}
@@ -198,13 +194,13 @@ ul.nav li.left {
.card-projects {
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;
background: var(--main-ac-color);
}
.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 {
@@ -226,7 +222,7 @@ ul.nav li.left {
.card {
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;
background: var(--main-ac-color);
padding: var(--main-padding);
@@ -261,7 +257,7 @@ ul.nav li.left {
}
.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 {
@@ -398,7 +394,6 @@ ul.nav li.left {
.hover-items {
display: grid;
grid-template-columns: auto auto auto;
/* center vertically */
align-items: center;
}
@@ -410,3 +405,17 @@ ul.nav li.left {
margin: auto;
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>
<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/github.css" />
<link rel="stylesheet" type="text/css" href="css/donation.css" />
@@ -25,25 +25,83 @@
</head>
<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="card profile">
<img src="img/logo.png" alt="Julian Lechner Bitmoji">
<img src="img/logo.png">
<h1>Hy! 👋 I'm Julian Lechner!</h1>
<h2>aka. FrauJulian</h2>
<hr>
<div class="max60">
<hr>
<div id="short-desc" class="hover-items">
<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>
</div>
</div>
<div class="bio-text hidden">
<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!
<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 />
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 />
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 />
<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>
</div>
<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="grid-item-start">
<h1>I code with</h1>
@@ -90,6 +137,9 @@
<div class="grid-item">
<h1>JavaScript</h1>
</div>
<div class="grid-item">
<h1>Java</h1>
</div>
<div class="grid-item">
<h1>Linux</h1>
</div>
@@ -97,23 +147,49 @@
<h1>MySQL</h1>
</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 id="github_projects" class="card">
Loading...
</div>
</div>
<!-- Footer -->
<footer>
<p>
&copy; 2023 Julian Lechner
&copy; 2024 Julian Lechner
</p>
<!-- JS Imports -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/slide.js"></script>
<script src="js/github.js"></script>
<script src="js/donation.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>
</body>
js/dynamic.js
+48 -5
View File
@@ -10,8 +10,8 @@ bioBtn.onclick = function () {
leftArrow.classList.add("fa-arrow-down");
rightArrow.classList.remove("fa-arrow-left");
rightArrow.classList.add("fa-arrow-down");
leftArrow.style.position = "initial";
rightArrow.style.position = "initial";
leftArrow.style.position = "relative";
rightArrow.style.position = "relative";
unfade(bioModel);
} else {
bioModel.classList.add("hidden");
@@ -34,7 +34,7 @@ bioModel.onclick = function (evt) {
};
function fade(element) {
var op = 1; // initial opacity
var op = 1;
var timer = setInterval(function () {
if (op <= 0.1) {
clearInterval(timer);
@@ -47,7 +47,7 @@ function fade(element) {
}
function unfade(element) {
var op = 0.1; // initial opacity
var op = 0.1;
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1) {
@@ -57,4 +57,47 @@ function unfade(element) {
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 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")
.then(response => response.json())
.then(events => {
// inserting
let updates = document.getElementById("commits");
// empty div
updates.innerHTML = "";
for (let i = 0; i < 10; i++) {
let singleCommit = document.createElement("div");
js/github.js
+9 -8
View File
@@ -1,6 +1,6 @@
window.onload = function () {
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);
const sortOnKey = (key, desc) => {
@@ -14,7 +14,7 @@
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=100")
fetch("https://api.github.com/users/fraujulian/repos?per_page=999")
.then(response => response.json())
.then(projects => {
projects = projects.sort(sortOnKey("stargazers_count", true));
@@ -27,7 +27,9 @@
let project = projects[i];
if (project != undefined) {
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('-', ' ');
projectDiv.innerHTML = `
<div class="media">
@@ -36,8 +38,8 @@
<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}
📕 ${project.language} <br>
⭐ ${project.stargazers_count}
</div>
</div>
<p>${project.description}</p>
@@ -46,7 +48,6 @@
fetch(`https://raw.githubusercontent.com/${project.full_name}/master/README.md`)
.then(response => response.text())
.then(text => {
// Convert markdown to html
let converter = new showdown.Converter();
let html = converter.makeHtml(text);
let projectModal = document.createElement("div");
@@ -62,8 +63,8 @@
projectDiv.onclick = function () {
projectModal.classList.remove("hidden");
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
document.body.scrollTop = 0; // Safari
document.documentElement.scrollTop = 0; // Chrome Firefox IE Opera
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