Enhance portfolio website

Author: harshitpawar64

icons/android-chrome-192x192.png

@@ -0,0 +1,25 @@
+{
+  "short_name": "HP Portfolio",
+  "name": "Harshit Pawar - Developer Portfolio",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#0f172a",
+  "background_color": "#0f172a"
+}

icons/android-chrome-512x512.png

@@ -54,6 +54,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Setup navigation bar scroll behavior
     setupNavScroll();
+
+    // Setup contact form handling
+    setupContactForm();
 });
 
 // Create geometric shapes for visual interest
@@ -258,7 +261,7 @@ function addButtonEffects() {
 
 // Typing animation with fixed width container
 function initTypeEffect() {
-    const phrases = ["Developer", "Tech Enthusiast", "Problem Solver", "Continuous Learner"];
+    const phrases = ["Developer", "FIDE Master", "Tech Enthusiast", "Problem Solver", "Continuous Learner"];
     let currentPhraseIndex = 0;
     let currentCharIndex = 0;
     let isDeleting = false;
@@ -474,8 +477,8 @@ async function fetchGitHubRepos() {
             const languageColor = repo.language ? languageColors[repo.language] || '#00d2ff' : '#00d2ff';
 
             repoCard.innerHTML = `
-                <div class="neon-highlight"></div>
-                <h3 class="text-xl font-bold text-white mb-2">${repo.name}</h3>
+                <div class="card-top-accent" style="background-color: ${languageColor}"></div>
+                <h3 class="text-xl font-bold text-white mb-3">${repo.name}</h3>
                 <p class="text-base text-gray-300 mb-4 min-h-[60px]">${repo.description || 'No description provided.'}</p>
                 <div class="flex items-center text-gray-400 text-xs mb-4">
                     ${repo.language ?
@@ -562,3 +565,77 @@ function setupNavScroll() {
         mainNav.style.backgroundColor = 'rgba(10, 10, 15, 0.9)';
     }
 }
+
+// Handle contact form submission
+function setupContactForm() {
+    const contactForm = document.getElementById('contact-form');
+    const formStatus = document.getElementById('form-status');
+
+    if (!contactForm) return;
+
+    contactForm.addEventListener('submit', async function(event) {
+        event.preventDefault();
+
+        // Show a subtle loading effect on the submit button
+        const submitButton = contactForm.querySelector('button[type="submit"]');
+        const originalButtonText = submitButton.innerHTML;
+        submitButton.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Sending...';
+        submitButton.disabled = true;
+
+        try {
+            // Submit the form to Formspree
+            const formData = new FormData(contactForm);
+            const response = await fetch(contactForm.action, {
+                method: contactForm.method,
+                body: formData,
+                headers: {
+                    'Accept': 'application/json'
+                }
+            });
+
+            if (response.ok) {
+                // Show success message
+                contactForm.reset();
+                formStatus.classList.remove('hidden');
+
+                // Hide success message after 5 seconds
+                setTimeout(() => {
+                    formStatus.classList.add('hidden');
+                }, 5000);
+
+                // Add a success animation
+                const successRipple = document.createElement('div');
+                successRipple.className = 'success-ripple';
+                submitButton.parentNode.appendChild(successRipple);
+
+                setTimeout(() => {
+                    successRipple.remove();
+                }, 1000);
+            } else {
+                throw new Error('Form submission failed');
+            }
+        } catch (error) {
+            console.error('Form submission error:', error);
+            formStatus.innerHTML = '<p class="text-[#ff5e62]">Oops! There was a problem. Please try again.</p>';
+            formStatus.classList.remove('hidden');
+        } finally {
+            // Restore the button
+            submitButton.innerHTML = originalButtonText;
+            submitButton.disabled = false;
+        }
+    });
+
+    // Add focus/blur effects on inputs
+    const formInputs = contactForm.querySelectorAll('input, textarea');
+    formInputs.forEach(input => {
+        input.addEventListener('focus', () => {
+            input.parentElement.classList.add('input-focused');
+        });
+
+        input.addEventListener('blur', () => {
+            if (!input.value) {
+                input.parentElement.classList.remove('input-focused');
+            }
+        });
+    });
+}

icons/apple-touch-icon.png

@@ -351,6 +351,7 @@ p, li, a {
     z-index: 1;
     background: var(--card-bg);
     border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
 .project-card::before {
@@ -360,21 +361,45 @@ p, li, a {
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, rgba(255, 94, 98, 0.1), rgba(116, 89, 234, 0.1));
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
     opacity: 0;
     transition: opacity 0.4s var(--easing);
     z-index: -1;
 }
 
+.card-top-accent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    opacity: 0.8;
+    border-radius: 3px 3px 0 0;
+}
+
 .project-card:hover {
     transform: translateY(-8px);
-    box-shadow: var(--shadow-lg);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.1);
 }
 
 .project-card:hover::before {
     opacity: 1;
 }
 
+.project-card h3 {
+    position: relative;
+    display: inline-block;
+    transition: all 0.3s var(--easing);
+}
+
+.project-card:hover h3 {
+    background: var(--gradient-blue);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
 .project-card .language-dot {
     width: 10px;
     height: 10px;
@@ -443,3 +468,81 @@ p, li, a {
         bottom: -2px;
     }
 }
+
+/* Contact form styling */
+#contact-form input,
+#contact-form textarea {
+    background-color: rgba(19, 21, 31, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s var(--easing);
+}
+
+#contact-form input:focus,
+#contact-form textarea:focus {
+    border-color: var(--accent-3);
+    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.1);
+    outline: none;
+}
+
+.input-focused label {
+    color: var(--accent-3);
+}
+
+.success-ripple {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    width: 150px;
+    height: 150px;
+    background: radial-gradient(circle, rgba(0, 210, 255, 0.8) 0%, rgba(0, 210, 255, 0) 70%);
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 0;
+    animation: successRipple 1s ease-out forwards;
+}
+
+@keyframes successRipple {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0;
+    }
+}
+
+/* Focus items in About section */
+.focus-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 0.75rem 1rem;
+    border-radius: 0.75rem;
+    transition: all 0.3s var(--easing);
+    background-color: rgba(255, 255, 255, 0.02);
+    border: 1px solid transparent;
+}
+
+.focus-item:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.focus-item i {
+    transition: transform 0.3s var(--easing);
+}
+
+.focus-item:hover i {
+    transform: scale(1.2);
+}
+
+.focus-item h4 {
+    transition: color 0.3s var(--easing);
+}
+
+.focus-item:hover h4 {
+    color: var(--accent-3);
+}