Update contact information, enhance form notification, and improve hero section content

functions/api/send-email.js

@@ -14,12 +14,12 @@ export async function onRequestPost(context) {
             },
             body: JSON.stringify({
                 from: {
-                    email: "daniel@laforceit.com",
+                    email: "contact@argobox.com",
                     name: "Daniel LaForce"
                 },
                 to: [
                     {
-                        email: "daniel@laforceit.com",
+                        email: "daniel.laforce@argobox.com",
                         name: "Daniel LaForce"
                     }
                 ],

index.html

@@ -80,7 +80,7 @@
                 <h1 class="hero-title">
                     <span class="role-wrapper">
                         <span class="role active" data-role="admin" data-description="Building scalable infrastructure with optimized performance and bulletproof security — from server management to end-user support that keeps businesses running smoothly.">
-                            <span class="highlight">System</span> <span class="highlight">Administrator</span> &amp; IT Expert
+                            <span class="highlight">Network</span> &amp; <span class="highlight">Cyber Security</span> Professional
                         </span>
                         <span class="role" data-role="devops" data-description="Streamlining development workflows with CI/CD pipelines and infrastructure as code — automating deployments and improving reliability across your entire technology stack.">
                             <span class="highlight">DevOps</span> &amp; <span class="highlight">Automation</span> Engineer
@@ -92,7 +92,7 @@
                 </h1>
                 
                 <p class="hero-description" id="role-description">
-                    Building scalable infrastructure with optimized performance and bulletproof security — from server management to end-user support that keeps businesses running smoothly.
+                    Securing and optimizing your digital infrastructure with enterprise-grade solutions — from zero-trust architecture to automated security monitoring that keeps your business protected 24/7.
                 </p>
                 
                 <div class="inline-terminal">
@@ -132,7 +132,7 @@
                     <span class="btn-icon"><i class="fas fa-arrow-right"></i></span>
                 </a>
                 
-                <a href="https://argobox.com/ansible-sandbox" class="btn btn-outline btn-featured" target="_blank">
+                <a href="https://www.argobox.com" class="btn btn-outline btn-featured" target="_blank">
                     <span class="pulse-ring"></span>
                     <span class="btn-text">Explore My Lab</span>
                     <span class="btn-icon"><i class="fas fa-server"></i></span>
@@ -584,7 +584,7 @@
                             <i class="fas fa-envelope"></i>
                         </div>
                         <h3 class="contact-title">Email</h3>
-                        <p><a href="mailto:daniel@laforceit.com">daniel@laforceit.com</a></p>
+                        <p><a href="mailto:daniel.laforce@argobox.com">daniel.laforce@argobox.com</a></p>
                     </div>
                     
                     <div class="contact-item">
@@ -631,6 +631,10 @@
                             Send Message
                         </button>
                     </form>
+                    <div id="form-notification" class="form-notification" style="display: none;">
+                        <i class="fas fa-check-circle"></i>
+                        <span class="notification-text">Message sent successfully! We'll get back to you soon.</span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -656,7 +660,7 @@
                 <div class="footer-social">
                     <a href="https://github.com/keyargo" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
                     <a href="https://www.linkedin.com/in/danlaforce" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
-                    <a href="mailto:daniel@laforceit.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
+                    <a href="mailto:daniel.laforce@argobox.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
                 </div>
             </div>
             

script.js

@@ -394,9 +394,6 @@ function updateMetrics() {
     setInterval(updateMetricValues, 5000);
 }
 
-/**
- * Initialize contact form handling
- */
 /**
  * Initialize contact form handling
  */
@@ -427,16 +424,43 @@ function initFormHandling(form) {
 
             const data = await res.json();
 
+            const notification = document.getElementById('form-notification');
+            const notificationIcon = notification.querySelector('i');
+            const notificationText = notification.querySelector('.notification-text');
+
             if (data.success) {
-                alert("Thank you for your message! I will get back to you soon.");
+                notification.style.display = 'block';
+                notification.classList.add('success');
+                notification.classList.remove('error');
+                notificationIcon.className = 'fas fa-check-circle';
+                notificationText.textContent = "Message sent successfully! We'll get back to you soon.";
                 form.reset();
             } else {
-                alert("Failed to send message. Please try again or contact me directly.");
+                notification.style.display = 'block';
+                notification.classList.add('error');
+                notification.classList.remove('success');
+                notificationIcon.className = 'fas fa-exclamation-circle';
+                notificationText.textContent = "Failed to send message. Please try again or contact me directly.";
             }
 
+            // Hide notification after 5 seconds
+            setTimeout(() => {
+                notification.style.display = 'none';
+            }, 5000);
+
         } catch (error) {
             console.error("Error:", error);
-            alert("Something went wrong while sending your message.");
+            const notification = document.getElementById('form-notification');
+            notification.style.display = 'block';
+            notification.classList.add('error');
+            notification.classList.remove('success');
+            notification.querySelector('i').className = 'fas fa-exclamation-circle';
+            notification.querySelector('.notification-text').textContent = "Something went wrong while sending your message.";
+            
+            // Hide notification after 5 seconds
+            setTimeout(() => {
+                notification.style.display = 'none';
+            }, 5000);
         } finally {
             submitButton.innerHTML = originalButtonText;
             submitButton.disabled = false;
@@ -453,24 +477,3 @@ function updateYear() {
         yearElement.textContent = new Date().getFullYear();
     }
 }
-
-/**
- * Utility function to add particle float animation
- */
-document.addEventListener('DOMContentLoaded', function() {
-    // Initialize all website functionality
-    initNavigation();
-    initParticlesAndIcons();
-    initRoleRotation(); // Updated function
-    initTerminalTyping(); // Updated function
-    initSolutionsCarousel(); // Updated function
-    initScrollReveal();
-    updateMetrics();
-    updateYear();
-    
-    // Initialize form handling
-    const contactForm = document.getElementById('contact-form');
-    if (contactForm) {
-        initFormHandling(contactForm);
-    }
-});

styles.css

@@ -1538,4 +1538,41 @@ text-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 8px rgba(255, 255, 255, 0.3);
 transform: scale(1.02);
 }
 
+.form-notification {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    animation: slideIn 0.3s ease-out;
+}
+
+.form-notification.success {
+    background-color: #d1fae5;
+    color: #065f46;
+    border: 1px solid #34d399;
+}
+
+.form-notification.error {
+    background-color: #fee2e2;
+    color: #991b1b;
+    border: 1px solid #f87171;
+}
+
+.form-notification i {
+    font-size: 1.25rem;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+