Some enhancements!

Author: bikashpanda123

public/images/map-ph.png

@@ -40,7 +40,9 @@ export default {
 };
 </script>
 <style>
-.parent-container {
-  margin-left: 40px;
+@media screen and (min-width: 600px) {
+  .parent-container {
+    margin-left: 40px;
+  }
 }
 </style>

public/images/map.PNG

@@ -27,10 +27,14 @@
         <a-timeline class="pl-0">
           <a-timeline-item
             class="pb-1"
-            :color="color"
             v-for="(commit, index) in data.commits"
             :key="index"
-            >{{ commit.message }} <small> by <a :href="commit.user_link" target="_blank">{{commit.id}} </a> on {{commit.date | moment('DD/MM/YYYY')}}</small>
+            >{{ commit.message }}
+            <small>
+              by
+              <a :href="commit.user_link" target="_blank">{{ commit.id }} </a>
+              on {{ commit.date | moment("DD/MM/YYYY") }}</small
+            >
           </a-timeline-item>
         </a-timeline>
       </v-card-text>
@@ -52,6 +56,12 @@
           </v-col>
         </v-row>
       </v-container>
+      <v-card-text
+        class="mt-2 pt-0 ml-0"
+        v-if="data.tech && data.tech.length > 0"
+      >
+        <technology-stacks :tech="data" :hasHeader="false" />
+      </v-card-text>
     </v-card>
   </v-timeline-item>
 </template>
@@ -60,9 +70,10 @@ import file from "../firebase/file";
 import moment from "moment";
 import YTVideoCard from "./YTVideoCard.vue";
 import ImageCard from "./ImageCard.vue";
+import TechnologyStacks from "./TechnologyStacks.vue";
 
 export default {
-  components: { YTVideoCard, ImageCard },
+  components: { YTVideoCard, ImageCard, TechnologyStacks },
   data() {
     return {
       image: "images/logo_ph.jpg",

src/App.vue

@@ -23,7 +23,7 @@
             </v-col>
           </v-row>
           <v-row>
-            <v-col cols="2" class="px-0"  v-if="Object.keys(data).length > 2">
+            <v-col cols="2" class="px-0" v-if="Object.keys(data).length > 2">
               <v-icon>mdi-crosshairs-gps </v-icon>
             </v-col>
             <v-col>
@@ -40,20 +40,43 @@
           </v-row>
         </v-container>
       </div>
-      <div class="col-md-7 col-md-push-1">
-        <!-- Some other contetn place holder -->
+      <div class="col-md-7 pb-8">
+        <v-card :href="data.map_link" target="_blank">
+          <v-img :src="image" />
+        </v-card>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import file from "../../firebase/file";
 import ModuleHeader from "../../components/ModuleHeader.vue";
 export default {
   name: "Contact",
   props: { data: {} },
+  data() {
+    return {
+      image: "images/map-ph.png",
+    };
+  },
   components: {
     ModuleHeader,
   },
+  watch: {
+    data: function (val) {
+      if (val.map) {
+        file
+          .getFile(val.map)
+          .then((url) => {
+            this.image = url;
+          })
+          .catch(() => {
+            this.image = "images/map-ph.png";
+            console.warn("Error loading project logo image ");
+          });
+      }
+    },
+  },
 };
 </script>