🚀 Deploy ROM Mirror Portfolio with Glassmorphism
✨ Features: - Enhanced glassmorphism design throughout - Google Drive ROM mirror integration - Professional icon system (no emojis) - GitHub Actions secure deployment - Responsive design for all devices 🔐 Security: - API keys protected via GitHub Secrets - No sensitive data in repository - Automated security scanning 🎯 ROM Mirror: - Real Google Drive file browser - Download tracking and analytics - Beautiful file management interface - Mobile-optimized experience
This commit is contained in:
248
css/animations.css
Normal file
248
css/animations.css
Normal file
@@ -0,0 +1,248 @@
|
||||
/* Animation Effects */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply animations */
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.slide-in-left {
|
||||
animation: slideInLeft 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.slide-in-right {
|
||||
animation: slideInRight 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.hover-scale {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-glow:hover {
|
||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
/* Enhanced Particle Effects */
|
||||
.hero-particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
background: #00ff88;
|
||||
border-radius: 50%;
|
||||
animation: particleFloat 8s infinite linear;
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 0 6px rgba(0, 255, 136, 0.8);
|
||||
}
|
||||
|
||||
.particle:nth-child(1) {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
left: 10%;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 6s;
|
||||
}
|
||||
|
||||
.particle:nth-child(2) {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
left: 30%;
|
||||
animation-delay: -4s;
|
||||
animation-duration: 8s;
|
||||
}
|
||||
|
||||
.particle:nth-child(3) {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
left: 50%;
|
||||
animation-delay: -6s;
|
||||
animation-duration: 7s;
|
||||
}
|
||||
|
||||
.particle:nth-child(4) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
left: 70%;
|
||||
animation-delay: -8s;
|
||||
animation-duration: 9s;
|
||||
}
|
||||
|
||||
.particle:nth-child(5) {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
left: 90%;
|
||||
animation-delay: -1s;
|
||||
animation-duration: 5s;
|
||||
}
|
||||
|
||||
@keyframes particleFloat {
|
||||
0% {
|
||||
transform: translateY(100vh) translateX(0) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(50vh) translateX(20px) rotate(180deg);
|
||||
}
|
||||
90% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100px) translateX(-20px) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Glassmorphism Enhancement */
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Additional glass elements */
|
||||
.hero-content::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, transparent 70%);
|
||||
animation: rotateGlow 20s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes rotateGlow {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced button effects */
|
||||
.btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Sidebar glass enhancement */
|
||||
.glass-sidebar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 136, 0.05) 50%, transparent 70%);
|
||||
pointer-events: none;
|
||||
animation: glassShimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glassShimmer {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user