denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance global styles with animated background and improved layout

Browse Source
This commit is contained in:
Denshooter
2025-02-03 23:01:06 +01:00
parent bf79f2ea06
commit b1e8775346
1 changed files with 186 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
app/globals.css
View File

@@ -1,3 +1,5 @@
/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -5,23 +7,192 @@
/* Custom Global Styles */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*from to background color*/
/*background: -webkit-repeating-radial-gradient(circle, #f0f0f0, #8a8a8a);*/
background: linear-gradient(120deg, #f5f7fa 0%, #303030 100%);
margin: 0;
padding: 0;
position: relative;
min-height: 100vh;
}
.neumorphism {
background-color: #f0f0f0;
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
transition: box-shadow 0.3s ease, transform 0.3s ease;
body::before {
content: "";
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: -1;
background: radial-gradient(circle at 20% 20%, #ff8185, transparent 25%),
radial-gradient(circle at 80% 80%, #ffaa91, transparent 25%),
radial-gradient(circle at 50% 50%, #fb7fd9, transparent 25%),
radial-gradient(circle at 30% 70%, #9b6fff, transparent 25%),
radial-gradient(circle at 70% 30%, #ff8edf, transparent 25%);
background-size: 200% 200%;
animation: bubbleAnimation 60s ease infinite;
}
.neumorphism:hover {
box-shadow: inset 8px 8px 16px #dddddd, inset -8px -8px 16px #ffffff;
@keyframes bubbleAnimation {
0% {
background-position: 0 0;
transform: rotate(0deg) scale(1.5);
}
2.5% {
background-position: 5% 5%;
transform: rotate(9deg) scale(1.5);
}
5% {
background-position: 10% 10%;
transform: rotate(18deg) scale(1.5);
}
7.5% {
background-position: 15% 15%;
transform: rotate(27deg) scale(1.5);
}
10% {
background-position: 20% 20%;
transform: rotate(36deg) scale(1.5);
}
12.5% {
background-position: 25% 25%;
transform: rotate(45deg) scale(1.5);
}
15% {
background-position: 30% 30%;
transform: rotate(54deg) scale(1.5);
}
17.5% {
background-position: 35% 35%;
transform: rotate(63deg) scale(1.5);
}
20% {
background-position: 40% 40%;
transform: rotate(72deg) scale(1.5);
}
22.5% {
background-position: 45% 45%;
transform: rotate(81deg) scale(1.5);
}
25% {
background-position: 50% 50%;
transform: rotate(90deg) scale(1.5);
}
27.5% {
background-position: 55% 55%;
transform: rotate(99deg) scale(1.5);
}
30% {
background-position: 60% 60%;
transform: rotate(108deg) scale(1.5);
}
32.5% {
background-position: 65% 65%;
transform: rotate(117deg) scale(1.5);
}
35% {
background-position: 70% 70%;
transform: rotate(126deg) scale(1.5);
}
37.5% {
background-position: 75% 75%;
transform: rotate(135deg) scale(1.5);
}
40% {
background-position: 80% 80%;
transform: rotate(144deg) scale(1.5);
}
42.5% {
background-position: 85% 85%;
transform: rotate(153deg) scale(1.5);
}
45% {
background-position: 90% 90%;
transform: rotate(162deg) scale(1.5);
}
47.5% {
background-position: 95% 95%;
transform: rotate(171deg) scale(1.5);
}
50% {
background-position: 100% 100%;
transform: rotate(180deg) scale(1.5);
}
52.5% {
background-position: 95% 95%;
transform: rotate(189deg) scale(1.5);
}
55% {
background-position: 90% 90%;
transform: rotate(198deg) scale(1.5);
}
57.5% {
background-position: 85% 85%;
transform: rotate(207deg) scale(1.5);
}
60% {
background-position: 80% 80%;
transform: rotate(216deg) scale(1.5);
}
62.5% {
background-position: 75% 75%;
transform: rotate(225deg) scale(1.5);
}
65% {
background-position: 70% 70%;
transform: rotate(234deg) scale(1.5);
}
67.5% {
background-position: 65% 65%;
transform: rotate(243deg) scale(1.5);
}
70% {
background-position: 60% 60%;
transform: rotate(252deg) scale(1.5);
}
72.5% {
background-position: 55% 55%;
transform: rotate(261deg) scale(1.5);
}
75% {
background-position: 50% 50%;
transform: rotate(270deg) scale(1.5);
}
77.5% {
background-position: 45% 45%;
transform: rotate(279deg) scale(1.5);
}
80% {
background-position: 40% 40%;
transform: rotate(288deg) scale(1.5);
}
82.5% {
background-position: 35% 35%;
transform: rotate(297deg) scale(1.5);
}
85% {
background-position: 30% 30%;
transform: rotate(306deg) scale(1.5);
}
87.5% {
background-position: 25% 25%;
transform: rotate(315deg) scale(1.5);
}
90% {
background-position: 20% 20%;
transform: rotate(324deg) scale(1.5);
}
92.5% {
background-position: 15% 15%;
transform: rotate(333deg) scale(1.5);
}
95% {
background-position: 10% 10%;
transform: rotate(342deg) scale(1.5);
}
97.5% {
background-position: 5% 5%;
transform: rotate(351deg) scale(1.5);
}
100% {
background-position: 0 0;
transform: rotate(360deg) scale(1.5);
}
.neumorphism:active {
translate: 0 0.225em;
box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
}