Modify some context.

source/_posts/projects_hub.md

@@ -0,0 +1,29 @@
+---
+title: Project Hub
+date: 2025-01-04 16:03:00
+tags: [Project, Computer Science]
+categories: SUSTech
+toc: true
+---
+Here I will constantly some of the projects I have been working on and the corresponding description of the projects. Currently, my interest mainly lies in the field Distributed System and Machine Learning. I am a participant for various super computing competition and I am thrilled to apply the power of supercomputer into solving some of the Machine Learning problems.
+
+<!--more-->
+
+<h2 class="heading-with-badge">CS323 Incredibuild
+    <span class="badge" style="background-color:rgb(71, 63, 63);">Rust
+        <a href="http://runoob.com">
+            <img alt="github" src="/images/logos/github-mark-white.svg" width="30" height="30">
+        </a>
+    </span>
+</h2>
+
+<h2 class="heading-with-badge">CS329 When AL and DA meets at OD 
+    <span class="badge" style="background-color:rgb(255, 231, 135); color: rgb(0,0,0)">Python</span>
+</h2>
+{% note primary %}
+The full name stands for "When Active Learning and Data Augmentation meets at Object Detection".
+{% endnote %}
+
+<h2 class="heading-with-badge">CS334 VirtIO for crypto device on Asterinas 
+    <span class="badge" style="background-color:rgb(71, 63, 63);">Rust</span>
+</h2>

source/about/index.md

@@ -4,37 +4,19 @@ date: 2024-11-29 12:03:00
 page_cover: /images/harry.jpg
 page_cover_height: 250
 ---
-# About me 😋
+<h2 class="heading-with-badge"> About Me 😋
+    <div class="divider">
+        <a class="badge" style="font-size: 12px; font-weight: normal; background-color:rgb(255, 145, 105);" href="/2025/01/04/projects_hub/">Computer Science Major</a>
+        <a class="badge" style="font-size: 12px; font-weight: normal; background-color:rgb(255, 206, 11);" href="">A Hufflepuff</a>
+        <a class="badge" style="font-size: 12px; font-weight: normal; background-color:rgb(71, 102, 255);" href="">A Sports Enthusiast</a>
+        <a class="badge" style="font-size: 12px; font-weight: normal; background-color:rgb(213, 136, 255);" href="">A Music Lover</a>
+        <a class="badge" style="font-size: 12px; font-weight: normal; background-color:rgb(89, 116, 93);" href="">Language Engager</a>
+    </div>
+</h2>
 
 <p align="left">
-Hi, I am Yicheng Xiao, an undergraduate students studying Computer Science at Southern University of Science and Technology. This blog is used to document some of my thoughts, some of my notes and some of my daily routines...
+Hi, I am Yicheng Xiao, an undergraduate students studying Computer Science at Southern University of Science and Technology. This blog is used to document some of my thoughts, some of my notes and some of my daily routines... To further explain my name, I usually refer myself as Jaredanjerry or Jaredanwolfgang. Jaredan is the name I use with my personal social media accounts. It comes from a very interesting misunderstanding that I did not know Jared as a proper English name before and called of my friends who name is Jared as Jerry the whole summer. My English name is Jerry and my German name I choose for myself is Wolfgang, so I combined them together and got Jaredanjerry and Jaredanwolfgang. You can call either way by using Jaredan, Jerry or Wolfgang.
 </p>
 
-### A startup computer science student
 
-<p align="left">
-I am currently studying in SUSTech. I am interested in a lot of interesting topics including distributed machine learning, rust compilers and high performance computing.
-</p>
-
-### A Harry Potter fans
-
-<p align="left">
-I am a huge Harry Potter fans... and am honored to be sorted into the house of Hufflepuff! We are kind and always stay true to our friends. 
-</p>
-
-### A Sports Enthusiast: Frisbee, Rock Climbing and Gym Workout
-
-<p align="left">
-I enjoy playing Ultimate Frisbee in my spare time, usually acting as a cutter and trying to qualify myself for the handler position. I also enjoy rock climbing and gym workout.
-</p>
-
-### A Music Lover
-
-<p align="left">
-I enjoy a wide spectrum of music, in different genres and languages. I might prefer soft music while studying and thinking, but I am also a fan of pop music and R&B.
-</p>
 
-### Language Engager
-
-<p align="left">
-I enjoy learning different languages (Computer Language included). I am currently learning Rust and Python, also I have a great interest in learning French and Korean currently. (Previously, I have learned English and German.)

source/css/config.css

@@ -8,4 +8,29 @@
     --box-border-radius: 20px;
     --header-title-font-family: 'Harry P';
     --home-post-hover-scale: 1.025;
+}
+
+.badge {
+    display: inline-flex;
+    padding: 5px 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: white;
+    background-color: #007bff;
+    border-radius: 12px;
+    margin-left: 8px; /* Optional spacing between text and badge */
+    vertical-align: middle; /* Aligns with the text baseline */
+}
+
+.heading-with-badge {
+    margin: 12;
+    display: inline-flex;
+    align-items: center; /* Vertically center content */
+}
+
+.badge img {
+    width: 20px;  /* Set the image size */
+    height: 20px; /* Set the image size */
+    margin-left: 5px;
+    pointer-events: none;
 }