feat: add an explainer message on the home page

_config.yml

@@ -13,7 +13,7 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
-title: Ayo Ayco
+title: Ayo's Blog
 description: Blogs on tech, life, and personal growth
 author: Ayo Ayco
 attribution: Ayo Ayco

_layouts/default.html

@@ -10,6 +10,7 @@
         
         <div class="site-body">
             <main class="page-content float-left" aria-label="Content">
+
                 <div class="wrapper">
                     {{ content }}
                 </div>

_layouts/home.html

@@ -3,6 +3,47 @@ layout: default
 ---
 
 <div class="blog-home">
+  <div
+    style="
+      margin: 1em 0;
+      color: black;
+      border-radius: 5px;
+      border: 5px dotted rgba(141, 191, 66, 0.97) !important;
+      padding: 0.5em 1em;
+    "
+  >
+    <h2 style="font-weight: bold">Hello, fellow human!</h2>
+    <p>
+      Welcome to my personal blog! 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.
+    </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>
+  </div>
   {% if site.posts.size > 0 %}
   <ul class="blog-home__list-items">
     {% for post in site.posts %}

assets/main.scss

@@ -34,10 +34,12 @@ body {
 
   a:hover {
     color: #2f5db4;
+    text-decoration: underline;
   }
 
   a {
     color: #2b6be2;
+    text-decoration: underline;
   }
 }
 
@@ -110,11 +112,6 @@ caption {
   font-weight: bold;
 }
 
-.site-title:hover,
-.site-nav .page-link:hover {
-  text-decoration: none;
-}
-
 .site-nav .page-link {
   color: #ffffff !important;
   text-transform: uppercase;
@@ -134,10 +131,6 @@ caption {
 }
 
 .categories-content {
-  a {
-    text-decoration: none;
-  }
-
   span.categories-title {
     color: rgba(141, 191, 66, 0.97);
     text-transform: uppercase;
@@ -237,10 +230,6 @@ caption {
   margin: 29px 0 25px 25px;
 }
 
-.up-next:hover {
-  text-decoration: none;
-}
-
 .up-next {
   background-color: #ee4a03;
   color: #ffffff !important;
@@ -395,18 +384,20 @@ table.image caption {
     &__category {
       span {
         a:hover {
-          text-decoration: none;
           color: #bb4a03;
           border-bottom: solid 3px #bb4a03;
+          text-decoration: none;
         }
         a {
           text-transform: uppercase;
           padding: 3px;
-          border-bottom: solid 3px #333;
           width: auto;
+          text-decoration: none;
+          font-weight: bold;
 
           font-size: small;
           color: #333;
+          border-bottom: solid 3px #333;
         }
       }
     }
@@ -516,6 +507,7 @@ table.image caption {
 .blog-home {
   &__list-items {
     list-style: none;
+    margin-left: 0;
 
     &__item {
       background-color: #fff;
@@ -534,7 +526,6 @@ table.image caption {
           }
 
           a:hover {
-            text-decoration: none;
             color: #bb4a03 !important;
           }
         }
@@ -585,7 +576,6 @@ table.image caption {
         margin-top: 15px;
 
         a:hover {
-          text-decoration: none;
           color: #ee4a03;
           border: 1px solid #ee4a03;
         }

index.md

@@ -8,4 +8,4 @@ type: "home"
 title: "Ayo Ayco"
 description: "This is a place to learn new web technologies and productivity hacks."
 image: "hello-world"
----
+---