From bcd4c267c553f0c5b804ee0d209682bb4ffe2485 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 21 May 2023 20:26:17 +0200
Subject: [PATCH] feat: fold/unfold home message

---
 _layouts/home.html | 83 +++++++++++++++++++++++++++++++---------------
 1 file changed, 57 insertions(+), 26 deletions(-)

diff --git a/_layouts/home.html b/_layouts/home.html
index 75e4a13..e29467b 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -9,41 +9,72 @@ layout: default
       margin: 1em 0 2em;
       color: black;
       border-radius: 5px;
-      border: 5px dotted #ccc !important;
+      border: 3px dotted #ccc !important;
       padding: 0.5em 1em;
     "
   >
-    <h2 style="font-weight: bold">Hello, fellow human!</h2>
+    <h2 style="font-weight: bold">
+      Hello, fellow human! Just a short message...
+    </h2>
     <p>
-      Welcome. Like you, I have many areas of interests, and in this site you
+      Welcome! Like you, I have many areas of interests, and in this site you
       will find posts on varying topics that are not always confined to my
       professional life.
     </p>
     <p>
-      There really is no central theme here, and even the quality of writing may
-      change between posts. My only rule is that I put out words about stuff I
-      find helpful to talk about.
+      There really is no central theme on this blog, and even the quality of
+      writing may change between posts. My only rule here is that I put out
+      words about stuff I find helpful to talk about.
     </p>
-    <!--p>
-      There may be some topics that pop up more than others.
-      <a href="/technology">Technology</a> posts are mostly about web
-      development, and may be more relatable to people who found me for my
-      development work. More opinionated <a href="/personal">personal</a> posts
-      are where I talk about stuff I find interesting and helpful to put out in
-      the open for their potential to help others as well. However, other topics
-      will most likely be included in the future and a lot of things may change
-      over time.
-    </p-->
-    <p>
-      Thank you for the interest in reading. I look forward to any feedback or
-      even the possibility of collaboration. Hit me up about any topic you find
-      here! Below are my contact details.
-    </p>
-    <ul>
-      <li>email: <a href="mailto:ayo@ayco.io">ayo@ayco.io</a></li>
-      <li>chat: <a href="https://t.me/ayoayco">ayoayco @ Telegram</a></li>
-    </ul>
-    <p>~ <em>Ayo Ayco</em></p>
+    <button
+      class="read-more-message"
+      style="cursor: pointer; margin-bottom: 1em"
+      onclick="toggleMessage()"
+    >
+      Read the full message &rarr;
+    </button>
+    <script>
+      function toggleMessage() {
+        var x = document.getElementsByClassName("hide")[0];
+        var y = document.getElementsByClassName("read-more-message")[0];
+        if (x.style.display === "none") {
+          x.style.display = "block";
+          y.style.display = "none";
+        } else {
+          x.style.display = "none";
+          y.style.display = "block";
+        }
+      }
+    </script>
+    <div class="hide" style="display: none">
+      <p>
+        There may be some topics that pop up more than others.
+        <a href="/technology">Technology</a> posts are mostly about web
+        development, and may be more relatable to people who found me for my
+        development work. More opinionated
+        <a href="/personal">personal</a> posts are where I talk about stuff I
+        find interesting and helpful to put out in the open for their potential
+        to help others as well. However, other topics will most likely be
+        included in the future and a lot of things may change over time.
+      </p>
+      <p>
+        Thank you for the interest in reading. I look forward to any feedback or
+        even the possibility of collaboration. Hit me up about any topic you
+        find here! Below are my contact details.
+      </p>
+      <ul>
+        <li>email: <a href="mailto:ayo@ayco.io">ayo@ayco.io</a></li>
+        <li>chat: <a href="https://t.me/ayoayco">ayoayco @ Telegram</a></li>
+      </ul>
+      <p>~ <em>Ayo Ayco</em></p>
+      <button
+        class="read-less-message"
+        style="cursor: pointer"
+        onclick="toggleMessage()"
+      >
+        &larr; Show less...
+      </button>
+    </div>
   </div>
   {% if site.posts.size > 0 %}
   <ul class="blog-home__list-items">