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

New Design

Browse Source
This commit is contained in:
fraujulian
2024-02-01 23:09:34 +01:00
committed by GitHub
parent 487a64f81a
commit f4d558e2f8
5 changed files with 57 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/github.css
+1 -14
View File
@@ -1,18 +1,5 @@
/* GitHub Projects */
@media (prefers-color-scheme: dark) {
:root {
--hover-bg-color: #001e3d;
}
}
@media (prefers-color-scheme: light) {
:root {
--hover-bg-color: #001e3d;
}
}
.hoverable:hover {
background-color: var(--hover-bg-color);
backdrop-filter: blur(150px);
cursor: pointer;
}
css/style.css
+30 -21
View File
@@ -13,30 +13,35 @@
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #144272;
--main-ac-color: #0A2647;
--main-txt-color: #eaebfe;
--hover-bg-color: #144272;
--main-txt-color: #fff;
}
}
@media (prefers-color-scheme: light) {
:root {
--main-bg-color: #144272;
--main-ac-color: #0A2647;
--main-txt-color: #eaebfe;
--hover-bg-color: #144272;
--main-txt-color: #fff;
}
}
hr {
color: transparent;
}
h2 {
line-height-step: 100px;
}
html,
body {
font-family: 'Exo', sans-serif;
margin: auto;
font-family: 'Comic Sans MS', Arial, sans-serif;
margin: 0;
color: var(--main-txt-color);
text-align: center;
background: var(--main-bg-color);
max-width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url(".././img/back.jpg");
height: 100%;
}
a {
@@ -77,8 +82,7 @@ footer a {
.grid-item {
width: var(--main-bio-size);
margin-left: var(--main-padding);
background: var(--main-bg-color);
cursor: pointer;
backdrop-filter: blur(150px);
border-radius: var(--main-border-radius);
}
@@ -95,7 +99,7 @@ footer a {
.bio table .right {
cursor: pointer;
border-radius: var(--main-border-radius);
background: var(--main-bg-color);
backdrop-filter: blur(150px);
}
.social {
@@ -161,7 +165,7 @@ ul.nav {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: var(--main-ac-color);
backdrop-filter: blur(150px);
box-shadow: 0 4px 8px 0 rgba(2, 41, 84, 0.8);
transition: 0.3s;
}
@@ -196,7 +200,7 @@ ul.nav li.left {
display: grid;
box-shadow: 0 4px 8px 0 rgba(2, 41, 84, 0.8);
transition: 0.3s;
background: var(--main-ac-color);
backdrop-filter: blur(150px);
}
.card-projects:hover {
@@ -213,7 +217,7 @@ ul.nav li.left {
.icon-area i:hover {
cursor: pointer;
background: var(--hover-bg-color);
backdrop-filter: blur(150px);
}
.icon-area a {
@@ -224,7 +228,7 @@ ul.nav li.left {
margin-top: var(--main-padding);
box-shadow: 0 4px 8px 0 rgba(2, 41, 84, 0.8);
transition: 0.3s;
background: var(--main-ac-color);
backdrop-filter: blur(20px);
padding: var(--main-padding);
text-align: center;
color: var(--main-txt-color);
@@ -236,7 +240,10 @@ ul.nav li.left {
.hover-items,
.hover-items a {
color: var(--main-txt-color);
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
-webkit-background-clip: text;
color: transparent;
padding: var(--main-padding) 10px;
font-size: large;
margin: auto;
@@ -246,7 +253,7 @@ ul.nav li.left {
.hover-items a:hover {
cursor: pointer;
opacity: 0.5;
opacity: 0.8;
}
@@ -261,6 +268,8 @@ ul.nav li.left {
}
.container {
background: transparent;
backdrop-filter: blur(20px);
margin: auto;
width: var(--main-container-width);
}
img/back.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

index.html
+25 -23
View File
@@ -100,23 +100,40 @@
</div>
<div class="bio-text hidden">
<p>
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!
My name is Julian, I am 14 years old and I live in beautiful Lower Austria! In my free time I mainly sit in front of the PC and work on my projects, I also go suba diving a lot!
<br />
<br />
I mainly work for SynHost.de, which is a German hosting company. I help the customers and program new features!
<br />
Of course I also have smaller projects, including Botlist.me and SynRadio.de! I work on these projects when I have nothing to do.
I am currently in my final year! Next year, 2024, I would like to start an apprenticeship as an application developer!
<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!
I mainly work for SynHost.de, which is a German hosting company. There I am responsible for customer service and programming new functions.
<br />
<br />
Of course I also have smaller projects, including Botlist.me and SynRadio.de! I work on these projects on the side.
<br />
<br />
Currently you can hire my services as a NodeJS and Web Developer! I mainly program Chatbots of any kind for you, with already existing features as well as completely new ones.
<br />
<h3>Just contact me!</h3>
</p>
</div>
<hr>
<p class="js-reminder">ENABLE JAVASCRIPT</p>
<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 class="bio grid-container">
<div class="grid-item-start">
<h1>I develop with</h1>
@@ -152,21 +169,6 @@
<h1>SQL</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...
js/github.js
+1
View File
@@ -55,6 +55,7 @@
projectModal.innerHTML = `
<div class="card">
<a href="${project.html_url}" target="blank" style="float: right">Visit on GitHub</a>
<a href="#" target="blank" style="float: left">❌</a>
<br>
<br>
${html}