Technology

Signed-off-by: jxtxzzw <jxtxzzw@126.com>

assets/data-sample/tech.json

+[
+  {
+    "tech": "Java",
+    "desc": null,
+    "category": "Language",
+    "level": 4
+  },
+  {
+    "tech": "Docker",
+    "desc": "docker-compose is not included",
+    "category": "System",
+    "level": 2
+  },
+  {
+    "tech": "Vue",
+    "desc": null,
+    "category": "Platform",
+    "level": 3
+  },
+  {
+    "tech": "Kubernetes",
+    "desc": null,
+    "category": "System",
+    "level": 1
+  }
+]

assets/lang/en.json

@@ -26,7 +26,7 @@
     "course": "Course",
     "exam": "Exam",
     "coding": "Coding Problem",
-    "technique": "Technique",
+    "tech": "Technology",
     "media": "Media",
     "footprint": "Footprint",
     "photo": "Photo",

assets/lang/zh.json

@@ -26,7 +26,7 @@
     "course": "课程",
     "exam": "考试成绩",
     "coding": "编程题",
-    "technique": "技术栈",
+    "tech": "技术栈",
     "media": "影音",
     "footprint": "足迹",
     "photo": "摄像",

assets/reader.js

@@ -37,3 +37,4 @@ export const exam = require('./data/exam.json')
 export const income = require('./data/income.json')
 export const advancedIncome = require('./data/advanced_income.json')
 export const course = require('./data/course.json')
+export const tech = require('./data/tech.json')

components/Navigation.vue

@@ -57,8 +57,8 @@
         <MenuItem name="coding" to="coding">
           {{ $t('navigation.coding') }}
         </MenuItem>
-        <MenuItem name="technique" to="reserved">
-          {{ $t('navigation.technique') }}
+        <MenuItem name="tech" to="tech">
+          {{ $t('navigation.tech') }}
         </MenuItem>
         <MenuItem name="honor" to="honor">
           {{ $t('navigation.honor') }}

pages/tech.vue

+<template>
+  <div :style="{ display: 'grid', gridTemplateColumns: grids }">
+    <div v-for="lv in levels" :key="lv" style="min-width: 300px">
+      <Card :title="`Level ${lv}`" icon="md-hammer" :padding="0" shadow>
+        <CellGroup>
+          <Cell
+            v-for="item in levelDict[lv]"
+            :key="item.tech"
+            :title="item.tech"
+            :label="item.desc"
+          >
+            <Tag
+              slot="extra"
+              type="border"
+              :color="randomLabelColor(item.category)"
+            >
+              {{ item.category }}
+            </Tag>
+          </Cell>
+        </CellGroup>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { tech } from '../assets/reader'
+import { randomLabelColor } from '../assets/util'
+
+export default {
+  name: 'Tech',
+  data() {
+    return {
+      tech,
+      randomLabelColor,
+      grids: '1fr',
+      levels: [0, 1, 2, 3, 4, 5, 6],
+      levelDict: {},
+    }
+  },
+  mounted() {
+    for (const lv of this.levels) {
+      this.levelDict[lv] = []
+    }
+    for (const x of this.tech) {
+      if (!this.levels.includes(x.level)) {
+        this.levels.push(x.level)
+        this.levelDict[x.level] = []
+      }
+      this.levelDict[x.level].push(x)
+    }
+    this.levels = this.levels.sort()
+    for (let i = 1; i < this.levels.length; i++) {
+      this.grids += ' 1fr'
+    }
+  },
+}
+</script>