website-old/pages/work/_id.vue

<template>
  <main class="px-5 xl:px-64 mb-16 md:mb-32">
    <div class="w-full flex flex-col lg:flex-row items-center md:items-start mt-8 md:mt-32">
      <div class="w-full lg:w-1/2 flex flex-col items-center">
        <div class="md:mb-24">
          <div class="mb-4 flex">
            <nuxt-link to="/work" class="back-arrow flex">
              <div class="duration-300 arrow">
                <svg height="25" width="25" 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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
              </div>
              <div class="ml-2">
                {{ $t('work_go_back') }}
              </div>
            </nuxt-link>
          </div>
        </div>
        <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 w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
            <div v-for="skill in skills">
              <WorkSkill
                :skill="skill.title.code"
                :color="skill.color"
                :cover="skill.cover.file_name"
              />
            </div>
          </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 lang="scss">
.back-arrow:hover .arrow {
  transform: translate(-8px, -1px);
}

.arrow {
  transform: translate(3px, -1px);
}
</style>