mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-01-14 12:14:42 +01:00
💻 | Working
This commit is contained in:
@@ -3,12 +3,12 @@ import {NuxtOptionsHead} from "@nuxt/types/config/head";
|
||||
|
||||
const params = {
|
||||
title: 'artsite',
|
||||
color: '#0DA5FF',
|
||||
color: '#00a0ff',
|
||||
image: '/images/image.jpg',
|
||||
url: 'https://arthurdanjou.fr',
|
||||
favicon: {
|
||||
type: 'image/jpg',
|
||||
href: '/favicon.jpg',
|
||||
href: '/favicon.png',
|
||||
},
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
|
||||
|
||||
BIN
src/assets/images/memojies/Dev.png
Normal file
BIN
src/assets/images/memojies/Dev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
src/assets/images/memojies/Fiesta.png
Normal file
BIN
src/assets/images/memojies/Fiesta.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
src/assets/images/memojies/Hey.png
Normal file
BIN
src/assets/images/memojies/Hey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>AdonisJS icon</title><path d="M13.333 1.333l-.596 1.193-2.404 4.807L8 2.667l-8 16h4.667l-2 4H24zm0 2.982l8.51 17.018H4.823l1.334-2.666H16l-4.922-9.843Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 228 B |
1
src/assets/images/socials/github-black.svg
Normal file
1
src/assets/images/socials/github-black.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-140.699219 0-256 116.300781-256 257 0 139.882812 114.25 255 256 255 141.574219 0 256-114.945312 256-255 0-140.699219-115.300781-257-256-257zm45 477.5c-14.398438 3-29.699219 4.5-45 4.5s-30.601562-1.5-45-4.5v-70.199219c0-16.800781 4.5-22.800781 10.5-30.902343 3.054688-3.492188 4.898438-6.625 18.597656-27.296876l-23.097656-3.601562c-59.402344-8.699219-82.800781-39.601562-92.101562-63.601562-12-32.097657-5.699219-72.300782 15.902343-97.796876 3.300781-3.902343 6-10.503906 3.601563-17.402343-4.503906-13.800781-3.902344-35.699219-.902344-44.101563 15.90625 2.273438 32.261719 13.667969 45.902344 21.902344 6.285156 3.667969 9.582031 2.699219 12.597656 3 10.960938-2.28125 28.058594-7.800781 54.300781-7.800781 16.199219 0 33.300781 2.398437 50.101563 7.199219 3.003906-.070313 7.832031 2.484374 16.199218-2.398438 14.257813-8.6875 30.058594-19.691406 45.898438-21.902344 3 8.402344 3.601562 30.300782-.898438 44.101563-2.402343 6.898437.296876 13.5 3.601563 17.402343 21.597656 25.5 27.898437 65.699219 15.898437 97.796876-9.300781 24-32.699218 54.902343-92.101562 63.601562l-23.097656 3.601562c14.160156 21.367188 15.652344 23.929688 18.601562 27.296876 5.996094 8.101562 10.496094 14.101562 10.496094 30.902343zm30-8.699219v-61.5c0-17.101562-3.601562-28.5-8.402344-36.902343 45.601563-12.296876 78.003906-39.300782 92.402344-78 15.300781-40.796876 8.402344-89.398438-17.101562-123 4.503906-20.097657 4.503906-52.199219-6.296876-67.199219-4.800781-6.597657-11.402343-10.199219-19.800781-10.199219-.300781 0-.300781 0-.300781 0-23.261719 1.257812-41.570312 12.972656-61.199219 24.898438-18-4.800782-36.300781-7.199219-54.601562-7.199219-18.597657 0-37.199219 2.699219-53.695313 7.199219-20.664062-12.460938-38.796875-23.671876-62.703125-24.898438-7.5 0-14.101562 3.601562-18.902343 10.199219-10.796876 15-10.796876 47.101562-6.296876 67.199219-25.503906 33.601562-32.402343 82.5-17.101562 123 14.398438 38.699218 46.800781 65.703124 92.402344 78-3.722656 6.511718-6.667969 14.914062-7.828125 26.285156-9.210938 3.175781-17.199219 4.210937-24.628907 2.027344-7.835937-2.316407-13.941406-7.546876-19.246093-16.46875-11.914063-20.015626-32.207031-36.355469-55.3125-34.230469l2.636719 29.882812c10.699218-.980469 21.347656 10.339844 26.878906 19.671875 9.125 15.367188 21.417968 25.445313 36.546875 29.914063 11.230469 3.308593 21.496093 3.230469 32.550781.871093v40.449219c-87.300781-30.601562-151-114-151-211.800781 0-124.199219 101.800781-227 226-227s226 102.800781 226 227c0 97.800781-63.699219 181.199219-151 211.800781zm0 0"/></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
5
src/assets/images/socials/github-white.svg
Normal file
5
src/assets/images/socials/github-white.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M256,0C115.301,0 0,116.301 0,257C0,396.883 114.25,512 256,512C397.574,512 512,397.055 512,257C512,116.301 396.699,0 256,0ZM301,477.5C286.602,480.5 271.301,482 256,482C240.699,482 225.398,480.5 211,477.5L211,407.301C211,390.5 215.5,384.5 221.5,376.398C224.555,372.906 226.398,369.773 240.098,349.102L217,345.5C157.598,336.801 134.199,305.898 124.898,281.898C112.898,249.801 119.199,209.598 140.801,184.102C144.102,180.199 146.801,173.598 144.402,166.699C139.898,152.898 140.5,131 143.5,122.598C159.406,124.871 175.762,136.266 189.402,144.5C195.688,148.168 198.984,147.199 202,147.5C212.961,145.219 230.059,139.699 256.301,139.699C272.5,139.699 289.602,142.098 306.402,146.898C309.406,146.828 314.234,149.383 322.602,144.5C336.859,135.813 352.66,124.809 368.5,122.598C371.5,131 372.102,152.898 367.602,166.699C365.199,173.598 367.898,180.199 371.203,184.102C392.801,209.602 399.102,249.801 387.102,281.898C377.801,305.898 354.402,336.801 295,345.5L271.902,349.102C286.063,370.469 287.555,373.031 290.504,376.398C296.5,384.5 301,390.5 301,407.301L301,477.5ZM331,468.801L331,407.301C331,390.199 327.398,378.801 322.598,370.398C368.199,358.102 400.602,331.098 415,292.398C430.301,251.602 423.402,203 397.898,169.398C402.402,149.301 402.402,117.199 391.602,102.199C386.801,95.602 380.199,92 371.801,92L371.5,92C348.238,93.258 329.93,104.973 310.301,116.898C292.301,112.098 274,109.699 255.699,109.699C237.102,109.699 218.5,112.398 202.004,116.898C181.34,104.438 163.207,93.227 139.301,92C131.801,92 125.199,95.602 120.398,102.199C109.602,117.199 109.602,149.301 114.102,169.398C88.598,203 81.699,251.898 97,292.398C111.398,331.098 143.801,358.102 189.402,370.398C185.68,376.91 182.734,385.313 181.574,396.684C172.363,399.859 164.375,400.895 156.945,398.711C149.109,396.395 143.004,391.164 137.699,382.242C125.785,362.227 105.492,345.887 82.387,348.012L85.023,377.895C95.723,376.914 106.371,388.234 111.902,397.566C121.027,412.934 133.32,423.012 148.449,427.48C159.68,430.789 169.945,430.711 181,428.352L181,468.801C93.699,438.199 30,354.801 30,257C30,132.801 131.801,30 256,30C380.199,30 482,132.801 482,257C482,354.801 418.301,438.199 331,468.801Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 2350 2314.8" xml:space="preserve">
|
||||
<path d="M1175,0C525.8,0,0,525.8,0,1175c0,552.2,378.9,1010.5,890.1,1139.7c-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4
|
||||
c-79.3,0-152.8-35.2-185.1-99.9c-38.2-70.5-44.1-179.2-141-246.8c-29.4-23.5-5.9-47,26.4-44.1c61.7,17.6,111.6,58.8,158.6,120.4
|
||||
c47,61.7,67.6,76.4,155.7,76.4c41.1,0,105.7-2.9,164.5-11.8c32.3-82.3,88.1-155.7,155.7-190.9c-393.6-47-581.6-240.9-581.6-505.3
|
||||
c0-114.6,49.9-223.3,132.2-317.3c-26.4-91.1-61.7-279.1,11.8-352.5c176.3,0,282,114.6,308.4,143.9c88.1-29.4,185.1-47,284.9-47
|
||||
c102.8,0,196.8,17.6,284.9,47c26.4-29.4,132.2-143.9,308.4-143.9c70.5,70.5,38.2,261.4,8.8,352.5c82.3,91.1,129.3,202.7,129.3,317.3
|
||||
c0,264.4-185.1,458.3-575.7,499.4c108.7,55.8,185.1,214.4,185.1,331.9V2256c0,8.8-2.9,17.6-2.9,26.4
|
||||
C2021,2123.8,2350,1689.1,2350,1175C2350,525.8,1824.2,0,1175,0L1175,0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="rounded-3xl p-12 text-center shadow-md" :class="getColor">
|
||||
<div class="rounded-3xl p-2 lg:p-8 text-center shadow-md" :class="getColor">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,27 +1,33 @@
|
||||
<template>
|
||||
<section class="w-full my-12">
|
||||
<div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around">
|
||||
<nuxt-link to="/uses" class="h-48 md:w-1/3">
|
||||
<Ad color="rose" class="h-full w-full flex flex-col justify-between">
|
||||
<div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around h-full">
|
||||
<nuxt-link to="/uses" class="md:w-1/3 h-full">
|
||||
<Ad color="rose" class="h-96 w-full flex flex-col justify-between items-center">
|
||||
<div>
|
||||
<img class="h-48" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-black text-4xl">
|
||||
Usages
|
||||
</h1>
|
||||
<p class="text-lg text-gray-700 mt-4">
|
||||
<h3 class="px-4 text-xl text-gray-700">
|
||||
Venez decouvrir mon environnement de developpement
|
||||
</p>
|
||||
</h3>
|
||||
</div>
|
||||
</Ad>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/contact" class="h-48 md:w-1/3">
|
||||
<Ad color="blue" class="h-full w-full flex flex-col justify-between">
|
||||
<nuxt-link to="/contact" class="md:w-1/3 h-full">
|
||||
<Ad color="blue" class="h-96 w-full flex flex-col justify-between items-center">
|
||||
<div>
|
||||
<img class="h-48" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-black text-4xl">
|
||||
Vous avez un projet ?
|
||||
</h1>
|
||||
<p class="text-lg text-gray-700 mt-4">
|
||||
<h3 class="px-4 text-lg text-gray-700">
|
||||
Contactez moi en detaillant votre projet pour debuter notre collaboration.
|
||||
</p>
|
||||
</h3>
|
||||
</div>
|
||||
</Ad>
|
||||
</nuxt-link>
|
||||
|
||||
@@ -25,6 +25,6 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.link {
|
||||
@apply font-medium cursor-pointer border-b-2 border-gray-200 text-teal-400 hover:border-teal-400 duration-200 dark:(font-white border-gray-700) hover:dark:border-teal-400
|
||||
@apply font-medium cursor-pointer border-b-2 border-gray-200 text-indigo-600 hover:border-indigo-600 duration-200 dark:(font-white border-gray-700) hover:dark:border-indigo-600
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<nuxt-link :to="link" class="duration-150 transform hover:scale-110">
|
||||
<div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-gray-600 hover:(bg-gray-700 text-white) text-gray-700 duration-300 dark:(border-gray-400 text-gray-400) dark:hover:bg-gray-400 dark:hover:text-black">
|
||||
<div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-indigo-600 hover:(bg-indigo-600 text-white) dark:hover:text-black text-indigo-600 duration-300">
|
||||
{{ content }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
91
src/components/ContactForm.vue
Normal file
91
src/components/ContactForm.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<section class="w-full flex items-center justify-center flex-col">
|
||||
<h2 class="mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400">
|
||||
Fill in the form or <a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">Send an email</a> 📬
|
||||
</h2>
|
||||
<form class="w-full lg:w-1/2">
|
||||
<div class="w-full lg:flex lg:space-x-4 justify-center mb-8 lg:mb-12">
|
||||
<div class="form-div lg:w-1/2 mb-8 lg:mb-0">
|
||||
<input
|
||||
id="name"
|
||||
required
|
||||
type="text"
|
||||
placeholder=" "
|
||||
class="form-input-half w-full"
|
||||
/>
|
||||
<label for="name" class="form-label"> What is your name ?</label>
|
||||
</div>
|
||||
<div class="form-div lg:w-1/2">
|
||||
<input
|
||||
id="email"
|
||||
required
|
||||
type="email"
|
||||
placeholder=" "
|
||||
class="form-input-half w-full"
|
||||
/>
|
||||
<label for="email" class="form-label">What is your email ?</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-div w-full mb-8 lg:mb-12">
|
||||
<input
|
||||
id="subject"
|
||||
required
|
||||
type="text"
|
||||
placeholder=" "
|
||||
class="form-input w-full"
|
||||
/>
|
||||
<label for="subject" class="form-label">Why are you contacting me?</label>
|
||||
</div>
|
||||
<div class="form-div w-full">
|
||||
<textarea
|
||||
id="content"
|
||||
required
|
||||
placeholder=" "
|
||||
class="form-input w-full"
|
||||
minlength="30"
|
||||
rows="4"
|
||||
/>
|
||||
<label for="content" class="form-label">Tell me about your project</label>
|
||||
</div>
|
||||
</form>
|
||||
<div class="my-12">
|
||||
<div class="font-bold px-6 py-3 border-2 rounded-full border-indigo-600 text-indigo-600 hover:(bg-indigo-600 text-white) hover:dark:text-black duration-300 cursor-pointer">
|
||||
Envoyer
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "ContactForm"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
input:focus-within ~ label, textarea:focus-within ~ label,
|
||||
input:not(:placeholder-shown) ~ label, textarea:not(:placeholder-shown) ~ label {
|
||||
@apply transform scale-75 -translate-y-6 -translate-x-7;
|
||||
}
|
||||
|
||||
.form-input-half:focus-within ~ label,
|
||||
.form-input-half:not(:placeholder-shown) ~ label {
|
||||
@apply transform scale-75 -translate-y-6 -translate-x-5;
|
||||
}
|
||||
|
||||
.form-div {
|
||||
@apply relative border-b border-gray-200 dark:border-gray-800 focus-within:border-black dark:focus-within:border-white
|
||||
}
|
||||
|
||||
.form-input-half, .form-input {
|
||||
@apply block w-full appearance-none focus:outline-none bg-transparent
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@apply absolute top-0 -z-1 duration-300 text-gray-700 dark:text-gray-400
|
||||
}
|
||||
|
||||
.email {
|
||||
@apply duration-300 border-b-2 border-gray-200 dark:border-gray-800 hover:(border-black dark:border-white)
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<li>
|
||||
{{ $t(title) }}:
|
||||
<a class="duration-300 text-teal-400 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-teal-400 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
|
||||
<a class="duration-300 text-indigo-600 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-indigo-600 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
|
||||
<span v-else>{{ content }}</span>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="flex flex-row mb-5">
|
||||
<div class="self-center flex h-3 w-3 mr-3 relative">
|
||||
<span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-teal-400 opacity-75"></span>
|
||||
<span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-indigo-600 opacity-75"></span>
|
||||
<span v-else class="inline relative h-3 w-3 rounded-full bg-gray-400 opacity-75"></span>
|
||||
<span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-teal-500"></span>
|
||||
<span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-indigo-800"></span>
|
||||
<span v-else class="inline absolute rounded-full h-3 w-3 bg-gray-500"></span>
|
||||
</div>
|
||||
<div class="leading-7">
|
||||
|
||||
@@ -6,21 +6,22 @@
|
||||
<p class="inline">{{ $t('footer.find_me') }}
|
||||
<br class="md:hidden"/>
|
||||
<a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
|
||||
<img class="inline" src="@/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
|
||||
<span class="link">Twitch</span>
|
||||
</a>,
|
||||
<a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/images/socials/github.svg" alt="Github logo" height="20" width="20" />
|
||||
<img v-if="!isDarkMode" class="inline black" src="@/assets/images/socials/github-black.svg" alt="Github logo" height="20" width="20" />
|
||||
<img v-else class="inline black" src="@/assets/images/socials/github-white.svg" alt="Github logo" height="20" width="20" />
|
||||
<span class="link">Github</span>
|
||||
</a> &
|
||||
<a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
|
||||
<img class="inline" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
|
||||
<span class="link">Twitter</span>
|
||||
</a>
|
||||
<br class="md:hidden"/>
|
||||
{{ $t('footer.separator') }}
|
||||
<a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank" rel="noopener noreferrer">
|
||||
<svg class="inline img" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg class="inline" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="link">Mail</span>
|
||||
@@ -34,7 +35,7 @@
|
||||
<p>
|
||||
{{ $t('footer.credits') }}
|
||||
<a class="font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
|
||||
<img class="inline" src="@/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
|
||||
<span class="link">NuxtJs</span>
|
||||
</a>
|
||||
{{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
|
||||
@@ -46,15 +47,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ref} from "@nuxtjs/composition-api";
|
||||
import {computed, ref, useContext} from "@nuxtjs/composition-api";
|
||||
|
||||
export default {
|
||||
name: "Footer",
|
||||
setup() {
|
||||
const {$colorMode} = useContext()
|
||||
const isDarkMode = computed(() => {
|
||||
return $colorMode.preference === 'dark' | undefined
|
||||
})
|
||||
|
||||
const getDate = ref(new Date().getFullYear())
|
||||
|
||||
return {
|
||||
getDate
|
||||
getDate,
|
||||
isDarkMode
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -62,16 +69,12 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.footer {
|
||||
.img {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply duration-100;
|
||||
|
||||
&: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;
|
||||
@apply border-b-2 border-gray-200 hover:border-black dark:border-gray-700 dark:hover:border-white;
|
||||
}
|
||||
|
||||
.black {
|
||||
@apply fill-black dark:fill-white dark:text-white dark:stroke-black
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="flex flex-row mb-5">
|
||||
<div class="self-center flex h-3 w-3 mr-3 relative">
|
||||
<span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-teal-400 opacity-75"></span>
|
||||
<span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-indigo-600 opacity-75"></span>
|
||||
<span v-else class="inline relative h-3 w-3 rounded-full bg-gray-400 opacity-75"></span>
|
||||
<span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-teal-500"></span>
|
||||
<span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-indigo-800"></span>
|
||||
<span v-else class="inline absolute rounded-full h-3 w-3 bg-gray-500"></span>
|
||||
</div>
|
||||
<div class="leading-7">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<h1
|
||||
class="mt-16 md:mt-32 font-bold text-2xl md:text-4xl mr-2 inline mb-4 border-b-2 border-solid border-teal-400"
|
||||
class="mt-16 md:mt-32 font-bold text-3xl md:text-5xl mr-2 inline mb-4 border-b-3 border-solid border-indigo-600"
|
||||
>
|
||||
{{ this.$t(title) }}
|
||||
<slot />
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<img class="logo-img rounded-full my-5 shadow-lg" src="@/assets/images/Logo.jpg" alt="It's me !" />
|
||||
</div>
|
||||
<div class="ml-2 text-lg leading-6 xl:w-2/3 text-justify dark:text-gray-400 text-gray-700">
|
||||
<p>{{ $t('about.banner.hello') }} <span class="text-teal-400 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
|
||||
<p>{{ $t('about.banner.hello') }} <span class="text-indigo-600 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>
|
||||
|
||||
@@ -172,7 +172,7 @@ export default {
|
||||
success: 'Inscription confirmée pour {email} !'
|
||||
},
|
||||
how_to: {
|
||||
title: 'Comment me contacter ? ✉',
|
||||
title: 'Pourquoi me contacter ✉',
|
||||
description: 'N\'hésitez pas à me contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous discuter ✌️'
|
||||
},
|
||||
available: {
|
||||
|
||||
@@ -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`
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -19,7 +19,7 @@ module.exports = {
|
||||
borderBottomStyle: 'solid',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
borderBottomColor: theme('colors.teal.400'),
|
||||
borderBottomColor: theme('colors.indigo.600'),
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -28,12 +28,12 @@ module.exports = {
|
||||
dark: {
|
||||
css: [
|
||||
{
|
||||
color: theme('colors.dark.100'),
|
||||
color: theme('colors.gray.400'),
|
||||
'[class~="lead"]': {
|
||||
color: theme('colors.dark.100'),
|
||||
color: theme('colors.gray.400'),
|
||||
},
|
||||
a: {
|
||||
color: theme('colors.teal.400'),
|
||||
color: theme('colors.indigo.600'),
|
||||
transitionDuration: '300ms',
|
||||
cursor: 'pointer',
|
||||
borderBottomColor: theme('colors.gray.700'),
|
||||
@@ -41,7 +41,7 @@ module.exports = {
|
||||
borderBottomStyle: 'solid',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
borderBottomColor: theme('colors.teal.400'),
|
||||
borderBottomColor: theme('colors.indigo.600'),
|
||||
}
|
||||
},
|
||||
strong: {
|
||||
|
||||
Reference in New Issue
Block a user