logolicusz/Portfolio-maybe
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

NICE

Browse source
This commit is contained in:
LogolicusYZ 2023-09-06 14:11:18 +02:00
parent 45f05d379d
commit 834bf7165b
3 changed files with 62 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -8,7 +8,7 @@
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="mediaqueries.css" />
</head>
<body>
<body >
<nav id="desktop-nav">
<div class="logo">LogolicusZ</div>
<div>
@ -18,6 +18,8 @@
</ul>
</div>
</nav>
<div id="blob"></div>
<div id="blur"></div>
<nav id="hamburger-nav">
<div class="logo">LogolicusZ</div>
<div class="hamburger-menu">
@ -79,7 +81,7 @@
class="icon"
/>
<h3>Education</h3>
<p>B.Sc. Bachelors Degree<br />M.Sc. Masters Degree</p>
<p><br />M.Sc. Masters Degree</p>
</div>
</div>
<div class="text-container">

11
script.js
View file

@ -4,3 +4,14 @@ function toggleMenu() {
menu.classList.toggle("open");
icon.classList.toggle("open");
}
const blob = document.getElementById("blob");
window.onpointermove = event => {
const { clientX, clientY } = event;
blob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, { duration: 3000, fill: "forwards" });
}

51
style.css
View file

@ -19,7 +19,7 @@ html {
}
p {
color: rgb(85, 85, 85);
color: white;
}
/* TRANSITION */
@ -27,6 +27,7 @@ p {
a,
.btn {
transition: all 300ms ease;
}
/* DESKTOP NAV */
@ -34,12 +35,14 @@ a,
nav,
.nav-links {
display: flex;
}
nav {
justify-content: space-around;
align-items: center;
height: 17vh;
color: white;
}
.nav-links {
@ -49,7 +52,7 @@ nav {
}
a {
color: black;
color: white;
text-decoration: none;
text-decoration-color: white;
}
@ -58,7 +61,7 @@ a:hover {
color: grey;
text-decoration: underline;
text-underline-offset: 1rem;
text-decoration-color: rgb(181, 181, 181);
text-decoration-color: #ccd5ae;
}
.logo {
@ -244,7 +247,7 @@ section {
.btn-color-1,
.btn-color-2:hover {
background: rgb(53, 53, 53);
background: #ccd5ae;
color: white;
}
@ -433,3 +436,43 @@ footer {
footer p {
text-align: center;
}
@keyframes rotate {
from {
rotate: 0deg;
}
50% {
scale: 1 1.5;
}
to {
rotate: 360deg;
}
}
#blob {
background-color: white;
height: 24vmax;
aspect-ratio: 1;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
border-radius: 50%;
background: linear-gradient(to right, #FFFFFF, #6541A5);
animation: rotate 20s infinite;
opacity: 0.8;
z-index: -2;
}
#blur {
top: 0;
left: 0;
height: 100vw;
width: 100vw;
position: absolute;
backdrop-filter: blur(5vmax);
z-index: -1;
}