Skip to content

Commit 434bc21

Browse files
Fix: Boxicons issue fixed.
1 parent 5dc2de6 commit 434bc21

File tree

2 files changed

+45
-124
lines changed

2 files changed

+45
-124
lines changed

index.html

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"> </script>
2222

23+
2324
<script type="text/javascript">
2425
(function () {
2526
emailjs.init("U7tCHWLeCTfPsU3fp");
@@ -30,9 +31,9 @@
3031
<!-- ✅ Robots for indexing -->
3132
<meta name="robots" content="index, follow">
3233

33-
<!-- ✅ Box icon -->
34-
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
35-
<link href='https://unpkg.com/[email protected]/dist/boxicons.js' rel='stylesheet'>
34+
<!-- ✅ Box icon -->
35+
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
36+
<!-- <link href='https://unpkg.com/[email protected]/dist/boxicons.js' rel='stylesheet'> -->
3637

3738
<!-- ✅ Canonical link -->
3839
<link rel="canonical" href="https://sakthivel-app.wep.app/">
@@ -68,46 +69,47 @@
6869

6970

7071
<!-- loader -->
71-
<!-- Page loader overlay -->
72-
<div id="page-loader" aria-hidden="false" role="status">
73-
<div class="loader-inner" aria-hidden="true">
74-
<!-- SVG animated loader -->
75-
<svg class="loader-svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Loading">
76-
<defs>
77-
<!-- Gradient: accent blue -> light green -->
78-
<linearGradient id="loaderGradient" x1="0%" y1="0%" x2="100%" y2="100%">
79-
<stop offset="0%" stop-color="var(--color-accent)" />
80-
<stop offset="100%" stop-color="#7BE495" />
81-
</linearGradient>
82-
83-
<!-- A soft glow for the ring -->
84-
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
85-
<feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
86-
<feMerge>
87-
<feMergeNode in="coloredBlur"/>
88-
<feMergeNode in="SourceGraphic"/>
89-
</feMerge>
90-
</filter>
91-
</defs>
92-
93-
<!-- Background faint circle -->
94-
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="10"/>
95-
96-
<!-- Animated gradient ring -->
97-
<g filter="url(#glow)">
98-
<circle class="ring" cx="60" cy="60" r="44" fill="none" stroke="url(#loaderGradient)"
99-
stroke-width="10" stroke-linecap="round" stroke-dasharray="260" stroke-dashoffset="80"/>
100-
</g>
101-
102-
<!-- Orbit wrapper for the dot -->
103-
<g class="orbit">
104-
<circle cx="60" cy="16" r="5" fill="url(#loaderGradient)" />
105-
</g>
106-
</svg>
107-
108-
<div class="loader-text">Loading...</div>
109-
</div>
110-
</div>
72+
<!-- Page loader overlay -->
73+
<div id="page-loader" aria-hidden="false" role="status">
74+
<div class="loader-inner" aria-hidden="true">
75+
<!-- SVG animated loader -->
76+
<svg class="loader-svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img"
77+
aria-label="Loading">
78+
<defs>
79+
<!-- Gradient: accent blue -> light green -->
80+
<linearGradient id="loaderGradient" x1="0%" y1="0%" x2="100%" y2="100%">
81+
<stop offset="0%" stop-color="var(--color-accent)" />
82+
<stop offset="100%" stop-color="#7BE495" />
83+
</linearGradient>
84+
85+
<!-- A soft glow for the ring -->
86+
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
87+
<feGaussianBlur stdDeviation="3.5" result="coloredBlur" />
88+
<feMerge>
89+
<feMergeNode in="coloredBlur" />
90+
<feMergeNode in="SourceGraphic" />
91+
</feMerge>
92+
</filter>
93+
</defs>
94+
95+
<!-- Background faint circle -->
96+
<circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="10" />
97+
98+
<!-- Animated gradient ring -->
99+
<g filter="url(#glow)">
100+
<circle class="ring" cx="60" cy="60" r="44" fill="none" stroke="url(#loaderGradient)"
101+
stroke-width="10" stroke-linecap="round" stroke-dasharray="260" stroke-dashoffset="80" />
102+
</g>
103+
104+
<!-- Orbit wrapper for the dot -->
105+
<g class="orbit">
106+
<circle cx="60" cy="16" r="5" fill="url(#loaderGradient)" />
107+
</g>
108+
</svg>
109+
110+
<div class="loader-text">Loading...</div>
111+
</div>
112+
</div>
111113

112114

113115
<!-- Navigation -->

script.js

Lines changed: 0 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
2-
31
// loader
42

5-
63
// Hide loader when the page fully loads
74
window.addEventListener("load", () => {
85
const loader = document.getElementById('page-loader');
@@ -14,16 +11,6 @@ window.addEventListener("load", () => {
1411
}, 500);
1512
});
1613

17-
// Optional: ability to manually hide if using SPA navigation
18-
function hideLoaderNow() {
19-
const loader = document.getElementById('page-loader');
20-
if (!loader) return;
21-
loader.classList.add('hidden');
22-
loader.setAttribute('aria-hidden', 'true');
23-
}
24-
25-
26-
2714
// Navigation functionality
2815
document.addEventListener('DOMContentLoaded', function () {
2916
const navToggle = document.getElementById('navToggle');
@@ -138,23 +125,6 @@ document.addEventListener('DOMContentLoaded', function () {
138125
});
139126
});
140127

141-
// Typing effect
142-
function typeWriter(element, text, speed = 100) {
143-
let i = 0;
144-
element.innerHTML = '';
145-
146-
function type() {
147-
if (i < text.length) {
148-
element.innerHTML += text.charAt(i);
149-
i++;
150-
setTimeout(type, speed);
151-
}
152-
}
153-
type();
154-
}
155-
// Example usage:
156-
// typeWriter(document.querySelector(".typing-name"), "Sakthivel");
157-
158128
// Image hover effects
159129
const heroImage = document.querySelector('.hero-image');
160130
const aboutImage = document.querySelector('.about-image-img');
@@ -173,11 +143,6 @@ document.addEventListener('DOMContentLoaded', function () {
173143
});
174144
});
175145

176-
177-
178-
179-
180-
181146
// Utility functions
182147
function scrollToSection(sectionId) {
183148
const element = document.getElementById(sectionId);
@@ -314,50 +279,6 @@ function typeEffect() {
314279

315280
document.addEventListener("DOMContentLoaded", typeEffect);
316281

317-
318-
// Dynamic typing effect
319-
function typeWriter(element, text, speed = 100) {
320-
let i = 0;
321-
element.innerHTML = '';
322-
323-
function type() {
324-
if (i < text.length) {
325-
element.innerHTML += text.charAt(i);
326-
i++;
327-
setTimeout(type, speed);
328-
}
329-
}
330-
331-
type();
332-
}
333-
334-
335-
// Initialize typing effect on hero title
336-
// document.addEventListener('DOMContentLoaded', function() {
337-
// const heroTitle = document.querySelector('.hero-title');
338-
// if (heroTitle) {
339-
// const originalText = heroTitle.innerHTML;
340-
// setTimeout(() => {
341-
// typeWriter(heroTitle, originalText, 50);
342-
// }, 1000);
343-
// }
344-
// });
345-
346-
// Mouse tracking effect for hero image
347-
// document.addEventListener('mousemove', function (e) {
348-
// const heroImage = document.querySelector('.hero-image-wrapper');
349-
// if (heroImage) {
350-
// const rect = heroImage.getBoundingClientRect();
351-
// const x = e.clientX - rect.left - rect.width / 2;
352-
// const y = e.clientY - rect.top - rect.height / 2;
353-
354-
// const moveX = x * 0.01;
355-
// const moveY = y * 0.01;
356-
357-
// heroImage.style.transform = `translate(${moveX}px, ${moveY}px)`;
358-
// }
359-
// });
360-
361282
// Intersection Observer for image animations
362283
const imageObserver = new IntersectionObserver((entries) => {
363284
entries.forEach(entry => {
@@ -381,8 +302,6 @@ document.addEventListener('DOMContentLoaded', function () {
381302
});
382303
});
383304

384-
385-
386305
document.querySelector(".contact-form").addEventListener("submit", function (e) {
387306
e.preventDefault();
388307

0 commit comments

Comments
 (0)