Add privacy policy

_includes/contact.html

@@ -5,7 +5,7 @@ <h1>Contact Me</h1>
 </div>
 
 <div class="center-align-content">
-    <form action="https://formspree.io/adam@jaamour.com" method="POST" class="pure-form pure-form-aligned">
+    <form id="contact" action="https://formspree.io/adam@jaamour.com" method="POST" class="pure-form pure-form-aligned">
         <fieldset>
             <div class="pure-control-group">
                 <input type="text" name="name" class="pure-input-2-3" placeholder="Name" required/>

_includes/footer.html

@@ -1,6 +1,6 @@
 <footer class="footer">
     <p>
-        Built with Jekyll and <span class="love">❤</span> by <a href="https://github.com/Adamouization">Adam Jaamour</a> &copy; <span id="year"></span>
+        Built with Jekyll and <span class="love">❤</span> by <a href="https://github.com/Adamouization">Adam Jaamour</a> &copy; <span id="year"></span> | <a href="#" id="privacy-policy-link">Privacy Policy</a>
     </p>
 </footer>
 
@@ -10,4 +10,72 @@
 <script src="{{ '/assets/js/modernizer.js' | prepend: site.baseurl }}"></script>
 <script src="{{ '/assets/js/typewriter.js' | prepend: site.baseurl }}"></script>
 <script src="{{ '/assets/js/stackoverflow.js' | prepend: site.baseurl }}"></script>
-{% include google-analytics.html %}
+{% include google-analytics.html %}
+
+<!-- Privacy Policy content. Generated using ChatGPT. -->
+<div id="privacy-policy-modal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h1>Privacy Policy</h1>
+        <p><strong>Effective Date:</strong> 19 May 2024</p>
+
+        <h2>1. Introduction</h2>
+        <p>Welcome to the Adam Jaamour Portfolio website (<a href="http://www.adam.jaamour.com/">http://www.adam.jaamour.com/</a>). This Privacy Policy explains how we collect, use, and protect your information when you visit our website.</p>
+
+        <h2>2. Information We Collect</h2>
+        <p>We do not collect any personal data unless you choose to provide it through our contact form. The only data collected is the information you voluntarily submit.</p>
+
+        <h2>3. Non-Personal Data Collection</h2>
+        <p>We use Google Analytics to collect non-personal data about your visit to our website. This data includes information such as your IP address, browser type, and pages visited. This information is used solely for analytics purposes to help us understand how our website is used and to improve our services.</p>
+
+        <h2>4. Purpose of Data Collection</h2>
+        <p>The non-personal data collected through Google Analytics is used to analyze website traffic and improve our website's functionality and content.</p>
+
+        <h2>5. Data Sharing</h2>
+        <p>We do not share any collected data with third parties. All data is used internally for the purposes outlined in this Privacy Policy.</p>
+
+        <h2>6. Children's Privacy</h2>
+        <p>We do not knowingly collect any information from children. Our website is not directed towards children, and we take steps to ensure we do not collect data from children.</p>
+
+        <h2>7. Updates to This Privacy Policy</h2>
+        <p>We may update this Privacy Policy from time to time. We encourage you to review this Privacy Policy periodically to stay informed about how we are protecting your information.</p>
+
+        <h2>8. Contact Information</h2>
+        <p>If you have any questions or concerns about this Privacy Policy, please contact us at <a href="mailto:hello@jaamour.com">hello@jaamour.com</a> or via the <a href="http://www.adam.jaamour.com/#contact">contact form</a>.</p>
+
+        <h2>9. Consent</h2>
+        <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms.</p>
+
+        <p><strong>Last Updated:</strong> 19 May 2024</p>
+    </div>
+</div>
+
+<!-- Privacy Policy modal logic. -->
+<script>
+    // Get the modal
+    const modal = document.getElementById("privacy-policy-modal");
+
+    // Get the link that opens the modal
+    const link = document.getElementById("privacy-policy-link");
+
+    // Get the <span> element that closes the modal
+    const span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks the link, open the modal
+    link.onclick = function(event) {
+        event.preventDefault();
+        modal.style.display = "block";
+    }
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function() {
+        modal.style.display = "none";
+    }
+
+    // When the user clicks anywhere outside the modal, close it
+    window.onclick = function(event) {
+        if (event.target === modal) {
+            modal.style.display = "none";
+        }
+    }
+</script>

_includes/head.html

@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="{{ '/assets/css/project-cards.css' | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ '/assets/css/buttons.css' | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ '/assets/css/stackoverflow.css' | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ '/assets/css/modal.css' | prepend: site.baseurl }}">
     <link rel="shortcut icon" type="image/png" href="{{ '/assets/favicon.ico' }}">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

assets/css/modal.css

@@ -0,0 +1,41 @@
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 50%;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    animation: modalopen 0.4s;
+}
+
+@keyframes modalopen {
+    from { opacity: 0; transform: translateY(-50px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}