Update home page & projects

src/components/SelectedProjects.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="projects">
+    <slot></slot>
+    <div class="container">
+      <div class="project"
+           v-for="project in projects"
+           :key="project.title.slug">
+        <img class="project-image" :src="project.image" :alt="project.title" />
+        <div class="project-content">
+          <h3 class="title">{{ project.title }}</h3>
+          <div class="release">{{ project.version }} - {{ project.release_data }}</div>
+          <div class="description">
+            <p>{{ project.short_description }}</p>
+          </div>
+        </div>
+        <div class="more-button">
+          <base-btn has-icon
+                    icon="eye"
+                    is-reverse
+                    class="btn">O projekcie</base-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.projects {
+  padding-top: 45px;
+  padding-bottom: 45px;
+
+  .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: minmax(80px, auto);
+    column-gap: 25px;
+    row-gap: 20px;
+
+    .project {
+      display: grid;
+      position: relative;
+      grid-template-areas: 'image content';
+      background-color: #fafafa;
+      border: 1px solid rgba(0, 0, 0, .025);
+      border-radius: 5px;
+
+      .project-image {
+        grid-area: image;
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+      }
+
+      .project-content {
+        grid-area: content;
+        padding: 10px 15px;
+        height: 200px;
+        overflow-y: hidden;
+        position: relative;
+
+        .title {
+          font-size: 1.3em;
+          font-weight: normal;
+          line-height: 1.5em;
+        }
+
+        .release {
+          font-size: .9em;
+          font-weight: bold;
+          padding: 5px 0;
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
+        }
+      }
+
+      p {
+        font-size: .9em;
+      }
+    }
+
+    @media screen and (min-width: 901px) {
+      .project {
+        .more-button {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+
+          .btn {
+            display: none;
+          }
+
+          &:hover {
+            background: rgba(0, 0, 0, .3);
+            border-radius: 5px;
+            .btn {
+              display: flex;
+              color: white;
+              border-style: none;
+              &:hover {
+                background-color: #385c8a;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @media screen and (max-width: 900px) {
+      .project {
+        grid-template-areas: 'image' 'content';
+
+        .project-image {
+          width: 100%;
+          height: 250px;
+        }
+
+        .project-content {
+          height: auto;
+          max-height: 250px;
+        }
+
+        .more-button {
+          display: block;
+          position: unset;
+          margin-top: 8px;
+          height: auto;
+          left: unset;
+          top: unset;
+          .btn {
+            display: flex;
+            width: 100%;
+            border-radius: 0;
+            border-style: solid;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .projects .container {
+    grid-template-columns: 1fr;
+    padding: 25px;
+    column-gap: 0;
+    row-gap: 20px;
+  }
+}
+</style>
+
+<script>
+import BaseButton from './BaseButton'
+
+export default {
+  name: 'SelectedProjects',
+  data () {
+    return {}
+  },
+  mounted () {
+    const header = {
+      title: this.$route.meta.title,
+      description: [
+        'Ta podstrona jak zwykle nie ma listy projektów 😅',
+        'Albo może jednak będzie posiadała piękne, ciekawe i inspirujące projekty?'
+      ]
+    }
+    this.$store.commit('setHeader', header)
+  },
+  props: {
+    projects: {
+      type: Array
+    }
+  },
+  components: {
+    'base-btn': BaseButton
+  }
+}
+</script>

src/components/sections/Experiences.vue

@@ -88,7 +88,7 @@ export default {
       margin-top: 35px;
 
       .skill-group {
-        background-color: rgba(0, 0, 0, .02);
+        background-color: #fafafa;
         padding: 15px;
         border-radius: 5px;
 

src/components/sections/FavoriteProjects.vue

@@ -0,0 +1,66 @@
+<template>
+  <section class="selected-projects">
+    <projects :projects="select_projects">
+      <div class="header-container">
+        <h2>Wybrane projekty</h2>
+        <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
+      </div>
+    </projects>
+  </section>
+</template>
+
+<script>
+import Projects from '../SelectedProjects'
+
+export default {
+  name: 'FavoriteProjects',
+  data () {
+    return {
+      publicPath: process.env.BASE_URL,
+      select_projects: []
+    }
+  },
+  mounted () {
+    this.select_projects = [
+      {
+        title: 'KamilCraft.com',
+        category: 'private',
+        image: `${this.publicPath}assets/me.jpg`,
+        release_data: '29.08.2021',
+        version: 'v1.0.1',
+        short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+      },
+      {
+        title: 'Projekt 4',
+        category: '',
+        image: `${this.publicPath}assets/me.jpg`,
+        release_data: '29.08.2021',
+        version: 'v1.0.0',
+        short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+      }
+    ]
+  },
+  components: {
+    Projects
+  }
+}
+</script>
+
+<style lang="scss">
+@import "scss/default";
+
+.selected-projects {
+  background-color: #fdfdfd !important;
+}
+.header-container {
+  @extend .container;
+}
+</style>

src/views/Home.vue

@@ -2,6 +2,7 @@
   <section class="home">
     <About />
     <Experiences />
+    <FavoriteProjects />
   </section>
 </template>
 
@@ -12,9 +13,16 @@
 <script>
 import About from '../components/sections/About'
 import Experiences from '../components/sections/Experiences'
+import FavoriteProjects from '../components/sections/FavoriteProjects'
 
 export default {
   name: 'Home',
+  data () {
+    return {
+      publicPath: process.env.BASE_URL,
+      select_projects: []
+    }
+  },
   mounted () {
     const header = {
       title: this.$route.meta.title,
@@ -31,7 +39,8 @@ export default {
   },
   components: {
     About,
-    Experiences
+    Experiences,
+    FavoriteProjects
   }
 }
 </script>

src/views/Projects.vue

@@ -1,161 +1,13 @@
 <template>
-  <div class="projects">
+  <projects :projects="projects" />
-    <div class="container">
-      <div class="project"
-           v-for="project in projects"
-           :key="project.title.slug">
-        <img class="project-image" :src="project.image" :alt="project.title" />
-        <div class="project-content">
-          <h3 class="title">{{ project.title }}</h3>
-          <div class="release">{{ project.version }} - {{ project.release_data }}</div>
-          <div class="description">
-            <p>{{ project.short_description }}</p>
-          </div>
-        </div>
-        <div class="more-button">
-          <base-btn has-icon
-                    icon="eye"
-                    is-reverse
-                    class="btn">O projekcie</base-btn>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <style lang="scss">
-.projects .container {
-  display: grid;
-  padding: 45px 10px;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-rows: minmax(80px, auto);
-  column-gap: 25px;
-  row-gap: 20px;
 
-  .project {
-    display: grid;
-    position: relative;
-    grid-template-areas: 'image content';
-    background-color: #EFEFEF;
-    border: 1px solid rgba(0, 0, 0, .025);
-
-    .project-image {
-      grid-area: image;
-      width: 200px;
-      height: 200px;
-      object-fit: cover;
-    }
-
-    .project-content {
-      grid-area: content;
-      padding: 10px 15px;
-      height: 200px;
-      overflow-y: hidden;
-      position: relative;
-
-      .title {
-        font-size: 1.3em;
-        font-weight: normal;
-        line-height: 1.5em;
-      }
-
-      .release {
-        font-size: .9em;
-        font-weight: bold;
-        padding: 5px 0;
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, #EFEFEF 100%);
-      }
-    }
-
-    p {
-      font-size: .9em;
-    }
-  }
-
-  @media screen and (min-width: 901px) {
-    .project {
-      .more-button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-
-        .btn {
-          display: none;
-        }
-
-        &:hover {
-          background: rgba(0, 0, 0, .3);
-          .btn {
-            display: flex;
-            color: white;
-            border-style: none;
-            &:hover {
-              background-color: #385c8a;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: 900px) {
-    .project {
-      grid-template-areas: 'image' 'content';
-
-      .project-image {
-        width: 100%;
-        height: 250px;
-      }
-
-      .project-content {
-        height: auto;
-        max-height: 250px;
-      }
-
-      .more-button {
-        display: block;
-        position: unset;
-        margin-top: 8px;
-        height: auto;
-        left: unset;
-        top: unset;
-        .btn {
-          display: flex;
-          width: 100%;
-          border-radius: 0;
-          border-style: solid;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 500px) {
-  .projects .container {
-    grid-template-columns: 1fr;
-    padding: 25px;
-    column-gap: 0;
-    row-gap: 20px;
-  }
-}
 </style>
 
 <script>
-import BaseButton from '../components/BaseButton'
+import SelectedProjects from '../components/SelectedProjects'
 
 export default {
   name: 'Projects',
@@ -216,17 +68,9 @@ export default {
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
       }
     ]
-    const header = {
-      title: this.$route.meta.title,
-      description: [
-        'Ta podstrona jak zwykle nie ma listy projektów 😅',
-        'Albo może jednak będzie posiadała piękne, ciekawe i inspirujące projekty?'
-      ]
-    }
-    this.$store.commit('setHeader', header)
   },
   components: {
-    'base-btn': BaseButton
+    projects: SelectedProjects
   }
 }
 </script>