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;
}
}