Add files via upload
This commit is contained in:
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.hoverable:hover {
|
||||
backdrop-filter: blur(150px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#github_projects .stargazers {
|
||||
padding-right: var(--padding-small);
|
||||
}
|
||||
|
||||
#github_projects .stars {
|
||||
color: var(--main-txt-color) !important;
|
||||
}
|
||||
|
||||
#github_projects a {
|
||||
text-transform: capitalize;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.github-modal>.card {
|
||||
height: 80% !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#github_projects .card {
|
||||
padding: var(--padding-big);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#github_projects .card a {
|
||||
color: var(--main-txt-color) !important;
|
||||
}
|
||||
|
||||
#github_projects .card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.github-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.github-modal>.card {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.github-modal img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #eaebfe;
|
||||
}
|
||||
+423
@@ -0,0 +1,423 @@
|
||||
:root {
|
||||
--main-padding: 15px;
|
||||
--main-margin: 10px;
|
||||
--main-img-size: 200px;
|
||||
--main-bio-size: 200px;
|
||||
--main-bio-margin: 5px;
|
||||
--main-icon-width: 80px;
|
||||
--main-border-radius: 5px;
|
||||
--padding-big: 20px;
|
||||
--padding-small: 5px;
|
||||
--main-container-width: 750px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--main-txt-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--main-txt-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height-step: 100px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: 'Comic Sans MS', Arial, sans-serif;
|
||||
margin: 0;
|
||||
color: var(--main-txt-color);
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-image: url("../img/background.webp");
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--main-txt-color);
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-bottom: 5px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--main-txt-color);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.js-reminder {
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
padding: var(--main-padding);
|
||||
}
|
||||
|
||||
.bio {
|
||||
display: none !important;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
padding: var(--main-padding);
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
margin: var(--main-margin);
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: var(--main-bio-size);
|
||||
margin-left: var(--main-padding);
|
||||
backdrop-filter: blur(150px);
|
||||
border-radius: var(--main-border-radius);
|
||||
}
|
||||
|
||||
.grid-item h1,
|
||||
.grid-item-start h1 {
|
||||
margin: var(--main-bio-margin);
|
||||
}
|
||||
|
||||
.grid-item-start {
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 8;
|
||||
}
|
||||
|
||||
.bio table .right {
|
||||
cursor: pointer;
|
||||
border-radius: var(--main-border-radius);
|
||||
backdrop-filter: blur(150px);
|
||||
}
|
||||
|
||||
.social {
|
||||
border: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.project {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project img {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: .5s ease;
|
||||
backface-visibility: hidden;
|
||||
box-shadow: 0 4px 8px 0 #0e85b456;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.project:hover img {
|
||||
opacity: 0.3
|
||||
}
|
||||
|
||||
.project:hover p {
|
||||
opacity: 1.0
|
||||
}
|
||||
|
||||
.project p {
|
||||
transition: .5s ease;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
.portfolio {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 128px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.portfolio-done {
|
||||
display: grid;
|
||||
grid-template-columns: 24% 24% 24% 24%;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.portfolio-done-item {
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
.social a {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(150px);
|
||||
box-shadow: 0 4px 8px 0 #0e85b456;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.nav li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.nav li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.nav li a:hover:not(.active) {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
ul.nav li a.active {
|
||||
background-color: #2F3136;
|
||||
}
|
||||
|
||||
ul.nav li.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.card-projects {
|
||||
display: grid;
|
||||
box-shadow: 0 4px 8px 0 #0e85b456;
|
||||
transition: 0.3s;
|
||||
backdrop-filter: blur(150px);
|
||||
}
|
||||
|
||||
.card-projects:hover {
|
||||
box-shadow: 0 8px 16px 0 #0e85b456;
|
||||
}
|
||||
|
||||
.icon-area i {
|
||||
justify-content: space-between;
|
||||
width: var(--main-icon-width);
|
||||
padding-top: var(--main-padding);
|
||||
padding-bottom: var(--main-padding);
|
||||
border-radius: var(--main-border-radius);
|
||||
}
|
||||
|
||||
.icon-area i:hover {
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(150px);
|
||||
}
|
||||
|
||||
.icon-area a {
|
||||
color: var(--main-txt-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: var(--main-padding);
|
||||
box-shadow: 0 4px 8px 0 #0e85b456;
|
||||
transition: 0.3s;
|
||||
backdrop-filter: blur(20px);
|
||||
padding: var(--main-padding);
|
||||
text-align: center;
|
||||
color: var(--main-txt-color);
|
||||
}
|
||||
|
||||
.nomargin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hover-items,
|
||||
.hover-items a {
|
||||
color: var(--main-txt-color);
|
||||
padding: var(--main-padding) 10px;
|
||||
font-size: large;
|
||||
margin: auto;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hover-items a:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
.profile img {
|
||||
margin: auto;
|
||||
max-width: var(--main-img-size);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 8px 16px 0 #0e85b456;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(20px);
|
||||
margin: auto;
|
||||
width: var(--main-container-width);
|
||||
}
|
||||
|
||||
.media-body {
|
||||
color: var(--main-txt-color) !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table {
|
||||
color: var(--main-txt-color) !important;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
:root {
|
||||
--mobile-margin: 5px;
|
||||
--main-container-width: 95%;
|
||||
--mobile-width: 90%;
|
||||
}
|
||||
|
||||
ul.nav li.right,
|
||||
ul.nav li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
ul.nav li.left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portfolio-done {
|
||||
grid-template-columns: auto;
|
||||
justify-content: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portfolio-done-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.icon-area i {
|
||||
margin-top: var(--mobile-margin);
|
||||
}
|
||||
|
||||
.short_desc {
|
||||
width: var(--mobile-width);
|
||||
}
|
||||
|
||||
footer {
|
||||
width: var(--main-container-width);
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
width: 95% !important;
|
||||
}
|
||||
|
||||
#left-arrow {
|
||||
position: initial !important;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#right-arrow {
|
||||
position: initial !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.max60 {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#bio {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.max60 {
|
||||
max-width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#bio:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#right-arrow {
|
||||
position: relative;
|
||||
-webkit-animation: linear infinite alternate;
|
||||
-webkit-animation-name: runRight;
|
||||
-webkit-animation-duration: 2s;
|
||||
}
|
||||
|
||||
#left-arrow {
|
||||
position: relative;
|
||||
-webkit-animation: linear infinite alternate;
|
||||
-webkit-animation-name: runLeft;
|
||||
-webkit-animation-duration: 2s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes runLeft {
|
||||
0% {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 70%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes runRight {
|
||||
0% {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
right: 70%;
|
||||
}
|
||||
|
||||
100% {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-items {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
font-size: 20px;
|
||||
opacity: 0;
|
||||
width: 60%;
|
||||
margin-bottom: 15px !important;
|
||||
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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 483 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
+29
-33
@@ -2,21 +2,18 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<meta name="google-adsense-account" content="ca-pub-8132805866670069">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<meta name="google-adsense-account" content="ca-pub-8132805866670069">
|
||||
|
||||
<title>Julian Lechner</title>
|
||||
|
||||
<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/donation.css" />
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="fonts/roboto.css" />
|
||||
<link rel="stylesheet" type="text/css" href="fonts/exo.css" />
|
||||
<title>Julian Lechner</title>
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.ico" />
|
||||
|
||||
<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" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -72,31 +69,30 @@
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
|
|
||||
©
|
||||
<script>document.write(new Date().getFullYear())</script> Julian Lechner - All rights reserved.
|
||||
</p>
|
||||
<p>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
|
|
||||
©
|
||||
<script>document.write(new Date().getFullYear())</script> Julian Lechner - All rights reserved.
|
||||
</p>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script>
|
||||
<script src="js/slide.js" defer></script>
|
||||
<script src="js/dynamic.js"></script>
|
||||
<script src="js/github.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" defer></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());
|
||||
<script rel="preload" 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 hot choclate!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18" defer></script>
|
||||
|
||||
<script rel="preload" 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>
|
||||
gtag('config', 'G-33TY5MDJ3X');
|
||||
</script>
|
||||
|
||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8132805866670069" crossorigin="anonymous"></script>
|
||||
<script rel="preload" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8132805866670069" crossorigin="anonymous" defer></script>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+6
-12
@@ -14,17 +14,13 @@
|
||||
<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" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="fonts/roboto.css" />
|
||||
<link rel="stylesheet" type="text/css" href="fonts/exo.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="card profile">
|
||||
<img src="img/logo.webp">
|
||||
<img src="img/logo.webp" width="200px" height="200px" fetchpriority="low">
|
||||
<h1>Hy! 👋 I'm Julian Lechner!</h1>
|
||||
<h2>aka. FrauJulian</h2>
|
||||
|
||||
@@ -54,7 +50,6 @@
|
||||
<h3>Just contact me!</h3>
|
||||
</p>
|
||||
</div>
|
||||
<p class="js-reminder">ENABLE JAVASCRIPT</p>
|
||||
<div class="icon-area">
|
||||
|
||||
<a href="mailto:fraujulian@lechner.top" onclick="plausible('envelope')" target="_blank">
|
||||
@@ -128,13 +123,12 @@
|
||||
<script>document.write(new Date().getFullYear())</script> Julian Lechner - All rights reserved.
|
||||
</p>
|
||||
|
||||
<script src="js/slide.js" defer></script>
|
||||
<script src="js/github.js"></script>
|
||||
<script src="js/dynamic.js"></script>
|
||||
<script rel="preload" src="js/github.js"></script>
|
||||
<script rel="preload" 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 hot choclate!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18" defer></script>
|
||||
<script rel="preload" 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 hot choclate!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18" defer></script>
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-33TY5MDJ3X"></script>
|
||||
<script rel="preload" async src="https://www.googletagmanager.com/gtag/js?id=G-33TY5MDJ3X"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
@@ -143,7 +137,7 @@
|
||||
gtag('config', 'G-33TY5MDJ3X');
|
||||
</script>
|
||||
|
||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8132805866670069" crossorigin="anonymous" defer></script>
|
||||
<script rel="preload" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8132805866670069" crossorigin="anonymous" defer></script>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
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 = "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">
|
||||
<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} <br>
|
||||
⭐ ${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);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user