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

working

Browse Source
This commit is contained in:
Arthur Danjou
2020-11-28 19:35:11 +01:00
parent 23d900b0ff
commit 4ba1f59341
36 changed files with 1460 additions and 959 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Header.vue
View File

@@ -1,16 +1,21 @@
<template>
<header class="dark:bg-dark-200 dark:text-white fixed z-index-50 top-0 left-0 bg-white header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
<header class="dark:bg-dark-200 dark:text-white fixed z-50 top-0 left-0 bg-white header tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
<div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
<nuxt-link to="/">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500">
Arthur Danjou
<div class="left text-2xl font-bold cursor-pointer 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 duration-500">
{{ $t('header_title') }}
</div>
</nuxt-link>
<nav class="right">
<div class="flex flex-col md:flex-row items-center">
<ul class="flex text-xl">
<li class="mx-2 cursor-pointer">
<nuxt-link to="/dev"> FR </nuxt-link>
<div v-if="this.$i18n.locale === 'en'" @click="changeLanguage('fr')">
🇫🇷
</div>
<div v-else @click="changeLanguage('en')">
🇺🇸
</div>
</li>
<li @click="changeColorMode()" class="mx-2 cursor-pointer flex items-center">
<div v-if="this.$colorMode.value === 'light'">
@@ -26,27 +31,27 @@
</li>
<nuxt-link class="red hidden md:inline-block" to="/">
<li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
Accueil
{{ $t('part_home') }}
</li>
</nuxt-link>
<nuxt-link class="orange hidden md:inline-block" to="/about">
<li class="hover:text-orange-400 font-bold mx-2 cursor-pointer duration-300">
Moi
{{ $t('part_about') }}
</li>
</nuxt-link>
<nuxt-link class="green hidden md:inline-block" to="/blog">
<li class="hover:text-green-400 font-bold mx-2 cursor-pointer duration-300">
Blog
{{ $t('part_blog') }}
</li>
</nuxt-link>
<nuxt-link class="blue hidden md:inline-block" to="/work">
<li class="hover:text-blue-400 font-bold mx-2 cursor-pointer duration-300">
Travail
{{ $t('part_work') }}
</li>
</nuxt-link>
<nuxt-link class="purple hidden md:inline-block" to="/contact">
<li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300">
Contact
{{ $t('part_contact') }}
</li>
</nuxt-link>
</ul>
@@ -57,7 +62,7 @@
<svg class="inline-block" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Accueil
{{ $t('part_home') }}
</li>
</nuxt-link>
<nuxt-link to="/about" class="orange">
@@ -65,7 +70,7 @@
<svg class="inline-block" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Moi
{{ $t('part_about') }}
</li>
</nuxt-link>
<nuxt-link to="/blog" class="green">
@@ -73,7 +78,7 @@
<svg class="inline-block" 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="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>
Blog
{{ $t('part_blog') }}
</li>
</nuxt-link>
<nuxt-link to="/work" class="blue">
@@ -81,7 +86,7 @@
<svg class="inline-block" 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="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>
Travail
{{ $t('part_work') }}
</li>
</nuxt-link>
<nuxt-link to="/contact" class="purple">
@@ -90,7 +95,7 @@
<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>
Contact
{{ $t('part_contact') }}
</li>
</nuxt-link>
</ul>
@@ -113,7 +118,10 @@ export default {
},
updateScroll() {
this.scrollPosition = window.scrollY
}
},
changeLanguage(lang) {
this.$i18n.setLocale(lang)
},
},
mounted() {
window.addEventListener('scroll', this.updateScroll);
@@ -133,6 +141,9 @@ export default {
&.green {
@apply text-green-400;
}
&.blue {
@apply text-blue-400;
}
}
.nuxt-link-exact-active {