feat: name effective

README.md

@@ -50,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.

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