arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-30 11:47:54 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

rework structure

Browse Source
This commit is contained in:
Arthur Danjou
2020-12-04 11:11:34 +01:00
parent d3e6216edf
commit 79fa8739dc
41 changed files with 7 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
pages/about.vue Normal file
View File

@@ -0,0 +1,291 @@
<template>
<main class="about flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="A propos"
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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</PageTitle>
<div class="flex flex-col md:flex-row justify-around items-center py-8">
<div>
<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>
Bonjour, je suis <span class="text-orange-400 font-bold">Arthur DANJOU</span> 👋.
</p> <br/>
<p>
Je suis un jeune développeur créatif qui aime bricoler et toucher à tout ! Je m'intéresse beaucoup aux nouvelles technologies, au développement et à l'informatique.
</p> <br/>
<p>
J'adore partager mes connaissances et aider les autres à travers des lives sur Twitchs, des articles techniques sur mon blog, des projets open-sources ou encore en relisant du code de la communauté.
Tant que je partage mes passions, je continuerai à faire ça.
</p> <br/>
<p>
Je suis capable d'apprendre rapidement des nouvelles technologies pour répondre aux besoins des différents projets.
J'identifie souvent le besoin de nouveaux systèmes ou outils pour améliorer l'efficacité du flux de travail.
Je suis toujours motivé par un défi et j'aime être bien organisé pour produire des résultats cohérents.
</p>
</div>
</div>
<div class="w-full mb-10 mt-4">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
Compétences Techniques
<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>
</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">
<Skill
:skill="skill.title.code"
:color="skill.color"
:cover="skill.cover.file_name"
/>
</div>
</div>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl">
Intérêts
<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" />
</svg>
</h3>
<div>
<ul class="text-xl">
<li class="my-2">
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">
Développement
<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">
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">
Startups & Entreprises innovantes
<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>
</li>
<li class="my-2">
Administration système
<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">
Voyage
<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">
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>
</li>
</ul>
</div>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl">
Langues
<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.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</h3>
<div>
<table class="text-base text-xl">
<tr>
<td class="font-bold py-2 pr-4">Français 🇫🇷</td>
<td class="py-2 px-4">Natal</td>
</tr>
<tr>
<td class="font-bold py-2 pr-4">Anglais 🇬🇧</td>
<td class="py-2 px-4">Fluent</td>
</tr>
</table>
</div>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
Formation
<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"
:location="formation.location"
:begin="formation.begin_date"
:end="formation.end_date" />
</div>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
Expériences
<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"
:company="experience.company"
:description="experience.description.code"
:location="experience.location"
:begin="experience.begin_date"
:end="experience.end_date" />
</div>
</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élécharger mon 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>
</div>
</nuxt-link>
<div class="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
<PageTitle
title="Environnement"
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="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>
</PageTitle>
<p class="text-lg leading-6 text-justify pb-8">
Mon environnement de développement permet de gagner en productivité.
En effet, je m'organise de la sorte à toujours optimiser mon temps de réflexion et de développement.
Voici donc une liste de tous mes logiciels que j'utilise au quotidien et de mon setup.
</p>
<EnvGroup>
<EnvTitle title="Editeurs de texte">
<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="Editeur Java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
<EnvListItem title="Editeur Python" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
<EnvListItem title="Editeur Web" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
<EnvListItem title="Editeur Go" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
<EnvListItem title="Editeur de bases de données" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
<EnvListItem title="All-In-One" 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"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="Apps & Logiciels">
<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="Client VPN" content="Pritunl" link="https://pritunl.com/"/>
<EnvListItem title="Client FTP" content="WinSCP" link="https://winscp.net/eng/download.php"/>
<EnvListItem title="Navigateur Web" 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="Création / graphisme" 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/"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="Hébergement">
<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="Hébergeur VPS" content="PulseHeberg" link="https://pulseheberg.com/"/>
<EnvListItem title="Nom de domaine" content="OVH" link="https://ovh.com/"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="Setup bureautique">
<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>
</EnvTitle>
<EnvList>
<EnvListItem title="Bureau" content="Ikea en bois"/>
<EnvListItem title="Téléphone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
<EnvListItem title="Ordinateur fixe" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
<EnvListItem title="Ecran" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr_fr/produits/prolite-e2283hs-b3/"/>
<EnvListItem title="Clavier" content="Microsoft"/>
<EnvListItem title="Souris" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
<EnvListItem title="Ecouteurs" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
<EnvListItem title="Casque/Micro" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
</EnvList>
</EnvGroup>
</main>
</template>
<script>
import EnvGroup from "~/components/EnvGroup.vue";
import EnvTitle from "~/components/EnvTitle.vue";
import EnvListItem from "~/components/EnvListItem.vue";
import EnvList from "~/components/EnvList.vue";
import Skill from "~/components/Skill.vue";
import Formation from "~/components/Formation.vue";
import Experience from "~/components/Experience.vue";
import PageTitle from "~/components/PageTitle";
export default {
name: "about",
components: {PageTitle, EnvList, EnvListItem, EnvTitle, EnvGroup, Skill, Formation, Experience},
head() {
return {
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')
return {
skills,
experiences,
formations
}
}
}
</script>
<style scoped lang="scss">
.about {
.logo-img {
height: 20rem;
}
}
</style>

118
pages/blog/_id.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<main class="blog flex flex-col items-center px-5 xl:px-96 mb-16 md:mb-32">
<div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full">
<div>
<div class="mb-4 flex">
<nuxt-link to="/blog" class="back-arrow flex">
<div class="duration-300 arrow">
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</div>
<div class="ml-2">
Retour en arrière
</div>
</nuxt-link>
</div>
</div>
<h1 class="text-3xl md:text-5xl font-bold">
{{ title }}
</h1>
<h3 class="text-xl text-gray-800 dark:text-dark-900 my-4 md:mt-8">
{{ description }}
</h3>
<div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
<div>
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Date</p>
<p>{{ formatDate }}</p>
</div>
<div>
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Time</p>
<p>{{ 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>{{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" />
</div>
</div>
<p class="my-6 md:my-12 text-gray-800 dark:text-dark-900">
{{ content }}
</p>
<p class="text-center">
Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/>
Hésite surtout pas à partager l'article sur Twitter
<!-- Todo : replace par des buttons : - Likes, - Twitter (proposition de tweet), - partage (lien) -->
</p>
</div>
</main>
</template>
<script>
export default {
name: "blog",
head() {
return {
title: 'Blog - Arthur Danjou'
}
},
data() {
return {
id: this.$route.params.id,
title: '',
description: '',
content: '',
tags: [],
likes: 0,
date: '',
cover: '',
reading_time: 0,
}
},
async asyncData({ params, $axios }) {
const {data: post} = await $axios.get('/posts/' + params.id)
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,
}
},
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()
},
formatTags() {
let tags = ""
this.tags.map(tag => {
tags += tag.label.code + ", "
})
return tags.substring(0, tags.length - 2)
},
}
}
</script>
<style scoped lang="scss">
.blog {
.back-arrow:hover .arrow {
transform: translate(-8px, -1px);
}
.arrow {
transform: translate(3px, -1px);
}
}
</style>

174
pages/blog/index.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<main class="blog flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</PageTitle>
<h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">
Malheureusement il n'y a pas encore d'articles disponibles. Reviens plus tard 😉
</h1>
<div class="w-full md:w-1/2" v-else>
<!-- TODO improve design research by tag -->
<div class="flex flex-col mt-8">
<h1>
Classer les articles par tag :
</h1>
<div class="flex flex-row">
<div
@click="resetPosts"
v-if="current_tag !== ''"
class="home-arrow flex cursor-pointer"
>
<div class="arrow duration-300">
<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>
Tous les articles
</div>
<div v-else v-for="tag in tags"
@click="fetchPostsByTag(tag.label.code)"
:class="tag.label.code === current_tag ? 'border-solid border-black border-2' : ''"
class="hover:bg-gray-500 duration-300 cursor-pointer px-3 py-3 rounded-xl bg-gray-300 font-black mr-3"
>
{{tag.label.code}}
</div>
</div>
</div>
<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">
<Post
:title="post.title.code"
:reading_time="post.reading_time"
:description="post.description.code"
:tags="displayTags(post.tags)"
:cover="post.cover.file_name"
:date="post.created_at"
:likes="post.likes"
:lightBg="post.light_back_ground"
/>
</nuxt-link>
</div>
</div>
<div class="relative flex flex-row justify-between w-full mb-4" v-if="postsCount > 5">
<div
class="duration-500 flex w-1/2 px-5 py-4 justify-center items-center"
:class="page > 1 ? 'opacity-100' : 'opacity-0'"
>
<div class="flex items-center duration-300 prev-arrow" @click="prevPage">
<div class="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="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">
Précédent
</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'"
>
<div class="flex items-center duration-300 suiv-arrow" @click="nextPage">
<div class="ml-4 font-bold">
Suivant
</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" />
</svg>
</div>
</div>
</div>
</div>
</div>
</main>
</template>
<script>
import Post from "~/components/Post";
import PageTitle from "~/components/PageTitle";
export default {
name: "blog",
components: {PageTitle, Post},
head() {
return {
title: 'Blog - Arthur Danjou'
}
},
data () {
return {
posts: [],
postsCount: 0,
page: 1,
current_tag: '',
tags: [],
hasNextPage: false,
}
},
methods: {
displayTags(tags) {
const tags_label = []
tags.map(tag => {
tags_label.push(tag.label.code)
})
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
},
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
},
nextPage() {
this.page++
},
prevPage() {
this.page--
}
},
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')
return {
posts: data.data,
postsCount: count,
tags,
hasNextPage: data.meta.next_page_url !== null
}
}
}
</script>
<style scoped lang="scss">
.blog {
.home-arrow:hover .arrow {
transform: translateX(-15px);
}
.prev-arrow:hover .arrow {
transform: translateX(-10px);
}
.suiv-arrow:hover .arrow {
transform: translateX(15px);
}
.arrow {
transform: translateX(-3px);
}
}
</style>

144
pages/contact.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<main class="contact flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</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">
Software & Tech Newsletter
</h1>
<h3 class="text-md md:text-lg">
Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets. <br>
<span class="font-bold self-start">Pas de spam. Désabonnement quand vous voulez</span>
</h3>
<form class="flex flex-col lg:flex-row mt-4 w-full">
<div class="flex flex-col lg:flex-row">
<div class="mb-3 lg:mr-4 w-full md:w-auto">
<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="Prénom" required id="name"/>
</div>
<div class="mb-3 lg:mr-4 w-full md:w-auto">
<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="Adresse 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">
S'abonner
<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>
</button>
</div>
</form>
<div v-if="error" class="flex">
<div class="rounded-xl px-3 py-2 bg-red-300 font-bold ">
Erreur dans le formulaire !
</div>
</div>
<div v-if="success" class="flex">
<div class="rounded-xl px-3 py-2 bg-green-300 font-bold ">
Inscription confirmée pour {{ 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">
Comment me contacter ?
</h1>
<h3 class="text-md md:text-lg">
N'hésitez pas à me contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous discuter ✌️
</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">
contact@arthurdanjou.fr
</a>
<div class="arrow duration-300">
<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="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</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">
Suis-je disponible ?
</h1>
<h3 class="text-lg md:text-lg">
Ce status sera mis à jour en temps réel pour vous indiquer si je suis disponible pour du travail.
</h3>
<div class="my-4 text-purple-500">
Je suis actuellement <span class="py-1 px-2 font-bold rounded-xl" :class="'bg-' +hiringColor+ '-300 text-' +hiringColor+ '-500'">{{$t(hiringStatus.code)}}</span> pour du travail.
</div>
</div>
</main>
</template>
<script>
import PageTitle from "~/components/PageTitle";
export default {
name: "contact",
components: {PageTitle},
data () {
return {
hiringStatus: '',
hiringColor: '',
form: {
name: '',
email: ''
},
success: false,
error: false
}
},
async asyncData({ $axios }) {
const {data: me} = await $axios.get('/me')
return {
hiringStatus: me.hiringStatus,
hiringColor: me.hiring_color
}
},
methods: {
async handleForm () {
await this.$axios.post('/subscribers',
{
email: this.form.email,
name: this.form.name
})
.then(() => {
this.success = true
setTimeout(() => {
this.success = false
this.form.email = ''
this.form.name = ''
}, 5000)
}).catch(() => {
this.error = true
setTimeout(() => {
this.error = false
}, 5000)
})
}
}
}
</script>
<style scoped lang="scss">
.contact {
.email:hover .arrow {
transform: translateX(15px);
}
.link {
@apply mr-5 duration-300;
&:hover {
@apply border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid;
}
}
}
</style>

113
pages/index.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<main class="index px-5 xl:px-64">
<section class="mt-16 md:mt-32 banner w-full mb-16">
<div class="flex flex-col lg:flex-row-reverse mb-4">
<div class="hidden lg:block flex justify-center items-center lg:w-1/2">
<img src="@/assets/img/computer.png" alt="It's me !" class="icon" />
</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 />
<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') }}
</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}) }}
</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"
color="orange"
link="/about"
>
<svg class="inline" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</HomeLink>
<HomeLink
title="home_link_blog"
description="home_link_blog_description"
color="green"
link="/blog"
>
<svg class="inline" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</HomeLink>
</div>
<div class="flex flex-col md:flex-row justify-around w-full">
<HomeLink
title="home_link_work"
description="home_link_work_description"
color="blue"
link="/work"
>
<svg class="inline-block" 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>
</HomeLink>
<HomeLink
title="home_link_contact"
description="home_link_contact_description"
color="purple"
link="/contact"
>
<svg class="inline-block" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</HomeLink>
</div>
</div>
</section>
</main>
</template>
<script>
import Vue from 'vue'
import HomeLink from "~/components/HomeLink";
export default Vue.extend({
components: {HomeLink},
head() {
return {
title: 'Arthur Danjou - Web & Software Developer'
}
},
data () {
return {
age: 0
}
},
async asyncData({$axios}) {
const {data: me} = await $axios.get('/me')
return {
age: me.age
}
}
})
</script>
<style lang="scss" scoped>
.index {
.title {
line-height: 3rem;
}
.arrow-btn .icon {
transform: translate(3px, -5px);
transition-duration: .3s;
}
.arrow-btn:hover .icon {
transform: translate(3px, 0);
}
}
</style>

78
pages/work/_id.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<main class="flex flex-col lg:flex-row items-center px-5 xl:px-64 mb-16 md:mb-32">
<div class="w-full lg:w-1/2 flex flex-col items-center mt-8 md:mt-32">
<img class="w-4/5 rounded-xl" :src="'http://localhost:5555/files/' + cover" alt="Project Img" />
<a
class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
:class="'bg-' + color + '-400 hover:bg-' + color + '-600'"
:href="url"
>{{formatLink}}</a>
</div>
<div class="w-full lg:w-1/2 ml-5 ">
<h1 class="text-xl lg:text-3xl font-bold">
{{ $t(title) }}
</h1>
<p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
{{ $t(description) }}
</p>
<div>
<h3 class="text-md lg:text-lg font-bold">
{{ $t('work_tech_used') }}
</h3>
<div class="flex flex-row overflow-x-auto">
<div v-for="skill in skills">
<WorkSkill
:skill="skill.title.code"
:color="skill.color"
:cover="skill.cover.file_name"
/>
</div>
</div>
</div>
</div>
</main>
</template>
<script>
import WorkSkill from "~/components/WorkSkill";
export default {
name: "_id",
components: {WorkSkill},
head() {
return {
title: 'Work - Arthur Danjou'
}
},
data() {
return {
id: this.$route.params.id,
title: '',
description: '',
skills: [],
color: '',
cover: '',
url: ''
}
},
async asyncData({ params, $axios }) {
const {data: project} = await $axios.get('/projects/' + params.id)
return {
title: project.title.code,
description: project.description.code,
skills: project.skills,
color: project.color,
cover: project.cover.file_name,
url: project.url
}
},
computed: {
formatLink() {
return this.url.replace('https://', '').replace('http://', '')
}
}
}
</script>
<style scoped>
</style>

60
pages/work/index.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<main class="work flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="Mon travail"
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">
Malheureusement il n'y a pas encore de projets disponibles. Reviens plus tard 😉
</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">
Voici les différents projets auxquels j'ai pu participer dans mon passé !
</h1>
<div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-x-4">
<div v-for="work in works">
<nuxt-link :to="'/work/' + work.id">
<Work
:title="work.title.code"
:url="work.url"
:color="work.color"
:cover="work.cover.file_name"
/>
</nuxt-link>
</div>
</div>
</div>
</main>
</template>
<script>
import PageTitle from "~/components/PageTitle";
import Work from "~/components/Work";
export default {
name: "index",
components: {Work, PageTitle},
head() {
return {
title: 'Work - Arthur Danjou'
}
},
data () {
return {
works: []
}
},
async asyncData({ $axios }) {
const {data: works} = await $axios.get('/projects')
return {
works
}
}
}
</script>
<style scoped lang="scss">
</style>