add highlight

1 files changed, 79 insertions, 3 deletions

diff --git a/_posts/2026-11-02-my-certification.md b/_posts/2026-11-02-my-certification.md
index b1952ed..46fdb28 100644
--- a/_posts/2026-11-02-my-certification.md
+++ b/_posts/2026-11-02-my-certification.md
@@ -195,10 +195,74 @@ certificates:
       - title: "Web Development Essential (Belajar Dasar Pemrograman Web)"
         url: "https://www.dicoding.com/certificates/72ZDE02K9PYW"
         year: "Jun 2020"
+
+highlights:
+  - title: "Bachelor of Technology (B.Tech) in Information Technology"
+    badges:
+      - alt: "Chandigarh University"
+        src: "/assets/chandigarh-uni.webp"
+  - title: "AWS Cloud Practitioner"
+    url: "#cloud-practitioner-essentials-belajar-dasar-aws-cloud"
+    badges:
+      - alt: "AWS"
+        src: "/assets/aws.webp"
+      - alt: "dicoding"
+        src: "/assets/dicoding.webp"
+  - title: "Cybersecurity Specialization (5 courses)"
+    badges:
+    url: "#introduction-to-cyber-security"
+    badges:
+      - alt: "Coursera"
+        src: "/assets/coursera.webp"
+  - title: "Academic Writing/IPR"
+    url: "#academic-paper-writing-and-ipr"
+    badges:
+      - alt: "LinkedIn Learning"
+        src: "/assets/LinkedIn_Learning.webp"
+  - title: "Discrete Mathematics & Quantum Mechanics"
+    url: "#quantum-mechanics-i"
+    badges:
+      - alt: "NPTEL"
+        src: "/assets/nptel.webp"
 ---
 
 <table style="width:100%">
   <tbody>
+    {% for highlight in page.highlights %}
+      <tr>
+        <td>{% if highlight.url %}<a href="{{ highlight.url }}">{{ highlight.title }}</a>{% else %}{{ highlight.title }}{% endif %}</td>
+        <td style="text-align:right">
+		{%- for badge in highlight.badges %}
+	    {% include 88x31.html url=highlight.url image=badge.src alt=badge.alt %}
+		{% endfor -%}
+		</td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>
+
+<style>
+  :target {
+    background: #fff3a3;
+    outline: 2px solid #e0b000;
+    scroll-margin-top: 1rem;
+  }
+  @media (prefers-color-scheme: dark) {
+    :target {
+      background: #3b3218;
+      color: #fff4c2;
+      outline-color: #d6b94c;
+	}
+  }
+}
+</style>
+
+<div style="height:2rem"></div>
+
+<details>
+
+<table style="width:100%;padding-top:1em">
+  <tbody>
     {% for group in page.certificates %}
       <!-- Platform Logo Header -->
       <tr>
@@ -209,7 +273,7 @@ certificates:
 
       <!-- Individual Courses/Certificates -->
       {% for item in group.items %}
-        <tr>
+        <tr id="{{ item.title | slugify }}">
           <td>
             {% if item.url %}
               <a href="{{ item.url }}">{{ item.title }}</a>
@@ -225,10 +289,22 @@ certificates:
   </tbody>
 </table>
 
-<div style="height:200px"></div>
-
 <style>
+  details {
+    background: #f8f9fa;
+	border: 1px solid #a2a9b1;
+	padding: 1ex;
+  }
   table a {
     text-decoration: none;
   }
+  @media (prefers-color-scheme: dark) {
+    details {
+	  background: #202122;
+	  border-color: #72777d;
+	}
+  }
 </style>
+</details>
+
+<div style="height:2rem"></div>