feat: showcase skills, fix #2

README.md

@@ -2,7 +2,13 @@
 <img src="https://user-images.githubusercontent.com/8784712/58467049-7f611d00-816d-11e9-954d-2048784bbe11.png" alt="create-portfolio-preview">
 </a>
 
-Create Portfolio helps you kickstart a personal website that showcases your work as a software developer.
+## Introduction
+
+Create Portfolio helps you kickstart a personal website that showcases your work as a software developer. It will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories.
+
+Your personal website is waiting to be personalized, though. It includes space to highlight your specific areas of interest in software development, like languages or industries. And it's standing by to publish your next great blog post.
+
+It's all possible using the combination of [Saber](https://saber.land) (for building your website), and GitHub's API (for automatically populating your website with content).
 
 ## Quick Start
 
@@ -132,6 +138,29 @@ module.exports = {
 }
 ```
 
+### Skills
+
+Showcase your skills:
+
+```js
+module.exports = {
+  themeConfig: {
+    skills: [
+      {
+        topic: 'nodejs',
+        description: `I'm a Node.js core contributor`,
+        // `image` is optional, by default we load from GitHub
+        image: 'https://...'
+      }
+    ]
+  }
+}
+```
+
+The `topic` should be a valid [GitHub topic](https://github.com/topics), if the topic doesn't have a image by default on GitHub, you need to provide one yourself.
+
+You can check if the image exists by visiting `https://github.com/github/explore/tree/master/topics/{topic}` (replace `{topic}` with actual topic).
+
 ## License
 
 MIT &copy; [EGOIST](https://github.com/egoist)

demo/saber-config.js

@@ -26,6 +26,20 @@ module.exports = {
         text: 'About',
         link: '/about'
       }
+    ],
+    skills: [
+      {
+        topic: 'nodejs',
+        description: `I love Node.js and I use it every single day.`
+      },
+      {
+        topic: 'vue',
+        description: `I contribute to Vue ecosytem every a few days`
+      },
+      {
+        topic: 'webpack',
+        description: `I'm pretty good at webpack, probably`
+      }
     ]
   },
 

packages/saber-theme-portfolio/src/components/HomeSkills.vue

@@ -0,0 +1,33 @@
+<template>
+  <home-section>
+    <template #title>
+      <CpuIcon />Skills
+    </template>
+    <div class="columns is-multiline">
+      <div v-for="skill in skills" :key="skill.topic" class="column is-4">
+        <SkillCard :skill="skill" />
+      </div>
+    </div>
+  </home-section>
+</template>
+
+<script>
+import { CpuIcon } from 'vue-feather-icons'
+import SkillCard from './SkillCard.vue'
+
+export default {
+  components: {
+    CpuIcon,
+    SkillCard
+  },
+
+  props: {
+    skills: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped></style>

packages/saber-theme-portfolio/src/components/PostCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <saber-link class="post" :to="post.attributes.permalink">
+  <saber-link class="card post" :to="post.attributes.permalink">
     <div class="post-title">
       {{ post.attributes.title }}
     </div>
@@ -41,18 +41,6 @@ export default {
 </script>
 
 <style scoped>
-.post {
-  display: block;
-  padding: 20px;
-  border-radius: 3px;
-  color: var(--text-color);
-  background-color: var(--card-bg);
-
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--border-color);
-  }
-}
-
 .post-title {
   margin-bottom: 5px;
   font-size: 1.4rem;

packages/saber-theme-portfolio/src/components/ProjectCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :href="project.url" class="project" target="_blank">
+  <a :href="project.url" class="card project" target="_blank">
     <div class="project-title">{{ project.name }}</div>
     <div class="project-description">{{ project.description }}</div>
     <div class="project-meta">
@@ -34,19 +34,6 @@ export default {
 </script>
 
 <style scoped>
-.project {
-  display: block;
-  background-color: var(--card-bg);
-  border-radius: 3px;
-  padding: 20px;
-  color: var(--text-color-light);
-  transition: transform 0.3s ease;
-
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--border-color);
-  }
-}
-
 .project-title {
   font-size: 1.2rem;
   margin-bottom: 10px;

packages/saber-theme-portfolio/src/components/SkillCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <a class="card" :href="`https://github.com/topics/${skill.topic}`">
+    <div
+      class="skill-cover"
+      :style="{ backgroundImage: `url(${image})` }"
+    ></div>
+    <div class="skill-description">
+      {{ skill.description }}
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    skill: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    image() {
+      return (
+        this.skill.image ||
+        `https://cdn.jsdelivr.net/gh/github/explore/topics/${
+          this.skill.topic
+        }/${this.skill.topic}.png`
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.skill-cover {
+  height: 130px;
+  background-size: 60px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.skill-description {
+  color: var(--text-color-lighter);
+}
+</style>

packages/saber-theme-portfolio/src/css/global.css

@@ -72,4 +72,16 @@ a {
   &>*:first-child {
     margin-top: 0;
   }
+}
+
+.card {
+  display: block;
+  padding: 20px;
+  border-radius: 3px;
+  color: var(--text-color);
+  background-color: var(--card-bg);
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px var(--border-color);
+  }
 }

packages/saber-theme-portfolio/src/layouts/home.vue

@@ -3,7 +3,11 @@
     <div class="container">
       <HomeProfile />
       <div class="main">
-        <HomeProjects :projects="$themeConfig.projects" />
+        <HomeProjects
+          v-if="$themeConfig.projects"
+          :projects="$themeConfig.projects"
+        />
+        <HomeSkills v-if="$themeConfig.skills" :skills="$themeConfig.skills" />
         <HomePosts v-if="page.posts" id="posts" :posts="page.posts" />
       </div>
     </div>
@@ -14,12 +18,14 @@
 import HomeProjects from '../components/HomeProjects.vue'
 import HomePosts from '../components/HomePosts.vue'
 import HomeProfile from '../components/HomeProfile.vue'
+import HomeSkills from '../components/HomeSkills.vue'
 
 export default {
   components: {
     HomeProjects,
     HomePosts,
-    HomeProfile
+    HomeProfile,
+    HomeSkills
   },
 
   props: ['page'],