Lint project

src/components/AboutSection.vue

@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="about.title" />
   <SectionPart>
@@ -8,9 +14,3 @@
     </p>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/components/BackToSite.vue

@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <a href="https://arthurdanjou.fr" target="_blank" class="flex items-center mb-4 text-gray-700 dark:text-gray-300 text-sm">
     <div class="group cursor-pointer flex items-center">
@@ -5,9 +11,3 @@
     </div>
   </a>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/components/Education.vue

@@ -1,24 +1,6 @@
-<template>
-  <div>
-    <div>
-      <h1 class="text-lg leading-5">
-        <strong>{{ t(title) }}</strong>, {{ location }}
-      </h1>
-      <h3 class="my-1 text-sm text-gray-500 dark:text-gray-400">
-        {{ t('date.from') }} {{ getBeginDate }} {{ t('date.to') }} {{ getEndDate }}
-      </h3>
-    </div>
-    <p class="text-justify text-md leading-5 dark:text-gray-300">
-      <slot />
-    </p>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
-
 const props = defineProps({
   title: {
     type: String,
@@ -38,6 +20,8 @@ const props = defineProps({
   },
 })
 
+const { t } = useI18n()
+
 const getEndDate = computed(() => {
   return props.endDate === 'Today'
     ? t('date.today')
@@ -48,3 +32,19 @@ const getBeginDate = computed(() => {
   return `${t(`months.${props.beginDate.split('/')[0]}`)} ${props.beginDate.split('/')[1]}`
 })
 </script>
+
+<template>
+  <div>
+    <div>
+      <h1 class="text-lg leading-5">
+        <strong>{{ t(title) }}</strong>, {{ location }}
+      </h1>
+      <h3 class="my-1 text-sm text-gray-500 dark:text-gray-400">
+        {{ t('date.from') }} {{ getBeginDate }} {{ t('date.to') }} {{ getEndDate }}
+      </h3>
+    </div>
+    <p class="text-justify text-md leading-5 dark:text-gray-300">
+      <slot />
+    </p>
+  </div>
+</template>

src/components/EducationSection.vue

@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="educations.title" />
   <SectionPart class="space-y-4">
@@ -33,9 +39,3 @@
     </Education>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/components/Footer.vue

@@ -1,17 +1,3 @@
-<template>
-  <div class="mt-8 text-center">
-    <!-- <a class="leading-5 font-bold border-b-2 hover:(border-gray-700 dark:border-white) border-gray-300 dark:border-gray-700 dark:border-gray-800 duration-300 cursor-pointer">
-      {{ t('footer.pdf') }}
-    </a> -->
-    <p class="text-xs text-gray-700 dark:text-gray-300 mt-4">
-      {{ t('footer.updated', {date: updated}) }}
-    </p>
-    <p class="text-xs text-gray-700 dark:text-gray-300 mt-1">
-      {{ t('footer.copyright', {year}) }}
-    </p>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
@@ -26,3 +12,17 @@ const updated = computed(() => {
     : 'February 28th 2022 at 16:22'
 })
 </script>
+
+<template>
+  <div class="mt-8 text-center">
+    <!-- <a class="leading-5 font-bold border-b-2 hover:(border-gray-700 dark:border-white) border-gray-300 dark:border-gray-700 dark:border-gray-800 duration-300 cursor-pointer">
+      {{ t('footer.pdf') }}
+    </a> -->
+    <p class="text-xs text-gray-700 dark:text-gray-300 mt-4">
+      {{ t('footer.updated', { date: updated }) }}
+    </p>
+    <p class="text-xs text-gray-700 dark:text-gray-300 mt-1">
+      {{ t('footer.copyright', { year }) }}
+    </p>
+  </div>
+</template>

src/components/Header.vue

@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <div class="my-4 text-center sm:text-left">
     <h1 class="font-black text-2xl">
@@ -11,9 +17,3 @@
     </h3>
   </div>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/components/InterestSection.vue

@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="interests.title" />
   <SectionPart>
@@ -6,9 +12,3 @@
     </p>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/components/LanguageSection.vue

@@ -1,12 +1,12 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="languages.title" />
   <SectionPart>
     <p v-html="t('languages.content')" />
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/components/Menu.vue

@@ -1,30 +1,3 @@
-<template>
-  <div class="fixed top-2 right-1 sm:(top-4 right-4) grid grid-rows-2 gap-y-2 text-center">
-    <div
-      class="p-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full"
-      @click.prevent="toggleDark"
-    >
-      <SunIcon v-if="isDark" />
-      <MoonIcon v-else />
-    </div>
-    <div
-      class="p-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full transform"
-      :class="{'rotate-180': scrollPosition > 100}"
-      @click.prevent="teleport"
-    >
-      <DownArrowIcon />
-    </div>
-    <div @click.prevent="switchLanguage">
-      <div v-if="locale === 'fr'" class="text-right text-xl px-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full">
-        🇬🇧
-      </div>
-      <div v-else class="text-right text-xl px-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full">
-        🇫🇷
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { isDark, toggleDark } from '~/composables'
@@ -55,3 +28,30 @@ onUnmounted(() => {
   window.removeEventListener('scroll', updateScroll)
 })
 </script>
+
+<template>
+  <div class="fixed top-2 right-1 sm:(top-4 right-4) grid grid-rows-2 gap-y-2 text-center">
+    <div
+      class="p-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full"
+      @click.prevent="toggleDark"
+    >
+      <SunIcon v-if="isDark" />
+      <MoonIcon v-else />
+    </div>
+    <div
+      class="p-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full transform"
+      :class="{ 'rotate-180': scrollPosition > 100 }"
+      @click.prevent="teleport"
+    >
+      <DownArrowIcon />
+    </div>
+    <div @click.prevent="switchLanguage">
+      <div v-if="locale === 'fr'" class="text-right text-xl px-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full">
+        🇬🇧
+      </div>
+      <div v-else class="text-right text-xl px-1 hover:bg-gray-300 dark:hover:bg-gray-800 duration-300 cursor-pointer rounded-full">
+        🇫🇷
+      </div>
+    </div>
+  </div>
+</template>

src/components/Project.vue

@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+defineProps({
+  title: {
+    type: String,
+  },
+  url: {
+    type: String,
+  },
+  description: {
+    type: String,
+  },
+})
+
+const { t } = useI18n()
+</script>
+
 <template>
   <a
     class="w-full h-full"
@@ -15,21 +33,3 @@
     </div>
   </a>
 </template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-defineProps({
-  title: {
-    type: String,
-  },
-  url: {
-    type: String,
-  },
-  description: {
-    type: String,
-  },
-})
-</script>

src/components/ProjectSection.vue

@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="projects.title" />
   <SectionPart>
@@ -34,9 +40,3 @@
     </div>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/components/SectionTitle.vue

@@ -1,9 +1,3 @@
-<template>
-  <h3>
-    <span class="pl-1 pr-4 title py-1 font-bold text-xl relative bg-black text-white dark:(bg-white text-black)">{{ t(title) }}</span>
-  </h3>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
@@ -17,3 +11,9 @@ defineProps({
 
 const { t } = useI18n()
 </script>
+
+<template>
+  <h3>
+    <span class="pl-1 pr-4 title py-1 font-bold text-xl relative bg-black text-white dark:(bg-white text-black)">{{ t(title) }}</span>
+  </h3>
+</template>

src/components/Stack.vue

@@ -1,14 +1,6 @@
-<template>
-  <div class="mb-2">
-    <strong class="mr-2">{{ t(title) }}</strong><span class="dark:text-gray-200">{{ content }}</span>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
-
 defineProps({
   title: {
     default: 'Title',
@@ -19,4 +11,12 @@ defineProps({
     required: true,
   },
 })
+
+const { t } = useI18n()
 </script>
+
+<template>
+  <div class="mb-2">
+    <strong class="mr-2">{{ t(title) }}</strong><span class="dark:text-gray-200">{{ content }}</span>
+  </div>
+</template>

src/components/WorkExperience.vue

@@ -1,3 +1,42 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  title: {
+    type: String,
+  },
+  company: {
+    type: String,
+  },
+  location: {
+    type: String,
+  },
+  beginDate: {
+    type: String,
+    required: true,
+  },
+  endDate: {
+    type: String,
+    required: true,
+  },
+  url: {
+    type: String,
+  },
+})
+
+const { t } = useI18n()
+
+const getEndDate = computed(() => {
+  return props.endDate === 'Today'
+    ? t('date.today')
+    : `${t(`months.${props.endDate.split('/')[0]}`)} ${props.endDate.split('/')[1]}`
+})
+
+const getBeginDate = computed(() => {
+  return `${t(`months.${props.beginDate.split('/')[0]}`)} ${props.beginDate.split('/')[1]}`
+})
+</script>
+
 <template>
   <div>
     <div>
@@ -25,42 +64,3 @@
     </p>
   </div>
 </template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const props = defineProps({
-  title: {
-    type: String,
-  },
-  company: {
-    type: String,
-  },
-  location: {
-    type: String,
-  },
-  beginDate: {
-    type: String,
-    required: true,
-  },
-  endDate: {
-    type: String,
-    required: true,
-  },
-  url: {
-    type: String,
-  },
-})
-
-const getEndDate = computed(() => {
-  return props.endDate === 'Today'
-    ? t('date.today')
-    : `${t(`months.${props.endDate.split('/')[0]}`)} ${props.endDate.split('/')[1]}`
-})
-
-const getBeginDate = computed(() => {
-  return `${t(`months.${props.beginDate.split('/')[0]}`)} ${props.beginDate.split('/')[1]}`
-})
-</script>

src/components/WorkSection.vue

@@ -1,3 +1,9 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <SectionTitle title="works.title" />
   <SectionPart class="space-y-4">
@@ -42,9 +48,3 @@
     </WorkExperience>
   </SectionPart>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/components/icons/DownArrowIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'DownArrowIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'DownArrowIcon',
-}
-</script>

src/components/icons/GithubIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'GithubIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 24 24" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'GithubIcon',
-}
-</script>

src/components/icons/InstagramIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'InstagramIcon',
+}
+</script>
+
 <template>
   <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'InstagramIcon',
-}
-</script>

src/components/icons/LeftArrowIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'LeftArrowIcon',
+}
+</script>
+
 <template>
   <svg width="1em" height="1em" viewBox="0 0 256 256" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'LeftArrowIcon',
-}
-</script>

src/components/icons/LinkedInIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'LinkedInIcon',
+}
+</script>
+
 <template>
   <svg width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'LinkedInIcon',
-}
-</script>

src/components/icons/MailIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'MailIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 24 24" focusable="false">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'MailIcon',
-}
-</script>

src/components/icons/MoonIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'MoonIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
     <path
@@ -5,9 +11,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'MoonIcon',
-}
-</script>

src/components/icons/SunIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'SunIcon',
+}
+</script>
+
 <template>
   <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
     <path
@@ -5,9 +11,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'SunIcon',
-}
-</script>

src/components/icons/TwitterIcon.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'RiTwitterLine',
+}
+</script>
+
 <template>
   <svg width="1.5em" height="1.5em" viewBox="0 0 24 24">
     <path
@@ -6,9 +12,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'RiTwitterLine',
-}
-</script>