feat: fold/unfold home message

This commit is contained in:
Ayo 2023-05-21 20:26:17 +02:00
parent f400c76442
commit bcd4c267c5

View file

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