Hugging Face's logo

Spaces:
Naveedtechlab
/
portfolio
Running

App Files Community
portfolio
File size: 2,421 Bytes
9589570
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@import "tailwindcss";

html {
  scroll-behavior: smooth;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(245,158,11,0.6); }
  70%  { box-shadow: 0 0 0 16px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0   rgba(245,158,11,0); }
}
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.animate-fade-up    { animation: fadeInUp   0.7s ease both; }
.animate-fade-left  { animation: fadeInLeft  0.7s ease both; }
.animate-fade-right { animation: fadeInRight 0.7s ease both; }
.animate-float      { animation: float       4s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring  2s ease-out infinite; }
.animate-gradient   { background-size: 200% 200%; animation: gradient-x 5s ease infinite; }
.animate-blink      { animation: blink       1s step-end infinite; }
.animate-shimmer    { background-size: 200% auto; animation: shimmer 3s linear infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
}

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
  border-color: rgba(245,158,11,0.4);
}

::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #0a1628; }
::-webkit-scrollbar-thumb { background: #f59e0b; border-radius: 3px; }