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;
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">