arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-26 09:50:32 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Implement nuxt-content

Browse Source
This commit is contained in:
Arthur Danjou
2020-12-12 14:32:09 +01:00
parent 728a0261af
commit ebe7b2eae3
53 changed files with 1970 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
pages/about.vue
View File

@@ -1,7 +1,7 @@
<template>
<main class="about flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="home_link_about"
title="part.about"
color="orange"
>
<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">
@@ -13,15 +13,15 @@
<img class="logo-img rounded-full my-5" src="@/assets/img/Logo.jpg" alt="It's me !" />
</div>
<div class="text-lg leading-6 md:w-2/3 text-justify">
<p>{{ $t('about_banner_hello') }} <span class="text-orange-400 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
<p>{{ $t('about_banner_1')}}</p> <br/>
<p>{{ $t('about_banner_2') }}</p> <br/>
<p>{{ $t('about_banner_3') }}</p>
<p>{{ $t('about.banner.hello') }} <span class="text-orange-400 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
<p>{{ $t('about.banner.1')}}</p> <br/>
<p>{{ $t('about.banner.2') }}</p> <br/>
<p>{{ $t('about.banner.3') }}</p>
</div>
</div>
<div class="w-full mb-10 mt-4">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
{{ $t('about_title_skills') }}
{{ $t('about.title.skills') }}
<svg class="inline icon" height="32" width="32" 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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
@@ -29,16 +29,16 @@
<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">
<Skill
:skill="skill.title.code"
:skill="skill.title"
:color="skill.color"
:cover="skill.cover.file_name"
:cover="skill.cover"
/>
</div>
</div>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl">
{{ $t('about_title_interests') }}
{{ $t('about.title.interests') }}
<svg height="32" width="32" class="inline icon" 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="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
@@ -47,43 +47,43 @@
<div>
<ul class="text-xl">
<li class="my-2">
{{ $t('about_title_technologies') }}
{{ $t('about.title.technologies') }}
<svg class="inline icon" 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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
</li>
<li class="my-2">
{{ $t('about_interests_dev') }}
{{ $t('about.interests.dev') }}
<svg class="inline icon" 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 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</li>
<li class="my-2">
{{ $t('about_interests_devops') }}
{{ $t('about.interests.devops') }}
<svg class="inline icon" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</li>
<li class="my-2">
{{ $t('about_interests_startups') }}
{{ $t('about.interests.startups') }}
<svg class="inline icon" 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="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
</li>
<li class="my-2">
{{ $t('about_interests_sysadmin') }}
{{ $t('about.interests.sysadmin') }}
<svg class="inline icon" 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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
</li>
<li class="my-2">
{{ $t('about_interests_trips') }}
{{ $t('about.interests.trips') }}
<svg class="inline icon" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</li>
<li class="my-2">
{{ $t('about_interests_moto') }}
{{ $t('about.interests.moto') }}
<svg class="inline icon" 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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
</svg>
@@ -93,7 +93,7 @@
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl">
{{ $t('about_title_languages') }}
{{ $t('about.title.languages') }}
<svg class="inline icon" height="32" width="32" 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 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
</svg>
@@ -101,27 +101,27 @@
<div>
<table class="text-base text-xl">
<tr>
<td class="font-bold py-2 pr-4">{{ $t('about_languages_fr')}} 🇫🇷</td>
<td class="py-2 px-4">{{ $t('about_languages_native') }}</td>
<td class="font-bold py-2 pr-4">{{ $t('about.languages.fr')}} 🇫🇷</td>
<td class="py-2 px-4">{{ $t('about.languages.native') }}</td>
</tr>
<tr>
<td class="font-bold py-2 pr-4">{{ $t('about_languages_en')}} 🇬🇧</td>
<td class="py-2 px-4">{{ $t('about_languages_fluent') }}</td>
<td class="font-bold py-2 pr-4">{{ $t('about.languages.en')}} 🇬🇧</td>
<td class="py-2 px-4">{{ $t('about.languages.fluent') }}</td>
</tr>
</table>
</div>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
{{ $t('about_title_formations') }}
{{ $t('about.title.formations') }}
<svg class="inline icon" height="32" width="32" 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="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</h3>
<div v-for="formation in formations">
<Formation
:title="formation.title.code"
:description="formation.description.code"
:title="formation.title"
:description="formation.description"
:location="formation.location"
:begin="formation.begin_date"
:end="formation.end_date" />
@@ -129,16 +129,15 @@
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
{{ $t('about_title_experiences') }}
{{ $t('about.title.experiences') }}
<svg class="inline icon" height="32" width="32" 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="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
</h3>
<div v-for="experience in experiences">
<Experience
:title="experience.title.code"
:title="experience.title"
:company="experience.company"
:description="experience.description.code"
:location="experience.location"
:begin="experience.begin_date"
:end="experience.end_date" />
@@ -146,7 +145,7 @@
</div>
<nuxt-link to="/cv">
<div class="flex justify-center items-center font-bold py-4 px-6 bg-orange-400 hover:bg-orange-600 cursor-pointer duration-500 rounded-full dark:text-black">
{{ $t('about_cv') }}
{{ $t('about.cv') }}
<svg class="inline icon" height="32" width="32" 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 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
</svg>
@@ -154,77 +153,77 @@
</nuxt-link>
<div class="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
<PageTitle
title="about_part_environment"
title="about.environment"
color="orange"
>
<svg class="inline 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="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</svg>
</PageTitle>
<p class="text-lg leading-6 text-justify pb-8">{{ $t('about_env_description') }}</p>
<p class="text-lg leading-6 text-justify pb-8">{{ $t('about.env.description') }}</p>
<EnvGroup>
<EnvTitle title="about_env_ide">
<EnvTitle title="about.env.ide">
<svg class="inline icon" height="32" width="32" 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 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</EnvTitle>
<EnvList>
<EnvListItem title="java_ide" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
<EnvListItem title="python_ide" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
<EnvListItem title="web_ide" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
<EnvListItem title="go_ide" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
<EnvListItem title="db_ide" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
<EnvListItem title="all_ide" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
<EnvListItem title="Police" content="Jetbrains Mono" link="https://www.jetbrains.com/lp/mono/"/>
<EnvListItem title="Console" content="HyperJs" link="https://hyper.is/"/>
<EnvListItem title="WSL 2" content="Ubuntu 20.04" link="https://www.microsoft.com/en-us/p/ubuntu-2004-lts/9n6svws3rx71?activetab=pivot:overviewtab"/>
<EnvListItem title="about.ide.java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
<EnvListItem title="about.ide.python" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
<EnvListItem title="about.ide.web" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
<EnvListItem title="about.ide.go" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
<EnvListItem title="about.ide.db" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
<EnvListItem title="about.ide.all" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
<EnvListItem title="about.police" content="Jetbrains Mono" link="https://www.jetbrains.com/lp/mono/"/>
<EnvListItem title="about.console" content="HyperJs" link="https://hyper.is/"/>
<EnvListItem title="about.wsl_2" content="Ubuntu 20.04" link="https://www.microsoft.com/en-us/p/ubuntu-2004-lts/9n6svws3rx71?activetab=pivot:overviewtab"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="about_env_apps">
<EnvTitle title="about.env.apps">
<svg class="inline icon" height="32" width="32" 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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</EnvTitle>
<EnvList>
<EnvListItem title="Email" content="Courrier by Microsoft" link="https://www.microsoft.com/fr-fr/p/courrier-et-calendrier/9wzdncrfhvqm?activetab=pivot:overviewtab"/>
<EnvListItem title="vpn_client" content="Pritunl" link="https://pritunl.com/"/>
<EnvListItem title="ftp_client" content="WinSCP" link="https://winscp.net/eng/download.php"/>
<EnvListItem title="web_client" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
<EnvListItem title="Organisation" content="Notion" link="https://www.notion.so/"/>
<EnvListItem title="Organisation" content="Trello" link="https://www.trello.com/"/>
<EnvListItem title="design_tool" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
<EnvListItem title="Communication" content="Slack" link="https://slack.com/intl/fr-fr/"/>
<EnvListItem title="Communication" content="Discord" link="https://www.discord.com/"/>
<EnvListItem title="Communication" content="Mattermost" link="https://mattermost.com/"/>
<EnvListItem title="about.email_client" content="Courrier by Microsoft" link="https://www.microsoft.com/fr-fr/p/courrier-et-calendrier/9wzdncrfhvqm?activetab=pivot:overviewtab"/>
<EnvListItem title="about.vpn_client" content="Pritunl" link="https://pritunl.com/"/>
<EnvListItem title="about.ftp_client" content="WinSCP" link="https://winscp.net/eng/download.php"/>
<EnvListItem title="about.web_client" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
<EnvListItem title="about.organisation_tool" content="Notion" link="https://www.notion.so/"/>
<EnvListItem title="about.organisation_tool" content="Trello" link="https://www.trello.com/"/>
<EnvListItem title="about.design_tool" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
<EnvListItem title="about.communication_tool" content="Slack" link="https://slack.com/intl/fr-fr/"/>
<EnvListItem title="about.communication_tool" content="Discord" link="https://www.discord.com/"/>
<EnvListItem title="about.communication_tool" content="Mattermost" link="https://mattermost.com/"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="about_env_hosting">
<EnvTitle title="about.env.hosting">
<svg class="inline icon" height="32" width="32" 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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
</EnvTitle>
<EnvList>
<EnvListItem title="vps_hosting" content="PulseHeberg" link="https://pulseheberg.com/"/>
<EnvListItem title="ndd_hosting" content="OVH" link="https://ovh.com/"/>
<EnvListItem title="about.hosting.vps" content="PulseHeberg" link="https://pulseheberg.com/"/>
<EnvListItem title="about.hosting.ndd" content="OVH" link="https://ovh.com/"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="about_env_setup">
<EnvTitle title="about.env.setup">
<svg class="inline icon" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</EnvTitle>
<EnvList>
<EnvListItem title="setup_desk" content="Ikea en bois"/>
<EnvListItem title="setup_phone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
<EnvListItem title="setup_computer" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
<EnvListItem title="setup_screen" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr_fr/produits/prolite-e2283hs-b3/"/>
<EnvListItem title="setup_keyboard" content="Microsoft"/>
<EnvListItem title="setup_mouse" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
<EnvListItem title="setup_headphone" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
<EnvListItem title="setup_microphone" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
<EnvListItem title="about.setup.desk" content="Ikea en bois"/>
<EnvListItem title="about.setup.phone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
<EnvListItem title="about.setup.computer" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
<EnvListItem title="about.setup.screen" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr.fr/produits/prolite-e2283hs-b3/"/>
<EnvListItem title="about.setup.keyboard" content="Microsoft"/>
<EnvListItem title="about.setup.mouse" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
<EnvListItem title="about.setup.headphone" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
<EnvListItem title="about.setup.microphone" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
</EnvList>
</EnvGroup>
</main>
@@ -247,17 +246,15 @@ export default {
title: 'About me - Arthur Danjou'
}
},
data() {
return {
skills: [],
experiences: [],
formations: []
}
},
async asyncData({ $axios }) {
const {data: skills} = await $axios.get('/skills')
const {data: experiences} = await $axios.get('experiences')
const {data: formations} = await $axios.get('/formations')
async asyncData({ $content }) {
const skills = await $content('skills').fetch()
const experiences = await $content('experiences')
.sortBy('end_date', 'desc')
.fetch()
const formations = await $content('formations')
.sortBy('end_date', 'desc')
.fetch()
return {
skills,
experiences,

69
pages/blog/_id.vue → pages/blog/_slug.vue
View File

@@ -10,16 +10,16 @@
</svg>
</div>
<div class="ml-2">
{{ $t('blog_read_back') }}
{{ $t('blog.read.back') }}
</div>
</nuxt-link>
</div>
</div>
<h1 class="text-3xl md:text-5xl font-bold">
{{ $t(title) }}
{{ post.title }}
</h1>
<h3 class="text-xl text-gray-800 dark:text-dark-900 my-4 md:mt-8">
{{ $t(description) }}
{{ post.description }}
</h3>
<div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
<div>
@@ -27,24 +27,28 @@
<p>{{ formatDate }}</p>
</div>
<div>
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">{{ $t('blog_read_time') }}</p>
<p>{{ reading_time }} min</p>
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">{{ $t('blog.read.time') }}</p>
<p>{{ post.reading_time }} min</p>
</div>
<div>
<p :class="tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
<p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
<p>{{ formatTags }}</p>
</div>
</div>
<div class="w-full">
<div class="flex justify-center w-full h-auto">
<img class="w-full h-auto" :src="'http://localhost:5555/files/'+cover.file_name" alt="Cover Img" />
<img class="w-full h-auto" :src="'http://localhost:5555/files/'+post.cover" alt="Cover Img" />
</div>
</div>
<p class="my-6 md:my-12 text-gray-800 dark:text-dark-900">
{{ $t(content) }}
</p>
<nuxt-content
:document="post"
class="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl my-6 md:my-12"
/>
<p class="mb-3">
{{ $t('blog_read_thanks') }}
{{ $t('blog.read.thanks') }}
</p>
<div class="flex items-center">
<div
@@ -59,7 +63,7 @@
</div>
<a
target="_blank"
:href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + id + '&text=' + $t('blog_tweet') + ' ' + $t(title) +'&via=ArthurDanj'"
: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 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-800 mr-2 hover:border-cyan-500 dark:hover:border-cyan-500"
>
<img class="inline img icon-hover" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="40" width="40" />
@@ -89,43 +93,29 @@ export default {
name: "blog",
head() {
return {
title: 'Blog - Arthur Danjou'
title: 'Blog - Arthur Danjou - ' + this.post.title
}
},
data() {
return {
id: this.$route.params.id,
title: '',
description: '',
content: '',
tags: [],
likes: 0,
date: '',
cover: '',
reading_time: 0,
post: null,
isCopied: false,
liked: false
}
},
async asyncData({ params, $axios }) {
const {data: post} = await $axios.get('/posts/' + params.id)
const {data: liked} = await $axios.get('/post/' + params.id + '/isLiked')
async asyncData({ params, $content, app }) {
const post = await $content(`articles/${app.i18n.locale}/`, params.slug).fetch()
const liked = false
return {
title: post.title.code,
description: post.description.code,
content: post.content.code,
tags: post.tags,
likes: post.likes,
date: post.created_at,
reading_time: post.reading_time,
cover: post.cover,
liked: liked !== 0
post,
liked: liked
}
},
methods: {
copyToClipBoard() {
navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + this.id)
navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + this.post.slug)
this.isCopied = true
setTimeout(() => {
this.isCopied = false
@@ -133,13 +123,13 @@ export default {
},
async handleLike() {
if (this.liked) {
const {data} = await this.$axios.get('/post/' + this.id + '/unlike')
const {data} = await this.$axios.get('/post/' + this.post.slug + '/unlike')
if (data.code === 200) {
this.liked = false
this.likes = data.post.likes
}
} else {
const {data} = await this.$axios.get('/post/' + this.id + '/like')
const {data} = await this.$axios.get('/post/' + this.post.slug + '/like')
if (data.code === 200) {
this.liked = true
this.likes = data.post.likes
@@ -149,16 +139,13 @@ export default {
},
computed: {
formatDate() {
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
const date = new Date(this.date)
return date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear()
const dateFormat = this.post.date.split('-')
return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
},
formatTags() {
let tags = ""
this.tags.map(tag => {
tags += this.$t(tag.label.code) + ", "
this.post.tags.map(tag => {
tags += this.$t(tag) + ", "
})
return tags.substring(0, tags.length - 2)
},

186
pages/blog/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<main class="blog flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="home_link_blog"
title="part.blog"
color="green"
>
<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">
@@ -12,52 +12,56 @@
<h1
v-if="current_tag === ''"
class="text-lg mb-2"
>{{ $t('blog_tags_search') }}</h1>
>{{ $t('blog.tags.search') }}</h1>
<div
@click="resetPosts"
v-if="current_tag !== ''"
class="w-full home-arrow flex cursor-pointer font-bold"
class="w-full"
>
<div class="arrow duration-300 mr-2">
<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 class="w-full home-arrow flex cursor-pointer font-bold mb-3">
<div class="arrow duration-300 mr-2">
<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>
{{ $t('blog.tags.back') }}
</div>
<div class="w-full">
{{ $t('blog.tags.current', { tag: $t(current_tag)}) }}
</div>
{{ $t('blog_tags_search_back') }}
</div>
<div v-else class="flex flex-row w-full overflow-x-scroll md:overflow-x-hidden md:flex-wrap space-x-3 md:space-x-0">
<div v-for="tag in tags">
<div
class="mb-3 md:mr-4 border-b-2 border-opacity-0 hover:border-opacity-100 border-green-400 border-solid duration-300 cursor-pointer font-black"
@click="fetchPostsByTag(tag.label.code)"
@click="fetchPostsByTag(tag.slug)"
>
{{ $t(tag.label.code) }}
{{ $t(tag.slug) }}
</div>
</div>
</div>
</div>
<h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog_no_posts') }}</h1>
<div class="w-full md:w-1/2" v-else>
<h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog.no_posts') }}</h1>
<div class="w-full xl:w-1/2" v-else>
<div class="flex flex-col justify-around items-center py-8 w-full">
<div class="w-full" v-for="post in posts">
<nuxt-link :to="'/blog/' + post.id">
<nuxt-link :to="'/blog/' + post.slug">
<Post
:title="post.title.code"
:title="post.title"
:reading_time="post.reading_time"
:description="post.description.code"
:description="post.description"
:tags="displayTags(post.tags)"
:cover="post.cover.file_name"
:date="post.created_at"
:likes="post.likes"
:lightBg="post.light_back_ground"
:cover="post.cover"
:date="post.date"
:lightBg="post.background"
/>
</nuxt-link>
</div>
</div>
<div class="relative flex flex-row justify-between w-full mb-4" v-if="postsCount > 5">
<div class="relative flex flex-row justify-between w-full mb-4" v-if="next || prev">
<div
class="duration-500 flex w-1/2 px-5 py-4 justify-center items-center"
:class="page > 1 ? 'opacity-100' : 'opacity-0'"
class="duration-300 flex w-1/2 px-5 py-4 justify-center items-center"
:class="prev === null ? 'opacity-0': 'opacity-100'"
>
<div class="flex items-center duration-300 prev-arrow" @click="prevPage">
<div class="arrow duration-300">
@@ -65,15 +69,15 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
</svg>
</div>
<div class="inline ml-4 font-bold">{{ $t('blog_pagination_prev') }}</div>
<div class="inline ml-4 font-bold">{{ $t('blog.pagination.prev') }}</div>
</div>
</div>
<div
class="duration-500 flex w-1/2 px-5 py-4 justify-center items-center"
:class="hasNextPage ? 'opacity-100' : 'opacity-0'"
class="duration-300 flex w-1/2 px-5 py-4 justify-center items-center"
:class="next === null ? 'opacity-0': 'opacity-100'"
>
<div class="flex items-center duration-300 suiv-arrow" @click="nextPage">
<div class="ml-4 font-bold">{{ $t('blog_pagination_next') }}</div>
<div class="mr-4 font-bold">{{ $t('blog.pagination.next') }}</div>
<div class="inline arrow duration-300">
<svg class="inline icon" height="30" width="30" 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="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -99,50 +103,140 @@ export default {
},
data () {
return {
posts: [],
postsCount: 0,
page: 1,
page: 0,
current_tag: '',
tags: [],
hasNextPage: false,
posts: []
}
},
methods: {
displayTags(tags) {
const tags_label = []
tags.map(tag => {
tags_label.push(tag.label.code)
tags_label.push(tag)
})
return tags_label
},
async fetchPostsByTag(tag) {
this.current_tag = tag
const {data} = await this.$axios.get('/post/' + tag + '?page=1')
this.posts = data.data
this.hasNextPage = data.meta.next_page_url !== null
this.page = 0
await this.fetchPosts()
if (this.posts.length !== 0) {
await this.fetchPrevAndNext()
} else {
this.next = null
this.prev = null
}
},
async resetPosts() {
this.current_tag = ''
const {data} = await this.$axios.get('/posts?page=1')
this.posts = data.data
this.hasNextPage = data.meta.next_page_url !== null
this.posts = await this.$content(`articles/${this.$i18n.locale}`)
.sortBy('date', 'asc')
.limit(5)
.fetch()
},
nextPage() {
async nextPage() {
this.page++
await this.fetchPosts()
await this.fetchPrevAndNext()
window.scrollTo({
top: 100,
behavior: "smooth"
})
},
prevPage() {
async prevPage() {
this.page--
await this.fetchPosts()
await this.fetchPrevAndNext()
window.scrollTo({
top: 100,
behavior: "smooth"
})
},
async fetchPosts() {
let postsTemp = []
if (this.current_tag === "") {
postsTemp = await this.$content(`articles/${this.$i18n.locale}`)
.sortBy('date', 'asc')
.limit(5)
.skip(this.page * 5)
.fetch()
} else {
postsTemp = await this.$content(`articles/${this.$i18n.locale}`)
.sortBy('date', 'asc')
.limit(5)
.skip(this.page * 5)
.where({
tags: {
$contains: this.current_tag
}
})
.fetch()
}
const posts = []
postsTemp.map(post => {
posts.push(post)
})
this.posts = posts
},
async fetchPrevAndNext() {
const [_, next] = await this.$content(`articles/${this.$i18n.locale}`)
.surround(this.posts[this.posts.length - 1].slug, {
before: 1,
after: 1
})
.fetch()
const [prev, __] = await this.$content(`articles/${this.$i18n.locale}`)
.skip(this.page)
.surround(this.posts[0].slug, {
before: 1,
after: 1
})
.fetch()
this.prev = null
this.next = null
if (this.posts.length === 5) {
this.next = next
}
if (this.page > 0) {
this.prev = prev
}
}
},
async asyncData ({ $axios }) {
const {data: count} = await $axios.get('/posts/size')
const {data} = await $axios.get('/posts?page=1')
const {data: tags} = await $axios.get('/tags')
async asyncData ({ $content, app }) {
const tags = await $content('tags').fetch()
const postsTemp = await $content(`articles/${app.i18n.locale}`)
.sortBy('date', 'asc')
.limit(5)
.fetch()
const posts = []
postsTemp.map(post => {
posts.push(post)
})
const [_, next] = await $content(`articles/${app.i18n.locale}`)
.surround(posts[posts.length - 1].slug, {
before: 1,
after: 1
})
.fetch()
const [prev, __] = await $content(`articles/${app.i18n.locale}`)
.surround(posts[0].slug, {
before: 1,
after: 1
})
.fetch()
return {
posts: data.data,
postsCount: count,
posts,
postsCount: posts.length,
tags,
hasNextPage: data.meta.next_page_url !== null
prev,
next
}
}
}

47
pages/contact.vue
View File

@@ -1,7 +1,7 @@
<template>
<main class="contact flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="home_link_contact"
title="part.contact"
color="purple"
>
<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">
@@ -10,10 +10,10 @@
</svg>
</PageTitle>
<div class="w-full lg:w-3/4 mb-10 mt-4">
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">{{ $t('contact_newsletter') }}</h1>
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">{{ $t('contact.newsletter.title') }}</h1>
<h3 class="text-md md:text-lg">
{{ $t('contact_newsletter_description') }} <br>
<span class="font-bold self-start">{{ $t('contact_newsletter_unfollow') }}</span>
{{ $t('contact.newsletter.description') }} <br>
<span class="font-bold self-start">{{ $t('contact.newsletter.unfollow') }}</span>
</h3>
<form class="flex flex-col lg:flex-row mt-4 w-full">
<div class="flex flex-col lg:flex-row">
@@ -21,7 +21,7 @@
<input v-model="form.name"
class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg"
type="text"
:placeholder="$t('contact_form_name')"
:placeholder="$t('contact.form.name')"
required
id="name"/>
</div>
@@ -29,14 +29,14 @@
<input v-model="form.email"
class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg"
type="email"
:placeholder="$t('contact_form_mail')"
:placeholder="$t('contact.form.mail')"
required
id="email"/>
</div>
</div>
<div class="mb-3 self-center">
<button @click.prevent="handleForm" class="dark:text-black font-bold px-3 py-2 bg-purple-400 hover:bg-purple-500 cursor-pointer duration-300 rounded-lg btn">
{{ $t('contact_form_submit')}}
{{ $t('contact.form.submit')}}
<svg class="inline icon" 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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
@@ -45,21 +45,21 @@
</form>
<div v-if="error" class="flex">
<div class="rounded-xl px-3 py-2 bg-red-300 font-bold ">
{{ $t('contact_form_error') }}
{{ $t('contact.form.error') }}
</div>
</div>
<div v-if="success" class="flex">
<div class="rounded-xl px-3 py-2 bg-green-300 font-bold ">
{{ $t('contact_form_success', { email: form.email }) }}
{{ $t('contact.form.success', { email: form.email }) }}
</div>
</div>
</div>
<div class="w-full lg:w-3/4 mb-10 mt-4">
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
{{ $t('contact_how_to') }}
{{ $t('contact.how_to.title') }}
</h1>
<h3 class="text-md md:text-lg">
{{ $t('contact_how_to_description') }}
{{ $t('contact.how_to.description') }}
</h3>
<div class="mt-4 email text-lg duration-300 text-purple-500 hover:text-purple-700 cursor-pointer flex">
<a class="mr-2" href="mailto:contact@arthurdanjou.fr?subject=Please enter here your project name">
@@ -74,13 +74,20 @@
</div>
<div class="w-full lg:w-3/4 mb-10 mt-4">
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
{{ $t('contact_available') }}
{{ $t('contact.available.title') }}
</h1>
<h3 class="text-lg md:text-lg">
{{ $t('contact_available_description') }}
{{ $t('contact.available.description') }}
</h3>
<div class="my-4 text-purple-500">
{{ $t('contact_available_start') }} <span class="py-1 px-2 font-bold rounded-xl" :class="'bg-' +hiringColor+ '-200 text-' +hiringColor+ '-500'">{{ $t(hiringStatus.code) }}</span> {{ $t('contact_available_end') }}
{{ $t('contact.available.start') }}
<span
class="py-1 px-2 font-bold rounded-xl"
:class="'bg-' +color+ '-200 text-' +color+ '-500'"
>
{{ $t('hiring.status.' + status) }}
</span>
{{ $t('contact.available.end') }}
</div>
</div>
</main>
@@ -93,8 +100,8 @@ export default {
components: {PageTitle},
data () {
return {
hiringStatus: '',
hiringColor: '',
status: '',
color: '',
form: {
name: '',
email: ''
@@ -103,11 +110,11 @@ export default {
error: false
}
},
async asyncData({ $axios }) {
const {data: me} = await $axios.get('/me')
async asyncData({ $content }) {
const infos = await $content('infos').fetch()
return {
hiringStatus: me.hiringStatus,
hiringColor: me.hiring_color
status: infos.hiring.status,
color: infos.hiring.color
}
},
methods: {

33
pages/index.vue
View File

@@ -7,22 +7,22 @@
</div>
<div class="mb-4 md:mb-10 lg:w-1/2 self-center">
<h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
{{ $t('home_banner_hello') }} <br />
{{ $t('home.banner.hello') }} <br />
<span class="text-red-700 font-black">Arthur Danjou</span> 👋
</h1>
<p class="text-2xl md:text-3xl my-5 font-semibold">
{{ $t('home_banner_role') }}
{{ $t('home.banner.role') }}
</p>
<p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-900">
{{ $t('home_banner_description', { age: age }) }}
{{ $t('home.banner.description', { age: age }) }}
</p>
</div>
</div>
<div class="flex flex-col items-center w-full">
<div class="flex flex-col md:flex-row justify-around w-full md:mb-8">
<HomeLink
title="home_link_about"
description="home_link_about_description"
title="part.about"
description="part.about_description"
color="orange"
link="/about"
>
@@ -31,8 +31,8 @@
</svg>
</HomeLink>
<HomeLink
title="home_link_blog"
description="home_link_blog_description"
title="part.blog"
description="part.blog_description"
color="green"
link="/blog"
>
@@ -43,8 +43,8 @@
</div>
<div class="flex flex-col md:flex-row justify-around w-full">
<HomeLink
title="home_link_work"
description="home_link_work_description"
title="part.work"
description="part.work_description"
color="blue"
link="/work"
>
@@ -53,8 +53,8 @@
</svg>
</HomeLink>
<HomeLink
title="home_link_contact"
description="home_link_contact_description"
title="part.contact"
description="part.contact_description"
color="purple"
link="/contact"
>
@@ -80,15 +80,10 @@ export default Vue.extend({
title: 'Arthur Danjou - Web & Software Developer'
}
},
data () {
async asyncData({ $content }) {
const infos = await $content('infos').fetch()
return {
age: 0
}
},
async asyncData({$axios}) {
const {data: me} = await $axios.get('/me')
return {
age: me.age
age: infos.age
}
}
})

52
pages/work/_id.vue → pages/work/_slug.vue
View File

@@ -11,35 +11,35 @@
</svg>
</div>
<div class="ml-2">
{{ $t('work_go_back') }}
{{ $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" />
<!--<img class="w-4/5 rounded-xl" :src="require(`@/assets/img/works/${work.cover}.png`)" 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>
:class="'bg-' + work.color + '-400 hover:bg-' + work.color + '-600'"
:href="work.url"
>{{work.url.replace('https://', '').replace('http://', '')}}</a>
</div>
<div class="w-full lg:w-1/2 ml-5 ">
<h1 class="text-xl lg:text-3xl font-bold">
{{ $t(title) }}
{{ $t(work.title) }}
</h1>
<p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
{{ $t(description) }}
{{ $t(work.description) }}
</p>
<div>
<h3 class="text-md lg:text-lg font-bold">
{{ $t('work_tech_used') }}
{{ $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"
:skill="skill.title"
:color="skill.color"
:cover="skill.cover.file_name"
:cover="skill.cover"
/>
</div>
</div>
@@ -52,7 +52,6 @@
<script>
import WorkSkill from "~/components/WorkSkill";
export default {
name: "_id",
components: {WorkSkill},
head() {
return {
@@ -61,29 +60,20 @@ export default {
},
data() {
return {
id: this.$route.params.id,
title: '',
description: '',
skills: [],
color: '',
cover: '',
url: ''
work: null
}
},
async asyncData({ params, $axios }) {
const {data: project} = await $axios.get('/projects/' + params.id)
async asyncData({ params, $content }) {
let work
try {
work = await $content('works', params.slug).fetch()
} catch (e) {
return error({ message: 'Work not found' })
}
const skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
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://', '')
work,
skills
}
}
}

23
pages/work/index.vue
View File

@@ -1,24 +1,24 @@
<template>
<main class="work flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="home_link_work"
title="part.work"
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">{{ $t('work_no_work') }}</h1>
<h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('work.no_work') }}</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">{{ $t('work_description') }}</h1>
<div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0 md:space-x-4">
<h1 class="text-xl font-bold text-center mb-8">{{ $t('work.description') }}</h1>
<div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
<div v-for="work in works">
<nuxt-link :to="'/work/' + work.id">
<nuxt-link :to="'/work/' + work.slug">
<Work
:title="work.title.code"
:title="work.title"
:url="work.url"
:color="work.color"
:cover="work.cover.file_name"
:cover="work.cover"
/>
</nuxt-link>
</div>
@@ -38,13 +38,8 @@ export default {
title: 'Work - Arthur Danjou'
}
},
data () {
return {
works: []
}
},
async asyncData({ $axios }) {
const {data: works} = await $axios.get('/projects')
async asyncData({ $content }) {
const works = await $content('works').fetch()
return {
works
}