project cards

src/examples/cards/ProjectCard.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="project-card">
+      <h2>{{ project.title }}</h2>
+      <img :src="project.featured_image" alt="Project Image">
+      <p>{{ project.description }}</p>
+      <p>Vote Total: {{ project.vote_total }}</p>
+      <p>Vote Ratio: {{ project.vote_ratio }}</p>
+      <p>Created: {{ project.created }}</p>
+      <p>Owner: {{ project.owner }}</p>
+      <p>Tags: {{ project.tags.join(', ') }}</p>
+    </div>
+  </template>
+  
+  <script>
+  import { ref } from 'vue'
+  
+  export default    {
+    name: 'ProjectCard',
+    setup() {
+      const project = ref({
+        id: 1,
+        title: "kateschka's project updated",
+        description: "КРУТОЙ ВЕБ-САЙТ",
+        featured_image: "http://somebodyhire.me/default.jpg",
+        demo_link: null,
+        source_link: null,
+        vote_total: 0,
+        vote_ratio: 0,
+        created: "2023-05-10T19:58:30.084115",
+        owner: 3,
+        tags: []
+      })
+  
+      return { project }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .project-card {
+    width: 300px;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+  }
+  .project-card img {
+    width: 100%;
+    height: auto;
+  }
+  </style>

src/views/Presentation/PresentationView.vue

@@ -1,3 +1,18 @@
+<style scoped>
+.project-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.project-card {
+  flex-basis: calc(33.33% - 1em); /* 1em is for margin */
+  margin: 0.5em;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  padding: 1em;
+  box-sizing: border-box;
+}
+</style>
+
 <script setup>
 import { onMounted, onUnmounted } from "vue";
 
@@ -5,7 +20,8 @@ import { onMounted, onUnmounted } from "vue";
 import NavbarDefault from "../..//examples/navbars/NavbarDefault.vue";
 import DefaultFooter from "../../examples/footers/FooterDefault.vue";
 import Header from "../../examples/Header.vue";
-import FilledInfoCard from "../../examples/cards/infoCards/FilledInfoCard.vue";
+
+
 
 //Vue Material Kit 2 components
 import MaterialInput from "@/components/MaterialInput.vue";
@@ -35,7 +51,23 @@ onUnmounted(() => {
 </script>
 
 <script>
+import axios from 'axios';
 
+export default {
+  data() {
+    return {
+      projects: [],
+    };
+  },
+  async created() {
+    try {
+      const response = await axios.get('http://somebodyhire.me/api/projects/');
+      this.projects = response.data;
+    } catch (error) {
+      console.error('There was an error fetching the projects', error);
+    }
+  },
+};
 </script>
 
 
@@ -92,9 +124,13 @@ onUnmounted(() => {
 
   <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
     <PresentationCounter />
-    <PresentationExample :data="data" />
-    <PresentationPages />
-    <BuiltByDevelopers />
+    <div class="project-container">
+    <div class="project-card" v-for="project in projects" :key="project.id">
+      <h3>{{ project.title }}</h3>
+      <p>{{ project.description }}</p>
+    </div>
+  </div>
+
   </div>
 <!-- 
     <div class="container">