Added small icons

src/assets/icons/earth.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-globe-americas" viewBox="0 0 16 16">
+  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484-.08.08-.162.158-.242.234-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/>
+</svg>

src/assets/icons/extension.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="white" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"><path d="M345.14,480H256V434.29a31.3,31.3,0,0,0-9.59-22.65c-7.67-7.56-18.83-11.81-30.57-11.64a44.38,44.38,0,0,0-28.45,10.67c-5.2,4.6-11.39,12.56-11.39,24.42V480H87.62A55.68,55.68,0,0,1,32,424.38V336H77.71c9.16,0,18.07-3.92,25.09-11A42.06,42.06,0,0,0,115,295.08C114.7,273.89,97.26,256,76.91,256H32V166.66a53.77,53.77,0,0,1,16.53-39A55.88,55.88,0,0,1,87.62,112h63.24V97.52A65.53,65.53,0,0,1,217.54,32c35.49.62,64.36,30.38,64.36,66.33V112h63.24A54.28,54.28,0,0,1,400,166.86V230.1h13.66c36.58,0,66.34,29,66.34,64.64,0,36.61-29.39,66.4-65.52,66.4H400v63.24C400,455.05,375.39,480,345.14,480Z"/></svg>

src/assets/icons/github.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="white" class="bi bi-github" viewBox="0 0 16 16">
+  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+</svg>

src/assets/icons/npm.svg

@@ -0,0 +1,7 @@
+<svg version="1.1" id="npm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 780 250" xml:space="preserve">
+<style type="text/css">
+	.st0{fill: white;}
+</style>
+<path class="st0" d="M240,250h100v-50h100V0H240V250z M340,50h50v100h-50V50z M480,0v200h100V50h50v150h50V50h50v150h50V0H480z M0,200h100V50h50v150h50V0H0V200z"/>
+</svg>

src/assets/icons/pwa.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 978 388" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;fill:white;">
+    <g transform="matrix(7.83465,0,0,7.83465,-398.586,-488.321)">
+        <path d="M142.662,103.442L146.265,94.331L156.668,94.331L151.73,80.51L157.905,64.896L175.59,111.852L162.548,111.852L159.526,103.442L142.662,103.442Z" style="fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(7.83465,0,0,7.83465,-398.586,-488.321)">
+        <path d="M131.535,109.284L150.467,62.328L137.916,62.329L124.965,92.673L115.755,62.329L106.108,62.329L96.22,92.673L89.246,78.845L82.935,98.288L89.343,109.284L101.695,109.284L110.631,82.072L119.15,109.284L131.535,109.284Z" style="fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(7.83465,0,0,7.83465,-398.586,-488.321)">
+        <path d="M62.789,93.166L70.52,93.166C72.862,93.166 74.947,92.905 76.776,92.382L78.775,86.223L84.363,69.007C83.938,68.333 83.452,67.694 82.905,67.093C80.036,63.917 75.838,62.33 70.312,62.33L50.875,62.33L50.875,109.286L62.789,109.286L62.789,93.166ZM73.022,73.132C74.143,74.26 74.703,75.77 74.703,77.66C74.703,79.566 74.21,81.077 73.225,82.194C72.144,83.435 70.155,84.056 67.257,84.056L62.789,84.056L62.789,71.441L67.29,71.441C69.991,71.441 71.902,72.004 73.022,73.132Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

src/components/Projects/Project.module.css

@@ -43,12 +43,28 @@
 
 .name {
   font-weight: 300;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
 }
 
 .description {
   font: var(--font-sm);
 }
 
+.techIcons {
+  position: absolute;
+  left: var(--gap-sm);
+  bottom: var(--gap-sm);
+  display: flex;
+  align-items: center;
+}
+
+.techIcon {
+  padding: calc(var(--gap-sm) / 2);
+  display: block;
+}
+
 @media screen and (max-width: 1080px) {
   .Project {
     flex-direction: column-reverse;
@@ -71,4 +87,8 @@
     width: 100%;
     max-width: 100%;
   }
+
+  .techIcons {
+    display: none;
+  }
 }

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
+          <h2>
-            class={styles.name}
-          >
             {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>
   )

src/components/Projects/iconList.ts

@@ -0,0 +1,60 @@
+import npmIcon from '../../assets/icons/npm.svg';
+import extensionIcon from '../../assets/icons/extension.svg';
+import pwaIcon from '../../assets/icons/pwa.svg';
+import githubIcon from '../../assets/icons/github.svg';
+
+export class Icon {
+  src: string;
+  offsets: {
+    x: number;
+    y: number;
+  }
+  scale: number;
+
+  git: boolean;
+  npm: boolean;
+
+  constructor(props: {
+    src: string;
+    offsets?: {
+      x?: number;
+      y?: number;
+    },
+    scale?: number;
+
+    git?: boolean;
+    npm?: boolean;
+  }) {
+    this.src = props.src
+    this.offsets = {
+      x: props.offsets?.x ?? 0,
+      y: props.offsets?.y ?? 0
+    }
+    this.scale = props.scale ?? 1
+    
+    this.git = !!props.git
+    this.npm = !!props.npm
+  }
+}
+
+export const npm = new Icon({
+  src: npmIcon,
+  offsets: { y: 3 },
+  scale: .8,
+  npm: true
+})
+
+export const extension = new Icon({
+  src: extensionIcon,
+})
+
+export const pwa = new Icon({
+  src: pwaIcon,
+  scale: .8
+})
+
+export const github = new Icon({
+  src: githubIcon,
+  git: true
+})
+

src/components/Projects/projectList.ts

@@ -7,21 +7,31 @@ import mockupPreview from '../../assets/projects/mockupPreview.png';
 import vkmutePreview from '../../assets/projects/vkmutePreview.png';
 import musanthropePreview from '../../assets/projects/musanthropePreview.png';
 
+import {
+  Icon, npm, extension, pwa, github
+} from './iconList';
+
 export class Project {
   name: string;
   preview: string;
   link: string;
+  repo?: string;
+  npm?: string;
   descriptionSlug: string;
   previewStyle?: string;
   halfWidth?: boolean;
+  icons?: Icon[];
 
   constructor(project: Project) {
     this.name = project.name
     this.preview = project.preview
     this.link = project.link
+    this.repo = project.repo
+    this.npm = project.npm
     this.descriptionSlug = project.descriptionSlug
     this.previewStyle = project.previewStyle
     this.halfWidth = project.halfWidth
+    this.icons = project.icons
   }
 }
 
@@ -36,21 +46,28 @@ export default [
     name: 'Worktime',
     preview: worktimePreview,
     link: 'https://anatolykopyl.github.io/worktime',
-    descriptionSlug: 'worktime_desc'
+    repo: 'https://github.com/anatolykopyl/worktime',
+    descriptionSlug: 'worktime_desc',
+    icons: [ pwa, github ]
   }),
   new Project({
     name: 'VK Mute',
     preview: vkmutePreview,
     link: 'https://chrome.google.com/webstore/detail/vk-mute/mcnkfnjggkbenehgfelnnkklpkpjeibl',
+    repo: 'https://github.com/anatolykopyl/vk-mute',
     descriptionSlug: 'vkmute_desc',
-    halfWidth: true
+    halfWidth: true,
+    icons: [ extension, github ]
   }),
   new Project({
     name: 'Vue 3D Mockup',
     preview: mockupPreview,
     link: 'https://anatolykopyl.github.io/vue-three-d-mockup/',
+    repo: 'https://github.com/anatolykopyl/vue-three-d-mockup',
+    npm: 'https://www.npmjs.com/package/vue-three-d-mockup',
     descriptionSlug: 'mockup_desc',
     halfWidth: true,
+    icons: [ npm, github ]
     // previewStyle: 'position: absolute; height: 50%;'
   }),
   new Project({