Update tag layout

Author: uintdev

src/assets/sass/_cards.scss

@@ -48,8 +48,23 @@
                 margin-bottom: 2px;
             }
 
-            .type {
-                font-size: 0.82rem;
+            .tag-container {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 14px;
+                height: 100%;
+                justify-content: left;
+                align-items: stretch;
+                font-size: 0.74rem;
+                margin-top: 10px;
+
+                .tag {
+                    border-radius: var(--radius-card);
+                    background-color: transparent;
+                    border: 1px solid var(--color-secondary);
+                    color: var(--color-secondary);
+                    padding: 6px 10px;
+                }
             }
         }
 

src/data/projects.json

@@ -1,43 +1,38 @@
 {
     "metadata": {
         "title": "Projects",
-        "description": "See more on <a href='https://github.com/uintdev' class='clickable'>GitHub</a>"
+        "description": "Creations. See more on <a href='https://github.com/uintdev' class='clickable'>GitHub</a>"
     },
     "list": [
         {
             "name": "QRServ",
-            "type": "App",
             "description": "Transfer files with ease over a network",
             "url": "https://github.com/uintdev/qrserv",
-            "tags": ["Flutter", "Dart"]
+            "tags": ["App", "Flutter", "Dart"]
         },
         {
             "name": "uintdev web",
-            "type": "Website",
             "description": "Modular main website, with bundled goodness",
             "url": "https://github.com/uintdev/uintdev_web",
-            "tags": ["Webpack", "TypeScript", "SCSS"]
+            "tags": ["Website", "TypeScript", "SCSS"]
         },
         {
             "name": "Email Addr Extract",
-            "type": "CLI",
             "description": "High performance email address extraction tool",
             "url": "https://github.com/uintdev/email-addr-extract",
-            "tags": ["Rust"]
+            "tags": ["CLI", "Rust"]
         },
         {
             "name": "Discord Cache Dump",
-            "type": "CLI",
             "description": "Save and identify cached files from Discord's desktop clients",
             "url": "https://github.com/uintdev/Discord-Cache-Dump",
-            "tags": ["Go"]
+            "tags": ["CLI", "Go"]
         },
         {
             "name": "Ducky HID WSI",
-            "type": "Firmware",
             "description": "Custom USB Rubber Ducky HID only firmware with status indication",
             "url": "https://github.com/uintdev/Ducky_HID_WSI",
-            "tags": ["C"]
+            "tags": ["Firmware", "C"]
         }
     ]
 }

src/views/index.ejs

@@ -82,8 +82,10 @@
                     <a class="card" href="<%= projectEntry.url %>">
                         <div class="info">
                             <div class="name"><%= projectEntry.name %></div>
-                            <div class="type">
-                                <%= projectEntry.type + ' - ' + projectEntry.tags.join(', ') %>
+                            <div class="tag-container">
+                                <% projectEntry.tags.forEach(function(tag) { %>
+                                    <span class="tag"><%= tag %></span>
+                                <% }); %>
                             </div>
                         </div>
                         <div class="description"> <%= projectEntry.description %> </div>