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

Import SVG icon & Add dark mode

Browse Source
This commit is contained in:
Arthur Danjou
2020-11-21 11:13:03 +01:00
parent 19db34f3dd
commit aba835f122
42 changed files with 211 additions and 9334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Experience.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="flex flex-row relative mb-5">
<span class="self-center relative h-4 w-4 mr-4">
<div class="flex flex-row mb-5">
<span class="self-center h-4 w-4 mr-4">
<span v-if="end === 'Today'" class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-green-500"/>
<span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
</span>
<div class="leading-7 relative">
<p class="text-base text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
<div class="leading-7">
<p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
<h1 class="text-2xl font-bold">{{title}} - {{company}}</h1>
<h2 class="text-xl">{{description}}</h2>
</div>
@@ -44,6 +44,6 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
</style>

30
src/components/Footer.vue
View File

@@ -1,28 +1,30 @@
<template>
<footer class="footer w-full border-t border-gray-400 border-solid mb-20 md:mb-0">
<footer class="footer w-full border-t-2 border-solid border-black dark:border-white 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="flex flex-col items-center py-4 text-center ">
<div class="mb-3">
<p class="inline">Retrouvez moi sur :
<br class="md:hidden"/>
<a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank">
<img class="inline img" src="@/assets/img/socials/twitch.svg" alt="Twitch logo" height="18" width="18" />
Twitch
<span class="link">Twitch</span>
</a>,
<a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank">
<img class="inline img" src="@/assets/img/socials/github.svg" alt="Github logo" height="20" width="20" />
Github
<span class="link">Github</span>
</a> &
<a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank">
<img class="inline img" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
Twitter
<span class="link">Twitter</span>
</a> et par
<a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank">
<img class="inline img" src="@/assets/img/socials/twitter.svg" alt="Mail logo" height="20" width="20" />
Mail
<svg class="inline img" 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>
</a>
</p>
<span class="inline text-gray-600 text-xs">
<span class="inline dark:text-dark-900 text-gray-600 text-xs">
(Clique c'est gratuit 🔗)
</span>
</div>
@@ -31,12 +33,12 @@
<a class="font-semibold" target="_blank" href="https://nuxtjs.org">
<img class="inline img" src="@/assets/img/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
NuxtJs
<span class="link">NuxtJs</span>
</a>
&
<a class="font-semibold" target="_blank" href="https://preview.adonisjs.com/">
<img class="inline img" src="@/assets/img/socials/adonisjs.svg" alt="AdonisJs logo" height="20" width="20" />
AdonisJs
<span class="link">AdonisJs</span>
</a>
par <span>Arthur DANJOU</span>
</p>
@@ -62,5 +64,13 @@ export default {
.img {
transform: translateY(-3px);
}
.link {
transition-duration: .3s;
&:hover {
text-decoration: underline;
}
}
}
</style>

2
src/components/Formation.vue
View File

@@ -5,7 +5,7 @@
<span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
</span>
<div class="leading-7 relative">
<p class="text-base text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
<p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
<h1 class="text-2xl font-bold">{{title}}</h1>
<h2 class="text-xl">{{description}}</h2>
</div>

55
src/components/Header.vue
View File

@@ -1,8 +1,8 @@
<template>
<header class="fixed top-0 left-0 bg-white dark:bg-black header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24">
<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' : ''">
<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 dark:text-white dark:bg-black">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500">
Arthur Danjou
</div>
</nuxt-link>
@@ -12,12 +12,16 @@
<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/utilities/moon.svg" height="25" width="25"/>
<li @click="changeColorMode()" class="mx-2 cursor-pointer flex items-center">
<div v-if="this.$colorMode.value === 'light'">
<svg 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</div>
<div @click="changeColorMode()" v-else class="">
<img src="@/assets/img/utilities/sun.svg" alt="Sun Logo" height="25" width="25"/>
<div v-else>
<svg 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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
</li>
<nuxt-link class="red hidden md:inline-block" to="/">
@@ -47,34 +51,45 @@
</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">
<ul class="dark:text-white dark:bg-dark-200 z-index-50 bg-white md:hidden fixed bottom-0 left-0 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/sections/home.svg" alt="Home icon" height="15" width="15" />
<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
</li>
</nuxt-link>
<nuxt-link to="/about" class="orange">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/profile.svg" alt="About icon" height="15" width="15" />
<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
</li>
</nuxt-link>
<nuxt-link to="/blog" class="green">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/quill.svg" alt="Blog icon" height="15" width="15" />
<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
</li>
</nuxt-link>
<nuxt-link to="/work" class="blue">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/case.svg" alt="Work icon" height="15" width="15" />
<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
</li>
</nuxt-link>
<nuxt-link to="/contact" class="purple">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/pin.svg" alt="Contact icon" height="15" width="15" />
<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="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
</li>
</nuxt-link>
@@ -87,10 +102,24 @@
<script>
export default {
name: "Header",
data () {
return {
scrollPosition: null
}
},
methods: {
changeColorMode() {
this.$colorMode.preference = this.$colorMode.value === 'light' ? 'dark' : 'light'
},
updateScroll() {
this.scrollPosition = window.scrollY
}
},
mounted() {
window.addEventListener('scroll', this.updateScroll);
},
destroy() {
window.removeEventListener('scroll', this.updateScroll)
}
}
</script>

6
src/components/HomePost.vue
View File

@@ -1,8 +1,8 @@
<template>
<article class="border border-solid rounded-xl 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">
<article class="hover:bg-gray-200 dark:hover:bg-red-900 border-2 border-solid rounded-xl border-gray-300 dark:border-dark-900 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 duration-300">
<div>
<p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
<p class="text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
<p class="dark:text-dark-900 text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
</div>
<div class="flex justify-between mt-8">
<div>
@@ -10,7 +10,7 @@
<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">
<div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 dark:bg-white dark:text-black rounded bg-black text-white font-semibold">
#{{tag}}
</div>
</div>

10
src/components/Post.vue
View File

@@ -1,8 +1,8 @@
<template>
<article class="border border-solid border-gray-300 w-full h-auto h-blog p-2 flex flex-col justify-between my-5">
<article class="hover:bg-gray-200 dark:hover:bg-dark-800 border-2 border-solid border-black dark:border-white w-full h-auto h-blog p-2 flex flex-col justify-between my-5 duration-300">
<div>
<p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
<p class="text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
<p class="dark:text-dark-900 text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
</div>
<div class="flex justify-between mt-8">
<div>
@@ -10,10 +10,8 @@
<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">
<nuxt-link :to="'/blog/tags/' + tag.toLowerCase()">
#{{tag}}
</nuxt-link>
<div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 dark:bg-white dark:text-black rounded bg-black text-white font-semibold">
#{{tag}}
</div>
</div>
</div>