arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-14 12:14:42 +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 {
title: 'artsite',
meta: [
{ charset: 'utf-8' },
{ 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 ColorMode from './ColorMode'
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 {
head: Head,
@@ -23,7 +23,8 @@ export default {
],
modules: [
['@nuxtjs/axios', Axios]
['@nuxtjs/axios', Axios],
['nuxt-i18n', Translation]
],
buildDir: 'build',

1
package.json
View File

@@ -13,6 +13,7 @@
"@nuxtjs/axios": "5.12.1",
"core-js": "^3.7.0",
"nuxt": "^2.14.6",
"nuxt-i18n": "^6.15.4",
"sass": "^1.29.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=Open+Sans&family=Roboto&display=swap');
@import "./style.scss";
@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>
<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-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>
<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>
<h2 class="text-xl">{{description}}</h2>
</div>
@@ -40,10 +40,18 @@ export default {
type: String,
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>
<style scoped lang="scss">
</style>

4
src/components/Footer.vue
View File

@@ -66,10 +66,10 @@ export default {
}
.link {
transition-duration: .3s;
transition-duration: .2s;
&: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>
<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>
<h2 class="text-xl">{{description}}</h2>
</div>
@@ -36,6 +36,15 @@ export default {
type: String,
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>

41
src/components/Header.vue
View File

@@ -1,16 +1,21 @@
<template>
<header class="dark:bg-dark-200 dark:text-white fixed z-index-50 top-0 left-0 bg-white header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
<header class="dark:bg-dark-200 dark:text-white fixed z-50 top-0 left-0 bg-white header tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
<div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
<nuxt-link to="/">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500">
Arthur Danjou
<div class="left text-2xl font-bold cursor-pointer border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid duration-500">
{{ $t('header_title') }}
</div>
</nuxt-link>
<nav class="right">
<div class="flex flex-col md:flex-row items-center">
<ul class="flex text-xl">
<li class="mx-2 cursor-pointer">
<nuxt-link to="/dev"> FR </nuxt-link>
<div v-if="this.$i18n.locale === 'en'" @click="changeLanguage('fr')">
🇫🇷
</div>
<div v-else @click="changeLanguage('en')">
🇺🇸
</div>
</li>
<li @click="changeColorMode()" class="mx-2 cursor-pointer flex items-center">
<div v-if="this.$colorMode.value === 'light'">
@@ -26,27 +31,27 @@
</li>
<nuxt-link class="red hidden md:inline-block" to="/">
<li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
Accueil
{{ $t('part_home') }}
</li>
</nuxt-link>
<nuxt-link class="orange hidden md:inline-block" to="/about">
<li class="hover:text-orange-400 font-bold mx-2 cursor-pointer duration-300">
Moi
{{ $t('part_about') }}
</li>
</nuxt-link>
<nuxt-link class="green hidden md:inline-block" to="/blog">
<li class="hover:text-green-400 font-bold mx-2 cursor-pointer duration-300">
Blog
{{ $t('part_blog') }}
</li>
</nuxt-link>
<nuxt-link class="blue hidden md:inline-block" to="/work">
<li class="hover:text-blue-400 font-bold mx-2 cursor-pointer duration-300">
Travail
{{ $t('part_work') }}
</li>
</nuxt-link>
<nuxt-link class="purple hidden md:inline-block" to="/contact">
<li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300">
Contact
{{ $t('part_contact') }}
</li>
</nuxt-link>
</ul>
@@ -57,7 +62,7 @@
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Accueil
{{ $t('part_home') }}
</li>
</nuxt-link>
<nuxt-link to="/about" class="orange">
@@ -65,7 +70,7 @@
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Moi
{{ $t('part_about') }}
</li>
</nuxt-link>
<nuxt-link to="/blog" class="green">
@@ -73,7 +78,7 @@
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
Blog
{{ $t('part_blog') }}
</li>
</nuxt-link>
<nuxt-link to="/work" class="blue">
@@ -81,7 +86,7 @@
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Travail
{{ $t('part_work') }}
</li>
</nuxt-link>
<nuxt-link to="/contact" class="purple">
@@ -90,7 +95,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Contact
{{ $t('part_contact') }}
</li>
</nuxt-link>
</ul>
@@ -113,7 +118,10 @@ export default {
},
updateScroll() {
this.scrollPosition = window.scrollY
}
},
changeLanguage(lang) {
this.$i18n.setLocale(lang)
},
},
mounted() {
window.addEventListener('scroll', this.updateScroll);
@@ -133,6 +141,9 @@ export default {
&.green {
@apply text-green-400;
}
&.blue {
@apply text-blue-400;
}
}
.nuxt-link-exact-active {

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>
<article
class="w-full h-blog p-2 flex flex-col justify-between my-5"
:style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover.file_name + ')' }"
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 + ')' }"
>
<div>
<p class="text-3xl text-white font-bold text-justify leading-7 mb-3">{{title}}</p>
<p class="text-dark-900 text-lg italic text-justify leading-5">{{description}}</p>
<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 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>{{formatDate}}</div>
<div>{{reading_time}} min read</div>
<div>{{likes}} ❤</div>
</div>
<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}}
</div>
</div>
@@ -52,7 +64,11 @@ export default {
},
cover: {
type: String,
default: "https://api.arthurdanjou.fr/pictures/default.png"
default: "default.png"
},
lightBg: {
type: Number,
default: false
}
},
computed: {
@@ -75,5 +91,6 @@ export default {
min-height: 20rem;
background-position: center;
background-size: cover;
@apply bg-opacity-50;
}
</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>
<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>
COVER
<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>
@@ -23,14 +23,11 @@ export default {
},
cover: {
type: String,
default: "https://api.arthurdanjou.fr/files/default.png"
default: "logo.jpg"
}
}
}
</script>
<style scoped lang="scss">
.skill {
}
</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>
<div class="dark:bg-dark-200 dark:text-white">
<div class="dark:bg-dark-200 dark:text-white font-sans">
<Header />
<Nuxt class="content pt-16 lg:pt-24"/>
<Nuxt class="z-10 pt-16 lg:pt-24 content"/>
<Footer />
</div>
</template>
@@ -16,6 +16,6 @@ export default {
<style scoped>
.content {
min-height: calc(100vh - (118px + 96px));
min-height: calc(100vh - 118px);
}
</style>

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

@@ -1,11 +1,13 @@
<template>
<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">
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">
<PageTitle
title="A propos"
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" />
</svg>
</h1>
</PageTitle>
<div class="flex flex-col md:flex-row justify-around items-center py-8">
<div>
<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" />
</svg>
</h3>
<div class="flex flex-col items-center md:items-start md:justify-between md:flex-row flex-wrap">
<!-- TODO Insert Skills -->
<Skill
skill="Java"
color="white" />
<Skill
skill="JavaScript"
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" />
<Skill
skill="Java"
color="white" />
<div class="flex flex-row w-full overflow-x-auto">
<div v-for="skill in skills">
<Skill
:skill="skill.title.code"
:color="skill.color"
:cover="skill.cover.file_name"
/>
</div>
</div>
</div>
<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" />
</svg>
</h3>
<div>
<!-- TODO Insert Formations-->
<div v-for="formation in formations">
<Formation
title="Autodidacte"
description="Apprentissage en autodidacte et en pratiquant"
location="At Home 🏠"
begin="2015"
end="Today" />
<Formation
title="Baccalauréat"
description="Examen spécialités maths & Pc"
location="At Passy"
begin="2020"
end="2021" />
:title="formation.title.code"
:description="formation.description.code"
:location="formation.location"
:begin="formation.begin_date"
:end="formation.end_date" />
</div>
</div>
<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" />
</svg>
</h3>
<div>
<!-- TODO Insert Experiences-->
<div v-for="experience in experiences">
<Experience
title="Junior Developer"
company="Erisium"
description="Chargé des mini-jeux et de l'infrastructure"
location="At Home 🏠"
begin="2019"
end="Today" />
<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" />
:title="experience.title.code"
:company="experience.company"
:description="experience.description.code"
:location="experience.location"
:begin="experience.begin_date"
:end="experience.end_date" />
</div>
</div>
<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
<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" />
</svg>
</div>
</nuxt-link>
<div class="my-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">
Environnement
<div class="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
<PageTitle
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">
<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>
</h1>
</PageTitle>
<p class="text-lg leading-6 text-justify pb-8">
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.
Voici donc une liste de tous mes logiciels que j'utilise au quotidien et de mon setup.
</p>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-2">
Editeurs de texte
<EnvGroup>
<EnvTitle title="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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</h3>
<ul class="list-disc ml-10 dark:text-dark-900 text-gray-800 text-xl">
<li>
Editeur Java: <span>Intellij Idea Ultimate</span>
</li>
<li>
Editeur Python: <span>Pycharm Ultimate</span>
</li>
<li>
Editeur Web: <span>Webstorm</span>
</li>
<li>
Editeur Go: <span>Goland</span>
</li>
<li>
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
</EnvTitle>
<EnvList>
<EnvListItem title="Editeur Java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
<EnvListItem title="Editeur Python" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
<EnvListItem title="Editeur Web" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
<EnvListItem title="Editeur Go" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
<EnvListItem title="Editeur de bases de données" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
<EnvListItem title="All-In-One" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
<EnvListItem title="Police" content="Jetbrains Mono" link="https://www.jetbrains.com/lp/mono/"/>
<EnvListItem title="Console" content="HyperJs" link="https://hyper.is/"/>
<EnvListItem title="WSL 2" content="Ubuntu 20.04" link="https://www.microsoft.com/en-us/p/ubuntu-2004-lts/9n6svws3rx71?activetab=pivot:overviewtab"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="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">
<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>
</h3>
<ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
<li>
Email: <span>Courrier by Microsoft</span>
</li>
<li>
Client VPN: <span>Pritunl</span>
</li>
<li>
Client FTP: <span>WinSCP</span>
</li>
<li>
Navigateur web: <span>Intellij Idea Ultimate</span>
</li>
<li>
Organisation: <span>Trello</span> & <span>Notion</span>
</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
</EnvTitle>
<EnvList>
<EnvListItem title="Email" content="Courrier by Microsoft" link="https://www.microsoft.com/fr-fr/p/courrier-et-calendrier/9wzdncrfhvqm?activetab=pivot:overviewtab"/>
<EnvListItem title="Client VPN" content="Pritunl" link="https://pritunl.com/"/>
<EnvListItem title="Client FTP" content="WinSCP" link="https://winscp.net/eng/download.php"/>
<EnvListItem title="Navigateur Web" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
<EnvListItem title="Organisation" content="Notion" link="https://www.notion.so/"/>
<EnvListItem title="Organisation" content="Trello" link="https://www.trello.com/"/>
<EnvListItem title="Création / graphisme" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
<EnvListItem title="Communication" content="Slack" link="https://slack.com/intl/fr-fr/"/>
<EnvListItem title="Communication" content="Discord" link="https://www.discord.com/"/>
<EnvListItem title="Communication" content="Mattermost" link="https://mattermost.com/"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="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">
<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>
</h3>
<ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
<li>
Hébergeur VPS: <span>PulseHeberg</span>
</li>
<li>
Hébergeur nom de domaine: <span>OVH</span>
</li>
</ul>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl mb-2">
Setup bureautique
</EnvTitle>
<EnvList>
<EnvListItem title="Hébergeur VPS" content="PulseHeberg" link="https://pulseheberg.com/"/>
<EnvListItem title="Nom de domaine" content="OVH" link="https://ovh.com/"/>
</EnvList>
</EnvGroup>
<EnvGroup>
<EnvTitle title="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">
<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>
</h3>
<ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
<li>
Bureau: <span>Ikea en bois</span>
</li>
<li>
Téléphone: <span>Samsung Galaxy Note 8</span>
</li>
<li>
Ordinateur fixe: <span>Asus i5, 8Go Ram, GTX 950, 1To HDD</span>
</li>
<li>
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>
</EnvTitle>
<EnvList>
<EnvListItem title="Bureau" content="Ikea en bois"/>
<EnvListItem title="Téléphone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
<EnvListItem title="Ordinateur fixe" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
<EnvListItem title="Ecran" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr_fr/produits/prolite-e2283hs-b3/"/>
<EnvListItem title="Clavier" content="Microsoft"/>
<EnvListItem title="Souris" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
<EnvListItem title="Ecouteurs" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
<EnvListItem title="Casque/Micro" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
</EnvList>
</EnvGroup>
</main>
</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 {
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>
<style scoped lang="scss">
.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 {
height: 20rem;
}
}
</style>

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

@@ -1,5 +1,5 @@
<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-->
<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">
@@ -18,7 +18,8 @@
<p>{{ reading_time }} min</p>
</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>
</div>
</div>
@@ -33,7 +34,7 @@
<p class="text-center">
Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/>
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>
</div>
</main>
@@ -42,6 +43,11 @@
<script>
export default {
name: "blog",
head() {
return {
title: 'Blog - Arthur Danjou'
}
},
data() {
return {
id: this.$route.params.id,
@@ -52,7 +58,7 @@ export default {
likes: 0,
date: '',
cover: '',
reading_time: 0
reading_time: 0,
}
},
async asyncData({ params, $axios }) {
@@ -65,7 +71,7 @@ export default {
likes: post.likes,
date: post.created_at,
reading_time: post.reading_time,
cover: post.cover
cover: post.cover,
}
},
computed: {

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

@@ -1,16 +1,20 @@
<template>
<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">
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">
<PageTitle
title="Blog"
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" />
</svg>
</h1>
<div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
</PageTitle>
<div>
<!-- TODO
Insert research by tags
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">
<nuxt-link :to="'/blog/' + post.id">
<Post
@@ -18,9 +22,10 @@
:reading_time="post.reading_time"
:description="post.description.code"
:tags="displayTags(post.tags)"
:cover="post.cover"
:cover="post.cover.file_name"
:date="post.created_at"
:likes="post.likes"
:lightBg="post.light_back_ground"
/>
</nuxt-link>
</div>
@@ -33,9 +38,15 @@
<script>
import Post from "~/components/Post";
import PageTitle from "~/components/PageTitle";
export default {
name: "blog",
components: {Post},
components: {PageTitle, Post},
head() {
return {
title: 'Blog - Arthur Danjou'
}
},
data () {
return {
posts: []
@@ -60,18 +71,4 @@ export default {
</script>
<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>

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

@@ -19,6 +19,11 @@
<script>
export default {
name: "blog",
head() {
return {
title: 'Blog - Arthur Danjou'
}
},
data() {
return {
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>
<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">
<div class="hidden lg:block flex justify-center items-center lg:w-1/2">
<img src="@/assets/img/computer.png" alt="It's me !" class="icon" />
</div>
<div class="title flex justify-center flex-col lg:w-1/2 pr-3">
<div class="mb-4 md:mb-10">
<section class="mt-16 md:mt-32 banner w-full mb-16">
<div class="flex flex-col lg:flex-row-reverse mb-4">
<div class="hidden lg:block flex justify-center items-center lg:w-1/2">
<img src="@/assets/img/computer.png" alt="It's me !" class="icon" />
</div>
<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">
Bonjour, je suis <br />
{{ $t('home_banner_hello') }} <br />
<span class="text-red-700 font-black">Arthur Danjou</span> 👋
</h1>
<p class="text-2xl md:text-3xl my-5 font-semibold">
Développeur & étudiant
{{ $t('home_banner_role') }}
</p>
<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.
J'utilise des technologies modernes pour obtenir le meilleur résultat possible ✨
{{ $t('home_banner_description', {age: age}) }}
</p>
</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>
</section>
<section class="my-16 border-t border-solid border-black pt-16">
<h1 class="font-bold text-3xl mr-2 inline">
Mes 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="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>
</h1>
<p class="mt-2 mb-8">
Parfois, je rédige des articles concernant le développement, ma vie, le design ou bien encore l'apprentissage !
</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" />
<div class="flex flex-col items-center w-full">
<div class="flex flex-col md:flex-row justify-around w-full md:mb-8">
<HomeLink
:title="$t('home_link_about')"
:description="$t('home_link_about_description')"
color="orange"
link="/about"
>
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</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>
</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>
</section>
</main>
</template>
<script lang="ts">
<script>
import Vue from 'vue'
import HomeLink from "~/components/HomeLink";
export default Vue.extend({
data() {
components: {HomeLink},
head() {
return {
posts: [],
works: [],
services: []
title: 'Arthur Danjou - Web & Software Developer'
}
},
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/node",
"@nuxt/types",
"@nuxtjs/axios"
"@nuxtjs/axios",
"nuxt-i18n"
]
},
"exclude": [