chore(style) : color linktree

components/Sections/BlogSection.vue

@@ -5,7 +5,11 @@
         SectionDescription="  Short story excerpts to fill my spare time about Coding, Work, Your life is everything I want "
       />
       <ul class="blogs">
-        <blog-card v-for="blog in blogs" :key="blog.name" :blog="blog" />
+        <blog-card 
+            v-for="blog in blogs" 
+            :key="blog.name" 
+            :blog="blog" 
+        />
       </ul>
   </section>
 </template>

pages/data/linktree.json

@@ -1,47 +1,47 @@
 [
-{
-  "name": "E-mail",
-  "redirect": "mailto:[email protected]",
-  "color": "bg-indigo-900"
-},
-{
-  "name": "Github",
-  "redirect": "https://github.com/Zainal21",
-  "color": "bg-gray-800"
-},
-{
-  "name": "Gitlab",
-  "redirect": "https://gitlab.com/Zainal21",
-  "color": "bg-yellow-600"
-},
-{
-  "name": "Whatsapp",
-  "redirect": "https://api.whatsapp.com/send?phone=+6288216756214",
-  "color": "bg-green-800"
-},
-{
-  "name": "instagram",
-  "redirect": "https://www.instagram.com/muhamadzain.dev",
-  "color": "bg-red-600"
-},
-{
-  "name": "Telegram",
-  "redirect": "https://t.me/muhamadzaindev",
-  "color": "bg-indigo-500"
-},
-{
-  "name": "Twitter",
-  "redirect": "https://twitter.com/muhamadzain.dev",
-  "color": "bg-blue-600"
-},
-{
-  "name": "LinkedIn",
-  "redirect": "https://www.linkedin.com/in/muhammad-zainal-arifin",
-  "color": "bg-blue-800"
-},
-{
-  "name": "Facebook",
-  "redirect": "#",
-  "color": "bg-blue-900"
-}
+  {
+    "name": "E-mail",
+    "redirect": "mailto:[email protected]",
+    "color": "bg-indigo-800"
+  },
+  {
+    "name": "Github",
+    "redirect": "https://github.com/Zainal21",
+    "color": "bg-gray-800"
+  },
+  {
+    "name": "Gitlab",
+    "redirect": "https://gitlab.com/Zainal21",
+    "color": "bg-yellow-600"
+  },
+  {
+    "name": "Whatsapp",
+    "redirect": "https://api.whatsapp.com/send?phone=+6288216756214",
+    "color": "bg-green-800"
+  },
+  {
+    "name": "instagram",
+    "redirect": "https://www.instagram.com/muhamadzain.dev",
+    "color": "bg-red-600"
+  },
+  {
+    "name": "Telegram",
+    "redirect": "https://t.me/muhamadzaindev",
+    "color": "bg-indigo-500"
+  },
+  {
+    "name": "Twitter",
+    "redirect": "https://twitter.com/muhamadzain.dev",
+    "color": "bg-blue-600"
+  },
+  {
+    "name": "LinkedIn",
+    "redirect": "https://www.linkedin.com/in/muhammad-zainal-arifin",
+    "color": "bg-blue-800"
+  },
+  {
+    "name": "Facebook",
+    "redirect": "#",
+    "color": "bg-blue-900"
+  }
 ]

pages/data/playlist.json

@@ -1,4 +1,5 @@
-  [{
+[
+  {
     "id": 1,
     "title": "Martin Garrix & Dean Lewis - Used To Love (Official Video)",
     "source": "https://www.youtube.com/embed/LEh9F67Z5n8"

pages/data/readlists.json

@@ -1,28 +1,29 @@
-[{
-"id": 1,
-"title": "Docker, Rancher, & Laravel: Easy & Safe Scalability!",
-"authors": "Will Bowman",
-"time_read": "9 Minutes",
-"excerpt": "I attended Laracon US ’16 and met Luca Critelli who shared how he manages his businesses backend with Docker & Rancher. We both agreed to work on an article to help introduce Rancher to the Laravel community ",
-"sourceLink": "https://medium.com/@asked_io/docker-rancher-laravel-easy-safe-scalability-4e6eb8758232",
-"category": "Programming"
-},
-{
-"id": 2,
-"title": "I Almost Got Fired for Choosing React in Our Enterprise App",
-"authors": "Razvan Dragomir",
-"time_read": "8 Minutes",
-"excerpt": "I love React. I use it for all my personal projects and would love to recommend it for new work initiatives. However, after the unpleasant experience I had, I will not encourage using it for enterprise applications. Not again. ",
-"sourceLink": "https://betterprogramming.pub/i-almost-got-fired-for-choosing-react-in-our-enterprise-app-846ea840841c",
-"category": "Programming"
-},
-{
-"id": 3,
-"title": "Intentional Career Building",
-"authors": "Kent C. Dodds ",
-"time_read": "9 Minutes",
-"excerpt": "A challenge and ideas for you to do something to build your career.One thing I want to do is provide you with some specific ideas of things you can do to improve your skills and get what you want out of your career.  ",
-"sourceLink": "https://kentcdodds.com/blog/intentional-career-building",
-"category": "career"
-}
+[
+  {
+    "id": 1,
+    "title": "Docker, Rancher, & Laravel: Easy & Safe Scalability!",
+    "authors": "Will Bowman",
+    "time_read": "9 Minutes",
+    "excerpt": "I attended Laracon US ’16 and met Luca Critelli who shared how he manages his businesses backend with Docker & Rancher. We both agreed to work on an article to help introduce Rancher to the Laravel community ",
+    "sourceLink": "https://medium.com/@asked_io/docker-rancher-laravel-easy-safe-scalability-4e6eb8758232",
+    "category": "Programming"
+  },
+  {
+    "id": 2,
+    "title": "I Almost Got Fired for Choosing React in Our Enterprise App",
+    "authors": "Razvan Dragomir",
+    "time_read": "8 Minutes",
+    "excerpt": "I love React. I use it for all my personal projects and would love to recommend it for new work initiatives. However, after the unpleasant experience I had, I will not encourage using it for enterprise applications. Not again. ",
+    "sourceLink": "https://betterprogramming.pub/i-almost-got-fired-for-choosing-react-in-our-enterprise-app-846ea840841c",
+    "category": "Programming"
+  },
+  {
+    "id": 3,
+    "title": "Intentional Career Building",
+    "authors": "Kent C. Dodds ",
+    "time_read": "9 Minutes",
+    "excerpt": "A challenge and ideas for you to do something to build your career.One thing I want to do is provide you with some specific ideas of things you can do to improve your skills and get what you want out of your career.  ",
+    "sourceLink": "https://kentcdodds.com/blog/intentional-career-building",
+    "category": "career"
+  }
 ]

pages/index.vue

@@ -47,7 +47,8 @@
             v-for="playlist in playlists" 
             :key="playlist.id" 
             :source="playlist.source"
-            :title="playlist.title" />
+            :title="playlist.title" 
+          />
         </div>
       </div>
     </section>

pages/posts.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="section posts-list">
     <div class="content mx-auto">
-      <BlogSection :blogs="blogs" />
+      <BlogSection 
+        :blogs="blogs" 
+      />
     </div>
     <ButtonToTop />
   </div>