home + j4mesen card

src/components/card.vue

@@ -0,0 +1,45 @@
+<template>
+  <router-link :to="link" class="card">
+    <img  alt="" :src="require(`../assets/${photo}`)">
+    <div class="card-inner">
+      <p class="name"> {{name}} </p>
+      <p class="desc"> {{desc}} </p>
+    </div>
+  </router-link>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'card',
+  props: {
+    name: String,
+    photo: String,
+    desc: String,
+    link: String
+  }
+});
+</script>
+
+<style lang="sass" scoped>
+  .card
+    background-color: var(--dark-bg2)
+    display: flex
+    flex-direction: row
+    margin: 1rem
+    border-radius: 8px
+    width: 24rem
+    user-select: none
+    color: inherit
+    text-decoration: inherit
+    img
+      width: 84px
+      border-radius: 8px 0 0 8px
+    .card-inner
+      padding: .2rem
+      margin-left: .5rem
+      .name
+        font-size: 1.7em
+        letter-spacing: 0.1em
+</style>

src/components/gractwosvg.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M131.35 206.17L67.52 411.84L76.03 508.3L120.71 526.03L158.3 510.43L234.89 437.38L320 416.1L350.5 299.08L325.67 192.7L295.18 192.7L288.09 198.37L214.33 198.37L202.98 187.02L148.37 187.02L131.35 206.17Z" id="c1KEj4xU1k"></path><path d="M93.05 411.84L97.3 493.4L119.29 504.04L146.24 496.24L220 417.52L297.3 395.53L320 313.97L299.43 288.44L252.62 292.7L238.44 320L209.01 344.47L161.84 341.63L123.55 320L93.05 411.84Z" id="ihZdDOksj"></path><path d="M450.5 204.04L485.96 179.93L528.51 179.93L580.99 250.14L585.25 301.21L602.27 345.18L607.94 425.32L588.09 478.51L559.01 487.73L528.51 476.38L474.61 428.87L359.01 433.83L336.31 414.68L361.84 327.45L353.33 233.83L368.94 209.72L450.5 204.04Z" id="e1ajrh1Ybj"></path><path d="M393.76 333.83L384.54 411.84L488.79 406.88L543.4 461.49L559.01 467.87L571.77 461.49L584.54 421.06L576.03 346.6L559.01 326.03L532.77 333.83L504.4 322.48L479.57 301.21L424.96 304.04L393.76 333.83Z" id="a5XNjHRD0B"></path></defs><g><g><g><use xlink:href="#c1KEj4xU1k" opacity="1" fill="#282828" fill-opacity="1"></use><g><use xlink:href="#c1KEj4xU1k" opacity="1" fill-opacity="0" stroke="#282828" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#ihZdDOksj" opacity="1" fill="#1a1a1a" fill-opacity="1"></use><g><use xlink:href="#ihZdDOksj" opacity="1" fill-opacity="0" stroke="#1a1a1a" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#e1ajrh1Ybj" opacity="1" fill="#282828" fill-opacity="1"></use><g><use xlink:href="#e1ajrh1Ybj" opacity="1" fill-opacity="0" stroke="#282828" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#a5XNjHRD0B" opacity="1" fill="#1a1a1a" fill-opacity="1"></use><g><use xlink:href="#a5XNjHRD0B" opacity="1" fill-opacity="0" stroke="#1a1a1a" stroke-width="1" stroke-opacity="1"></use></g></g></g></g></svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'gractwosvg',
+});
+</script>