rework structure

pages/work/_id.vue

@@ -0,0 +1,78 @@
+<template>
+  <main class="flex flex-col lg:flex-row items-center px-5 xl:px-64 mb-16 md:mb-32">
+    <div class="w-full lg:w-1/2 flex flex-col items-center mt-8 md:mt-32">
+      <img class="w-4/5 rounded-xl" :src="'http://localhost:5555/files/' + cover" alt="Project Img" />
+      <a
+        class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
+        :class="'bg-' + color + '-400 hover:bg-' + color + '-600'"
+        :href="url"
+      >{{formatLink}}</a>
+    </div>
+    <div class="w-full lg:w-1/2 ml-5 ">
+      <h1 class="text-xl lg:text-3xl font-bold">
+        {{ $t(title) }}
+      </h1>
+      <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
+        {{ $t(description) }}
+      </p>
+      <div>
+        <h3 class="text-md lg:text-lg font-bold">
+          {{ $t('work_tech_used') }}
+        </h3>
+        <div class="flex flex-row overflow-x-auto">
+          <div v-for="skill in skills">
+            <WorkSkill
+              :skill="skill.title.code"
+              :color="skill.color"
+              :cover="skill.cover.file_name"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import WorkSkill from "~/components/WorkSkill";
+export default {
+  name: "_id",
+  components: {WorkSkill},
+  head() {
+    return {
+      title: 'Work - Arthur Danjou'
+    }
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      title: '',
+      description: '',
+      skills: [],
+      color: '',
+      cover: '',
+      url: ''
+    }
+  },
+  async asyncData({ params, $axios }) {
+    const {data: project} = await $axios.get('/projects/' + params.id)
+    return {
+      title: project.title.code,
+      description: project.description.code,
+      skills: project.skills,
+      color: project.color,
+      cover: project.cover.file_name,
+      url: project.url
+    }
+  },
+  computed: {
+    formatLink() {
+      return this.url.replace('https://', '').replace('http://', '')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/work/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <main class="work flex flex-col items-center px-5 xl:px-64">
+    <PageTitle
+      title="Mon travail"
+      color="blue"
+    >
+      <svg class="inline-block icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+      </svg>
+    </PageTitle>
+    <h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">
+      Malheureusement il n'y a pas encore de projets disponibles. Reviens plus tard 😉
+    </h1>
+    <div v-else class="flex flex-col justify-around items-center py-10 w-full">
+      <h1 class="text-xl font-bold text-center mb-8">
+        Voici les différents projets auxquels j'ai pu participer dans mon passé !
+      </h1>
+      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-x-4">
+        <div v-for="work in works">
+          <nuxt-link :to="'/work/' + work.id">
+            <Work
+              :title="work.title.code"
+              :url="work.url"
+              :color="work.color"
+              :cover="work.cover.file_name"
+            />
+          </nuxt-link>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import PageTitle from "~/components/PageTitle";
+import Work from "~/components/Work";
+export default {
+  name: "index",
+  components: {Work, PageTitle},
+  head() {
+    return {
+      title: 'Work - Arthur Danjou'
+    }
+  },
+  data () {
+    return {
+      works: []
+    }
+  },
+  async asyncData({ $axios }) {
+    const {data: works} = await $axios.get('/projects')
+    return {
+      works
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>