Fix contact form and improve About page styling

- Remove anime.js dependency from contact form
  - Replace all anime() calls with CSS transitions
  - Add CSS animations for form effects (shake, glow, focus states)
  - Fix double initialization issue

- Fix vite build error
  - Remove deleted codepen.html from build config
  - Add sitemap.html to build entries

- Improve About page "Why I Love Programming" section
  - Reduce font sizes for better readability
  - Adjust padding and max-width for better layout
  - Add responsive styles for mobile devices
  - Fix typo: "Progamming" -> "Programming"

- Fix contact form module initialization
  - Properly export ContactForm class
  - Move video banner init to separate function
  - Update contact.html with correct imports

Author: ThomasJButler

about.html

@@ -137,7 +137,7 @@ <h2 class="section-title">Why I Love Programming</h2>
                     </p>
                 </div>
                 <div class="programming-journey">
-                    <h2 class="section-title">My Progamming Journey</h2>
+                    <h2 class="section-title">My Programming Journey</h2>
                     <div class="journey-grid">
                         <div class="journey-item">
                             <i class="fas fa-lightbulb"></i>

contact.html

@@ -142,6 +142,15 @@ <h3>Thanks for your message!</h3>
     <!-- Scripts loaded via main-page.js module -->
     <script type="module">
         import { ContactForm } from '/src/js/contact-form.js';
+        
+        // Initialize contact form when DOM is ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                new ContactForm();
+            });
+        } else {
+            new ContactForm();
+        }
     </script>
 </body>
 </html>

src/css/contact.css

@@ -290,6 +290,46 @@ textarea.error {
     }
 }
 
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
+    20%, 40%, 60%, 80% { transform: translateX(10px); }
+}
+
+@keyframes glow {
+    0%, 100% { box-shadow: 0 0 0 rgba(0, 255, 0, 0); }
+    50% { box-shadow: 0 0 30px rgba(0, 255, 0, 0.5); }
+}
+
+/* Form shake animation */
+.form-shake {
+    animation: shake 0.5s ease-in-out;
+}
+
+/* Form glow effect */
+.form-glow {
+    animation: glow 1.5s ease-in-out;
+}
+
+/* Field focus states */
+#contact-form input.field-focused,
+#contact-form textarea.field-focused {
+    border-color: var(--matrix-green);
+    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
+    transform: scale(1.01);
+}
+
+/* Label focus states */
+#contact-form label.label-focused {
+    color: var(--matrix-green);
+}
+
+/* Field typing animation */
+#contact-form input.field-typing,
+#contact-form textarea.field-typing {
+    box-shadow: 0 0 12px rgba(0, 255, 0, 0.35);
+}
+
 #contact-form input:focus,
 #contact-form textarea:focus {
     animation: pulse-glow 2s ease-in-out infinite;

src/css/global.css

@@ -416,14 +416,17 @@
    }
 
    #address p:nth-of-type(1)::before {
+       padding: 10px;
        content: '\f3c5'; /* map-marker-alt */
    }
 
    #address p:nth-of-type(2)::before {
+       padding: 10px;
        content: '\f095'; /* phone */
    }
 
    #address p:nth-of-type(3)::before {
+       padding: 10px;
        content: '\f0e0'; /* envelope */
    }
 

src/css/styles.css

@@ -2287,13 +2287,15 @@ nav ul li.version-timetravel:hover {
 
 .story-content {
     background: var(--card-bg);
-    padding: 3rem;
+    padding: 1.75rem 2rem;
     border-radius: 15px;
     border: var(--border-glow);
     position: relative;
     overflow: hidden;
     box-shadow: 0 0 30px rgba(0, 255, 0, 0.1);
     transition: var(--transition-smooth);
+    max-width: 800px;
+    margin: 0 auto;
 }
 
 .story-content::before {
@@ -2314,7 +2316,7 @@ nav ul li.version-timetravel:hover {
 }
 
 .story-content:hover {
-    transform: translateY(-5px);
+    transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(0, 255, 0, 0.2);
 }
 
@@ -2324,16 +2326,28 @@ nav ul li.version-timetravel:hover {
 }
 
 .highlight-text {
-    font-size: 1.6rem;
+    font-size: 1.2rem;
     color: var(--neon-green);
-    margin-bottom: 2rem;
-    line-height: 1.6;
+    margin-bottom: 1.5rem;
+    line-height: 1.7;
     font-weight: 500;
     text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
     position: relative;
     padding-left: 2rem;
 }
 
+.story-content p {
+    color: #FF00FF;
+    margin-bottom: 1.25rem;
+    line-height: 1.7;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 1rem;
+}
+
+.story-content p:last-child {
+    margin-bottom: 0;
+}
+
 .highlight-text::before {
     content: '';
     position: absolute;
@@ -2465,12 +2479,17 @@ nav ul li.version-timetravel:hover {
         grid-template-columns: 1fr;
     }
 
+    .story-content {
+        padding: 1.5rem 1.25rem;
+    }
+    
     .highlight-text {
-        font-size: 1.2rem;
+        font-size: 1.1rem;
+        padding-left: 1.5rem;
     }
-
-    .story-content {
-        padding: 1.5rem;
+    
+    .story-content p {
+        font-size: 0.95rem;
     }
 
     .achievement-list li {
@@ -2818,7 +2837,17 @@ html {
     }
 
     .story-content {
-        padding: 2rem;
+        padding: 1.25rem 1rem;
+    }
+    
+    .story-content p {
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+    }
+    
+    .highlight-text {
+        font-size: 1rem;
+        padding-left: 1rem;
     }
 }