added template for v-for

luckydiamond/src/assets/css/ComponentsStyles/developer.css

@@ -13,7 +13,7 @@
     height: 269px;
     border-radius: 22px;
     border: 3px solid #595959 ;
-    background-color: #742271;
+    /*background-color: #742271;*/
 }
 
 .developer-card__about-text {
@@ -30,17 +30,18 @@
     font-family: 'Montserrat';
     color: #fff;
     font-size: 32px;
+    margin-bottom: 20px;
 }
 
 .developer-card__technology {
     display: flex;
-    margin: 30px 0 0 15px;
+    margin: 5px 0 0 15px;
     font-family: 'Montserrat';
 }
 
 .developer-card__technology img {
-    width: 15px;
-    height: 17px;
+    width: 21px;
+    height: 21px;
     margin-right: 3px;
 }
 
@@ -60,7 +61,12 @@
 .developer-card__skin {
     display: flex;
     align-items: flex-end;
-    margin-left: 30px;
+    margin-left: 15px;
+}
+
+.developer-card__skin img {
+    width: 212px;
+    height: 212px;
 }
 
 /*the and card 1*/

luckydiamond/src/components/DeveloperComponent.vue

@@ -1,60 +1,75 @@
 <template>
-  <div class="developer-card__content">
-    <div class="developer-card__width">
-      <div class="developer-card__text">
-        <div class="developer-card__about-text">
-          <p>фронтэндер</p>
-          <h1>busha888</h1>
+  <ul>
+    <li v-for="developer in (DevelopersOptions)" :key="developer.id">
+      <div class="developer-card__content" v-if="developer.id <= 4">
+        <div class="developer-card__width" :style="{ background: developer.background }">
+          <div class="developer-card__text">
+            <div class="developer-card__about-text">
+              <p>{{ developer.userRole }}</p>
+              <h1>{{ developer.username }}</h1>
+            </div>
+            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
+              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
+              <p>{{ techText }}</p>
+            </div>
+            <div class="developer-card__socials">
+              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
+                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
+              </div>
+            </div>
+          </div>
+          <div class="developer-card__skin">
+            <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
+          </div>
         </div>
-        <div class="developer-card__technology">
-          <img src="@/assets/icons-developcard/html.png" alt="html">
-          <p>HTML 5,CSS</p>
-        </div>
-        <div class="developer-card__socials">
-          <a href="https://tpverstak.ru/flex-cheatsheet/"><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
-          <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
-          <a href=""><img src="@/assets/icons-developcard/like.png" alt=""></a>
-          <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
-        </div>
-      </div>
-      <div class="developer-card__skin">
-        <img src="@/assets/icons-developcard/busha888.png" alt="">
-        </div>
-    </div>
-    <div class="developer-card__height">
-      <div class="developer-card-height__text">
-        <div class="developer-card-height__about-text">
-          <p>Бэкендер</p>
-          <h1>Hepatir</h1>
-        </div>
-        <div class="developer-card-height__technology techonology-styles">
-          <img src="../assets/icons-developcard/csharp-logo.png" alt="html">
-          <p>ASP, .NET, MongoDB</p>
-        </div>
-        <div class="developer-card-height__technology-two-column techonology-styles">
-          <img src="../assets/icons-developcard/sql-logo.png" alt="html">
-          <p>SQL</p>
-        </div>
-        </div>
-        <div class="developer-card-height__skin">
-          <div class="developer-card-height__skin-content">
-            <div class="developer-card-height__social-icons">
-            <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
-            <a href=""><img src="@/assets/icons-developcard/discord.png" alt=""></a>
-            <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
+        <div class="developer-card__height">
+          <div class="developer-card-height__text">
+            <div class="developer-card-height__about-text">
+              <p>Бэкендер</p>
+              <h1>Hepatir</h1>
+            </div>
+            <div class="developer-card-height__technology techonology-styles">
+              <img src="../assets/icons-developcard/csharp-logo.png" alt="html">
+              <p>ASP, .NET, MongoDB</p>
+            </div>
+            <div class="developer-card-height__technology-two-column techonology-styles">
+              <img src="../assets/icons-developcard/sql-logo.png" alt="html">
+              <p>SQL</p>
+            </div>
+          </div>
+          <div class="developer-card-height__skin">
+            <div class="developer-card-height__skin-content">
+              <div class="developer-card-height__social-icons">
+                <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+                <a href=""><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+                <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
+              </div>
             </div>
           </div>
         </div>
-      
-    </div>
-  </div>
+      </div>
+    </li>
+  </ul>
 
 </template>
 
 <script>
+import DevelopersOptions from "@/mocks/DevelopersOptions";
 import '@/assets/css/ComponentsStyles/developer.css'
 
 export default {
-
+  data() {
+    return {
+      DevelopersOptions
+    }
+  },
+  methods: {
+    testMethod(developer, username) {
+      console.log(developer, username)
+    }
+  },
+  created() {
+    console.log(DevelopersOptions)
+  }
 }
 </script>

luckydiamond/src/mocks/DevelopersOptions.js

@@ -1,105 +1,83 @@
 export default [
-     {
-        Rafael1209: {
-            username: "Rafael1209",
-            userRole: "Бэкендер",
-            background: "#636363",
-            technologyText: ["ASP,.NET,MongoDB", "Designer"],
-            technologyIcons: {
-                csharp: "@/assets/icons-developcard/csharp-logo.png",
-                figma: "@/assets/icons-developcard/figma.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png",
-                github: "@/assets/icons-developcard/github.png"
-            }
+    {
+        id: 1,
+        username: "Rafael1209",
+        userRole: "Бэкендер",
+        background: "#636363",
+        technologyText: ["ASP,.NET,MongoDB", "Designer"],
+        technologyIcons: ["csharp-logo", "figma"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 2,
+        username: "Hepatir",
+        userRole: "Бэкендер",
+        background: "#413C3B",
+        technologyText: ["ASP,.NET,MongoDB", "SQL"],
+        technologyIcons: ["csharp-logo", "sql-logo"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 3,
+        username: "Ckutls_",
+        userRole: "Фронтэндер",
+        background: "#B88484",
+        technologyText: ["html 5, css", "JavaScript", "Vue 3"],
+        technologyIcons: ["html", "js", "vue"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 4,
+        username: "FUpir",
+        userRole: "Дизайнер",
+        background: "#C58E74",
+        technologyText: ["Designer"],
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"],
+    },
+    {
+        id: 5,
+        username: "megatntmega",
+        userRole: "Дизайнер",
+        background: "#393A3A",
+        technologyText: ["Designer"],
+        technologyIcons: {
+            figma: "@/assets/icons-developcard/figma.png"
         },
-        Hepatir:{
-            username: "Hepatir",
-            userRole: "Бэкендер",
-            background: "#413C3B",
-            technologyText: ["ASP,.NET,MongoDB", "SQL"],
-            technologyIcons: {
-                csharp: "@/assets/icons-developcard/csharp-logo.png",
-                sql: "@/assets/icons-developcard/sql-logo.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png",
-                github: "@/assets/icons-developcard/github.png",
-            }
-        },
-        Ckutls_: {
-            username: "Ckutls_",
-            userRole: "Фронтэндер",
-            background: "#B88484",
-            technologyText: ["html 5, css", "JavaScript", "Vue 3"],
-            technologyIcons: {
-                html: "@/assets/icons-developcard/html.png",
-                js: "@/assets/icons-developcard/js.png",
-                vue: "@/assets/icons-developcard/vue.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png",
-                github: "@/assets/icons-developcard/github.png",
-            }
-        },
-        FUpir: {
-            username: "FUpir",
-            userRole: "Дизайнер",
-            background: "#C58E74",
-            technologyText: ["Designer"],
-            technologyIcons: {
-                figma: "@/assets/icons-developcard/figma.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png"
-            }
-        },
-        megatntmega: {
-            username: "megatntmega",
-            userRole: "Дизайнер",
-            background: "#393A3A",
-            technologyText: ["Designer"],
-            technologyIcons: {
-                figma: "@/assets/icons-developcard/figma.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png"
-            }
-        },
-        busha888: {
-            username: "busha888",
-            userRole: "Фронтэндер",
-            background: "#742271",
-            technologyText: ["html 5, css"],
-            technologyIcons: {
-                html: "@/assets/icons-developcard/html.png"
-            },
-            socialIcons: {
-                odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
-                telegram: "@/assets/icons-developcard/telegram.png",
-                like: "@/assets/icons-developcard/like.png",
-                github: "@/assets/icons-developcard/github.png",
-            }
-        },
-        CLARFFY: {
-            username: "CLARFFY",
-            userRole: "Дизайнер",
-            background: "#E2B374",
-            technologyText: ["Designer"],
-            technologyIcons: {
-                figma: "@/assets/icons-developcard/figma.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png"
-            }
+        socialIcons: {
+            telegram: "@/assets/icons-developcard/telegram.png",
+            discord: "@/assets/icons-developcard/discord.png"
         }
-   }
+    },
+    {
+        id: 6,
+        username: "busha888",
+        userRole: "Фронтэндер",
+        background: "#742271",
+        technologyText: ["html 5, css"],
+        technologyIcons: {
+            html: "@/assets/icons-developcard/html.png"
+        },
+        socialIcons: {
+            odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
+            telegram: "@/assets/icons-developcard/telegram.png",
+            like: "@/assets/icons-developcard/like.png",
+            github: "@/assets/icons-developcard/github.png",
+        }
+    },
+    {
+        id: 7,
+        username: "CLARFFY",
+        userRole: "Дизайнер",
+        background: "#E2B374",
+        technologyText: ["Designer"],
+        technologyIcons: {
+            figma: "@/assets/icons-developcard/figma.png"
+        },
+        socialIcons: {
+            telegram: "@/assets/icons-developcard/telegram.png",
+            discord: "@/assets/icons-developcard/discord.png"
+        }
+    }
 ]