Update CSS

assets/css/tailwind.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';

components/ProjectCard.vue

@@ -1,13 +1,17 @@
 <template>
     <div class="card project-card">
-        <div class="card-title">
+        <div class="card-image">
-            <h1>{{name}}</h1>
         </div>
-        <div class="card-content my-4">
+        <div class="card-content">
-            <p>{{description}}</p>
+          <div class="card-title">
-        </div>
+              <h1>{{name}}</h1>
-        <div class="card-footer">
+          </div>
-            <p><a :href="url">Website</a></p>
+          <div class="card-content my-4">
+              <p>{{description}}</p>
+          </div>
+          <div class="card-footer">
+              <p><a :href="url || '#'">Website</a></p>
+          </div>
         </div>
     </div>
 </template>
@@ -20,16 +24,11 @@ export default {
 
 <style>
 .project-card {
-    @apply mx-4 my-4 w-full;
+    @apply mx-4 my-4 w-full flex flex-col;
 }
 @screen md {
     .project-card {
-        @apply w-1/2;
+        @apply flex-row;
-    }
-}
-@screen lg {
-    .project-card {
-        @apply w-1/3;
     }
 }
 </style>

layouts/default.vue

@@ -21,6 +21,7 @@ export default {
 </script>
 <style>
 .root {
+    @apply font-sans;
     background: url("~assets/bg.png") no-repeat center center fixed;
     background-size: cover;
     min-height: 100vh;

nuxt.config.js

@@ -1,6 +1,10 @@
 
 export default {
   mode: 'universal',
+  server: {
+    host: '0.0.0.0',
+    port: process.env.PORT || 9796,
+  },
   /*
   ** Headers of the page
   */