Added small icons

src/components/Projects/Project.tsx

@@ -1,11 +1,20 @@
+import { For } from 'solid-js';
 import { useI18n } from "@solid-primitives/i18n";
 
 import styles from './Project.module.css';
 import type { Project } from './projectList';
+import earthIcon from '../../assets/icons/earth.svg';
+import { Icon } from './iconList';
 
 export default (props: { project: Project, odd: boolean }) => {
   const [t] = useI18n();
 
+  function linkFor(icon: Icon) {
+    if (icon.git) return props.project.repo
+    if (icon.npm) return props.project.npm
+    return undefined
+  }
+
   return (
     <div
       class={styles.Project}
@@ -25,16 +34,34 @@ export default (props: { project: Project, odd: boolean }) => {
         <a
           href={props.project.link}
           target="_blank"
+          class={styles.name}
         >
-          <h2
-            class={styles.name}
-          >
+          <h2>
             {props.project.name}
           </h2>
+          <img src={earthIcon} height="20px" />
         </a>
         <div class={styles.description}>
           {t(props.project.descriptionSlug)}
         </div>
+
+        <div class={styles.techIcons}>
+          <For each={props.project.icons}>{(icon: Icon) =>
+            <a 
+              href={linkFor(icon)}
+              target="_blank"
+              class={styles.techIcon}
+            >
+              <img
+                src={icon.src}
+                style={{
+                  transform: `translate(${icon.offsets?.x}px, ${icon.offsets?.y}px) scale(${icon.scale})`,
+                  height: '20px',
+                }}
+              />
+            </a>
+          }</For>
+        </div>
       </div>
     </div>
   )