arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-14 20:19:35 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Working and fixing some bugs

Browse Source
This commit is contained in:
Arthur Danjou
2021-07-02 19:33:05 +02:00
parent 85f8043a62
commit 693d08fe97
22 changed files with 10851 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
settings/Arch.ts
View File

@@ -25,7 +25,10 @@ const server = {
host: '0.0.0.0'
}
const components = true
const components = [
'components',
'components/icons'
]
const buildDir = 'build'

1
src/assets/images/socials/github-black.svg
View File

@@ -1 +0,0 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-140.699219 0-256 116.300781-256 257 0 139.882812 114.25 255 256 255 141.574219 0 256-114.945312 256-255 0-140.699219-115.300781-257-256-257zm45 477.5c-14.398438 3-29.699219 4.5-45 4.5s-30.601562-1.5-45-4.5v-70.199219c0-16.800781 4.5-22.800781 10.5-30.902343 3.054688-3.492188 4.898438-6.625 18.597656-27.296876l-23.097656-3.601562c-59.402344-8.699219-82.800781-39.601562-92.101562-63.601562-12-32.097657-5.699219-72.300782 15.902343-97.796876 3.300781-3.902343 6-10.503906 3.601563-17.402343-4.503906-13.800781-3.902344-35.699219-.902344-44.101563 15.90625 2.273438 32.261719 13.667969 45.902344 21.902344 6.285156 3.667969 9.582031 2.699219 12.597656 3 10.960938-2.28125 28.058594-7.800781 54.300781-7.800781 16.199219 0 33.300781 2.398437 50.101563 7.199219 3.003906-.070313 7.832031 2.484374 16.199218-2.398438 14.257813-8.6875 30.058594-19.691406 45.898438-21.902344 3 8.402344 3.601562 30.300782-.898438 44.101563-2.402343 6.898437.296876 13.5 3.601563 17.402343 21.597656 25.5 27.898437 65.699219 15.898437 97.796876-9.300781 24-32.699218 54.902343-92.101562 63.601562l-23.097656 3.601562c14.160156 21.367188 15.652344 23.929688 18.601562 27.296876 5.996094 8.101562 10.496094 14.101562 10.496094 30.902343zm30-8.699219v-61.5c0-17.101562-3.601562-28.5-8.402344-36.902343 45.601563-12.296876 78.003906-39.300782 92.402344-78 15.300781-40.796876 8.402344-89.398438-17.101562-123 4.503906-20.097657 4.503906-52.199219-6.296876-67.199219-4.800781-6.597657-11.402343-10.199219-19.800781-10.199219-.300781 0-.300781 0-.300781 0-23.261719 1.257812-41.570312 12.972656-61.199219 24.898438-18-4.800782-36.300781-7.199219-54.601562-7.199219-18.597657 0-37.199219 2.699219-53.695313 7.199219-20.664062-12.460938-38.796875-23.671876-62.703125-24.898438-7.5 0-14.101562 3.601562-18.902343 10.199219-10.796876 15-10.796876 47.101562-6.296876 67.199219-25.503906 33.601562-32.402343 82.5-17.101562 123 14.398438 38.699218 46.800781 65.703124 92.402344 78-3.722656 6.511718-6.667969 14.914062-7.828125 26.285156-9.210938 3.175781-17.199219 4.210937-24.628907 2.027344-7.835937-2.316407-13.941406-7.546876-19.246093-16.46875-11.914063-20.015626-32.207031-36.355469-55.3125-34.230469l2.636719 29.882812c10.699218-.980469 21.347656 10.339844 26.878906 19.671875 9.125 15.367188 21.417968 25.445313 36.546875 29.914063 11.230469 3.308593 21.496093 3.230469 32.550781.871093v40.449219c-87.300781-30.601562-151-114-151-211.800781 0-124.199219 101.800781-227 226-227s226 102.800781 226 227c0 97.800781-63.699219 181.199219-151 211.800781zm0 0"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

5
src/assets/images/socials/github-white.svg
View File

@@ -1,5 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M256,0C115.301,0 0,116.301 0,257C0,396.883 114.25,512 256,512C397.574,512 512,397.055 512,257C512,116.301 396.699,0 256,0ZM301,477.5C286.602,480.5 271.301,482 256,482C240.699,482 225.398,480.5 211,477.5L211,407.301C211,390.5 215.5,384.5 221.5,376.398C224.555,372.906 226.398,369.773 240.098,349.102L217,345.5C157.598,336.801 134.199,305.898 124.898,281.898C112.898,249.801 119.199,209.598 140.801,184.102C144.102,180.199 146.801,173.598 144.402,166.699C139.898,152.898 140.5,131 143.5,122.598C159.406,124.871 175.762,136.266 189.402,144.5C195.688,148.168 198.984,147.199 202,147.5C212.961,145.219 230.059,139.699 256.301,139.699C272.5,139.699 289.602,142.098 306.402,146.898C309.406,146.828 314.234,149.383 322.602,144.5C336.859,135.813 352.66,124.809 368.5,122.598C371.5,131 372.102,152.898 367.602,166.699C365.199,173.598 367.898,180.199 371.203,184.102C392.801,209.602 399.102,249.801 387.102,281.898C377.801,305.898 354.402,336.801 295,345.5L271.902,349.102C286.063,370.469 287.555,373.031 290.504,376.398C296.5,384.5 301,390.5 301,407.301L301,477.5ZM331,468.801L331,407.301C331,390.199 327.398,378.801 322.598,370.398C368.199,358.102 400.602,331.098 415,292.398C430.301,251.602 423.402,203 397.898,169.398C402.402,149.301 402.402,117.199 391.602,102.199C386.801,95.602 380.199,92 371.801,92L371.5,92C348.238,93.258 329.93,104.973 310.301,116.898C292.301,112.098 274,109.699 255.699,109.699C237.102,109.699 218.5,112.398 202.004,116.898C181.34,104.438 163.207,93.227 139.301,92C131.801,92 125.199,95.602 120.398,102.199C109.602,117.199 109.602,149.301 114.102,169.398C88.598,203 81.699,251.898 97,292.398C111.398,331.098 143.801,358.102 189.402,370.398C185.68,376.91 182.734,385.313 181.574,396.684C172.363,399.859 164.375,400.895 156.945,398.711C149.109,396.395 143.004,391.164 137.699,382.242C125.785,362.227 105.492,345.887 82.387,348.012L85.023,377.895C95.723,376.914 106.371,388.234 111.902,397.566C121.027,412.934 133.32,423.012 148.449,427.48C159.68,430.789 169.945,430.711 181,428.352L181,468.801C93.699,438.199 30,354.801 30,257C30,132.801 131.801,30 256,30C380.199,30 482,132.801 482,257C482,354.801 418.301,438.199 331,468.801Z" style="fill:white;fill-rule:nonzero;"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

13
src/assets/images/socials/nuxtjs.svg
View File

@@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="191px" viewBox="0 0 256 191" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(0.000173, 0.000000)">
<path d="M77.8911791,183.614864 C77.7012551,183.279 77.5321086,182.931804 77.384692,182.575232 C76.3622173,180.209762 76.0473968,177.598605 76.478347,175.057899 L15.9931374,175.057899 L105.88125,16.874014 L135.390782,68.7489446 L143.947746,53.6076496 L118.223538,8.29039232 C117.503793,6.98418906 113.158668,0 105.667993,0 C102.282527,0 97.4309144,1.46614656 93.485647,8.39702119 L2.42461749,168.500225 C1.65155838,169.8864 -2.10710822,177.163819 1.62490116,183.614864 C3.33096269,186.547156 6.9563432,190.039251 14.9535063,190.039251 L91.2197845,190.039251 C83.2759358,190.039251 79.5972406,186.600471 77.8911791,183.614864 Z" fill="#01C58E" />
<path d="M253.242307,168.500225 L178.415518,36.6803211 C177.64246,35.2941462 173.323992,28.2832999 165.806658,28.2832999 C162.421193,28.2832999 157.56958,29.7227893 153.624314,36.6536639 L143.947746,53.6076496 L152.558025,68.7489446 L165.88663,45.157314 L239.913702,175.057899 L211.763688,175.057899 C212.123898,177.20534 211.921853,179.409465 211.17723,181.45563 C211.020409,181.907379 210.824167,182.344463 210.590771,182.761832 L210.350856,183.241662 C206.565533,189.692707 198.381769,190.039251 196.782337,190.039251 L240.820047,190.039251 C242.446137,190.039251 250.603243,189.692707 254.388568,183.241662 C256.067972,180.309369 257.267546,175.377785 253.242307,168.500225 Z" fill="#108775" />
<path d="M210.350856,183.241662 L210.590771,182.761832 C210.824167,182.344463 211.020409,181.907379 211.17723,181.45563 C211.921853,179.409465 212.123898,177.20534 211.763688,175.057899 C211.348809,172.741872 210.517913,170.520128 209.311226,168.500225 L152.611339,68.7489446 L143.947746,53.6076496 L135.337467,68.7489446 L78.6642383,168.500225 C77.5638612,170.544123 76.8243845,172.762554 76.478347,175.057899 C76.0222311,177.590906 76.3092441,180.201797 77.3047209,182.575232 C77.4521368,182.931805 77.6212834,183.279 77.8112079,183.614864 C79.5172694,186.547156 83.1426494,190.039251 91.1398127,190.039251 L196.702365,190.039251 C198.381769,190.039251 206.565533,189.692707 210.350856,183.241662 L210.350856,183.241662 Z M143.947746,83.89024 L195.769362,175.057899 L92.1527868,175.057899 L143.947746,83.89024 Z" fill="#2F495E" />
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

11
src/assets/images/socials/twitch.svg
View File

@@ -1,11 +0,0 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-92.4 101 489.5 512" enable-background="new -92.4 101 489.5 512" xml:space="preserve">
<g>
<path fill="#65459B" d="M263.6,546.1H163.4L96.7,613H30v-66.9H-92.4v-356l33.3-89.1h456.2v311.6L263.6,546.1z M352.7,390.5V145.5H-14.6v322.7H85.6V535l66.7-66.7h122.4L352.7,390.5z"/>
<g id="Solo_Glitch_136_">
<g>
<path fill="#65459B" d="M230.2,234.6v133.6h44.5V234.6H230.2z M107.8,368.1h44.5V234.6h-44.5V368.1z"/>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 578 B

5
src/assets/images/socials/twitter.svg
View File

@@ -1,5 +0,0 @@
<svg id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.24 102.59">
<defs>
<style>.cls-1{fill:#1da1f2;}</style>
</defs>
<path id="original" class="cls-1" d="M40.58,115.3c47.64,0,73.69-39.47,73.69-73.69,0-1.12,0-2.24-.07-3.35a52.7,52.7,0,0,0,12.92-13.41,51.7,51.7,0,0,1-14.87,4.08A26,26,0,0,0,123.63,14.6a51.9,51.9,0,0,1-16.45,6.29A25.92,25.92,0,0,0,63.05,44.51,73.53,73.53,0,0,1,9.67,17.45a25.92,25.92,0,0,0,8,34.58A25.71,25.71,0,0,1,6,48.78c0,.11,0,.22,0,.33A25.91,25.91,0,0,0,26.73,74.5a25.86,25.86,0,0,1-11.7.44,25.93,25.93,0,0,0,24.2,18A52,52,0,0,1,7.06,104a52.72,52.72,0,0,1-6.18-.36,73.32,73.32,0,0,0,39.7,11.63" transform="translate(-0.88 -12.7)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 686 B

4
src/components/ContactForm.vue
View File

@@ -79,7 +79,7 @@ export default defineComponent({
const {$axios, $sentry} = useContext()
const form = ref<Form>({} as Form)
const handleForm = async () => {
const {data} = await $axios.post('form',
const response = await $axios.post('form',
{
email: form.value.email,
name: form.value.name,
@@ -90,7 +90,7 @@ export default defineComponent({
'Authorization': `Bearer ${process.env.API_TOKEN}`
}
})
if (data && data.status === 200) {
if (response.status === 200) {
success.value = true
setTimeout(() => {
success.value = false

20
src/components/Footer.vue
View File

@@ -6,26 +6,23 @@
<p class="inline">{{ $t('footer.find_me') }}
<br class="md:hidden"/>
<a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
<img class="inline" src="~/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
<TwitchIcon />
<span class="link">Twitch</span>
</a>,
<a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
<img v-if="!isDarkMode" class="inline" src="~/assets/images/socials/github-black.svg" alt="Github logo" height="20" width="20" />
<img v-else class="inline" src="~/assets/images/socials/github-white.svg" alt="Github logo" height="20" width="20" />
<GithubIcon />
<span class="link">Github</span>
</a> &
<a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
<img class="inline" src="/socials/twitter.svg" alt="Twitter logo" height="" width="20" height="20"/>
<TwitterIcon />
<span class="link">Twitter</span>
</a>
<br class="md:hidden"/>
{{ $t('footer.separator') }}
<a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank" rel="noopener noreferrer">
<svg class="inline" width="20" height="20" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<MailIcon />
<span class="link">Mail</span>
</a>
</a>
</p>
<br class="md:hidden"/>
<span class="inline dark:text-dark-200 text-gray-600 text-xs">
@@ -35,9 +32,14 @@
<p>
{{ $t('footer.credits') }}
<a class="font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
<img class="inline" src="~/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" width="20" />
<NuxtIcon />
<span class="link">NuxtJs</span>
</a>
{{ $t('footer.credits_separator_and') }}
<a class="font-semibold" target="_blank" href="https://adonisjs.com" rel="noopener noreferrer">
<AdonisIcon />
<span class="link">AdonisJS</span>
</a>
{{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
</p>
<p>{{ $t('footer.copyrights', { date: getDate }) }}</p>

26
src/components/icons/AdonisIcon.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<svg class="inline" width="1.25em" height="1.25em" viewBox="0 0 512 512" focusable="false">
<path
d="M0 256c0 206.466 49.534 256 256 256s256-49.534 256-256S462.466 0 256 0S0 49.534 0 256zm173.626 160.582c-58.99.278-91.98-54.306-70.393-107.414l80.305-182.475c19.73-56.102 111.542-71.358 144.938 0l80.29 182.475c21.716 52.478-11.158 108.055-70.392 107.414c-19.592 1.368-58.414-17.567-82.434-16.068c-32.51-.363-54.67 16.891-82.314 16.068zm160.582-78.725L256 158.499l-79.257 179.358c47.532-20.986 108-22.252 157.465 0z"
:class="isDarkMode ? 'fill-adonis-dark' : 'fill-adonis-light'"
/>
</svg>
</template>
<script lang="ts">
import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
export default defineComponent({
name: "GithubIcon",
setup() {
const {$colorMode} = useContext()
const isDarkMode = computed(() => {
return $colorMode.preference === 'dark'
})
return {
isDarkMode
}
}
})
</script>

26
src/components/icons/GithubIcon.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
<path
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.452 1.2 0 0 1-.167-.11a1 1 0 0 0-.93-.6h-.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.377c.032-.125.063-.264.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"
:fill="isDarkMode ? 'white' : 'black'"
/>
</svg>
</template>
<script lang="ts">
import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
export default defineComponent({
name: "GithubIcon",
setup() {
const {$colorMode} = useContext()
const isDarkMode = computed(() => {
return $colorMode.preference === 'dark'
})
return {
isDarkMode
}
}
})
</script>

26
src/components/icons/MailIcon.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
<path
d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6m-2 0l-8 5l-8-5h16m0 12H4V8l8 5l8-5v10z"
:fill="isDarkMode ? 'white' : 'black'"
/>
</svg>
</template>
<script lang="ts">
import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
export default defineComponent({
name: "GithubIcon",
setup() {
const {$colorMode} = useContext()
const isDarkMode = computed(() => {
return $colorMode.preference === 'dark'
})
return {
isDarkMode
}
}
})
</script>

21
src/components/icons/NuxtIcon.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 32 32" focusable="false">
<path
d="M10.648 25.734a1.465 1.465 0 0 1-.157-.942H3.847l9.869-17.375l4.159 7.41l1.308-.976l-4.107-7.384A1.752 1.752 0 0 0 13.7 5.56a1.531 1.531 0 0 0-1.343.924l-10 17.593a1.729 1.729 0 0 0-.087 1.656a1.526 1.526 0 0 0 1.456.706H12.1a1.523 1.523 0 0 1-1.456-.7z"
fill="#00c58e"
/>
<path
d="M29.636 24.112L21.589 9.823a1.692 1.692 0 0 0-1.351-.907a1.489 1.489 0 0 0-1.308.907l-1.064 1.7v3.3l2.371-4.071l7.951 14.071h-3.025a1.377 1.377 0 0 1-.122.837l-.026.052a1.729 1.729 0 0 1-1.456.732h4.734a1.72 1.72 0 0 0 1.456-.732a1.548 1.548 0 0 0-.122-1.6z"
fill="#108775"
/>
<path
d="M25.233 25.7l.026-.052l.07-.139a1.278 1.278 0 0 0 .061-.7a2.11 2.11 0 0 0-.27-.724l-6.286-10.9l-.95-1.656h-.017l-.959 1.648l-6.277 10.9a2.18 2.18 0 0 0-.244.715a1.438 1.438 0 0 0 .148.942a1.563 1.563 0 0 0 1.482.7h11.708a1.79 1.79 0 0 0 1.508-.741zm-7.367-10.864L23.62 24.8H12.112z"
fill="#2f495e"/>
</svg>
</template>
<script>
export default {
name: "NuxtIcon"
}
</script>

34
src/components/icons/TwitchIcon.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 256 256" focusable="false">
<path
d="M71.998 252A12 12 0 0 1 60 240v-28H48a20.022 20.022 0 0 1-20-20V48a20.022 20.022 0 0 1 20-20h160a20.022 20.022 0 0 1 20 20v108.253a19.946 19.946 0 0 1-7.197 15.365l-42.896 35.746A20.036 20.036 0 0 1 165.104 212h-40.759l-44.663 37.219A11.994 11.994 0 0 1 71.998 252zM52 188h20a12 12 0 0 1 12 12v14.38l26.093-21.744A20.036 20.036 0 0 1 122.896 188h40.759L204 154.379V52H52z"
:fill="isDarkMode ? 'white' : 'black'"
/>
<path
d="M168 148a12 12 0 0 1-12-12V88a12 12 0 0 1 24 0v48a12 12 0 0 1-12 12z"
:fill="isDarkMode ? 'white' : 'black'"
/>
<path
d="M120 148a12 12 0 0 1-12-12V88a12 12 0 0 1 24 0v48a12 12 0 0 1-12 12z"
:fill="isDarkMode ? 'white' : 'black'"
/>
</svg>
</template>
<script lang="ts">
import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
export default defineComponent({
name: "TwitterIcon",
setup() {
const {$colorMode} = useContext()
const isDarkMode = computed(() => {
return $colorMode.preference === 'dark'
})
return {
isDarkMode
}
}
})
</script>

26
src/components/icons/TwitterIcon.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
<path
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"
:fill="isDarkMode ? 'white' : 'black'"
/>
</svg>
</template>
<script lang="ts">
import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
export default defineComponent({
name: "TwitterIcon",
setup() {
const {$colorMode} = useContext()
const isDarkMode = computed(() => {
return $colorMode.preference === 'dark'
})
return {
isDarkMode
}
}
})
</script>

10
src/content/articles/en/how-i-start.md
View File

@@ -7,11 +7,14 @@ tags: ["tags.life"]
cover: post-2.png
date: 07-01-2021
---
## Presentation
Many ask me how I started development, what training did I take and why did I start?
Here is the article allowing you to discover everything.
### Summary
- How it all began ?
- And the web in all this?
- What training did I follow?
@@ -20,18 +23,21 @@ Here is the article allowing you to discover everything.
- Conclusion
## 1. How did it all start?
Being a video game player and very curious, I inquired about how a video game worked.
At that time I was playing Minecraft, so I discovered the existence of development and my first programming language: **Java**.
So I wanted to add my personal touch and my creativity to the community. Therefore, I learned to use this language, the syntax and all that goes with it.
So I installed my first development environment and started with very small projects.
## 2. And the web in all this?
It was much later that I became aware of the vastness of the web domain. As I got really interested in this new field,
So I learned new programming languages: **JavaScript**, **Html** and **Css**.
These languages were much easier to learn because I had a good foundation in programming. I trained as much in `Front` development as in` Back` development.
The `Front` results in the interface of the application visible by a user and the` Back` by the part invisible and inaccessible by a user.
## 3. What training did I take?
When I started, I took a course on [OpenClassrooms](https://openclassrooms.com) to learn Java syntax.
In addition, I bought myself a big book, very big 400-page book called `Programming in Java`. I acquired new functionalities such as the principles of object programming for example.
Today, I mostly learn on my own using the Internet and development discord servers.
@@ -39,19 +45,23 @@ Recently, I have been taking training on [Udemy](https://udemy.com) in particula
Finally, I also use [Youtube](https://youtube.com) to follow more or less technical tutorials.
## 4. What am I able to achieve today
Currently, I am able to do entire web applications, both the `Back` and the `Front`. As mobile and office applications are based on the same technologies,
I also know how to develop applications of this type. To see all my skills mastered, please visit my [About](/about) page, in the _Technical Skills_ section.
## 5. How do I see my future in this field?
I am currently asking myself a lot of questions about my future in development and my professional future. So I attend a lot of computer conferences and do a lot of research.
Lately, I learned about an area that I knew only vaguely. It was a very great interest that immediately developed for this area because it meets all my expectations,
and I think I will thrive in this area a lot!
## 6. Conclusion
Now you know everything about my beginning and my journey. I hope I have answered all of your questions and that you know how you can start your own journey!
I am available for all your additional questions!
## Information
Here are various links of development discord servers with an active community:
- [ItsAlexousd](https://discord.gg/HE4UeBGvGA)
- [La Meute](https://discord.gg/TzJJ4KVGDd)

13
src/content/articles/fr/how-i-start.md
View File

@@ -9,50 +9,59 @@ date: 07-01-2021
---
## Présentation
Beaucoup me demandent comment ai-je commencé le développement, quelle formation ai-je suivi et pourquoi avoir commencé ?
Voici donc l'article vous permettant de tout découvrir.
### Sommaire
- Comment tout a commencé ?
- Et le web dans tout ca ?
- Et le web dans tout ça ?
- Quelles formations ai-je suivi ?
- Que suis-je capable de realise aujourd'hui ?
- Comment envisage-je mon futur dans ce domaine ?
- Conclusion
## 1. Comment tout a commencé ?
Etant un joueur de jeux-vidéos et tres curieux, je me suis renseigné sur comment un jeu-vidéo fonctionnait.
À ce moment-là je jouais à Minecraft, j'ai donc découvert l'existence du développement et de mon premier langage de programmation : le **Java**.
Je voulais donc ajouter ma touche personnelle et ma créativité a la communauté. C'est pourquoi, j'ai appris à utiliser ce langage, la syntaxe et tous ce qui va avec.
J'ai donc installé mon premier environnement de développement et j'ai débuté avec de tous petits projets.
## 2. Et le web dans tout ca ?
C'est bien plus tard que j'ai pris connaissance de l'immensité du domaine du web. Comme je me suis vraiment intéressé à ce nouveau domaine,
j'ai donc appris de nouveaux langages de programmation : **JavaScript**, **Html** et **Css**.
Ces langages étaient beaucoup plus simples à apprendre car je possédais de bonnes bases dans la programmation. Je me suis autant formé dans le développement `Front` que dans le développement `Back`.
Le `Front` se traduit par l'interface visible de l'application par un utilisateur et le `Back` par la partie invisible et inaccessible par un utilisateur.
## 3. Quelles formations ai-je suivi ?
À mon commencement, j'ai suivi une formation sur [OpenClassrooms](https://openclassrooms.com) pour apprendre la syntaxe du Java.
De plus, je me suis acheté un gros livre, tres gros livre de 400 pages nommé `La programmation en Java`. J'ai acquis de nouvelles fonctionnalités comme les principes de la programmation objet par exemple.
Aujourd'hui, j'apprends majoritairement en autodidacte à l'aide d'Internet et de serveurs discords de développement.
Et depuis peu, je suis des formations sur [Udemy](https://udemy.com) notamment pour apprendre **Go** et **Docker**.
Enfin, j'utilise également [Youtube](https://youtube.com) pour suivre des tutoriels plus ou moins techniques.
## 4. Que suis-je capable de réaliser aujourd'hui
## 4. Que suis-je capable de réaliser aujourd'hui ?
Actuellement, je suis capable de réaliser des applications Web en entier, à la fois le `Back` et le `Front`. Comme les applications mobiles et bureautiques se basent sur les memes technologies,
je sais également développer des applications de ce type. Pour voir toutes mes compétences maitrisées, n'hésitez pas à visiter ma page [A propos](/about), dans la partie _Compétences Techniques_.
## 5. Comment envisage-je mon futur dans ce domaine ?
Je me pose actuellement beaucoup de questions sur mon futur dans le développement et mon futur professionnel. J'assiste donc à de nombreuses conférences informatiques et je fais beaucoup de recherches.
Dernièrement, j'ai pris connaissance d'un domaine que je ne connaissais que vaguement. C'est un tres grand intérêt qui s'est tout de suite développé pour ce domaine car il remplit toutes mes attentes
et je pense beaucoup m'épanouir dans ce domaine !
## 6. Conclusion
Maintenant, vous connaissez tout sur mon commencement et mon parcours. J'espère avoir répondu à toutes vos questions et que vous savez comment vous pouvez commencer votre propre parcours !
Je suis disponible pour toutes vos questions supplémentaires !
## Informations
Voici différents liens de serveurs discord de développement avec une communauté active :
- [ItsAlexousd](https://discord.gg/HE4UeBGvGA)
- [La Meute](https://discord.gg/TzJJ4KVGDd)

5
src/content/articles/fr/new-version-new-website.md
View File

@@ -20,6 +20,7 @@ Quelles sont les nouveautés ? Quelles sont les techniques utilisées ? Tout ser
- Conclusion
## 1. Pourquoi une nouvelle version ?
Il faut savoir que j'ai découvert pleins de nouvelles technologies concernant le développement web.
En effet, c'est un domaine que j'ai toujours voulu découvrir. Je me suis donc lancé il y a un an pour sortir mon site, sa première version.
Étant nouveau dans ce domaine, le code est vite devenu compliqué à maintenir et n'est pas du tout modulable.
@@ -28,6 +29,7 @@ De plus, ayant plus d'expérience dans ce domaine, j'ai voulu améliorer le desi
modifiable et en améliorant le code.
## 2. Pourquoi c'était si long ?
Je suis actuellement en classe de Terminale générale, c'est donc pourquoi j'ai beaucoup de devoirs qui me demandent du temps
personnel que je préfère consacrer plutôt qu'au développement. Je suis souvent sous pression à cause de ce nouveau
Baccalauréat, où toutes les notes comptent pour la note finale du Baccalauréat.
@@ -37,6 +39,7 @@ d'apprentissage avant de foncer tête baissée dans le code. J'ai cherché à ê
pour gagner du temps, comme je n'en n'avait peu.
## 3. Que propose cette nouvelle version ?
Cette nouvelle version propose beaucoup plus de fonctionnalités que la version précédente :
- Un meilleur rendu mobile 📱
@@ -49,6 +52,7 @@ Cette nouvelle version propose beaucoup plus de fonctionnalités que la version
- Un meilleur point de contact 📌
## 4. Quelles sont les technologies utilisées ?
Dans cette version, j'ai utilisé plusieurs technologies :
- NuxtJs pour le rendu côté serveur
@@ -57,5 +61,6 @@ Dans cette version, j'ai utilisé plusieurs technologies :
- NuxtJs/Content pour tout le contenu
## 5. Conclusion
Pour conclure, je suis très satisfait du résultat de cette nouvelle version, de ses fonctionnalités.
Je vous laisse visiter le reste du site et me donner votre avis !

1
src/locales/en-EN.ts
View File

@@ -21,6 +21,7 @@ export default {
links_click: '(Clic it\'s free 🔗)',
credits: 'Developed and designed with ❤ using',
credits_separator: 'by',
credits_separator_and: 'and',
copyrights: '© Copyright {date} - All rights reserved'
},

1
src/locales/fr-FR.ts
View File

@@ -21,6 +21,7 @@ export default {
links_click: '(Clique c\'est gratuit 🔗)',
credits: 'Développé et conçu avec ❤ en utilisant',
credits_separator: 'par',
credits_separator_and: 'et',
copyrights: '© Copyright {date} - Tous droits réservés'
},

26
src/pages/blog/_slug.vue
View File

@@ -66,7 +66,7 @@
:href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + this.post.slug + '&text=' + $t('blog.tweet') + ' ' + post.title"
class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 justify-center items-center"
>
<img class="inline img icon-hover" src="~/assets/images/socials/twitter.svg" alt="Twitter logo" height="40" width="40" />
<TwitterIcon />
</a>
<div @click="scrollToTop"
class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white">
@@ -127,13 +127,15 @@ export default defineComponent({
return $content(`articles/${i18n.locale}`, slug)
.fetch<Post>()
.catch((error) => {
app.error({statusCode: 404, message: "Post not found"});
$sentry.captureEvent(error)
app.error({statusCode: 404, message: "Post not found"})
$sentry.captureEvent(error)
}) as Promise<Post>
}, slug, 'post')
watch(post, () => {
title.value = `Blog - Arthur Danjou - ${post.value?.title || 'Loading title...'}`
title.value = post.value?.title ? `Blog - Arthur Danjou - ${post.value!.title}` : 'Loading title...'
watch(post.value?.title, () => {
title.value = post.value?.title ? `Blog - Arthur Danjou - ${post.value!.title}` : 'Loading title...'
})
const liked = ref($storage.getCookie(`${slug.value}`) !== undefined)
@@ -145,7 +147,7 @@ export default defineComponent({
'Authorization': `Bearer ${process.env.API_TOKEN}`
}
}).then((response) => {
likes.value = response.data
likes.value = response.data.likes
}).catch((error) => {
$sentry.captureEvent(error)
})
@@ -153,27 +155,27 @@ export default defineComponent({
const handleLike = async () => {
if (liked.value) {
const {data} = await $axios.post(`/posts/${post.value?.slug}/unlike`, {}, {
const response = await $axios.post(`/posts/${post.value?.slug}/unlike`, {}, {
headers: {
'Authorization': `Bearer ${process.env.API_TOKEN}`
}
})
if (data.status === 200) {
if (response.status === 200) {
liked.value = false
likes.value = data.post.likes
likes.value = response.data.post.likes
$storage.removeCookie(`${slug.value}`)
} else {
$sentry.captureEvent(data)
}
} else {
const {data} = await $axios.post(`/posts/${post.value?.slug}/like`, {}, {
const response = await $axios.post(`/posts/${post.value?.slug}/like`, {}, {
headers: {
'Authorization': `Bearer ${process.env.API_TOKEN}`
}
})
if (data.status === 200) {
if (response.status === 200) {
liked.value = true
likes.value = data.post.likes
likes.value = response.data.post.likes
$storage.setCookie(`${slug.value}`, true, {
maxAge: 60 * 60 * 5
})

6
windi.config.ts
View File

@@ -280,7 +280,11 @@ module.exports = defineConfig({
divideColor: (theme) => theme('borderColor'),
divideOpacity: (theme) => theme('borderOpacity'),
divideWidth: (theme) => theme('borderWidth'),
fill: { current: 'currentColor' },
fill: theme => ({
current: 'currentColor',
'adonis-dark': theme('colors.purple.500'),
'adonis-light': theme('colors.purple.800')
}),
flex: {
1: '1 1 0%',
auto: '1 1 auto',

10628
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff