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

style: enhance layout and styling of components with improved animations and responsiveness

Browse Source
This commit is contained in:
Denshooter
2025-02-04 00:38:40 +01:00
parent b1e8775346
commit e7735e8521
10 changed files with 366 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
app/globals.css
View File

@@ -4,195 +4,53 @@
@tailwind components;
@tailwind utilities;
/* Custom Global Styles */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
position: relative;
min-height: 100vh;
}
body::before {
content: "";
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: -1;
.bg-radiant-animated {
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;
animation: backgroundAnimation 60s ease infinite alternate;
}
@keyframes bubbleAnimation {
.bg-radiant {
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: cover;
}
@keyframes backgroundAnimation {
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);
background-position: 100% 100%;
}
}
.min-h-screen {
min-height: 100vh;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-grow {
flex-grow: 1;
}