update

pages/css/index.vue

@@ -1,10 +1,44 @@
 <template lang="pug">
-  h1 CSS resources
+  div
+    h1 CSS
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Flexbox froggy',
+          desc: 'A game to learn Flexbox',
+          url: 'https://flexboxfroggy.com'
+        },
+        {
+          title: 'CSS Gridgarden',
+          desc: 'A game to learn Grid',
+          url: 'https://cssgridgarden.com'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>

pages/design/index.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+  div
+    h1 Design
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
+</template>
+
+<script>
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Undraw',
+          desc: 'Free vector illustrations for your website.',
+          url: 'https://undraw.co'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
+</style>

pages/html/index.vue

@@ -1,10 +1,39 @@
 <template lang="pug">
-  h1 HTML resources
+  div
+    h1 HTML
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'HTML ELEMENTS',
+          desc: 'All the HTML elemens you can use. There is more than just a div :)',
+          url: 'https://developer.mozilla.org/de/docs/Web/HTML/Element'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>

pages/index.vue

@@ -1,21 +1,13 @@
 <template lang="pug">
-div(class="lg:flex lg:justify-center lg:content-center")
-  main.flex-col.max-w-md(class="lg:flex lg:justify-center lg:content-center")
-    h1.text-black.font-bold.text-xl.mb-2 What &nbsp;
+div
+  main
+    h1.text-black.font-bold.text-xl.mb-2 What is &nbsp;
       span.text-teal webgems 💎&nbsp;
-      | is you may ask?
-    p.text-grey-darker.text-base.mb-8
-      | As of now, it's a currated list of resources for developers and designers. If you want to suggest a resource, go ahead and contact me&nbsp;
+      | ?
+    p As of now, it's a currated list of resources for developers and designers.
+    p If you want to suggest a resource, go ahead and contact me&nbsp;
       a(href="https://twitter.com/lostdesign") @lostdesign
 
-    ul.list-reset.flex
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/html') HTML
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/css') CSS
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/javascript') Javascript
-
 </template>
 
 <script>

pages/javascript/index.vue

@@ -1,10 +1,39 @@
 <template lang="pug">
-  h1 JS resources
+  div
+    h1 Javascript
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Javascript30',
+          desc: 'Free video courses about javascript. Made by WesBos',
+          url: 'https://javascript30.com'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>