Skip to content

Commit dd92d46

Browse files
sav7ngsav7ng
committed
feat(ui): replace particles with animated gradient and custom cursor
- Remove `particles.js` dependency in favor of a CSS-only animated gradient background with a dot matrix overlay. - Implement a custom cursor with hover effects and typewriter animations; restores default cursor on mobile devices. - Prepare timeline and grid cards for JS-based 3D tilt effects by enabling 3D perspective and removing conflicting CSS hover transforms. - Update global transition properties to prevent conflicts with JavaScript animations.
1 parent fb76c07 commit dd92d46

3 files changed

Lines changed: 203 additions & 102 deletions

File tree

‎docs/css/style.css‎

Lines changed: 99 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
/* Smooth scrolling */
44
html {
55
scroll-behavior: smooth;
6+
cursor: none; /* Hide default cursor */
67
}
78

89
/* Custom scrollbar */
@@ -27,9 +28,71 @@ html {
2728
background: linear-gradient(to bottom, #4f46e5, #7c3aed);
2829
}
2930

30-
/* Particle background z-index fix */
31-
#particles-js {
32-
z-index: 0;
31+
/* Dynamic Gradient Background */
32+
.gradient-bg {
33+
/* Brand aligned colors: Indigo, Purple, Pink, Blue */
34+
background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #3b82f6);
35+
background-size: 400% 400%;
36+
animation: gradient 15s ease infinite;
37+
opacity: 0.08; /* Slightly reduced for better text contrast in light mode */
38+
}
39+
40+
/* Dot Matrix Overlay */
41+
.gradient-bg::before {
42+
content: '';
43+
position: absolute;
44+
top: -50%;
45+
left: -50%;
46+
width: 200%;
47+
height: 200%;
48+
background-image: radial-gradient(#6366f1 2px, transparent 2px);
49+
background-size: 30px 30px;
50+
opacity: 0.3;
51+
pointer-events: none;
52+
animation: matrix-flow 60s linear infinite;
53+
}
54+
55+
.dark .gradient-bg {
56+
background: linear-gradient(-45deg, #1a1a2e, #16213e, #312e81, #4c1d95);
57+
opacity: 0.3;
58+
}
59+
60+
.dark .gradient-bg::before {
61+
background-image: radial-gradient(#a5b4fc 2px, transparent 2px);
62+
opacity: 0.15;
63+
}
64+
65+
@keyframes gradient {
66+
0% { background-position: 0% 50%; }
67+
50% { background-position: 100% 50%; }
68+
100% { background-position: 0% 50%; }
69+
}
70+
71+
@keyframes matrix-flow {
72+
0% { transform: translate(0, 0); }
73+
100% { transform: translate(30px, 30px); }
74+
}
75+
76+
/* Custom Cursor */
77+
.custom-cursor-none * {
78+
cursor: none !important;
79+
}
80+
81+
#cursor {
82+
pointer-events: none;
83+
z-index: 9999;
84+
}
85+
86+
#cursor-dot {
87+
pointer-events: none;
88+
z-index: 9999;
89+
}
90+
91+
/* Hover effect for cursor */
92+
.hover-active {
93+
transform: scale(1.5);
94+
background-color: rgba(99, 102, 241, 0.1);
95+
border-color: transparent;
3396
}
3497

3598
/* Glass morphism effect */
@@ -44,6 +107,7 @@ html {
44107
max-width: 1200px;
45108
margin: 0 auto;
46109
padding: 2rem 0;
110+
perspective: 1000px; /* Enable 3D perspective */
47111
}
48112

49113
/* Central Vertical Line */
@@ -163,6 +227,7 @@ html {
163227
width: 100%;
164228
max-width: 36rem; /* max-w-xl equivalent */
165229
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
230+
transform-style: preserve-3d; /* Enable 3D transform */
166231
}
167232

168233
.timeline-card::before {
@@ -186,19 +251,21 @@ html {
186251
left: 100%;
187252
}
188253

254+
/* Remove default hover transform, as we'll handle it with JS */
189255
.timeline-card:hover {
190-
transform: translateY(-5px);
256+
/* transform: translateY(-5px); */
191257
}
192258

193259
/* Grid Card Hover Effect */
194260
.grid-card {
195261
position: relative;
196262
overflow: hidden;
197263
height: 100%;
264+
transform-style: preserve-3d;
198265
}
199266

200267
.grid-card:hover {
201-
transform: translateY(-5px);
268+
/* transform: translateY(-5px); */
202269
}
203270

204271
/* Gradient text animation */
@@ -223,6 +290,18 @@ html {
223290
overflow: hidden;
224291
}
225292

293+
/* Typewriter Cursor */
294+
.typewriter-cursor::after {
295+
content: '|';
296+
animation: blink 1s step-end infinite;
297+
color: #6366f1;
298+
}
299+
300+
@keyframes blink {
301+
0%, 100% { opacity: 1; }
302+
50% { opacity: 0; }
303+
}
304+
226305
/* Mobile Responsiveness */
227306
@media (max-width: 768px) {
228307
#timeline::before {
@@ -264,6 +343,20 @@ html {
264343
right: auto !important;
265344
top: 2.6rem; /* Center with dot */
266345
}
346+
347+
/* Disable 3D tilt on mobile for performance */
348+
.timeline-card, .grid-card {
349+
transform: none !important;
350+
}
351+
352+
/* Show default cursor on mobile */
353+
html {
354+
cursor: auto;
355+
}
356+
357+
.custom-cursor-none * {
358+
cursor: auto !important;
359+
}
267360
}
268361

269362
/* Dark mode transitions */
@@ -272,7 +365,7 @@ html {
272365
}
273366

274367
* {
275-
transition-property: background-color, border-color, color, fill, stroke, transform, box-shadow;
368+
transition-property: background-color, border-color, color, fill, stroke, box-shadow; /* Removed transform to avoid conflict with JS tilt */
276369
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
277370
transition-duration: 150ms;
278371
}

‎docs/index.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,6 @@
3636
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
3737
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
3838

39-
<!-- Particles.js -->
40-
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
41-
4239
<!-- Custom CSS -->
4340
<link rel="stylesheet" href="css/style.css">
4441

@@ -48,10 +45,14 @@
4845
<!-- Favicon -->
4946
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='90'%3E🤖%3C/text%3E%3C/svg%3E">
5047
</head>
51-
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
52-
<!-- Particles Background -->
53-
<div id="particles-js" class="fixed inset-0 pointer-events-none"></div>
48+
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300 custom-cursor-none">
49+
<!-- Dynamic Gradient Background -->
50+
<div class="fixed inset-0 pointer-events-none -z-10 gradient-bg"></div>
5451

52+
<!-- Custom Cursor -->
53+
<div id="cursor" class="fixed w-8 h-8 rounded-full border border-primary pointer-events-none z-50 transition-transform duration-100 hidden md:block mix-blend-difference"></div>
54+
<div id="cursor-dot" class="fixed w-2 h-2 rounded-full bg-primary pointer-events-none z-50 hidden md:block"></div>
55+
5556
<!-- Scroll Progress Bar -->
5657
<div id="scroll-progress" class="fixed top-0 left-0 h-1 bg-gradient-to-r from-primary to-secondary z-50 transition-all duration-300" style="width: 0%"></div>
5758

0 commit comments

Comments
 (0)