arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-30 19:57:54 +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

1
config/Head.ts
View File

@@ -1,5 +1,4 @@
export default { export default {
title: 'artsite',
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' },

22
config/Translation.ts Normal file
View File

@@ -0,0 +1,22 @@
export default {
locales: [
{
code: 'en',
name: 'English',
file: 'en-US.ts',
},
{
code: 'fr',
name: 'Français',
file: 'fr-FR.ts',
},
],
strategy: 'no_prefix',
defaultLocale: 'en',
langDir: 'locales/',
lazy: true,
seo: true,
vueI18n: {
fallbackLocale: 'en',
},
}

3
config/index.ts
View File

@@ -2,5 +2,6 @@ import Axios from './Axios'
import Head from './Head' import Head from './Head'
import ColorMode from './ColorMode' import ColorMode from './ColorMode'
import Tailwind from './Tailwind' import Tailwind from './Tailwind'
import Translation from './Translation'
export { Axios, Head, ColorMode, Tailwind } export { Axios, Head, ColorMode, Tailwind, Translation }

5
nuxt.config.js
View File

@@ -1,4 +1,4 @@
import { Axios, Head, ColorMode, Tailwind } from './config' import { Axios, Head, ColorMode, Tailwind, Translation } from './config'
export default { export default {
head: Head, head: Head,
@@ -23,7 +23,8 @@ export default {
], ],
modules: [ modules: [
['@nuxtjs/axios', Axios] ['@nuxtjs/axios', Axios],
['nuxt-i18n', Translation]
], ],
buildDir: 'build', buildDir: 'build',

1
package.json
View File

@@ -13,6 +13,7 @@
"@nuxtjs/axios": "5.12.1", "@nuxtjs/axios": "5.12.1",
"core-js": "^3.7.0", "core-js": "^3.7.0",
"nuxt": "^2.14.6", "nuxt": "^2.14.6",
"nuxt-i18n": "^6.15.4",
"sass": "^1.29.0", "sass": "^1.29.0",
"sass-loader": "^10.1.0" "sass-loader": "^10.1.0"
}, },

2
src/assets/css/style.scss
View File

@@ -8,6 +8,6 @@ img, svg {
} }
* { * {
@apply select-none outline-none ; @apply select-none outline-none;
} }

1
src/assets/css/tailwind.css
View File

@@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
@import "./style.scss"; @import "./style.scss";
@tailwind base; @tailwind base;

15
src/components/EnvGroup.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="w-full mb-10">
<slot />
</div>
</template>
<script>
export default {
name: "EnvGroup"
}
</script>
<style scoped>
</style>

15
src/components/EnvList.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
<slot/>
</ul>
</template>
<script>
export default {
name: "EnvList"
}
</script>
<style scoped>
</style>

30
src/components/EnvListItem.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<li>
{{ title }}:
<a class="duration-300 text-orange-400 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-orange-400 border-solid" v-if="link" :href="link" target="_blank">{{content}}</a>
<span v-else>{{content}}</span>
</li>
</template>
<script>
export default {
name: "EnvListItem",
props:{
title: {
default: 'Title',
type: String
},
link: {
type: String
},
content: {
default: 'content',
type: String
},
}
}
</script>
<style scoped>
</style>

22
src/components/EnvTitle.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<h3 class="font-bold text-2xl md:text-4xl mb-2">
{{ title }}
<slot />
</h3>
</template>
<script>
export default {
name: "EnvTitle",
props:{
title: {
default: 'Title',
type: String
}
}
}
</script>
<style scoped>
</style>

14
src/components/Experience.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="flex flex-row mb-5"> <div class="flex flex-row mb-5">
<span class="self-center h-4 w-4 mr-4"> <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-if="end === 'Today'" class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-green-500 animate-ping ring-green-200"/>
<span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/> <span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
</span> </span>
<div class="leading-7"> <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> <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
<h1 class="text-2xl font-bold">{{title}} - {{company}}</h1> <h1 class="text-2xl font-bold">{{title}} - {{company}}</h1>
<h2 class="text-xl">{{description}}</h2> <h2 class="text-xl">{{description}}</h2>
</div> </div>
@@ -40,10 +40,18 @@ export default {
type: String, type: String,
default: "Never" default: "Never"
} }
},
methods: {
formatDate(date) {
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
const dateFormat = new Date(date)
return monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
}
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
</style> </style>

4
src/components/Footer.vue
View File

@@ -66,10 +66,10 @@ export default {
} }
.link { .link {
transition-duration: .3s; transition-duration: .2s;
&:hover { &:hover {
text-decoration: underline; @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;
} }
} }
} }

11
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 v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
</span> </span>
<div class="leading-7 relative"> <div class="leading-7 relative">
<p class="text-base dark:text-dark-900 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">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
<h1 class="text-2xl font-bold">{{title}}</h1> <h1 class="text-2xl font-bold">{{title}}</h1>
<h2 class="text-xl">{{description}}</h2> <h2 class="text-xl">{{description}}</h2>
</div> </div>
@@ -36,6 +36,15 @@ export default {
type: String, type: String,
default: "Never" default: "Never"
} }
},
methods: {
formatDate(date) {
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
const dateFormat = new Date(date)
return monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
}
} }
} }
</script> </script>

41
src/components/Header.vue
View File

@@ -1,16 +1,21 @@
<template> <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"> <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
<nuxt-link to="/"> <nuxt-link to="/">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500"> <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">
Arthur Danjou {{ $t('header_title') }}
</div> </div>
</nuxt-link> </nuxt-link>
<nav class="right"> <nav class="right">
<div class="flex flex-col md:flex-row items-center"> <div class="flex flex-col md:flex-row items-center">
<ul class="flex text-xl"> <ul class="flex text-xl">
<li class="mx-2 cursor-pointer"> <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>
<li @click="changeColorMode()" class="mx-2 cursor-pointer flex items-center"> <li @click="changeColorMode()" class="mx-2 cursor-pointer flex items-center">
<div v-if="this.$colorMode.value === 'light'"> <div v-if="this.$colorMode.value === 'light'">
@@ -26,27 +31,27 @@
</li> </li>
<nuxt-link class="red hidden md:inline-block" to="/"> <nuxt-link class="red hidden md:inline-block" to="/">
<li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300"> <li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
Accueil {{ $t('part_home') }}
</li> </li>
</nuxt-link> </nuxt-link>
<nuxt-link class="orange hidden md:inline-block" to="/about"> <nuxt-link class="orange hidden md:inline-block" to="/about">
<li class="hover:text-orange-400 font-bold mx-2 cursor-pointer duration-300"> <li class="hover:text-orange-400 font-bold mx-2 cursor-pointer duration-300">
Moi {{ $t('part_about') }}
</li> </li>
</nuxt-link> </nuxt-link>
<nuxt-link class="green hidden md:inline-block" to="/blog"> <nuxt-link class="green hidden md:inline-block" to="/blog">
<li class="hover:text-green-400 font-bold mx-2 cursor-pointer duration-300"> <li class="hover:text-green-400 font-bold mx-2 cursor-pointer duration-300">
Blog {{ $t('part_blog') }}
</li> </li>
</nuxt-link> </nuxt-link>
<nuxt-link class="blue hidden md:inline-block" to="/work"> <nuxt-link class="blue hidden md:inline-block" to="/work">
<li class="hover:text-blue-400 font-bold mx-2 cursor-pointer duration-300"> <li class="hover:text-blue-400 font-bold mx-2 cursor-pointer duration-300">
Travail {{ $t('part_work') }}
</li> </li>
</nuxt-link> </nuxt-link>
<nuxt-link class="purple hidden md:inline-block" to="/contact"> <nuxt-link class="purple hidden md:inline-block" to="/contact">
<li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300"> <li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300">
Contact {{ $t('part_contact') }}
</li> </li>
</nuxt-link> </nuxt-link>
</ul> </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"> <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" /> <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> </svg>
Accueil {{ $t('part_home') }}
</li> </li>
</nuxt-link> </nuxt-link>
<nuxt-link to="/about" class="orange"> <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"> <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" /> <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> </svg>
Moi {{ $t('part_about') }}
</li> </li>
</nuxt-link> </nuxt-link>
<nuxt-link to="/blog" class="green"> <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"> <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" /> <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> </svg>
Blog {{ $t('part_blog') }}
</li> </li>
</nuxt-link> </nuxt-link>
<nuxt-link to="/work" class="blue"> <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"> <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" /> <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> </svg>
Travail {{ $t('part_work') }}
</li> </li>
</nuxt-link> </nuxt-link>
<nuxt-link to="/contact" class="purple"> <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="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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg> </svg>
Contact {{ $t('part_contact') }}
</li> </li>
</nuxt-link> </nuxt-link>
</ul> </ul>
@@ -113,7 +118,10 @@ export default {
}, },
updateScroll() { updateScroll() {
this.scrollPosition = window.scrollY this.scrollPosition = window.scrollY
} },
changeLanguage(lang) {
this.$i18n.setLocale(lang)
},
}, },
mounted() { mounted() {
window.addEventListener('scroll', this.updateScroll); window.addEventListener('scroll', this.updateScroll);
@@ -133,6 +141,9 @@ export default {
&.green { &.green {
@apply text-green-400; @apply text-green-400;
} }
&.blue {
@apply text-blue-400;
}
} }
.nuxt-link-exact-active { .nuxt-link-exact-active {

50
src/components/HomeLink.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<nuxt-link :to="link">
<div
class="home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
:class="color ? 'hover:bg-' + color + '-400 dark:hover:bg-' + color + '-600 active:bg-' + color + '-400 dark:active:bg-' + color + '-600' : ''">
<div class="ml-4">
<h1 class="text-3xl font-bold my-2">
{{ title }}
<slot />
</h1>
<p class="w-5/6 text-gray-900 dark:text-dark-900 text-justify">{{ description }}</p>
</div>
<div class="mr-10 arrow duration-300">
<svg class="inline icon" 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="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</div>
</nuxt-link>
</template>
<script>
export default {
name: "HomeLink",
props: {
title: {
default: "Title",
type: String
},
description: {
default: "Description",
type: String
},
color: {
default: "red-100",
type: String
},
link: {
default: "/",
type: String
}
}
}
</script>
<style scoped lang="scss">
.home-link:hover .arrow {
transform: translateX(15px);
}
</style>

62
src/components/HomePost.vue
View File

@@ -1,62 +0,0 @@
<template>
<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="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>
<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 dark:bg-white dark:text-black 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>

29
src/components/PageTitle.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<h1
class="mt-16 md:mt-32 font-bold text-4xl mr-2 inline mb-4 border-b-2 border-solid"
:class="' border-'+ color +'-400'"
>
{{ title }}
<slot />
</h1>
</template>
<script>
export default {
name: "PageTitle",
props: {
title: {
default: 'Title',
type: String
},
color: {
default: 'red',
type: String
}
}
}
</script>
<style scoped>
</style>

31
src/components/Post.vue
View File

@@ -1,20 +1,32 @@
<template> <template>
<article <article
class="w-full h-blog p-2 flex flex-col justify-between my-5" class="border-2 border-black border-solid rounded-xl w-full h-blog p-2 flex flex-col justify-between my-5 duration-200 transform hover:scale-95"
:style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover.file_name + ')' }" :style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover + ')' }"
> >
<div> <div>
<p class="text-3xl text-white font-bold text-justify leading-7 mb-3">{{title}}</p> <p
<p class="text-dark-900 text-lg italic text-justify leading-5">{{description}}</p> class="text-3xl font-bold text-justify leading-7 mb-3"
:class="lightBg === 1 ? 'text-black':'text-white'"
>{{title}}</p>
<p
class="text-lg italic text-justify leading-5"
:class="lightBg === 1 ? 'text-gray-900':'text-dark-900'"
>{{description}}</p>
</div> </div>
<div class="flex justify-between mt-8 text-dark-900"> <div
class="flex justify-between mt-8"
:class="lightBg ? 'text-gray-900':'text-dark-900'"
>
<div> <div>
<div>{{formatDate}}</div> <div>{{formatDate}}</div>
<div>{{reading_time}} min read</div> <div>{{reading_time}} min read</div>
<div>{{likes}} ❤</div> <div>{{likes}} ❤</div>
</div> </div>
<div class="self-end flex flex-wrap flex-col md:flex-row"> <div class="self-end flex flex-wrap flex-col md:flex-row">
<div v-for="(tag) in tags" class="my-1 md:my-0 ml-2 py-1 px-2 bg-white text-black rounded font-semibold"> <div v-for="(tag) in tags"
class="my-1 md:my-0 ml-2 py-1 px-2 rounded font-semibold"
:class="lightBg ? 'bg-black text-white':'bg-white text-black'"
>
#{{tag}} #{{tag}}
</div> </div>
</div> </div>
@@ -52,7 +64,11 @@ export default {
}, },
cover: { cover: {
type: String, type: String,
default: "https://api.arthurdanjou.fr/pictures/default.png" default: "default.png"
},
lightBg: {
type: Number,
default: false
} }
}, },
computed: { computed: {
@@ -75,5 +91,6 @@ export default {
min-height: 20rem; min-height: 20rem;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@apply bg-opacity-50;
} }
</style> </style>

39
src/components/Service.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="flex flex-col items-center m-4 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer">
<div>
</div>
</div>
</template>
<script>
export default {
name: "Service",
props: {
title: {
default: 'Title',
type: String
},
description: {
default: 'Description',
type: String
},
cover: {
default: 'default.png',
type: String
},
price: {
default: 0,
type: Number
},
bestSeller: {
default: false,
type: Boolean
}
}
}
</script>
<style scoped>
</style>

9
src/components/Skill.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="m-4 md:w-48 h-32 w-2/3 p-1 md:p-2 skill border-gray-900 border-2 bg-gray-300 duration-300 rounded-3xl" :class="'hover:bg-'+color"> <div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="w-full h-full flex flex-col justify-center items-center"> <div class="w-full h-full flex flex-col justify-center items-center">
<div> <div>
COVER <img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
</div> </div>
<h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1> <h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1>
</div> </div>
@@ -23,14 +23,11 @@ export default {
}, },
cover: { cover: {
type: String, type: String,
default: "https://api.arthurdanjou.fr/files/default.png" default: "logo.jpg"
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.skill {
}
</style> </style>

46
src/components/Work.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div class="m-4 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img alt="Project Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
</div>
<div class="text-center">
<h1 class="md:text-2xl text-lg font-bold">{{ title }}</h1>
<a :href="url" :class="'text-' + color + '-500'">{{ formatLink }}</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Work",
props: {
title: {
type: String,
default: 'Title'
},
url: {
type: String,
default: 'https://arthurdanjou.fr'
},
cover: {
type: String,
default: 'default.png'
},
color: {
type: String,
default: 'white'
}
},
computed: {
formatLink() {
return this.url.replace('https://', '').replace('http://', '')
}
}
}
</script>
<style scoped>
</style>

34
src/components/WorkSkill.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
</div>
<h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1>
</div>
</div>
</template>
<script>
export default {
name: "WorkSkill",
props: {
skill: {
type: String,
default: "Rien"
},
color: {
type: String,
default: "red-100"
},
cover: {
type: String,
default: "logo.jpg"
}
}
}
</script>
<style scoped>
</style>

12
src/locales/en-US.ts Normal file
View File

@@ -0,0 +1,12 @@
import axios from "axios";
import {Axios} from "../../config";
export default async function () {
let informations = {}
const {data: translations} = await axios.get(Axios.baseURL + 'translations')
translations.map((item: any) => {
const { code, en } = item
informations = { ...informations, [code]: en }
})
return informations
}

12
src/locales/fr-FR.ts Normal file
View File

@@ -0,0 +1,12 @@
import axios from "axios";
import {Axios} from "../../config";
export default async function () {
let informations = {}
const {data: translations} = await axios.get(Axios.baseURL + 'translations')
translations.map((item: any) => {
const { code, fr } = item
informations = { ...informations, [code]: fr }
})
return informations
}

1119
src/tailwind.config.js
View File

File diff suppressed because it is too large Load Diff

6
src/templates/layouts/default.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="dark:bg-dark-200 dark:text-white"> <div class="dark:bg-dark-200 dark:text-white font-sans">
<Header /> <Header />
<Nuxt class="content pt-16 lg:pt-24"/> <Nuxt class="z-10 pt-16 lg:pt-24 content"/>
<Footer /> <Footer />
</div> </div>
</template> </template>
@@ -16,6 +16,6 @@ export default {
<style scoped> <style scoped>
.content { .content {
min-height: calc(100vh - (118px + 96px)); min-height: calc(100vh - 118px);
} }
</style> </style>

315
src/templates/pages/about.vue
View File

@@ -1,11 +1,13 @@
<template> <template>
<main class="about flex flex-col items-center px-5 xl:px-64"> <main class="about flex flex-col items-center px-5 xl:px-64">
<h1 class="mt-16 md:mt-32 title font-bold text-4xl mr-2 inline mb-4"> <PageTitle
A Propos title="A propos"
<svg class="inline-block about-img" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> color="orange"
>
<svg class="inline-block icon" height="40" width="40" 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" /> <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> </svg>
</h1> </PageTitle>
<div class="flex flex-col md:flex-row justify-around items-center py-8"> <div class="flex flex-col md:flex-row justify-around items-center py-8">
<div> <div>
<img class="logo-img rounded-full my-5" src="@/assets/img/Logo.jpg" alt="It's me !" /> <img class="logo-img rounded-full my-5" src="@/assets/img/Logo.jpg" alt="It's me !" />
@@ -35,44 +37,14 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg> </svg>
</h3> </h3>
<div class="flex flex-col items-center md:items-start md:justify-between md:flex-row flex-wrap"> <div class="flex flex-row w-full overflow-x-auto">
<!-- TODO Insert Skills --> <div v-for="skill in skills">
<Skill <Skill
skill="Java" :skill="skill.title.code"
color="white" /> :color="skill.color"
<Skill :cover="skill.cover.file_name"
skill="JavaScript" />
color="white" /> </div>
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
</div> </div>
</div> </div>
<div class="w-full mb-10"> <div class="w-full mb-10">
@@ -158,20 +130,13 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg> </svg>
</h3> </h3>
<div> <div v-for="formation in formations">
<!-- TODO Insert Formations-->
<Formation <Formation
title="Autodidacte" :title="formation.title.code"
description="Apprentissage en autodidacte et en pratiquant" :description="formation.description.code"
location="At Home 🏠" :location="formation.location"
begin="2015" :begin="formation.begin_date"
end="Today" /> :end="formation.end_date" />
<Formation
title="Baccalauréat"
description="Examen spécialités maths & Pc"
location="At Passy"
begin="2020"
end="2021" />
</div> </div>
</div> </div>
<div class="w-full mb-10"> <div class="w-full mb-10">
@@ -181,189 +146,147 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg> </svg>
</h3> </h3>
<div> <div v-for="experience in experiences">
<!-- TODO Insert Experiences-->
<Experience <Experience
title="Junior Developer" :title="experience.title.code"
company="Erisium" :company="experience.company"
description="Chargé des mini-jeux et de l'infrastructure" :description="experience.description.code"
location="At Home 🏠" :location="experience.location"
begin="2019" :begin="experience.begin_date"
end="Today" /> :end="experience.end_date" />
<Experience
title="FullStack Software & Web Developer"
company="ArtDanjProduction"
description="Création d'applications web et développement de l'infrastructure"
location="At Home 🏠"
begin="2019"
end="2020" />
</div> </div>
</div> </div>
<nuxt-link to="/cv"> <nuxt-link to="/cv">
<div class="flex justify-center items-center font-bold py-4 px-6 bg-orange-300 hover:bg-orange-500 cursor-pointer duration-500 rounded-full dark:text-black"> <div class="flex justify-center items-center font-bold py-4 px-6 bg-orange-400 hover:bg-orange-600 cursor-pointer duration-500 rounded-full dark:text-black">
Télécharger mon CV Télécharger mon CV
<svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="inline icon" height="32" width="32" 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="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
</svg> </svg>
</div> </div>
</nuxt-link> </nuxt-link>
<div class="my-10 border-t-2 border-black dark:border-white border-solid w-full" /> <div class="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
<h1 class="mb-10 title font-bold text-4xl mr-2 inline mb-4"> <PageTitle
Environnement title="Environnement"
color="orange"
>
<svg class="inline icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="inline icon" height="40" width="40" 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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
</svg> </svg>
</h1> </PageTitle>
<p class="text-lg leading-6 text-justify pb-8"> <p class="text-lg leading-6 text-justify pb-8">
Mon environnement de développement permet de gagner en productivité. Mon environnement de développement permet de gagner en productivité.
En effet, je m'organise de la sorte à toujours optimiser mon temps de réflexion et de développement. En effet, je m'organise de la sorte à toujours optimiser mon temps de réflexion et de développement.
Voici donc une liste de tous mes logiciels que j'utilise au quotidien et de mon setup. Voici donc une liste de tous mes logiciels que j'utilise au quotidien et de mon setup.
</p> </p>
<div class="w-full mb-10"> <EnvGroup>
<h3 class="font-bold text-2xl md:text-4xl mb-2"> <EnvTitle title="Editeurs de texte">
Editeurs de texte
<svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="inline icon" height="32" width="32" 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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg> </svg>
</h3> </EnvTitle>
<ul class="list-disc ml-10 dark:text-dark-900 text-gray-800 text-xl"> <EnvList>
<li> <EnvListItem title="Editeur Java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
Editeur Java: <span>Intellij Idea Ultimate</span> <EnvListItem title="Editeur Python" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
</li> <EnvListItem title="Editeur Web" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
<li> <EnvListItem title="Editeur Go" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
Editeur Python: <span>Pycharm Ultimate</span> <EnvListItem title="Editeur de bases de données" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
</li> <EnvListItem title="All-In-One" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
<li> <EnvListItem title="Police" content="Jetbrains Mono" link="https://www.jetbrains.com/lp/mono/"/>
Editeur Web: <span>Webstorm</span> <EnvListItem title="Console" content="HyperJs" link="https://hyper.is/"/>
</li> <EnvListItem title="WSL 2" content="Ubuntu 20.04" link="https://www.microsoft.com/en-us/p/ubuntu-2004-lts/9n6svws3rx71?activetab=pivot:overviewtab"/>
<li> </EnvList>
Editeur Go: <span>Goland</span> </EnvGroup>
</li> <EnvGroup>
<li> <EnvTitle title="Apps & Logiciels">
Editeur de bases de données: <span>DataGrip</span>
</li>
<li>
All-In-One: <span>Jetbrains Toolbox</span>
</li>
<li>
Police d'écriture: <span>Jetbrains Mono</span>
</li>
<li>
Console: <span>GitBash</span>
</li>
<li>
WSL 2: <span>Ubuntu 20.04</span>
</li>
</ul>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-2">
Apps & Logiciels
<svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="inline icon" height="32" width="32" 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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg> </svg>
</h3> </EnvTitle>
<ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl"> <EnvList>
<li> <EnvListItem title="Email" content="Courrier by Microsoft" link="https://www.microsoft.com/fr-fr/p/courrier-et-calendrier/9wzdncrfhvqm?activetab=pivot:overviewtab"/>
Email: <span>Courrier by Microsoft</span> <EnvListItem title="Client VPN" content="Pritunl" link="https://pritunl.com/"/>
</li> <EnvListItem title="Client FTP" content="WinSCP" link="https://winscp.net/eng/download.php"/>
<li> <EnvListItem title="Navigateur Web" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
Client VPN: <span>Pritunl</span> <EnvListItem title="Organisation" content="Notion" link="https://www.notion.so/"/>
</li> <EnvListItem title="Organisation" content="Trello" link="https://www.trello.com/"/>
<li> <EnvListItem title="Création / graphisme" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
Client FTP: <span>WinSCP</span> <EnvListItem title="Communication" content="Slack" link="https://slack.com/intl/fr-fr/"/>
</li> <EnvListItem title="Communication" content="Discord" link="https://www.discord.com/"/>
<li> <EnvListItem title="Communication" content="Mattermost" link="https://mattermost.com/"/>
Navigateur web: <span>Intellij Idea Ultimate</span> </EnvList>
</li> </EnvGroup>
<li> <EnvGroup>
Organisation: <span>Trello</span> & <span>Notion</span> <EnvTitle title="Hébergement">
</li>
<li>
Création / graphisme: <span>Affinity Designer</span>
</li>
<li>
Communication: <span>Discord</span>, <span>Slack</span> & <span>Mattermost</span>
</li>
</ul>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-2">
Hébergement
<svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="inline icon" height="32" width="32" 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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg> </svg>
</h3> </EnvTitle>
<ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl"> <EnvList>
<li> <EnvListItem title="Hébergeur VPS" content="PulseHeberg" link="https://pulseheberg.com/"/>
Hébergeur VPS: <span>PulseHeberg</span> <EnvListItem title="Nom de domaine" content="OVH" link="https://ovh.com/"/>
</li> </EnvList>
<li> </EnvGroup>
Hébergeur nom de domaine: <span>OVH</span> <EnvGroup>
</li> <EnvTitle title="Setup bureautique">
</ul>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-2">
Setup bureautique
<svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="inline icon" 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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
</svg> </svg>
</h3> </EnvTitle>
<ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl"> <EnvList>
<li> <EnvListItem title="Bureau" content="Ikea en bois"/>
Bureau: <span>Ikea en bois</span> <EnvListItem title="Téléphone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
</li> <EnvListItem title="Ordinateur fixe" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
<li> <EnvListItem title="Ecran" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr_fr/produits/prolite-e2283hs-b3/"/>
Téléphone: <span>Samsung Galaxy Note 8</span> <EnvListItem title="Clavier" content="Microsoft"/>
</li> <EnvListItem title="Souris" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
<li> <EnvListItem title="Ecouteurs" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
Ordinateur fixe: <span>Asus i5, 8Go Ram, GTX 950, 1To HDD</span> <EnvListItem title="Casque/Micro" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
</li> </EnvList>
<li> </EnvGroup>
Ecran: <span>iiyama ProLite E2283HS</span>
</li>
<li>
Clavier : <span>Microsoft</span>
</li>
<li>
Souris: <span>Roccat Kova</span>
</li>
<li>
Ecouteurs: <span>Apple Airpods</span>
</li>
<li>
Casque/Micro: <span>Turtle Beach px22</span>
</li>
</ul>
</div>
</main> </main>
</template> </template>
<script lang="ts"> <script>
import EnvGroup from "~/components/EnvGroup.vue";
import EnvTitle from "~/components/EnvTitle.vue";
import EnvListItem from "~/components/EnvListItem.vue";
import EnvList from "~/components/EnvList.vue";
import Skill from "~/components/Skill.vue";
import Formation from "~/components/Formation.vue";
import Experience from "~/components/Experience.vue";
import PageTitle from "~/components/PageTitle";
export default { export default {
name: "about", name: "about",
components: {PageTitle, EnvList, EnvListItem, EnvTitle, EnvGroup, Skill, Formation, Experience},
head() {
return {
title: 'About me - Arthur Danjou'
}
},
data() {
return {
skills: [],
experiences: [],
formations: []
}
},
async asyncData({ $axios }) {
const {data: skills} = await $axios.get('/skills')
const {data: experiences} = await $axios.get('experiences')
const {data: formations} = await $axios.get('/formations')
return {
skills,
experiences,
formations
}
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.about { .about {
.about-img {
transform: translate(3px, -10px);
}
.title:after {
margin-top: 0.1rem;
content: '';
height: 2px;
width: 100%;
display: block;
@apply bg-orange-400;
}
.logo-img { .logo-img {
height: 20rem; height: 20rem;
} }
} }
</style> </style>

16
src/templates/pages/blog/_id.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<main class="blog flex flex-col items-center px-5 xl:px-64 mb-16 md:mb-32"> <main class="flex flex-col items-center px-5 xl:px-64 mb-16 md:mb-32">
<!-- TODO Titre en blanc et desc en gris lien autre couleur + Définir un autre padding sur les cotés--> <!-- TODO Titre en blanc et desc en gris lien autre couleur + Définir un autre padding sur les cotés-->
<div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full"> <div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full">
<h1 class="text-3xl md:text-5xl font-bold"> <h1 class="text-3xl md:text-5xl font-bold">
@@ -18,7 +18,8 @@
<p>{{ reading_time }} min</p> <p>{{ reading_time }} min</p>
</div> </div>
<div> <div>
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p> <!-- Todo remove if tags === 0 -->
<p :class="tags.size === 0 ? 'hidden': ''" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
<p>{{formatTags}}</p> <p>{{formatTags}}</p>
</div> </div>
</div> </div>
@@ -33,7 +34,7 @@
<p class="text-center"> <p class="text-center">
Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/> Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/>
Hésite surtout pas à partager l'article sur Twitter Hésite surtout pas à partager l'article sur Twitter
Todo : replace par des buttons : - Likes, - Twitter (proposition de tweet), - partage (lien) <!-- Todo : replace par des buttons : - Likes, - Twitter (proposition de tweet), - partage (lien) -->
</p> </p>
</div> </div>
</main> </main>
@@ -42,6 +43,11 @@
<script> <script>
export default { export default {
name: "blog", name: "blog",
head() {
return {
title: 'Blog - Arthur Danjou'
}
},
data() { data() {
return { return {
id: this.$route.params.id, id: this.$route.params.id,
@@ -52,7 +58,7 @@ export default {
likes: 0, likes: 0,
date: '', date: '',
cover: '', cover: '',
reading_time: 0 reading_time: 0,
} }
}, },
async asyncData({ params, $axios }) { async asyncData({ params, $axios }) {
@@ -65,7 +71,7 @@ export default {
likes: post.likes, likes: post.likes,
date: post.created_at, date: post.created_at,
reading_time: post.reading_time, reading_time: post.reading_time,
cover: post.cover cover: post.cover,
} }
}, },
computed: { computed: {

39
src/templates/pages/blog/index.vue
View File

@@ -1,16 +1,20 @@
<template> <template>
<main class="blog flex flex-col items-center px-5 xl:px-64"> <main class="blog flex flex-col items-center px-5 xl:px-64">
<h1 class="mt-16 md:mt-32 title font-bold text-4xl mr-2 inline mb-4"> <PageTitle
Blog title="Blog"
<svg class="inline-block blog-img" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> color="green"
>
<svg class="inline-block icon" height="40" width="40" 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" /> <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> </svg>
</h1> </PageTitle>
<div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2"> <div>
<!-- TODO <!-- TODO
Insert research by tags Insert research by tags
Insert see more Insert see more
--> -->
</div>
<div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
<div v-if="posts.size !== 0" class="w-full" v-for="post in posts"> <div v-if="posts.size !== 0" class="w-full" v-for="post in posts">
<nuxt-link :to="'/blog/' + post.id"> <nuxt-link :to="'/blog/' + post.id">
<Post <Post
@@ -18,9 +22,10 @@
:reading_time="post.reading_time" :reading_time="post.reading_time"
:description="post.description.code" :description="post.description.code"
:tags="displayTags(post.tags)" :tags="displayTags(post.tags)"
:cover="post.cover" :cover="post.cover.file_name"
:date="post.created_at" :date="post.created_at"
:likes="post.likes" :likes="post.likes"
:lightBg="post.light_back_ground"
/> />
</nuxt-link> </nuxt-link>
</div> </div>
@@ -33,9 +38,15 @@
<script> <script>
import Post from "~/components/Post"; import Post from "~/components/Post";
import PageTitle from "~/components/PageTitle";
export default { export default {
name: "blog", name: "blog",
components: {Post}, components: {PageTitle, Post},
head() {
return {
title: 'Blog - Arthur Danjou'
}
},
data () { data () {
return { return {
posts: [] posts: []
@@ -60,18 +71,4 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.blog {
.blog-img {
transform: translate(3px, -10px);
}
.title:after {
margin-top: 0.1rem;
content: '';
height: 2px;
width: 100%;
display: block;
@apply bg-green-400;
}
}
</style> </style>

5
src/templates/pages/blog/tags/_id.vue
View File

@@ -19,6 +19,11 @@
<script> <script>
export default { export default {
name: "blog", name: "blog",
head() {
return {
title: 'Blog - Arthur Danjou'
}
},
data() { data() {
return { return {
tag: this.$route.params.id tag: this.$route.params.id

113
src/templates/pages/contact.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<main class="contact flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="Contact"
color="purple"
>
<svg class="inline-block icon" height="40" width="40" 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>
</PageTitle>
<div class="flex flex-col justify-around items-center py-10 w-full">
<h1 class="text-xl font-bold text-center mb-8">
Vous voulez collaborer avec moi ? Voici mes différentes offres !
</h1>
<div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full">
<!-- Insert Services -->
</div>
<div class="flex flex-col items-center w-full md:w-2/3">
<h1 class="text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
Software & Tech Newsletter
</h1>
<h3 class="text-lg md:text-xl">
Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets.
<span class="font-bold self-start">Pas de spam. Désabonnement quand vous voulez</span>
</h3>
<form class="flex flex-col lg:flex-row my-4 w-full">
<div class="mb-3 mr-4 w-full md:w-auto">
<input class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="text" placeholder="Prénom" required id="name"/>
</div>
<div class="mb-3 mr-4 w-full md:w-auto">
<input class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="email" placeholder="Adresse Mail" required id="email"/>
</div>
<div class="mb-3 self-center">
<button class="dark:text-black font-bold px-3 py-2 bg-purple-400 hover:bg-purple-500 cursor-pointer duration-300 rounded-lg btn">
S'abonner
<svg class="inline icon" 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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</button>
</div>
</form>
</div>
<div class="flex flex-col items-start w-full md:w-2/3">
<h1 class="self-center text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
Comment me contacter ?
</h1>
<h3 class="text-lg md:text-xl">
N'hésitez pas à nous contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous connecter ✌️
</h3>
<div>
<div class="my-4 email text-lg duration-300 text-purple-500 hover:text-purple-700 cursor-pointer flex">
<a class="mr-2" href="mailto:contact@arthurdanjou.fr?subject=Please enter here your project name">
contact@arthurdanjou.fr
</a>
<div class="arrow duration-300">
<svg class="inline icon" 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="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</div>
<div>
Statut Freelance : <span class="py-1 px-2 font-bold rounded-full" :class="'bg-' +hiringColor+ '-300 text-' +hiringColor+ '-500'">{{$t(hiringStatus.code)}}</span>
</div>
</div>
<!-- Insert Form -->
</div>
</div>
<!--
TODO Newsletter + Services + Formulaire de contact
-->
</main>
</template>
<script>
import PageTitle from "~/components/PageTitle";
export default {
name: "contact",
components: {PageTitle},
data () {
return {
services: [],
hiringStatus: '',
hiringColor: ''
}
},
async asyncData({ $axios }) {
const {data: services} = await $axios.get('/services')
const {data: me} = await $axios.get('/me')
return {
services,
hiringStatus: me.hiringStatus,
hiringColor: me.hiring_color
}
}
}
</script>
<style scoped lang="scss">
.contact {
.email:hover .arrow {
transform: translateX(15px);
}
.link {
@apply mr-5 duration-300;
&: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;
}
}
}
</style>

157
src/templates/pages/index.vue
View File

@@ -1,113 +1,94 @@
<template> <template>
<main class="index px-5 xl:px-64"> <main class="index px-5 xl:px-64">
<section class="mt-16 md:mt-32 banner w-full flex justify-between flex-col lg:flex-row-reverse items-center mb-16"> <section class="mt-16 md:mt-32 banner w-full mb-16">
<div class="hidden lg:block flex justify-center items-center lg:w-1/2"> <div class="flex flex-col lg:flex-row-reverse mb-4">
<img src="@/assets/img/computer.png" alt="It's me !" class="icon" /> <div class="hidden lg:block flex justify-center items-center lg:w-1/2">
</div> <img src="@/assets/img/computer.png" alt="It's me !" class="icon" />
<div class="title flex justify-center flex-col lg:w-1/2 pr-3"> </div>
<div class="mb-4 md:mb-10"> <div class="mb-4 md:mb-10 lg:w-1/2 self-center">
<h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4"> <h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
Bonjour, je suis <br /> {{ $t('home_banner_hello') }} <br />
<span class="text-red-700 font-black">Arthur Danjou</span> 👋 <span class="text-red-700 font-black">Arthur Danjou</span> 👋
</h1> </h1>
<p class="text-2xl md:text-3xl my-5 font-semibold"> <p class="text-2xl md:text-3xl my-5 font-semibold">
Développeur & étudiant {{ $t('home_banner_role') }}
</p> </p>
<p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-900"> <p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-900">
Je suis un jeune développeur autodidacte de 17 ans. J'habite à Paris 🇫🇷. J'adore créer des applications et des logiciels plus ou moins utiles. {{ $t('home_banner_description', {age: age}) }}
J'utilise des technologies modernes pour obtenir le meilleur résultat possible ✨
</p> </p>
</div> </div>
<div class="dark:text-black flex flex-col md:flex-row justify-around items-center">
<nuxt-link class="mb-3 w-full text-center md:mb-0 md:w-auto" to="about">
<p class="arrow-btn font-semibold rounded-full bg-red-400 hover:bg-red-700 duration-300 px-3 md:px-10 py-1 cursor-pointer">
En savoir plus
<svg class="inline icon" 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="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</p>
</nuxt-link>
<nuxt-link class="mb-3 w-full text-center md:mb-0 md:w-auto" to="contact">
<p class="rounded-full font-semibold border-2 border-solid dark:hover:bg-white border-black dark:border-white hover:bg-black dark:hover:border-white hover:text-white dark:hover:text-black dark:text-white duration-300 px-12 py-1 cursor-pointer">
Me contacter
</p>
</nuxt-link>
</div>
</div> </div>
</section> <div class="flex flex-col items-center w-full">
<section class="my-16 border-t border-solid border-black pt-16"> <div class="flex flex-col md:flex-row justify-around w-full md:mb-8">
<h1 class="font-bold text-3xl mr-2 inline"> <HomeLink
Mes Articles :title="$t('home_link_about')"
<svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> :description="$t('home_link_about_description')"
<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" /> color="orange"
</svg> link="/about"
</h1> >
<p class="mt-2 mb-8"> <svg class="inline" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
Parfois, je rédige des articles concernant le développement, ma vie, le design ou bien encore l'apprentissage ! <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" />
</p>
<div class="flex flex-col">
<!-- TODO Max 3 articles -->
<div class="flex flex-col lg:flex-row justify-space-evenly mb-10">
<HomePost
title="Il était une nouvelle fois la vie"
reading_time="4"
description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
tags="Dev Tech"/>
<HomePost />
<HomePost />
</div>
<div class="text-center">
<nuxt-link to="/blog" class="arrow-btn px-3 py-3 border-2 border-solid border-red-500 rounded-full font-semibold hover:bg-red-500 duration-300 dark:text-red-500 dark:hover:text-black">
Voir plus d'articles
<svg class="inline icon" height="32" width="32" 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="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg> </svg>
</nuxt-link> </HomeLink>
<HomeLink
:title="$t('home_link_blog')"
:description="$t('home_link_blog_description')"
color="green"
link="/blog"
>
<svg class="inline" height="40" width="40" 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>
</HomeLink>
</div>
<div class="flex flex-col md:flex-row justify-around w-full">
<HomeLink
:title="$t('home_link_work')"
:description="$t('home_link_work_description')"
color="blue"
link="/work"
>
<svg class="inline-block" height="40" width="40" 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>
</HomeLink>
<HomeLink
:title="$t('home_link_contact')"
:description="$t('home_link_contact_description')"
color="purple"
link="/contact"
>
<svg class="inline-block" height="40" width="40" 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>
</HomeLink>
</div> </div>
</div>
</section>
<section class="my-16 border-t border-solid border-black pt-16">
<h1 class="font-bold text-3xl mr-2 inline">
Mon Travail
<svg class="inline icon" height="32" width="32" 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>
</h1>
<p class="mt-2 mb-8">
Ayez une vision de mon travail, de mes projets personnels et professionnels ou de mes expérimentations !
</p>
<div>
<!-- TODO -->
TODO Insert Works request
</div>
</section>
<section class="my-16 border-t border-solid border-black pt-16">
<h1 class="font-bold text-3xl mr-2 inline">
Mes Services
<svg class="inline icon" height="32" width="32" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</h1>
<p class="mt-2 mb-8">
Vous avez une idée révolutionnaire ?
</p>
<div>
<!-- TODO -->
TODO Services
</div> </div>
</section> </section>
</main> </main>
</template> </template>
<script lang="ts"> <script>
import Vue from 'vue' import Vue from 'vue'
import HomeLink from "~/components/HomeLink";
export default Vue.extend({ export default Vue.extend({
data() { components: {HomeLink},
head() {
return { return {
posts: [], title: 'Arthur Danjou - Web & Software Developer'
works: [], }
services: [] },
data () {
return {
age: 0
}
},
async asyncData({$axios}) {
const {data: me} = await $axios.get('/me')
return {
age: me.age
} }
} }
}) })

78
src/templates/pages/work/_id.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<main class="flex flex-col lg:flex-row items-center px-5 xl:px-64 mb-16 md:mb-32">
<div class="w-full lg:w-1/2 flex flex-col items-center mt-8 md:mt-32">
<img class="w-4/5 rounded-xl" :src="'http://localhost:5555/files/' + cover" alt="Project Img" />
<a
class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
:class="'bg-' + color + '-400 hover:bg-' + color + '-600'"
:href="url"
>{{formatLink}}</a>
</div>
<div class="w-full lg:w-1/2 ml-5 ">
<h1 class="text-xl lg:text-3xl font-bold">
{{ $t(title) }}
</h1>
<p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
{{ $t(description) }}
</p>
<div>
<h3 class="text-md lg:text-lg font-bold">
{{ $t('work_tech_used') }}
</h3>
<div class="flex flex-row overflow-x-auto">
<div v-for="skill in skills">
<WorkSkill
:skill="skill.title.code"
:color="skill.color"
:cover="skill.cover.file_name"
/>
</div>
</div>
</div>
</div>
</main>
</template>
<script>
import WorkSkill from "~/components/WorkSkill";
export default {
name: "_id",
components: {WorkSkill},
head() {
return {
title: 'Work - Arthur Danjou'
}
},
data() {
return {
id: this.$route.params.id,
title: '',
description: '',
skills: [],
color: '',
cover: '',
url: ''
}
},
async asyncData({ params, $axios }) {
const {data: project} = await $axios.get('/projects/' + params.id)
return {
title: project.title.code,
description: project.description.code,
skills: project.skills,
color: project.color,
cover: project.cover.file_name,
url: project.url
}
},
computed: {
formatLink() {
return this.url.replace('https://', '').replace('http://', '')
}
}
}
</script>
<style scoped>
</style>

57
src/templates/pages/work/index.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<main class="work flex flex-col items-center px-5 xl:px-64">
<PageTitle
title="Mon travail"
color="blue"
>
<svg class="inline-block icon" height="40" width="40" 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>
</PageTitle>
<div class="flex flex-col justify-around items-center py-10 w-full">
<h1 class="text-xl font-bold text-center mb-8">
Voici les différents projets auxquels j'ai pu participer dans mon passé !
</h1>
<div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full">
<div v-for="work in works">
<nuxt-link :to="'/work/' + work.id">
<Work
:title="work.title.code"
:url="work.url"
:color="work.color"
:cover="work.cover.file_name"
/>
</nuxt-link>
</div>
</div>
</div>
</main>
</template>
<script>
import PageTitle from "~/components/PageTitle";
import Work from "~/components/Work";
export default {
name: "index",
components: {Work, PageTitle},
head() {
return {
title: 'Work - Arthur Danjou'
}
},
data () {
return {
works: []
}
},
async asyncData({ $axios }) {
const {data: works} = await $axios.get('/projects')
return {
works
}
}
}
</script>
<style scoped lang="scss">
</style>

3
tsconfig.json
View File

@@ -26,7 +26,8 @@
"types": [ "types": [
"@types/node", "@types/node",
"@nuxt/types", "@nuxt/types",
"@nuxtjs/axios" "@nuxtjs/axios",
"nuxt-i18n"
] ]
}, },
"exclude": [ "exclude": [