Initial commit 🚀

src/components/AboutSection.vue

@@ -0,0 +1,16 @@
+<template>
+  <SectionTitle title="about.title" />
+  <SectionPart>
+    <p class="text-justify leading-6">
+      {{ t('about.first') }}
+      <br><br>
+      {{ t('about.second') }}
+    </p>
+  </SectionPart>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

src/components/BackToSite.vue

@@ -0,0 +1,13 @@
+<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">
+      <LeftArrowIcon class="mr-2 group-hover:-translate-x-2 duration-300 transform" /> {{ t('back') }}
+    </div>
+  </a>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

src/components/Education.vue

@@ -0,0 +1,50 @@
+<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,
+    default: 'Title',
+  },
+  location: {
+    type: String,
+    default: 'Location',
+  },
+  beginDate: {
+    type: String,
+    required: true,
+  },
+  endDate: {
+    type: String,
+    required: true,
+  },
+})
+
+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/EducationSection.vue

@@ -0,0 +1,41 @@
+<template>
+  <SectionTitle title="educations.title" />
+  <SectionPart class="space-y-4">
+    <Education
+      title="educations.license"
+      location="Faculté des Sciences de l'Université Paris-Saclay, Orsay (France)"
+      begin-date="08/2021"
+      end-date="Today"
+    />
+    <Education
+      title="educations.selftaught.title"
+      location="Remote"
+      begin-date="08/2021"
+      end-date="Today"
+    >
+      {{ t('educations.selftaught.content') }}
+    </Education>
+    <Education
+      title="educations.baccalaureate"
+      location="Lycée La Salle Passy-Buzenval, Rueil-Malmaison (France)"
+      begin-date="09/2020"
+      end-date="09/2021"
+    >
+      {{ t('educations.b') }}
+    </Education>
+    <Education
+      title="educations.dnb"
+      location="Collège La Salle Passy-Buzenval, Rueil-Malmaison (France)"
+      begin-date="09/2017"
+      end-date="09/2018"
+    >
+      {{ t('educations.tb') }}
+    </Education>
+  </SectionPart>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

src/components/Footer.vue

@@ -0,0 +1,28 @@
+<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'
+
+const { t, locale } = useI18n()
+const year = computed(() => {
+  return new Date().getFullYear()
+})
+
+const updated = computed(() => {
+  return locale.value === 'fr'
+    ? '28 Février 2022 à 16h22'
+    : 'February 28th 2022 at 16:22'
+})
+</script>

src/components/Header.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="my-4 text-center sm:text-left">
+    <h1 class="font-black text-2xl">
+      Arthur DANJOU
+    </h1>
+    <h2 class="text-lg text-gray-600 dark:text-gray-400">
+      {{ t('header.job') }}
+    </h2>
+    <h3 class="text-sm text-gray-500 dark:text-gray-300 mt-2">
+      Paris, France
+    </h3>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

src/components/InterestSection.vue

@@ -0,0 +1,14 @@
+<template>
+  <SectionTitle title="interests.title" />
+  <SectionPart>
+    <p class="text-justify">
+      {{ t('interests.content') }}
+    </p>
+  </SectionPart>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

src/components/LanguageSection.vue

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,57 @@
+<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'
+
+const { locale } = useI18n()
+
+const switchLanguage = () => {
+  locale.value = locale.value === 'fr' ? 'en' : 'fr'
+}
+
+const scrollPosition = ref(0)
+
+const teleport = () => {
+  window.scroll({
+    behavior: 'smooth',
+    top: scrollPosition.value > 100 ? 0 : document.body.scrollHeight,
+  })
+}
+
+const updateScroll = () => {
+  scrollPosition.value = window.scrollY
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', updateScroll)
+})
+onUnmounted(() => {
+  window.removeEventListener('scroll', updateScroll)
+})
+</script>

src/components/Project.vue

@@ -0,0 +1,35 @@
+<template>
+  <a
+    class="w-full h-full"
+    :href="url"
+    target="_blank"
+  >
+    <div class="w-full h-full p-2 border-2 rounded-lg border-white hover:border-gray-300 duration-500 cursor-pointer">
+
+      <h1 class="font-bold">
+        {{ title }}
+      </h1>
+      <h2 class="text-gray-700 text-justify dark:text-gray-200">
+        {{ t(description) }}
+      </h2>
+    </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

@@ -0,0 +1,40 @@
+<template>
+  <SectionTitle title="projects.title" />
+  <SectionPart>
+    <div class="grid gris-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 mb-4">
+      <Project
+        title="Ares"
+        description="projects.ares"
+        url="https://arthurdanjou.fr"
+      />
+      <Project
+        title="Athena"
+        description="projects.athena"
+        url="https://api.arthurdanjou.fr"
+      />
+      <Project
+        title="LinkyJs"
+        description="projects.linkyjs"
+      />
+      <Project
+        title="Slidev"
+        description="projects.slidev"
+      />
+    </div>
+    <div class="flex justify-center sm:justify-start">
+      <a
+        href="https://arthurdanjou.fr/projects"
+        target="_blank"
+        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('projects.more') }}
+      </a>
+    </div>
+  </SectionPart>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

src/components/SectionPart.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="p-6">
+    <slot />
+  </div>
+</template>

src/components/SectionTitle.vue

@@ -0,0 +1,19 @@
+<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'
+
+defineProps({
+  title: {
+    default: 'Title',
+    required: true,
+    type: String,
+  },
+})
+
+const { t } = useI18n()
+</script>

src/components/SocialList.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex justify-center sm:justify-start">
+    <div class="flex space-x-3 items-center">
+      <a
+        class="hover:bg-gray-300 dark:hover:bg-gray-800 p-1 rounded-full duration-300"
+        href="mailto:contact@arthurdanjou.fr"
+        target="_blank"
+      >
+        <MailIcon />
+      </a>
+      <a
+        class="hover:bg-gray-300 dark:hover:bg-gray-800 p-1 rounded-full duration-300"
+        href="https://github.com/arthurdanjou"
+        target="_blank"
+      >
+        <GithubIcon />
+      </a>
+      <a
+        class="hover:bg-gray-300 dark:hover:bg-gray-800 p-1 rounded-full duration-300"
+        href="https://twitter.com/arthurdanj"
+        target="_blank"
+      >
+        <TwitterIcon />
+      </a>
+      <a
+        class="hover:bg-gray-300 dark:hover:bg-gray-800 p-1 rounded-full duration-300"
+        href="https://www.linkedin.com/in/arthurdanjou"
+        target="_blank"
+      >
+        <LinkedInIcon />
+      </a>
+      <a
+        class="hover:bg-gray-300 dark:hover:bg-gray-800 p-1.5 rounded-full duration-300"
+        href="https://www.instagram.com/arthur.dnj"
+        target="_blank"
+      >
+        <InstagramIcon />
+      </a>
+    </div>
+  </div>
+</template>

src/components/Stack.vue

@@ -0,0 +1,22 @@
+<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',
+    required: true,
+  },
+  content: {
+    default: 'Content',
+    required: true,
+  },
+})
+</script>

src/components/StackSection.vue

@@ -0,0 +1,9 @@
+<template>
+  <SectionTitle title="stacks.title" />
+  <SectionPart>
+    <Stack title="stacks.languages" content="TypeScript, JavaScript, Python, Java, Rust" />
+    <Stack title="stacks.frontend" content="VueJs, NuxtJs, WindiCss, Sass, TauriApp, ViteJs" />
+    <Stack title="stacks.backend" content="AdonisJs, MariaDB, Redis, RabbitMQ" />
+    <Stack title="stacks.devops" content="Git, Docker, CI/CD, Traefik" />
+  </SectionPart>
+</template>

src/components/WorkExperience.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div>
+      <h1 v-if="url" class="text-lg">
+        <a
+          :href="url"
+          target="_blank"
+          class="font-bold border-b-2 hover:(border-gray-700 dark:border-white) border-gray-300 dark:border-gray-600 dark:border-gray-800 duration-300 cursor-pointer"
+        >
+          {{ company }}
+        </a> - <span class="text-gray-700 dark:text-gray-300">{{ t(title) }}</span>
+      </h1>
+      <h1 v-else class="text-lg">
+        <strong>{{ company }}</strong> - <span class="text-gray-700 dark:text-gray-300">{{ t(title) }}</span>
+      </h1>
+      <h3 v-if="getBeginDate === getEndDate" class="text-sm text-gray-500 dark:text-gray-400 my-1">
+        {{ t('date.in') }} {{ getEndDate }} <span class="mx-2">|</span> {{ location }}
+      </h3>
+      <h3 v-else class="text-sm text-gray-500 dark:text-gray-400 my-1">
+        {{ t('date.from') }} {{ getBeginDate }} {{ t('date.to') }} {{ getEndDate }} <span class="mx-2">|</span> {{ location }}
+      </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,
+  },
+  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

@@ -0,0 +1,50 @@
+<template>
+  <SectionTitle title="works.title" />
+  <SectionPart class="space-y-4">
+    <WorkExperience
+      title="works.autoentrepreneur.title"
+      company="ArtDanjProduction"
+      begin-date="09/2015"
+      end-date="Today"
+      location="Rueil-Malmaison, France"
+      url="https://arthurdanjou.fr"
+    >
+      {{ t('works.autoentrepreneur.content') }}
+    </WorkExperience>
+    <WorkExperience
+      title="works.erisium.title"
+      company="Erisium"
+      begin-date="02/2019"
+      end-date="11/2020"
+      location="Remote"
+      url="https://erisium.com"
+    >
+      {{ t('works.erisium.content') }}
+    </WorkExperience>
+    <WorkExperience
+      title="works.idemia.title"
+      company="Idemia"
+      begin-date="06/2019"
+      end-date="06/2019"
+      location="Courbevoie, France"
+      url="https://idemia.com"
+    >
+      {{ t('works.idemia.content') }}
+    </WorkExperience>
+    <WorkExperience
+      title="works.lsam.title"
+      company="La Salle à Manger"
+      begin-date="04/2018"
+      end-date="04/2018"
+      location="Boulogne-Billancourt, France"
+    >
+      {{ t('works.lsam.content') }}
+    </WorkExperience>
+  </SectionPart>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>

src/components/icons/DownArrowIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
+    <path
+      d="M208.485 152.485l-72 72a12 12 0 0 1-16.97 0l-72-72a12 12 0 0 1 16.97-16.97L116 187.029V40a12 12 0 0 1 24 0v147.03l51.515-51.515a12 12 0 0 1 16.97 16.97z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'DownArrowIcon',
+}
+</script>

src/components/icons/GithubIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg width="1.3em" height="1.3em" viewBox="0 0 24 24" focusable="false">
+    <path
+      fill="currentColor"
+      d="M10.07 20.503a1 1 0 0 0-1.18-.983c-1.31.24-2.963.276-3.402-.958a5.708 5.708 0 0 0-1.837-2.415a1.2 1.2 0 0 1-.167-.11a1 1 0 0 0-.93-.645h-.005a1 1 0 0 0-1 .995c-.004.815.81 1.338 1.141 1.514a4.44 4.44 0 0 1 .924 1.36c.365 1.023 1.423 2.576 4.466 2.376l.003.098l.004.268a1 1 0 0 0 2 0l-.005-.318c-.005-.19-.012-.464-.012-1.182ZM20.737 5.377a5.39 5.39 0 0 0 .09-.42a6.278 6.278 0 0 0-.408-3.293a1.002 1.002 0 0 0-.615-.58c-.356-.12-1.67-.357-4.184 1.25a13.87 13.87 0 0 0-6.354 0C6.762.75 5.455.966 5.102 1.079a.997.997 0 0 0-.631.584a6.3 6.3 0 0 0-.404 3.357c.025.127.051.246.079.354a6.27 6.27 0 0 0-1.256 3.83a8.422 8.422 0 0 0 .043.921c.334 4.603 3.334 5.984 5.424 6.459a4.591 4.591 0 0 0-.118.4a1 1 0 0 0 1.942.479a1.678 1.678 0 0 1 .468-.878a1 1 0 0 0-.546-1.745c-3.454-.395-4.954-1.802-5.18-4.899a6.61 6.61 0 0 1-.033-.738a4.258 4.258 0 0 1 .92-2.713a3.022 3.022 0 0 1 .195-.231a1 1 0 0 0 .188-1.025a3.388 3.388 0 0 1-.155-.555a4.094 4.094 0 0 1 .079-1.616a7.543 7.543 0 0 1 2.415 1.18a1.009 1.009 0 0 0 .827.133a11.777 11.777 0 0 1 6.173.001a1.005 1.005 0 0 0 .83-.138a7.572 7.572 0 0 1 2.406-1.19a4.04 4.04 0 0 1 .087 1.578a3.205 3.205 0 0 1-.169.607a1 1 0 0 0 .188 1.025c.078.087.155.18.224.268A4.122 4.122 0 0 1 20 9.203a7.039 7.039 0 0 1-.038.777c-.22 3.056-1.725 4.464-5.195 4.86a1 1 0 0 0-.546 1.746a1.63 1.63 0 0 1 .466.908a3.06 3.06 0 0 1 .093.82v2.333c-.01.648-.01 1.133-.01 1.356a1 1 0 1 0 2 0c0-.217 0-.692.01-1.34v-2.35a4.881 4.881 0 0 0-.155-1.311a4.256 4.256 0 0 0-.116-.416a6.513 6.513 0 0 0 5.445-6.424A8.697 8.697 0 0 0 22 9.203a6.13 6.13 0 0 0-1.263-3.826Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'GithubIcon',
+}
+</script>

src/components/icons/InstagramIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" focusable="false">
+    <path
+      fill="currentColor"
+      d="M8 0C5.829 0 5.556.01 4.703.048C3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7C.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297c.04.852.174 1.433.372 1.942c.205.526.478.972.923 1.417c.444.445.89.719 1.416.923c.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417c.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046c.78.035 1.204.166 1.486.275c.373.145.64.319.92.599c.28.28.453.546.598.92c.11.281.24.705.275 1.485c.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598c-.28.11-.704.24-1.485.276c-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598a2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485c-.038-.843-.046-1.096-.046-3.233c0-2.136.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486c.145-.373.319-.64.599-.92c.28-.28.546-.453.92-.598c.282-.11.705-.24 1.485-.276c.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92a.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217a4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334a2.667 2.667 0 0 1 0-5.334z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'InstagramIcon',
+}
+</script>

src/components/icons/LeftArrowIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 256 256" focusable="false">
+    <path
+      d="M228 128a12 12 0 0 1-12 12H68.97l51.515 51.515a12 12 0 0 1-16.97 16.97l-72-72a12 12 0 0 1 0-16.97l72-72a12 12 0 0 1 16.97 16.97L68.971 116H216a12 12 0 0 1 12 12z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'LeftArrowIcon',
+}
+</script>

src/components/icons/LinkedInIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      fill="currentColor"
+      d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'LinkedInIcon',
+}
+</script>

src/components/icons/MailIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg width="1.3em" height="1.3em" viewBox="0 0 24 24" focusable="false">
+    <path
+      fill="currentColor"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10h5v-2h-5c-4.34 0-8-3.66-8-8s3.66-8 8-8s8 3.66 8 8v1.43c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57V12c0-2.76-2.24-5-5-5s-5 2.24-5 5s2.24 5 5 5c1.38 0 2.64-.56 3.54-1.47c.65.89 1.77 1.47 2.96 1.47c1.97 0 3.5-1.6 3.5-3.57V12c0-5.52-4.48-10-10-10zm0 13c-1.66 0-3-1.34-3-3s1.34-3 3-3s3 1.34 3 3s-1.34 3-3 3z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'MailIcon',
+}
+</script>

src/components/icons/MoonIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
+    <path
+      d="M228.13 149.117a12.004 12.004 0 0 0-14.962-7.952a80.032 80.032 0 0 1-98.31-98.415a12.002 12.002 0 0 0-14.919-14.917a104.014 104.014 0 1 0 128.247 128.162a12.002 12.002 0 0 0-.055-6.878zM128 208A80.01 80.01 0 0 1 88.146 58.617a103.982 103.982 0 0 0 109.237 109.237A80.31 80.31 0 0 1 128 208z" fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'MoonIcon',
+}
+</script>

src/components/icons/SunIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="1.3em" height="1.3em" viewBox="0 0 256 256" focusable="false">
+    <path
+      d="M128 56a72 72 0 1 0 72 72a72.081 72.081 0 0 0-72-72zm0 120a48 48 0 1 1 48-48a48.054 48.054 0 0 1-48 48zM116 28v-8a12 12 0 0 1 24 0v8a12 12 0 0 1-24 0zm74.225 37.774a12 12 0 0 1 0-16.97l5.658-5.657a12 12 0 1 1 16.97 16.971l-5.658 5.657a12 12 0 0 1-16.97 0zM248 128a12 12 0 0 1-12 12h-8a12 12 0 0 1 0-24h8a12 12 0 0 1 12 12zm-35.147 67.882a12 12 0 0 1-16.97 16.971l-5.658-5.657a12 12 0 1 1 16.97-16.97zM140 228v8a12 12 0 0 1-24 0v-8a12 12 0 0 1 24 0zm-74.225-37.775a12 12 0 0 1 0 16.97l-5.657 5.658a12 12 0 0 1-16.971-16.97l5.657-5.658a12 12 0 0 1 16.97 0zM40 128a12 12 0 0 1-12 12h-8a12 12 0 0 1 0-24h8a12 12 0 0 1 12 12zm3.147-67.882a12 12 0 1 1 16.97-16.971l5.657 5.657a12 12 0 1 1-16.97 16.97z" fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SunIcon',
+}
+</script>

src/components/icons/TwitterIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg width="1.5em" height="1.5em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M15.3 5.55a2.9 2.9 0 0 0-2.9 2.847l-.028 1.575a.6.6 0 0 1-.68.583l-1.561-.212c-2.054-.28-4.022-1.226-5.91-2.799c-.598 3.31.57 5.603 3.383 7.372l1.747 1.098a.6.6 0 0 1 .034.993L7.793 18.17c.947.059 1.846.017 2.592-.131c4.718-.942 7.855-4.492 7.855-10.348c0-.478-1.012-2.141-2.94-2.141zm-4.9 2.81a4.9 4.9 0 0 1 8.385-3.355c.711-.005 1.316.175 2.669-.645c-.335 1.64-.5 2.352-1.214 3.331c0 7.642-4.697 11.358-9.463 12.309c-3.268.652-8.02-.419-9.382-1.841c.694-.054 3.514-.357 5.144-1.55C5.16 15.7-.329 12.47 3.278 3.786c1.693 1.977 3.41 3.323 5.15 4.037c1.158.475 1.442.465 1.973.538z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'RiTwitterLine',
+}
+</script>