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

💻 | Working

Browse Source
This commit is contained in:
Arthur Danjou
2021-04-16 21:52:29 +02:00
parent 2ecad33096
commit 8450d8bebf
25 changed files with 162 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Ad.vue
View File

@@ -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>

24
src/components/AdHome.vue
View File

@@ -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>

2
src/components/Banner.vue
View File

@@ -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>

2
src/components/Button.vue
View File

@@ -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
View 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>

2
src/components/EnvListItem.vue
View File

@@ -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>

4
src/components/Experience.vue
View File

@@ -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">

33
src/components/Footer.vue
View File

@@ -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 border-b-2 border-gray-200 hover:border-black dark:border-gray-700 dark:hover:border-white;
}
.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;
}
.black {
@apply fill-black dark:fill-white dark:text-white dark:stroke-black
}
}
</style>

4
src/components/Formation.vue
View File

@@ -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">

2
src/components/PageTitle.vue
View File

@@ -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 />

2
src/components/PresentationAbout.vue
View File

@@ -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>