Project page touch up

src/components/Projects.jsx

@@ -2,28 +2,41 @@ import styles from '../styles/components/Projects.module.scss';
 
 const PROJECTS = [
   {
-    name: 'Klapi - Unified Control Panel',
+    name: 'Klapi - Unified content management panel',
     desc: 'Web interface to view and manage data held by Livonsaaren Tietokonepaja. Easy to customize serving various customer solutions.',
     tags: ['.NET', 'React', 'SQLite'],
     href: 'https://klapi.tietokonepaja.fi/',
-    star: false,
+    sourceHref: 'https://github.com',
   },
   {
-    name: 'Hattara - Online office',
+    name: 'Hattara - Shared online office',
     desc: 'Why to code your own when there is working open source solution to host on your own server? Hattara is a self-hosted cloud office solution for small teams and individuals.',
     tags: ['Apache2', 'Ubuntu Server', 'NextCloud'],
     href: 'https://hattara.tietokonepaja.fi/',
-    star: false,
+    sourceHref: 'https://github.com',
   },
   {
-    name: 'Runosaari festival website - Pro bono',
+    name: 'Runosaari festival website - Pro bono project',
     desc: "Supporting local culture initiatives have always been close to my heart. I'm proudly helping Runosaari festival with their website and online presence already for the sixth year!",
     tags: ['React', 'Vite', 'Apache2', 'Ubuntu Server'],
     href: 'https://www.runosaari.fi/',
-    star: false,
+    sourceHref: 'https://github.com',
   },
 ];
 
+const getTagColor = (tag) => {
+  const colorMap = {
+    '.NET': 'tagDotnet',
+    React: 'tagReact',
+    SQLite: 'tagSqlite',
+    Apache2: 'tagApache',
+    'Ubuntu Server': 'tagUbuntu',
+    NextCloud: 'tagNextcloud',
+    Vite: 'tagVite',
+  };
+  return colorMap[tag] || 'tagDefault';
+};
+
 export default function Projects() {
   return (
     <section id="projects" className={styles.projects}>
@@ -36,19 +49,25 @@ export default function Projects() {
 
         <div className={styles.grid}>
           {PROJECTS.map((p) => (
-            <article key={p.name} className={`${styles.card} ${p.star ? styles.featured : ''}`}>
-              {p.star && <span className={styles.featuredBadge}>Featured</span>}
+            <article key={p.name} className={styles.card}>
               <div className={styles.cardTop}>
                 <span className={styles.folderIcon}>⬡</span>
-                <a href={p.href} className={styles.externalLink} aria-label={`Open ${p.name}`}>
-                  ↗
-                </a>
+                <div className={styles.cardLinks}>
+                  <a href={p.href} className={styles.externalLink} aria-label={`Open ${p.name}`}>
+                    ↗
+                  </a>
+                  <a href={p.sourceHref} className={styles.sourceLink} aria-label={`View source code for ${p.name}`}>
+                    📦
+                  </a>
+                </div>
               </div>
               <h3 className={styles.cardName}>{p.name}</h3>
               <p className={styles.cardDesc}>{p.desc}</p>
               <ul className={styles.tags}>
                 {p.tags.map((t) => (
-                  <li key={t}>{t}</li>
+                  <li key={t} className={styles.tagItem}>
+                    <span className={`${styles.tagPill} ${styles[getTagColor(t)]}`}>{t}</span>
+                  </li>
                 ))}
               </ul>
             </article>