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

contact page

Browse Source
This commit is contained in:
Arthur Danjou
2020-11-29 16:00:54 +01:00
parent a24c7037e5
commit 70b2b9b1fc
7 changed files with 103 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Service.vue
View File

@@ -1,49 +0,0 @@
<template>
<div class="w-72 h-80 border-2 border-black border-solid rounded-xl">
<div class="flex flex-col items-center my-3 border-b-2 border-black border-solid">
<img width="85" :src="'http://localhost:5555/files/' + cover" alt="Service Img"/>
<h1 class="items-center flex h-16 text-xl font-bold mx-4">
{{ title }}
</h1>
</div>
<div class="h-auto">
{{description }}
</div>
<div class="h-auto">
{{ price }}
</div>
</div>
</template>
<script>
export default {
name: "Service",
props: {
title: {
default: 'Title',
type: String
},
description: {
default: 'Description',
type: String
},
cover: {
default: 'default.png',
type: String
},
price: {
default: 0,
type: String
}
},
computed: {
hasPrice() {
return this.price !== '0'
}
}
}
</script>
<style scoped>
</style>

4
src/components/Skill.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
<img class="rounded-full" alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
</div>
<h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
</div>

2
src/components/WorkSkill.vue
View File

@@ -2,7 +2,7 @@
<div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
<img class="rounded-full" alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
</div>
<h1 class="md:text-2xl text-lg font-bold">{{ $t(skill) }}</h1>
</div>

2
src/templates/pages/about.vue
View File

@@ -37,7 +37,7 @@
<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 space-x-4">
<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"

10
src/templates/pages/blog/index.vue
View File

@@ -8,14 +8,17 @@
<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>
<div>
<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 v-else>
<!-- TODO
Insert research by tags
Insert see more
-->
</div>
<div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
<div v-if="posts.size !== 0" class="w-full" v-for="post in posts">
<div class="w-full" v-for="post in posts">
<nuxt-link :to="'/blog/' + post.id">
<Post
:title="post.title.code"
@@ -29,9 +32,6 @@
/>
</nuxt-link>
</div>
<div v-else class="w-full">
Pas de blogs !
</div>
</div>
</main>
</template>

165
src/templates/pages/contact.vue
View File

@@ -9,105 +9,120 @@
<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="flex flex-col items-center text-center py-10 w-full">
<h1 class="text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900 mb-8">
Vous voulez collaborer avec moi ? Voici mes différentes offres !
<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>
<div class="flex flex-row w-full overflow-x-auto space-x-4 mb-6">
<!-- Todo Insert Services -->
<Service
title="Développement d'application"
cover="Logo.jpg"
price="0"
/>
<Service
title="Maintenance Linux"
cover="Logo.jpg"
price="120"
/>
<Service
title="Conseil en développement"
cover="Logo.jpg"
price="0"
/>
</div>
<div class="flex flex-col items-center w-full md:w-2/3">
<h1 class="text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
Software & Tech Newsletter
</h1>
<h3 class="text-lg md:text-xl">
Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets.
<span class="font-bold self-start">Pas de spam. Désabonnement quand vous voulez</span>
</h3>
<form class="flex flex-col lg:flex-row my-4 w-full">
<div class="mb-3 mr-4 w-full md:w-auto">
<input 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"/>
<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 mr-4 w-full md:w-auto">
<input 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 class="mb-3 self-center">
<button 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>
<div class="flex flex-col items-start w-full md:w-2/3">
<h1 class="self-center text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
Comment me contacter ?
</h1>
<h3 class="text-lg md:text-xl">
N'hésitez pas à nous contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous connecter ✌️
</h3>
<div>
<div class="my-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>
Statut Freelance : <span class="py-1 px-2 font-bold rounded-full" :class="'bg-' +hiringColor+ '-300 text-' +hiringColor+ '-500'">{{$t(hiringStatus.code)}}</span>
<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>
<!-- Insert Form -->
<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>
<!--
TODO Newsletter + Services + Formulaire de contact
-->
</main>
</template>
<script>
import PageTitle from "~/components/PageTitle";
import Service from "~/components/Service";
export default {
name: "contact",
components: {Service, PageTitle},
components: {PageTitle},
data () {
return {
services: [],
hiringStatus: '',
hiringColor: ''
hiringColor: '',
form: {
name: '',
email: ''
},
success: false,
error: false
}
},
async asyncData({ $axios }) {
const {data: services} = await $axios.get('/services')
const {data: me} = await $axios.get('/me')
return {
services,
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>

5
src/templates/pages/work/index.vue
View File

@@ -8,7 +8,10 @@
<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>
<div class="flex flex-col justify-around items-center py-10 w-full">
<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>