💻 | Working

This commit is contained in:
2021-04-16 21:52:29 +02:00
parent 2ecad33096
commit 8450d8bebf
25 changed files with 162 additions and 122 deletions

View File

@@ -8,84 +8,28 @@
<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-200">{{ $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>
</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-800 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
type="text"
:placeholder="$t('contact.form.name')"
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-800 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
type="email"
:placeholder="$t('contact.form.mail')"
required
id="email"/>
</div>
</div>
<div class="mb-3 self-center">
<button @click.prevent="handleForm" @keyup.ctrl.enter="handleForm" :disabled="!isSendable" class="button 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')}}
<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 dark:text-black">
{{ $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 dark:text-black">
{{ $t('contact.form.success', { email: form.email }) }}
</div>
</div>
</div>
<div class="w-full lg:w-3/4 mb-10 mt-4">
<section class="w-full lg:w-3/4 mb-10 mt-4 text-center">
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
{{ $t('contact.how_to.title') }}
</h1>
<h3 class="text-md md:text-lg">
{{ $t('contact.how_to.description') }}
</h3>
<div class="mt-4 text-lg flex">
<div class="flex email duration-300 text-purple-500 hover:text-purple-700 cursor-pointer">
<a class="mr-2" href="mailto:me@arthurdanjou.fr?subject=Please enter here your project name">
me@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>
<div class="w-full lg:w-3/4 mb-10 mt-4">
</section>
<section class="w-full lg:w-3/4 mb-10 mt-4 text-center">
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
{{ $t('contact.available.title') }}
</h1>
<h3 class="text-lg md:text-lg">
{{ $t('contact.available.description') }}
</h3>
<div class="my-4 text-purple-500">
<div class="my-4 text-indigo-600">
{{ $t('contact.available.start') }}
<span v-if="info && info.hiring.status" class="py-1 px-2 font-bold rounded-full m-0.5" :class="getColor">{{ $t('hiring.status.' + info.hiring.status) }}</span>
<span v-if="info && info.hiring.status && info.hiring.color" class="py-1 px-2 font-bold rounded-full m-0.5" :class="getColor">{{ $t('hiring.status.' + info.hiring.status) }}</span>
{{ $t('contact.available.end') }}
</div>
</div>
</section>
<ContactForm />
</main>
</template>
@@ -96,6 +40,9 @@ import {combineObject} from "windicss/types/utils/algorithm/compileStyleSheet";
export default {
name: "contact",
head: {
title: 'Contact - Arthur Danjou'
},
setup() {
const {$content} = useContext()
const info = useAsync(() => {
@@ -106,9 +53,9 @@ export default {
const getColor = computed(() => {
switch (hiring_color) {
case 'green':
return `bg-green-200 text-green-500`
return `bg-green-200 text-green-700`
case 'red':
return `bg-red-200 text-red-500`
return `bg-red-200 text-red-700`
}
})

View File

@@ -9,7 +9,7 @@
</PageTitle>
<h1 v-if="projects.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('projects.no_project') }}</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('projects.description') }}</h1>
<h1 class="text-gray-700 dark:text-gray-400 text-xl mt-4">{{ $t('projects.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 class="flex py-8 w-full flex-wrap" >
<div class="md:mx-3 my-2" v-for="project in projects">

View File

@@ -7,7 +7,7 @@
<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-gray-700 dark:text-gray-400 text-xl mt-4 mb-8">{{ $t('about.env.description') }}</p>
<p class="text-gray-700 dark:text-gray-400 text-xl my-8">{{ $t('about.env.description') }}</p>
<EnvGroup>
<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">