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

Fix footer + Add Posts preview + fix header + about + blog + index page

Browse Source
This commit is contained in:
Arthur Danjou
2020-10-29 23:35:18 +01:00
parent 9933439ee8
commit 181ea0bba3
52 changed files with 1514 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/Header.vue
View File

@@ -1,54 +1,124 @@
<template>
<header class="header border-b border-gray-200 border-solid tracking-wider">
<div class="header-container flex justify-between items-center h-full">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500">
<header class="fixed top-0 left-0 bg-white header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24">
<div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500 dark:text-white dark:bg-black">
Arthur Danjou
</div>
<div class="right">
<ul class="flex text-xl">
<nuxt-link to="/">
<li class="hover:bg-red-400 py-1 px-3 mx-2 cursor-pointer duration-500">
<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>
</li>
<li class="mx-2 cursor-pointer flex items-center">
<div @click="changeColorMode()" v-if="this.$colorMode.value === 'light'" class="">
<img alt="Moon Logo" src="@/assets/img/icons/moon.svg" height="25" width="25"/>
</div>
<div @click="changeColorMode()" v-else class="">
<img src="@/assets/img/icons/sun.svg" alt="Sun Logo" height="25" width="25"/>
</div>
</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
</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
</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
</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
</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
</li>
</nuxt-link>
</ul>
</div>
<ul class="z-index-50 bg-white md:hidden fixed bottom-0 left-0 z-index-20 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<nuxt-link class="red" to="/">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/home.svg" alt="Home icon" height="15" width="15" />
Accueil
</li>
</nuxt-link>
<nuxt-link to="/about">
<li class="hover:bg-orange-400 py-1 px-3 mx-2 cursor-pointer duration-500">
A Propos
<nuxt-link to="/about" class="orange">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/profile.svg" alt="About icon" height="15" width="15" />
Moi
</li>
</nuxt-link>
<nuxt-link to="/blog">
<li class="hover:bg-green-400 py-1 px-3 mx-2 cursor-pointer duration-500">
<nuxt-link to="/blog" class="green">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/quill.svg" alt="Blog icon" height="15" width="15" />
Blog
</li>
</nuxt-link>
<nuxt-link to="/work">
<li class="hover:bg-blue-400 py-1 px-3 mx-2 cursor-pointer duration-500">
<nuxt-link to="/work" class="blue">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/case.svg" alt="Work icon" height="15" width="15" />
Travail
</li>
</nuxt-link>
<nuxt-link to="/contact">
<li class="hover:bg-purple-400 py-1 px-3 mx-2 cursor-pointer duration-500">
<nuxt-link to="/contact" class="purple">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/icons/pin.svg" alt="Contact icon" height="15" width="15" />
Contact
</li>
</nuxt-link>
</ul>
</div>
</nav>
</div>
</header>
</template>
<script>
export default {
name: "Header"
name: "Header",
methods: {
changeColorMode() {
this.$colorMode.preference = this.$colorMode.value === 'light' ? 'dark' : 'light'
}
}
}
</script>
<style scoped lang="scss">
.header {
height: 80px;
.header-container {
padding: 0 15%;
.nuxt-link-exact-active {
&.red {
@apply text-red-400;
}
&.orange {
@apply text-orange-400;
}
&.green {
@apply text-green-400;
}
&.blue {
@apply text-blue-400;
}
&.purple {
@apply text-purple-400;
}
}
.navbar-bottom-items li {
transition: all .2s ease-in-out;
}
}
}
</style>