Merge branch 'main' into blog

README.md

@@ -1,12 +1,15 @@
 <!-- markdownlint-disable-next-line -->
-<div align="center">
-
-  <!-- markdownlint-disable-next-line -->
-  # My personal blog's source code
+<img src="./assets/img/cat.webp" width="220" align="right" alt="Steve Hoang" />
+<div id="abc">
+  <ul align="center" style="list-style: none;">
+    <summary>
+      <h1>My personal blog's source code</h1>
+    </summary>
+  </ul>
+</div>
 
-  Using [Jekyll][jekyllrb] with [Chirpy][theme] theme, host in Github with [submodule][lib], deployed on Cloudflare.
+Using [Jekyll][jekyllrb] with [Chirpy][theme] theme, host in Github with [submodule][lib], deployed on Cloudflare.
 
-</div>
 
 
 ## Deploy & public by [Cloudflare][cf]
@@ -47,6 +50,7 @@ node tools/lqip/index.js
 ## Customizations
 - Font replace: 'Lato => System Fonts Stack'
 - Personal styling:
+  - feat: name effective (sidebar).
   - feat: back-to-top progress bar & scroll percentage text.
   - feat: adjust style code blocks.
   - feat: restyle prompt-alerts/note blocks.
@@ -56,6 +60,7 @@ node tools/lqip/index.js
   - style: merge tag to archive page. Moving about page to footer. Hide tab, about, category.
   - style: restyle sidebar: remove background, restyle nav.link hover effect.
 
+[cf]: https://pages.cloudflare.com
 [theme]: https://rubygems.org/gems/jekyll-theme-chirpy
 [jekyllrb]: https://jekyllrb.com
 [stevehoang.com]: https://stevehoang.com

_includes/sidebar.html

@@ -2,7 +2,7 @@
 
 <aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
   <header class="profile-wrapper">
-    <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
+    <a href="{{ '/about' | relative_url }}" id="avatar" class="rounded-circle">
       {%- if site.avatar != empty and site.avatar -%}
         {%- capture avatar_url -%}
           {% include media-url.html src=site.avatar %}
@@ -11,7 +11,7 @@
       {%- endif -%}
     </a>
 
-    <a class="site-title d-block" href="{{ '/' | relative_url }}">{{ site.title }}</a>
+    <a class="site-title d-block" href="{{ '/' | relative_url }}">Stev<span>e Hoang</span></a>
     <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
   </header>
   <!-- .profile-wrapper -->

assets/css/jekyll-theme-chirpy.scss

@@ -9,6 +9,17 @@
 
 /* append your custom style below */
 
+/* Name effect */
+.site-title span {
+  animation: 10s ease-in-out 1s fade-away;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fade-away {
+  from { opacity: 1; }
+  to { opacity: 0.1; }
+}
+
 /* Back-to-top progress bar */
 #progress-circle {
   margin: -1px;