make it such that mail send from website itself, and user doesnt have to open any email service provider to send the mail - Follow Up Deployment

index.html

@@ -139,7 +139,7 @@
             
             <div class="flex flex-col md:flex-row items-center gap-8">
                 <div class="md:w-1/3 mb-8 md:mb-0 fade-in delay-1">
-                    <div class="bg-gray-100 p-6 rounded-xl shadow-md">
+                    <div class="bg-gray-100 p-6 rounded-xl shadow-md h-full">
                         <h3 class="text-xl font-semibold text-blue-500 mb-4">Education</h3>
                         <div class="space-y-4">
                             <div>
@@ -162,7 +162,7 @@
                 </div>
                 
                 <div class="md:w-1/3 fade-in delay-2">
-                    <div class="bg-gray-100 p-6 rounded-xl shadow-md">
+                    <div class="bg-gray-100 p-6 rounded-xl shadow-md h-full">
                         <h3 class="text-xl font-semibold text-blue-500 mb-4">Experience</h3>
                         <div class="space-y-4">
                             <div>
@@ -468,7 +468,8 @@
             
             <div class="flex flex-col md:flex-row gap-8">
                 <div class="md:w-1/2 fade-in delay-2">
-                    <form class="space-y-6">
+                    <form id="contactForm" class="space-y-6">
+                        <div id="formStatus" class="hidden"></div>
                         <div>
                             <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                             <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
@@ -659,25 +660,59 @@
         });
         
         // Form submission
-        const contactForm = document.querySelector('form');
+        const contactForm = document.getElementById('contactForm');
+        const formStatus = document.getElementById('formStatus');
+        
         if (contactForm) {
-            contactForm.addEventListener('submit', (e) => {
+            contactForm.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 
                 // Get form values
-                const name = document.getElementById('name').value;
-                const email = document.getElementById('email').value;
-                const subject = document.getElementById('subject').value;
-                const message = document.getElementById('message').value;
+                const formData = {
+                    name: document.getElementById('name').value,
+                    email: document.getElementById('email').value,
+                    subject: document.getElementById('subject').value,
+                    message: document.getElementById('message').value
+                };
                 
-                // Here you would typically send the data to a server
-                console.log({ name, email, subject, message });
+                // Show loading state
+                formStatus.classList.remove('hidden');
+                formStatus.textContent = 'Sending message...';
+                formStatus.className = 'text-blue-500 p-4 rounded-lg bg-blue-50';
                 
-                // Show success message
-                alert('Thank you for your message! I will get back to you soon.');
+                try {
+                    // Send to server endpoint (you'll need to implement this)
+                    const response = await fetch('https://your-server.com/send-email', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            to: 'me230003046@iiti.ac.in',
+                            ...formData
+                        })
+                    });
+                    
+                    const result = await response.json();
+                    
+                    if (response.ok) {
+                        // Success message
+                        formStatus.textContent = 'Message sent successfully!';
+                        formStatus.className = 'text-green-500 p-4 rounded-lg bg-green-50';
+                        contactForm.reset();
+                    } else {
+                        throw new Error(result.message || 'Failed to send message');
+                    }
+                } catch (error) {
+                    // Error message
+                    formStatus.textContent = `Error: ${error.message}`;
+                    formStatus.className = 'text-red-500 p-4 rounded-lg bg-red-50';
+                }
                 
-                // Reset form
-                contactForm.reset();
+                // Hide status after 5 seconds
+                setTimeout(() => {
+                    formStatus.classList.add('hidden');
+                }, 5000);
             });
         }
     </script>