mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-01-20 15:01:47 +01:00
Fix footer + Add Posts preview + fix header + about + blog + index page
This commit is contained in:
@@ -1,55 +1,23 @@
|
||||
<template>
|
||||
<footer class="footer w-full border-t border-gray-200 border-solid">
|
||||
<div class="footer-top flex flex-col items-center justify-center">
|
||||
<div>
|
||||
<ul class="flex text-lg flex-row">
|
||||
<nuxt-link to="/">
|
||||
<li class="hover:bg-red-400 py-1 px-3 mx-4 cursor-pointer duration-500">
|
||||
Accueil
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/about">
|
||||
<li class="hover:bg-orange-400 py-1 px-3 mx-4 cursor-pointer duration-500">
|
||||
A Propos
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/blog">
|
||||
<li class="hover:bg-green-400 py-1 px-3 mx-4 cursor-pointer duration-500">
|
||||
Blog
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/work">
|
||||
<li class="hover:bg-blue-400 py-1 px-3 mx-4 cursor-pointer duration-500">
|
||||
Travail
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/contact">
|
||||
<li class="hover:bg-purple-400 py-1 px-3 mx-4 cursor-pointer duration-500">
|
||||
Contact
|
||||
</li>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center my-4">
|
||||
<div class="text-center">
|
||||
<p class="text-lg">
|
||||
Contactez moi par mail : <span class="text-red-400 hover:text-red-700 duration-300 cursor-pointer">contact@arthurdanjou.fr</span>
|
||||
</p>
|
||||
<div class="text-gray-600 text-xs text-right">
|
||||
(Clique c'est gratuit ❤)
|
||||
</div>
|
||||
<footer class="footer w-full border-t border-gray-400 border-solid mb-20 md:mb-0">
|
||||
<div>
|
||||
<div class="flex flex-col items-center border-t border-solid border-gray-400 py-4 bg-gray-200 text-center ">
|
||||
<div class="mb-3">
|
||||
<p class="inline">Retrouvez moi sur :
|
||||
<span><a href="https://twitch.com/ArthurDanjou" target="_blank">Twitch</a></span>,
|
||||
<span><a href="https://github.com/ArthurDanjou" target="_blank">Github</a></span> &
|
||||
<span><a href="https://twitter.com/ArthurDanj" target="_blank">Twitter</a></span> et par
|
||||
<span><a href="mailto:contact@arthurdanjou.fr" target="_blank">Mail</a></span></p>
|
||||
<span class="inline text-gray-600 text-xs">
|
||||
(Clique c'est gratuit 🔗)
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-mg text-center">
|
||||
Retrouvez moi sur : <span>Twitter</span>, <span>Github</span> et <span>Twitch</span>
|
||||
<p>
|
||||
Développé et conçu avec ❤ en utilisant <span>NuxtJs</span> & <span>AdonisJs</span> par <span>Arthur DANJOU</span>
|
||||
</p>
|
||||
<p>© Copyright {{date}} - Tous droits réservés</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center border-t border-solid border-gray-400 py-4 bg-gray-200">
|
||||
<p>
|
||||
Développé et conçu avec ❤ en utilisant <span>NuxtJs</span> & <span>AdonisJs</span> par <span>Arthur DANJOU</span>
|
||||
</p>
|
||||
<p>© Copyright {{date}} - Tous droits réservés</p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "GoToTop"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
62
src/components/HomePost.vue
Normal file
62
src/components/HomePost.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<article class="border border-solid border-gray-300 w-full lg:w-1/3 h-auto h-blog p-2 flex flex-col justify-between my-5 lg:my-0 lg:mx-5">
|
||||
<div>
|
||||
<p class="text-3xl font-bold text-justify leading-7">{{title}}</p>
|
||||
<p class="text-gray-900 text-lg italic text-justify">{{description}}</p>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<div>
|
||||
<div>{{date}}</div>
|
||||
<div>{{reading_time}} min read</div>
|
||||
</div>
|
||||
<div class="self-end flex flex-wrap">
|
||||
<div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 rounded bg-black text-white font-semibold">
|
||||
#{{tag}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HomePost",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "New Post's title "
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "New Post's description"
|
||||
},
|
||||
reading_time: {
|
||||
type: String,
|
||||
default: "0"
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
default: "Today"
|
||||
},
|
||||
tags: {
|
||||
type: String,
|
||||
default: "Tag1 Tag2 Tag3",
|
||||
},
|
||||
cover: {
|
||||
type: String,
|
||||
default: "https://api.arthurdanjou.fr/pictures/default.png"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tagsSplit() {
|
||||
return this.tags.split(" ")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.h-blog {
|
||||
min-height: 20rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<div class="lang-switcher fixed">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LangSwitcher"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.lang-switcher {
|
||||
|
||||
}
|
||||
</style>
|
||||
62
src/components/Post.vue
Normal file
62
src/components/Post.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<article class="border border-solid border-gray-300 w-full h-auto h-blog p-2 flex flex-col justify-between my-5">
|
||||
<div>
|
||||
<p class="text-3xl font-bold text-justify">{{title}}</p>
|
||||
<p class="text-gray-900 text-lg italic text-justify">{{description}}</p>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<div>
|
||||
<div>{{date}}</div>
|
||||
<div>{{reading_time}} min read</div>
|
||||
</div>
|
||||
<div class="self-end flex flex-wrap">
|
||||
<div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 rounded bg-black text-white font-semibold">
|
||||
#{{tag}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Post",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "New Post's title "
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "New Post's description"
|
||||
},
|
||||
reading_time: {
|
||||
type: String,
|
||||
default: "0"
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
default: "Today"
|
||||
},
|
||||
tags: {
|
||||
type: String,
|
||||
default: "Tag1 Tag2 Tag3",
|
||||
},
|
||||
cover: {
|
||||
type: String,
|
||||
default: "https://api.arthurdanjou.fr/pictures/default.png"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tagsSplit() {
|
||||
return this.tags.split(" ")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.h-blog {
|
||||
min-height: 20rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user