Beautify buttons, add health check

content/about.md

@@ -30,3 +30,7 @@ A lot of my work is open-source on [GitHub](https://github.com).
 Did a lot of _SDE_ work in _RustLang_ and fixed a lot of bugs after joining as a **QE**, wrote an entire test suite to run automated tests to catch bugs within the product like a _DevOps_ Engineer
 
 {{< back-to-top >}}
+
+___
+
+All contents on this site is licensed under CC0 1.0 Universal unless stated otherwise.

content/work.md

@@ -19,4 +19,7 @@ a CLI tool that will attend your online classes on behalf of you. our job is sch
 
 and [many more...](https://github.com/pixincreate?tab=repositories)
 
+You can contact me from the below button
+
+{{< contact-button-work >}}
 {{< back-to-top >}}

layouts/partials/contact-button.html

@@ -1 +1 @@
-<a href="contact/"><button>Get in touch</button></a>
+<a href="contact/"><button type="button"><span>Get in touch</span></button></a>

layouts/partials/footer.html

@@ -10,7 +10,7 @@
         <br>
         <a href="/privacy-policy">Privacy</a>
         <a href="/terms-of-service">Terms</a>
-        <a href="/to-be-updated">Status</a>
+        <a href="https://stats.uptimerobot.com/JM9DRspAMl">Health</a>
     </small>
     <div class="footer__inner">
         <div class="footer__content">

layouts/shortcodes/back-to-top.html

@@ -1,6 +1,6 @@
 <div class="progress-bar">
     <a href="#top">
-        <button class="back-to-top-button hidden">
+        <button class="back-to-top-button hidden" type="button">
             &uarr;
         </button>
     </a>

layouts/shortcodes/contact-button-work.html

@@ -0,0 +1,3 @@
+<div>
+    {{ partial "contact-button.html" }}
+</div>

layouts/shortcodes/contact.html

@@ -12,7 +12,7 @@
             <label for="message">Message</label>
             <textarea id="message" name="message" placeholder="Lorem ipsum dolor sit amet," required></textarea>
         </div>
-        <button>Submit</button>
+        <button onclick="alert('You\'ll now be redirected to your mail app.')"><span>Submit</span></button>
     </form>
 </div>
 <script>
@@ -26,7 +26,7 @@
         // Create a mailto link with subject and body
         const subject = encodeURIComponent("Getting in touch with Pa1NarK");
         const body = `Name: ${name}%0D%0AEmail: ${email}%0D%0AMessage:%0D%0A${message}`;
-        const mailtoLink = `mailto:[email protected]?subject=${subject}&body=${body}`;
+        const mailtoLink = `mailto:[email protected]?subject=${subject}&body=${body}`;
 
         // Open the user's email client with the pre-filled email
         window.location.href = mailtoLink;

static/css/styles.css

@@ -17,6 +17,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    -webkit-transition: all 0.5s;
+    /* add this line, chrome, safari, etc */
+    -moz-transition: all 0.5s;
+    /* add this line, firefox */
+    -o-transition: all 0.5s;
+    /* add this line, opera */
+    transition: all 0.5s;
+    /* add this line */
 }
 
 .back-to-top-button:hover {
@@ -108,6 +116,7 @@ textarea {
     min-height: 100px;
 }
 
+/* Used in Submit and Get in touch button */
 button {
     display: inline-block;
     padding: 10px 20px;
@@ -119,13 +128,47 @@ button {
     font-size: 15px;
     cursor: pointer;
     margin-top: 0.9rem;
+    -webkit-transition: all 0.5s;
+    /* add this line, chrome, safari, etc */
+    -moz-transition: all 0.5s;
+    /* add this line, firefox */
+    -o-transition: all 0.5s;
+    /* add this line, opera */
+    transition: all 0.5s;
+    /* add this line */
+}
+
+button span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.3s;
+}
+
+button span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -10px;
+    transition: 0.3s;
 }
 
 button:hover {
     background: -moz-linear-gradient(-45deg, #02EAFF 0%, #D401D4 100%);
     background: -webkit-linear-gradient(-45deg, #02EAFF 0%, #D401D4 100%);
     background: linear-gradient(135deg, #02EAFF 0%, #D401D4 100%);
     color: #fff;
+    box-shadow: 1px 2px 3px 4px rgba(10, 10, 10, 0.2);
+}
+
+button:hover span {
+    padding-right: 15px;
+}
+
+button:hover span:after {
+    opacity: 1;
+    right: 0;
 }
 
 .footer__content span {