home + j4mesen card

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>gractwo-smol.png">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Gractwo</title>
     <meta name="description" content="Strona internetowa Gractwa.">
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages

src/App.vue

@@ -9,8 +9,8 @@
       <h1>Gractwo</h1>
     </router-link>
     <div>
-      <router-link to="/">główna</router-link>
-      <router-link to="/o-nas">o nas</router-link>
+      <!-- <router-link to="/">główna</router-link> -->
+      <!-- <router-link to="/o-nas">o nas</router-link> -->
       <router-link to="/discord">discord</router-link>
       <router-link to="/facebook">facebook</router-link>
     </div>

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>

src/router/index.ts

@@ -7,18 +7,6 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Home',
     component: Home
   },
-  {
-    path: '/o-nas',
-    name: 'o-nas',
-    // redirect: to => {
-      // window.location.href = 'http://google.com'
-      // return '/redirecting' // not important since redirecting
-    // }
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  },
   {
     path: '/discord',
     name: 'Discord',
@@ -36,6 +24,14 @@ const routes: Array<RouteRecordRaw> = [
       window.location.replace('https://facebook.com/groups/gractwo')
       return '/facebook'
     }
+  },
+  {
+    path: '/j4mesen',
+    name: 'j4mesen',
+    redirect: () => {
+      window.location.replace('https://manczak.net')
+      return '/j4mesen'
+    }
   }
 ]
 

src/views/Home.vue

@@ -1,18 +1,56 @@
 <template>
-  <div class="home">
-    <!-- <img alt="Vue logo" src="../assets/gractwo.png" style="height: 72px"> -->
-    <HelloWorld msg="Welcum to Your Vue.js + TypeScript App"/>
-  </div>
+  <main>
+    <div class="first">
+      <h1>Witajcie w Gractwie!</h1>
+      <p>
+        Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie? <br>
+      </p>
+      <gractwosvg class="g"/>
+    </div>
+    <div class="second">
+      <h1>Spis Moderacji</h1>
+      <card
+        name="Jakub Mańczak"
+        photo="j4mesen.png"
+        desc="j4mesen | wannabe programista"
+        link="/j4mesen"
+      />
+    </div>
+  </main>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+import gractwosvg from '@/components/gractwosvg.vue'; // @ is an alias to /src
+import card from '@/components/card.vue';
 
 export default defineComponent({
   name: 'Home',
-  // components: {
-  //   HelloWorld,
-  // },
+  components: {
+    gractwosvg,
+    card
+  },
 });
 </script>
+
+<style lang="sass">
+  main
+    padding: 3rem 8rem
+    .g
+      position: absolute
+      top: 0
+      right: 15%
+      animation-name: logovibe
+      animation-iteration-count: infinite
+      animation-duration: 2s
+      z-index: -10
+    .second
+      margin-top: 18rem
+  @keyframes logovibe
+    0%
+      transform: rotate(5deg)
+    50%
+      transform: rotate(-9deg) scale(0.9)
+    100%
+      transform: rotate(5deg)
+</style>