Merge pull request #175 from EHEGUY/feature/category-badges

Add category badges to project detail page (Fixes #22)

Author: komalharshita

static/style.css

@@ -128,6 +128,48 @@ ul, ol { list-style: none; }
   line-height: 1.75;
 }
 
+/* ---- Badges ------------------------------------------------ */
+.badge-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+  margin-bottom: 24px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  background: var(--gray-100);
+  color: var(--gray-600);
+}
+
+.badge--beginner {
+  background: var(--green-100);
+  color: var(--green-500);
+}
+
+.badge--web {
+  background: var(--indigo-100);
+  color: var(--indigo-600);
+}
+
+.badge--python {
+  background: var(--yellow-100);
+  color: var(--orange-500);
+}
+
+.badge--data {
+  background: var(--purple-100);
+  color: var(--purple-600);
+}
+
 /* ---- Navigation ------------------------------------------- */
 .navbar {
   position: fixed;

templates/project.html

@@ -38,14 +38,16 @@
 
       <div class="detail-hero-content">
         <div class="detail-hero-left">
-          <!-- Difficulty and interest tags -->
-          <div class="detail-tags">
-            <span class="detail-tag detail-tag--level">{{ project.level }}</span>
-            <span class="detail-tag detail-tag--interest">{{ project.interest }}</span>
-            <span class="detail-tag detail-tag--time">{{ project.time }} effort</span>
-          </div>
-
           <h1 class="detail-title">{{ project.title }}</h1>
+          <!-- Difficulty, interest, and skill badges -->
+          <div class="badge-group">
+            <span class="badge badge--{{ project.level | lower }}">{{ project.level }}</span>
+            <span class="badge badge--{{ project.interest | lower }}">{{ project.interest }}</span>
+            {% for skill in project.skills %}
+            <span class="badge badge--{{ skill | lower }}">{{ skill }}</span>
+            {% endfor %}
+            <span class="badge badge--time">{{ project.time }} effort</span>
+          </div>
           <p class="detail-description">{{ project.description }}</p>
         </div>