Our projects component (fixes #12) (#88)

* add .idea to gitignore

* our projects component

* assets and template

* css to scss trouble

* scss trouble update

* working scss

* corrected newlines

* aesthetic stuff

* move code to single component

* last fixes

* after yarn fix

* linting

frontend/src/components/HomePage.vue

@@ -22,6 +22,7 @@
                 </v-alert>
             </div>
             <app-about-us />
+            <our-projects />
             <app-join-us />
             <app-contact-us />
             <social-media />
@@ -36,12 +37,15 @@ import ContactUs from './ContactUs.vue';
 import AboutUs from './AboutUs.vue';
 import SocialMedia from './SocialMedia.vue';
 import PageFooter from './PageFooter.vue';
+import OurProjects from './OurProjects.vue';
 import JoinUs from './JoinUs.vue';
 export default {
     components: {
         'app-contact-us': ContactUs,
         'app-about-us': AboutUs,
         'social-media': SocialMedia,
+        'page-footer': PageFooter,
+        'our-projects': OurProjects
         'app-join-us': JoinUs,
         'page-footer': PageFooter
     },

frontend/src/components/OurProjects.vue

@@ -0,0 +1,82 @@
+<template>
+    <v-container>
+        <v-layout row wrap>
+            <v-flex id="items" v-for="project in projects" xs12 md6 lg4 xl3>
+                <v-item-group>
+                    <v-hover>
+                        <v-card slot-scope="{ hover }">
+                            <v-img
+                                :src="project.image"
+                                aspect-ratio="1.9"
+                            ></v-img>
+                            <v-expand-transition>
+                                <div v-if="hover" id="card--reveal">
+                                    <v-img
+                                        id="hoverd-img"
+                                        :src="hoveredImg"
+                                    ></v-img>
+                                </div>
+                            </v-expand-transition>
+                        </v-card>
+                    </v-hover>
+                </v-item-group>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            hoveredImg: require('@/assets/images/Antu_dialog-icon-preview.svg'),
+            projects: [
+                {
+                    name: 'Volontulo',
+                    image: require('@/assets/images/volontulo.png')
+                },
+                {
+                    name: 'Wysadź ulicę',
+                    image: require('@/assets/images/wysadz_ulice.png')
+                },
+                {
+                    name: 'Bank Empatii',
+                    image: require('@/assets/images/bank_empatii.png')
+                },
+                {
+                    name: 'Alinka',
+                    image: ''
+                },
+                {
+                    name: 'Polska Akcja Humanitarna',
+                    image: ''
+                }
+            ]
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './../main.scss';
+
+#items {
+    padding: 10px;
+}
+
+#card--reveal {
+    background: $blue;
+    bottom: 0;
+    color: $white;
+    display: flex;
+    justify-content: center;
+    opacity: 0.9;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+#hoverd-img {
+    max-width: 50%;
+}
+</style>