cards are rendered in a stack

backend/db/data-generator/index.js

@@ -70,10 +70,9 @@ const generateUsers = () => {
 
         var mediaArray = []
         for (let i=0; i < 3; i++) {
-            
+            mediaArray.push(random.media())
         }
-
-        user.user_media = random.media()
+        user.user_media = mediaArray
     })
     console.log('COMPLETED: Generated Users...')
     return users

backend/db/data-generator/random.js

@@ -30,7 +30,7 @@ const randomName = (length = 4) => {
     }
     return str
 }
-const randomMedia = max => {
+const randomMedia = () => {
     const stockimg = [
         'https://i.imgur.com/a4wirDS.png',
         'https://i.imgur.com/F6GxGXG.jpeg',
@@ -40,7 +40,7 @@ const randomMedia = max => {
         'https://i.imgur.com/rOjRCgo.jpeg',
         'https://i.imgur.com/FwSdQww.jpeg',
         'https://i.imgur.com/JjZyzXL.jpeg',
-
+        'https://i.imgur.com/1DsSQ1s.jpeg',
     ]
     return randomValFrom(stockimg)
 }

frontend/src/components/ProfileCardList.vue

@@ -6,6 +6,7 @@ section.profile_card_list.w-full
             :key='profile.profile_id'
             @throwout='swipped(profile)'
             v-for='profile in profiles'
+            :style='{ "left": `vh` }'
         )
             .card.b-solid.rounded.p-0.bg-cover(
                 :style='{ "background-image": `url(${profile.user.user_media})` }'
@@ -17,8 +18,6 @@ section.profile_card_list.w-full
 </template>
 
 <script>
-
-
 export default {
     name: 'ProfileCardList',
     props: {
@@ -77,10 +76,29 @@ export default {
 }
 </script>
 <style lang="postcss">
-.profile_card_list_container
+@import '../sss/card.scss'
+
+.profile_card_list
     display: flex
     justify-content: center
     margin: 5vh 0 0 0
+    position: relative
+
+
+.profile_card_list_container
+    margin: 0 auto
+    width: 30%
+    position: relative
+    .swipe
+        list-style: none
+        background: #fff
+        box-shadow: 0 0 2px rgba(0,0,0,.2), 1px 1px 1px rgba(0,0,0,.2)
+        position: absolute
+        line-height: 300px
+        text-align: center
+        border: 1px solid #ECECEC
+        border-radius: 8px
+        
 
 .swipe
     
@@ -92,7 +110,6 @@ export default {
     max-width: 85vw
     height: 50vh
     background-position: center
-    border-radius: 3vh
     border: 1px solid #fff
     &_content
         width: 100%

frontend/src/sss/card.scss

@@ -0,0 +1,18 @@
+$n: 100;
+$cardbase: 2px;
+$cardtop: -1px;
+$index: 9999;
+
+@for $i from 0 through $n {
+  .swipe:nth-child(#{$i}) {
+    position: absolute;
+    left: calc($cardbase * $i);
+    top: calc($cardtop * $i);
+    z-index: calc($index - $i);
+  }
+}
+
+
+.swipe .card h3 {
+    color: blue!important;
+}