home: add project list

Author: Beelink

_v2/moduleart-website/src/assets/images/platforms/linux.png

@@ -0,0 +1,3 @@
+$text-color: #111;
+$link-color: #38F;
+$light-color: #aaa;

_v2/moduleart-website/src/assets/images/platforms/macos.png

@@ -9,7 +9,6 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: none;
-  text-align: center;
   color: #111;
   margin: 0;
 }

_v2/moduleart-website/src/assets/images/platforms/windows.png

@@ -0,0 +1,32 @@
+@import "../../assets/styles/variables.scss";
+
+.project-list {
+  padding: 0;
+  margin: 0;
+}
+
+.project {
+  list-style-type: none;
+  margin-bottom: 64px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  h2 {
+    font-size: 22px;
+    margin: 0 0 16px;
+
+    a, span, img {
+      vertical-align: middle;
+    }
+
+    .light {
+      color: $light-color;
+    }
+
+    img {
+      margin-right: 4px;
+    }
+  }
+}

_v2/moduleart-website/src/assets/images/projects/qsnip.png

@@ -1,7 +1,22 @@
 <template>
-  <div class="project-list">
-
-  </div>
+  <ul class="project-list">
+    <li v-for="(project, projectIndex) in projects" :key="projectIndex" class="project">
+      <h2>
+        <a :href="project.url">
+          <span>{{ project.title }}</span>
+          <span class="light"> for </span>
+          <img 
+            v-for="(platform, platformIndex) in project.platforms"
+            :key="platformIndex"
+            :src="getPlatformImage(platform)" 
+            :alt="platform"
+          /></a>
+      </h2>
+      <div class="image">
+        <img :src="getProjectImage(project.image)" :alt="project.title" />
+      </div>
+    </li>
+  </ul>
 </template>
 
 <script>
@@ -10,10 +25,35 @@ export default {
   data() {
     return {
       projects: [
-
+        {
+          title: "Quick Picture Viewer",
+          url: "https://moduleart.github.io/quick-picture-viewer",
+          image: "quick-picture-viewer.png",
+          platforms: [
+            "windows",
+          ],
+        },
+        {
+          title: "Qsnip",
+          url: "https://moduleart.github.io/qsnip",
+          image: "qsnip.png",
+          platforms: [
+            "windows",
+            "macos",
+            "linux",
+          ],
+        },
       ],
     }
   },
+  methods: {
+    getProjectImage(imageName) {
+      return require("../../assets/images/projects/" + imageName);
+    },
+    getPlatformImage(platformName) {
+      return require("../../assets/images/platforms/" + platformName + ".png");
+    },
+  },
 };
 </script>