Initial commit

src/App.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import CharacterList from "@/components/CharacterList.vue";
+import CharacterItem from "@/components/CharacterItem.vue";
+</script>
+
+<template>
+  <main>
+    <CharacterList>
+      <CharacterItem class="viktor" href="/viktor/">
+        <template #image>
+          <img src="@/assets/viktor-portrait.png" alt="Viktor Portrait" />
+        </template>
+
+        <template #name>Viktor Kraastav</template>
+      </CharacterItem>
+
+      <CharacterItem class="sebin" href="/sebin/">
+        <template #image>
+          <img src="@/assets/sebin-portrait.png" alt="Sebin Portrait" />
+        </template>
+
+        <template #name>Sebin Nyshkim</template>
+      </CharacterItem>
+
+      <CharacterItem class="jarek" href="/jarek/">
+        <template #image>
+          <img src="@/assets/jarek-portrait.png" alt="Jarek Portrait" />
+        </template>
+
+        <template #name>Jarek Vakhtang</template>
+      </CharacterItem>
+    </CharacterList>
+  </main>
+</template>
+
+<style lang="scss">
+.sebin,
+.viktor,
+.jarek {
+  &:before,
+  &:after {
+    content: "";
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    transition: all 0.2s ease-in-out;
+
+    filter: saturate(0%);
+
+    z-index: -1;
+  }
+
+  &:hover {
+    &:before,
+    &:after {
+      filter: saturate(100%);
+    }
+  }
+}
+
+.sebin {
+  font-family: "Exo", sans-serif;
+
+  &:before {
+    background-image: radial-gradient(
+        circle at bottom right,
+        #800f0f 5%,
+        transparent 50%
+      ),
+      radial-gradient(circle at top left, #195673 5%, #170821 100%);
+  }
+
+  &:after {
+    background-image: url(@/assets/subtle-prism.svg);
+    mix-blend-mode: multiply;
+  }
+}
+
+.viktor {
+  font-family: "Secular One", serif;
+
+  &:before {
+    background-color: #e7c7b1;
+  }
+
+  a {
+    color: #493428;
+  }
+
+  img {
+    background-color: #2d4c5a;
+  }
+}
+
+.jarek {
+  font-family: "Rubik Dirt", sans-serif;
+
+  &:before {
+    background-color: #6b682f;
+  }
+}
+</style>