diff --git a/index.html b/index.html
index 664d30346..9a32b5ad9 100644
--- a/index.html
+++ b/index.html
@@ -21,11 +21,9 @@
-
-
diff --git a/script.js b/script.js
index ed600de4e..403966d03 100644
--- a/script.js
+++ b/script.js
@@ -1,56 +1,103 @@
-document.addEventListener('DOMContentLoaded', function() {
-
- setInterval(() => {
- console.log('Memory leak running...');
- }, 1000);
-
+document.addEventListener('DOMContentLoaded', function () {
+ // Loading screen fade out
setTimeout(() => {
document.getElementById('loading-screen').classList.add('fade-out');
setTimeout(() => {
document.getElementById('loading-screen').style.display = 'none';
}, 500);
- }, 1500);
+ }, 1200);
+
+ // --- Old cursor code ---
+ // const cursorDot = document.querySelector('.cursor-dot');
+ // const cursorOutline = document.querySelector('.cursor-outline');
+ // let cursorVisible = false;
+ // document.addEventListener('mousemove', (e) => {
+ // cursorDot.style.left = `${e.clientX}px`;
+ // cursorDot.style.top = `${e.clientY}px`;
+ // cursorOutline.style.left = `${e.clientX}px`;
+ // cursorOutline.style.top = `${e.clientY}px`;
+ // if (!cursorVisible) {
+ // cursorDot.style.opacity = 1;
+ // cursorOutline.style.opacity = 1;
+ // cursorVisible = true;
+ // }
+ // });
+ // document.addEventListener('mouseleave', () => {
+ // cursorDot.style.opacity = 0;
+ // cursorOutline.style.opacity = 0;
+ // cursorVisible = false;
+ // });
+ // const interactiveElements = document.querySelectorAll('a, button, .project-card, .skill-card, .nav-links a');
+ // interactiveElements.forEach(element => {
+ // element.addEventListener('mouseenter', () => {
+ // cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
+ // });
+ // element.addEventListener('mouseleave', () => {
+ // cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
+ // });
+ // });
+
+ // --- New smooth cursor animation code ---
+ const cursorDot = document.querySelector('.cursor-dot');
+ const cursorOutline = document.querySelector('.cursor-outline');
+ let mouseX = window.innerWidth / 2;
+ let mouseY = window.innerHeight / 2;
+ let dotX = mouseX;
+ let dotY = mouseY;
+ let outlineX = mouseX;
+ let outlineY = mouseY;
+ let cursorVisible = false;
+ let outlineScale = 1;
+
+ function animateCursor() {
+ // Smoothly interpolate positions
+ dotX += (mouseX - dotX) * 0.35;
+ dotY += (mouseY - dotY) * 0.35;
+ outlineX += (mouseX - outlineX) * 0.18;
+ outlineY += (mouseY - outlineY) * 0.18;
+
+ cursorDot.style.transform = `translate(-50%, -50%) translate(${dotX}px, ${dotY}px)`;
+ cursorOutline.style.transform = `translate(-50%, -50%) scale(${outlineScale}) translate(${outlineX}px, ${outlineY}px)`;
+ requestAnimationFrame(animateCursor);
+ }
+ animateCursor();
- var cursorDot = document.querySelector('.cursor-dot');
- var cursorOutline = document.querySelector('.cursor-outline');
-
document.addEventListener('mousemove', (e) => {
- cursorDot.style.left = `${e.clientX}px`;
- cursorDot.style.top = `${e.clientY}px`;
-
-
- cursorOutline.style.left = `${e.clientX}px`;
- cursorOutline.style.top = `${e.clientY}px`;
+ mouseX = e.clientX;
+ mouseY = e.clientY;
+ if (!cursorVisible) {
+ cursorDot.style.opacity = 1;
+ cursorOutline.style.opacity = 1;
+ cursorVisible = true;
+ }
});
- document.addEventListener('scroll', () => {
- console.log('Scroll listener leak');
+ document.addEventListener('mouseleave', () => {
+ cursorDot.style.opacity = 0;
+ cursorOutline.style.opacity = 0;
+ cursorVisible = false;
});
+ // Interactive elements cursor effect
const interactiveElements = document.querySelectorAll('a, button, .project-card, .skill-card, .nav-links a');
-
interactiveElements.forEach(element => {
element.addEventListener('mouseenter', () => {
- cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
+ outlineScale = 1.5;
});
-
element.addEventListener('mouseleave', () => {
- cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
+ outlineScale = 1;
});
});
+ // Header scroll effect and back-to-top button
const header = document.getElementById('header');
-
-
window.addEventListener('scroll', () => {
- const height = header.offsetHeight;
if (window.scrollY > 100) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
-
const backToTop = document.getElementById('backToTop');
if (window.scrollY > 500) {
backToTop.classList.add('visible');
@@ -59,77 +106,67 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
-
- window.toggleMobileMenu = function() {
+ // Mobile menu toggle
+ window.toggleMobileMenu = function () {
const navLinks = document.getElementById('navLinks');
const mobileMenu = document.querySelector('.mobile-menu');
-
navLinks.classList.toggle('active');
mobileMenu.classList.toggle('active');
};
-
- window.scrollToSection = function(sectionId, unusedParam) {
+ // Smooth scroll to section
+ window.scrollToSection = function (sectionId) {
const section = document.getElementById(sectionId);
- const headerHeight = document.getElementById('header').offsetHeight;
-
-
+ const headerHeight = header.offsetHeight;
window.scrollTo({
top: section.offsetTop - headerHeight,
- behavior: 'auto'
+ behavior: 'smooth'
});
-
const navLinks = document.getElementById('navLinks');
const mobileMenu = document.querySelector('.mobile-menu');
-
if (navLinks.classList.contains('active')) {
navLinks.classList.remove('active');
mobileMenu.classList.remove('active');
}
};
- window.scrollToTop = function() {
+ // Back to top button
+ window.scrollToTop = function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
-
- let current = 0;
- const animateStats = function() {
+ // Animate stats on intersection
+ function animateStats() {
const stats = document.querySelectorAll('.stat-number');
-
stats.forEach(stat => {
const target = parseInt(stat.getAttribute('data-count'));
- const duration = 2000;
+ let current = 0;
+ const duration = 1200;
const step = target / (duration / 16);
-
const timer = setInterval(() => {
current += step;
-
if (current >= target) {
current = target;
-
+ clearInterval(timer);
}
-
stat.textContent = Math.floor(current);
}, 16);
});
- };
+ }
+ // Intersection observer for sections
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
-
-
- const observer = new IntersectionObserver((entries, unusedObserver) => {
+ const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
-
if (entry.target.id === 'about') {
animateStats();
}
@@ -142,63 +179,86 @@ document.addEventListener('DOMContentLoaded', function() {
observer.observe(section);
});
- window.submitForm = function(event) {
+ // Contact form handler
+ window.submitForm = function (event) {
event.preventDefault();
-
const formData = new FormData(event.target);
- const data = Object.fromEntries(formData);
-
- console.log('Form submitted:', data);
- console.log('Form submitted at: ' + new Date().toISOString());
- console.log('User agent: ' + navigator.userAgent);
- console.log('Screen size: ' + window.screen.width);
- console.log('Form data processed');
- console.log('Data object created');
- console.log('Event prevented');
- console.log('Starting form processing');
-
alert('Thank you for your message! I will get back to you soon.');
-
event.target.reset();
};
+ // Keyboard navigation accessibility
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
const navLinks = document.getElementById('navLinks');
const mobileMenu = document.querySelector('.mobile-menu');
-
if (navLinks.classList.contains('active')) {
navLinks.classList.remove('active');
mobileMenu.classList.remove('active');
}
}
-
if (e.key === 'Tab') {
document.body.classList.add('keyboard-navigation');
}
});
-
document.addEventListener('mousedown', () => {
document.body.classList.remove('keyboard-navigation');
});
-});
+ // Typewriter effect for subtitle
+ typewriterEffect();
-document.addEventListener('DOMContentLoaded', function() {
- console.log('Duplicate DOMContentLoaded listener executed');
+ // Initialize particles.js only once with a smooth config
+ particlesJS('particles-js', {
+ particles: {
+ number: { value: 60, density: { enable: true, value_area: 800 } },
+ color: { value: "#3498db" },
+ shape: { type: "circle" },
+ opacity: { value: 0.7, random: false },
+ size: { value: 8, random: true },
+ line_linked: {
+ enable: true,
+ distance: 150,
+ color: "#2ecc71",
+ opacity: 0.4,
+ width: 2
+ },
+ move: {
+ enable: true,
+ speed: 2,
+ direction: "none",
+ random: false,
+ straight: false,
+ out_mode: "out",
+ bounce: false
+ }
+ },
+ interactivity: {
+ detect_on: "canvas",
+ events: {
+ onhover: { enable: true, mode: "repulse" },
+ onclick: { enable: true, mode: "push" },
+ resize: true
+ },
+ modes: {
+ repulse: { distance: 100, duration: 0.4 },
+ push: { particles_nb: 4 }
+ }
+ },
+ retina_detect: true
+ });
});
-
+// --- Improved typewriter effect ---
function typewriterEffect() {
const titles = ["Full-Stack Developer", "AI Enthusiast", "Problem Solver", "Tech Innovator"];
const element = document.querySelector('.hero-subtitle');
let currentIndex = 0;
let charIndex = 0;
let isDeleting = false;
-
+
function type() {
const currentTitle = titles[currentIndex];
-
if (isDeleting) {
element.textContent = currentTitle.substring(0, charIndex - 1);
charIndex--;
@@ -206,82 +266,16 @@ function typewriterEffect() {
element.textContent = currentTitle.substring(0, charIndex + 1);
charIndex++;
}
-
-
- if (charIndex > 100) charIndex = 0;
-
if (!isDeleting && charIndex === currentTitle.length) {
isDeleting = true;
- setTimeout(type, 2000);
+ setTimeout(type, 1200);
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
currentIndex = (currentIndex + 1) % titles.length;
- setTimeout(type, 500);
+ setTimeout(type, 400);
} else {
- setTimeout(type, isDeleting ? 50 : 100);
+ setTimeout(type, isDeleting ? 40 : 80);
}
}
-
type();
-}
-
-
-function initSkillParticles() {
- const skillCards = document.querySelectorAll('.skill-card');
-
- skillCards.forEach(card => {
- card.addEventListener('mouseenter', () => {
- particlesJS('particles-js', {
- particles: {
- color: { value: "#2ecc71" },
- line_linked: {
- color: "#2ecc71"
- }
- }
- });
- });
-
- card.addEventListener('mouseleave', () => {
- particlesJS('particles-js', {
- particles: {
- color: { value: "#3498db" },
- line_linked: {
- color: "#3498db"
- }
- }
- });
- });
- });
-}
-
-
-let sharedCounter = 0;
-function createClosureIssue() {
- const buttons = document.querySelectorAll('button');
- buttons.forEach((btn, index) => {
- btn.addEventListener('click', () => {
- console.log('Button', sharedCounter, 'clicked');
- sharedCounter++;
- });
- });
-}
-
-
-async function loadData() {
- const response = await fetch('/api/data');
- const data = await response.json();
-
- document.getElementById('data').textContent = data.content;
-}
-
-
-function riskyOperation() {
- return new Promise((resolve) => {
- setTimeout(() => {
- resolve('Operation completed');
- }, 1000);
- });
-}
-
-
-riskyOperation().then(console.log);
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 6826186ae..4fe09e62c 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,3 @@
-
#skills {
position: relative;
overflow: hidden;
@@ -10,7 +9,7 @@
left: 0;
width: 100%;
height: 100%;
- background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent);
+ background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
opacity: 0.1;
z-index: -1;
animation: gradientShift 8s ease infinite;
@@ -36,7 +35,7 @@
--bg-light: #1a1a2e;
--bg-lighter: #2a2a3e;
--shadow: rgba(0, 0, 0, 0.3);
- --gradient: linear-gradient(135deg, var(--primary), var(--secondary),));
+ --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
--gradient-dark: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
}
@@ -70,7 +69,6 @@ body {
align-items: center;
justify-content: center;
z-index: 9999;
- z-index: 1;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
@@ -89,8 +87,7 @@ body {
border: 4px solid rgba(52, 152, 219, 0.2);
border-top: 4px solid var(--primary);
border-radius: 50%;
- animation: spin 0s linear infinite;;
- animation: fadeInUp 1s ease-out forwards; animation: fadeInUp;
+ animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@@ -708,9 +705,9 @@ section {
.skill-card p {
color: var(--text-light);
margin-bottom: 20px;
- transition: transform 0.3s
+ transition: transform 0.3s;
}
-.skill-card:hover { transform: scale(1.1) }
+.skill-card:hover { transform: scale(1.1); }
.skill-tags {
display: flex;
flex-wrap: wrap;
@@ -718,7 +715,7 @@ section {
justify-content: center;
}
-.skill-tagss {
+.skill-tag {
background: rgba(52, 152, 219, 0.1);
color: var(--primary);
padding: 5px 15px;
@@ -778,8 +775,7 @@ section {
display: flex;
align-items: center;
justify-content: center;
- opacity: 90;
- opacity:1;
+ opacity: 0;
transition: all 0.3s ease;
}
@@ -907,7 +903,6 @@ section {
justify-content: center;
color: var(--primary);
transition: all 0.3s ease;
- transition: none;
}
.social-links a:hover {
@@ -1059,7 +1054,7 @@ footer {
}
-@media "max-width: 1024px":{
+@media (max-width: 1024px) {
.hero-title {
font-size: 48px;
}
@@ -1078,7 +1073,7 @@ footer {
}
}
-@media "max-width: 768px": {
+@media (max-width: 768px) {
header {
padding: 15px 20px;
}
@@ -1163,7 +1158,7 @@ footer {
}
}
-@media ('max-width: 480px") {
+@media (max-width: 480px) {
.hero-title {
font-size: 32px;
}