From 7bf61a50766293568cd64a1f15f9ee31d903cbd1 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Sun, 3 Jul 2022 15:24:13 +0900
Subject: [PATCH 1/3] wip: Kohji's cerd

---
 components/Card/Monsat.vue | 72 +++++++++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/components/Card/Monsat.vue b/components/Card/Monsat.vue
index 76bda2a..08f6876 100644
--- a/components/Card/Monsat.vue
+++ b/components/Card/Monsat.vue
@@ -12,12 +12,45 @@ const props = defineProps<Props>()
 
   <a
     :href="`https://github.com/${props.member.id}`" target="_blank" rel="noopener noreferrer"
-    class="wrapper block bg-slate-50 rounded-md px-6 py-5 drop-shadow">
+    class="wrapper block bg-slate-50 rounded-md drop-shadow">
 
-    <div class="w-full flex items-center space-x-4">
-      <div>
-        <img class="w-16 h-16 object-cover rounded-full" :src="`https://github.com/${props.member.id}.png`" alt="">
-        <div class="glasses hidden absolute w-12 top-[48%] left-[0.5rem]">
+    <div class="absolute top-0 left-0 w-full h-full py-2">
+      <div v-for="(num, index) of 4" :key="index" class="kohji-wrapper w-full mb-2">
+        <div v-for="(num, index) of 3" class="kohji inline-block w-1/3">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 345.228 65.413">
+            <g opacity="0.39">
+              <g>
+                <path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#f5007b"/>
+                <path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#f5007b"/>
+                <path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#f5007b"/>
+                <path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#f5007b"/>
+                <path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#f5007b"/>
+              </g>
+              <g transform="translate(12.419)">
+                <path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#0071f5"/>
+                <path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#0071f5"/>
+                <path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#0071f5"/>
+                <path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#0071f5"/>
+                <path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#0071f5"/>
+              </g>
+              <g transform="translate(6.21)">
+                <path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#fff"/>
+                <path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#fff"/>
+                <path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#fff"/>
+                <path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#fff"/>
+                <path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#fff"/>
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full h-full flex justify-center items-center">
+
+      <div class="img-wrapper">
+        <img class="w-[5rem] h-[5rem] object-cover rounded-full" :src="`https://github.com/${props.member.id}.png`" alt="">
+        <div class="glasses hidden absolute w-[3.5rem] top-[47%] left-[0.75rem]">
           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88.672 33.155">
             <defs>
               <filter id="ifn0653" x="0" y="0" width="88.672" height="33.155" filterUnits="userSpaceOnUse">
@@ -38,14 +71,7 @@ const props = defineProps<Props>()
           </svg>
         </div>
       </div>
-      <div>
-        <div class="text-lg text-slate-800 font-bold" v-html="props.member.displayname"></div>
-        <div class="text-sm text-slate-500" v-html="props.member.id"></div>
-      </div>
-    </div>
 
-    <div class="mt-6">
-      <p class="text-sm text-slate-700 leading-6" v-html="props.member.bio"></p>
     </div>
 
   </a>
@@ -53,7 +79,29 @@ const props = defineProps<Props>()
 </template>
 
 <style scoped>
+a.wrapper {
+  transition: all .3s ease;
+}
+a.wrapper:hover {
+  background: black;
+}
+
+a.wrapper:hover .img-wrapper {
+  animation: bang .5s cubic-bezier(0.83, 0, 0.17, 1) infinite;
+}
+
 a.wrapper:hover .glasses {
   display: block;
+  transition: all .3s ease;
+}
+
+@keyframes bang {
+  0% {transform: scale(0.9)}
+  50% {transform: scale(1.2)}
+  100% {transform: scale(0.9)}
+}
+
+@keyframes kohji {
+
 }
 </style>
\ No newline at end of file

From f0f1a2ee500af8bf271dd49087cfbf05f4d1c6e6 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Sun, 3 Jul 2022 15:24:13 +0900
Subject: [PATCH 2/3] wip: Kohji's card

---
 components/Card/Monsat.vue | 72 +++++++++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/components/Card/Monsat.vue b/components/Card/Monsat.vue
index 76bda2a..08f6876 100644
--- a/components/Card/Monsat.vue
+++ b/components/Card/Monsat.vue
@@ -12,12 +12,45 @@ const props = defineProps<Props>()
 
   <a
     :href="`https://github.com/${props.member.id}`" target="_blank" rel="noopener noreferrer"
-    class="wrapper block bg-slate-50 rounded-md px-6 py-5 drop-shadow">
+    class="wrapper block bg-slate-50 rounded-md drop-shadow">
 
-    <div class="w-full flex items-center space-x-4">
-      <div>
-        <img class="w-16 h-16 object-cover rounded-full" :src="`https://github.com/${props.member.id}.png`" alt="">
-        <div class="glasses hidden absolute w-12 top-[48%] left-[0.5rem]">
+    <div class="absolute top-0 left-0 w-full h-full py-2">
+      <div v-for="(num, index) of 4" :key="index" class="kohji-wrapper w-full mb-2">
+        <div v-for="(num, index) of 3" class="kohji inline-block w-1/3">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 345.228 65.413">
+            <g opacity="0.39">
+              <g>
+                <path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#f5007b"/>
+                <path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#f5007b"/>
+                <path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#f5007b"/>
+                <path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#f5007b"/>
+                <path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#f5007b"/>
+              </g>
+              <g transform="translate(12.419)">
+                <path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#0071f5"/>
+                <path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#0071f5"/>
+                <path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#0071f5"/>
+                <path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#0071f5"/>
+                <path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#0071f5"/>
+              </g>
+              <g transform="translate(6.21)">
+                <path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#fff"/>
+                <path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#fff"/>
+                <path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#fff"/>
+                <path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#fff"/>
+                <path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#fff"/>
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full h-full flex justify-center items-center">
+
+      <div class="img-wrapper">
+        <img class="w-[5rem] h-[5rem] object-cover rounded-full" :src="`https://github.com/${props.member.id}.png`" alt="">
+        <div class="glasses hidden absolute w-[3.5rem] top-[47%] left-[0.75rem]">
           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88.672 33.155">
             <defs>
               <filter id="ifn0653" x="0" y="0" width="88.672" height="33.155" filterUnits="userSpaceOnUse">
@@ -38,14 +71,7 @@ const props = defineProps<Props>()
           </svg>
         </div>
       </div>
-      <div>
-        <div class="text-lg text-slate-800 font-bold" v-html="props.member.displayname"></div>
-        <div class="text-sm text-slate-500" v-html="props.member.id"></div>
-      </div>
-    </div>
 
-    <div class="mt-6">
-      <p class="text-sm text-slate-700 leading-6" v-html="props.member.bio"></p>
     </div>
 
   </a>
@@ -53,7 +79,29 @@ const props = defineProps<Props>()
 </template>
 
 <style scoped>
+a.wrapper {
+  transition: all .3s ease;
+}
+a.wrapper:hover {
+  background: black;
+}
+
+a.wrapper:hover .img-wrapper {
+  animation: bang .5s cubic-bezier(0.83, 0, 0.17, 1) infinite;
+}
+
 a.wrapper:hover .glasses {
   display: block;
+  transition: all .3s ease;
+}
+
+@keyframes bang {
+  0% {transform: scale(0.9)}
+  50% {transform: scale(1.2)}
+  100% {transform: scale(0.9)}
+}
+
+@keyframes kohji {
+
 }
 </style>
\ No newline at end of file

From 9bea049ea71f903c13088d2c2f6f8871cd1762f8 Mon Sep 17 00:00:00 2001
From: rie-oki-agn <rieoki.style.agn@gmail.com>
Date: Sun, 3 Jul 2022 16:52:14 +0900
Subject: [PATCH 3/3] chore: Kohji's card

---
 components/Card/Monsat.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/Card/Monsat.vue b/components/Card/Monsat.vue
index 08f6876..665aead 100644
--- a/components/Card/Monsat.vue
+++ b/components/Card/Monsat.vue
@@ -83,7 +83,7 @@ a.wrapper {
   transition: all .3s ease;
 }
 a.wrapper:hover {
-  background: black;
+  background: rgb(180, 180, 180);
 }
 
 a.wrapper:hover .img-wrapper {
@@ -97,11 +97,8 @@ a.wrapper:hover .glasses {
 
 @keyframes bang {
   0% {transform: scale(0.9)}
-  50% {transform: scale(1.2)}
+  50% {transform: scale(1.1)}
   100% {transform: scale(0.9)}
 }
 
-@keyframes kohji {
-
-}
 </style>
\ No newline at end of file