Add more features and form

contact-form-process.php

@@ -0,0 +1,76 @@
+<?php
+if (isset($_POST['Email'])) {
+
+    // EDIT THE 2 LINES BELOW AS REQUIRED
+    $email_to = "benoti.san@gmail.com";
+    $email_subject = "New form submissions";
+
+    function problem($error)
+    {
+        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
+        echo "These errors appear below.<br><br>";
+        echo $error . "<br><br>";
+        echo "Please go back and fix these errors.<br><br>";
+        die();
+    }
+
+    // validation expected data exists
+    if (
+        !isset($_POST['Name']) ||
+        !isset($_POST['Email']) ||
+        !isset($_POST['Message'])
+    ) {
+        problem('We are sorry, but there appears to be a problem with the form you submitted.');
+    }
+
+    $name = $_POST['Name']; // required
+    $email = $_POST['Email']; // required
+    $message = $_POST['Message']; // required
+
+    $error_message = "";
+    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
+
+    if (!preg_match($email_exp, $email)) {
+        $error_message .= 'The Email address you entered does not appear to be valid.<br>';
+    }
+
+    $string_exp = "/^[A-Za-z .'-]+$/";
+
+    if (!preg_match($string_exp, $name)) {
+        $error_message .= 'The Name you entered does not appear to be valid.<br>';
+    }
+
+    if (strlen($message) < 2) {
+        $error_message .= 'The Message you entered do not appear to be valid.<br>';
+    }
+
+    if (strlen($error_message) > 0) {
+        problem($error_message);
+    }
+
+    $email_message = "Form details below.\n\n";
+
+    function clean_string($string)
+    {
+        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
+        return str_replace($bad, "", $string);
+    }
+
+    $email_message .= "Name: " . clean_string($name) . "\n";
+    $email_message .= "Email: " . clean_string($email) . "\n";
+    $email_message .= "Message: " . clean_string($message) . "\n";
+
+    // create email headers
+    $headers = 'From: ' . $email . "\r\n" .
+        'Reply-To: ' . $email . "\r\n" .
+        'X-Mailer: PHP/' . phpversion();
+    @mail($email_to, $email_subject, $email_message, $headers);
+?>
+
+    <!-- include your success message below -->
+
+    Thank you for contacting us. We will be in touch with you very soon.
+
+<?php
+}
+?>

scripts/v3.js

@@ -260,9 +260,9 @@ sections.forEach(item => {
 
 //############################################# -- Content intersection Observer
 
-var contents = document.querySelectorAll(".scroll-into-view-content");
+const contents = document.querySelectorAll(".scroll-into-view-content");
 
-var contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
+const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
 
 function contentsObserverFn(entries) {
     
@@ -283,6 +283,76 @@ contents.forEach(item => {
 
 
 
+const myToolsIcons = document.querySelectorAll(".my-specialties-section > div > div");
+const myToolsHeader = document.querySelectorAll(".my-specialties-section h2");
+const myToolsParagraph = document.querySelector(".my-specialties-section p");
+
+let myToolsIO = new IntersectionObserver(myToolsFn, windowRect2);
+
+const myToolsIconsAnimated = anime({
+    targets: myToolsIcons,
+    translateX: [-20, 0],
+    translateY: [-20, 0],
+//        rotateY: [50, 0],
+    opacity: [0, 1],
+    easing: "easeOutQuad",
+    duration: 1200,
+    delay: anime.stagger(150, {start: 200}),
+    loop: false,
+    autoplay: false,
+    complete: function() { myToolsIconsAnimated.remove(myToolsIcons); },
+});
+
+function myToolsFn(entries) {
+    
+    if(entries[0].isIntersecting) {
+        myToolsIconsAnimated.play();
+    }
+   
+}
+
+
+myToolsIO.observe(myToolsParagraph);
+
+
+
+
+
+
+
+
+
+
+
+//############################################# -- Contact Form
+
+//var form = document.getElementById("my-form");
+//    
+//    async function handleSubmit(event) {
+//      event.preventDefault();
+//      var status = document.getElementById("my-form-status");
+//      var data = new FormData(event.target);
+//      fetch(event.target.action, {
+//        method: form.method,
+//        body: data,
+//        headers: {
+//            'Accept': 'application/json'
+//        }
+//      }).then(response => {
+//        status.innerHTML = "Thanks for your submission!";
+//        form.reset()
+//      }).catch(error => {
+//        status.innerHTML = "Oops! There was a problem submitting your form"
+//      });
+//    }
+//    form.addEventListener("submit", handleSubmit)
+
+
+
+
+
+
+
 
 
 

v3.css

@@ -507,6 +507,50 @@ input:focus {
 
 
 
+/*############################################################# -- About Me -- */
+
+.my-specialties-section {
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;    
+    background-color: var(--dark-color);
+    color: white;
+    text-align: center;
+    padding: 100px;
+}
+
+.my-specialties-section h2 {
+    
+}
+
+.my-specialties-section p {
+    color: rgba(255,255,255,0.70);
+    max-width: 800px;
+}
+
+.my-specialties-section > div {
+    max-width: 1140px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    padding: 20px 0 0 0;
+}
+
+.my-specialties-section > div > div {
+    width: 100px;
+    height: 100px;
+    background-color: var(--main-color);
+    margin: 10px;
+    border-radius: 50%;
+    transform-style: preserve-3d;
+}
+
+
+
+
+
+
 
 
 

v3.html

@@ -116,6 +116,94 @@
         </div>
         
         <div>
+            <h2 class="scroll-into-view-content">About Me</h2>
+            <p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
+        </div>
+    </section>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    <!-- #################################################################################-- My Specialties -->
+    
+    <section class="my-specialties-section">
+        <h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2>
+        <p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
+        
+        <div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+    </section>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    <!-- #################################################################################-- Contact Me -->
+    
+    <section class="my-work-section">
+        <div>
+            <h2 class="scroll-into-view-content">So. Let's have a chat</h2>
+            <p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
+        </div>
+        
+        <div class="scroll-into-view">
+            
+            <form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
+        
+                <div class="fcf-form-group">
+                    <label for="Name" class="fcf-label">Your name</label>
+                    <div class="fcf-input-group">
+                        <input type="text" id="Name" name="Name" class="fcf-form-control" required>
+                    </div>
+                </div>
+
+                <div class="fcf-form-group">
+                    <label for="Email" class="fcf-label">Your email address</label>
+                    <div class="fcf-input-group">
+                        <input type="email" id="Email" name="Email" class="fcf-form-control" required>
+                    </div>
+                </div>
+
+                <div class="fcf-form-group">
+                    <label for="Message" class="fcf-label">Your message</label>
+                    <div class="fcf-input-group">
+                        <textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
+                    </div>
+                </div>
+
+                <div class="fcf-form-group">
+                    <button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
+                </div>
+
+                <div class="fcf-credit" id="fcf-credit">
+                Simple HTML email form provided by: <a href="https://www.freecontactform.com" target="_blank">FreeContactForm.com</a>
+                </div>
+
+            </form>
+            
         </div>
     </section>