adds Skillit to portfoloio

kanehara · Jun 4, 2020 · dff0215 · dff0215
1 parent f906731
commit dff0215
Show file tree

Hide file tree

Showing 4 changed files with 2,760 additions and 1,514 deletions.
diff --git a/assets/Skillit.png b/assets/Skillit.png
diff --git a/src/App.vue b/src/App.vue
@@ -61,6 +61,12 @@ export default {
           href: "http://www.spotimix.com",
           backgroundImage: "assets/Spotimix.png",
           description: "A GraphQL webapp to query Spotify's recommendation API"
+        },
+        {
+          name: "Skillit",
+          href: "https://skillit.io",
+          backgroundImage: "assets/Skillit.png",
+          description: "A marketplace for people to share and sell their skills"
         }
       ]
     }

diff --git a/src/Portfolio/Portfolio.vue b/src/Portfolio/Portfolio.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div v-for="project in projects" :key="project.id" class="portfolio">
+  <div class="portfolio">
+    <div v-for="project in projects" :key="project.id">
       <a class="project" target="_blank" :href="project.href" >
         <p :style="{ textAlign: 'center', textDecoration: 'none' }">{{ project.description }}</p>
         <img
@@ -20,13 +20,17 @@ export default {
 
 <style lang="scss" scoped>
 .portfolio {
-  display: grid
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
 .project {
   padding: 25px;
   width: 350px;
+  margin: 12px;
   transition: transform .2s;
+  display: block;
 
   &:hover {
     transform: translateY(-1.5px);
@@ -39,7 +43,6 @@ export default {
     background-position: center;
     display: inline-block;
     height: 200px;
-    width: 100%;
     border-radius: 15px;
   }
 }