mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-01-14 12:14:42 +01:00
Rebase old template to new
This commit is contained in:
37
.github/workflows/node.js.yml
vendored
37
.github/workflows/node.js.yml
vendored
@@ -1,37 +0,0 @@
|
||||
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
|
||||
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
|
||||
|
||||
name: Node.js CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ master ]
|
||||
pull_request:
|
||||
branches: [ master ]
|
||||
|
||||
jobs:
|
||||
deploy_build_run:
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [14.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- name: Use Node.js ${{ matrix.node_version }}
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: ${{ matrix.node_version }}
|
||||
- name: Deploy with SSH
|
||||
uses: appleboy/ssh-action@v0.1.4
|
||||
with:
|
||||
host: ${{ secrets.SSH_HOST }}
|
||||
port: ${{ secrets.SSH_PORT }}
|
||||
username: ${{ secrets.SSH_USER }}
|
||||
password: ${{ secrets.SSH_PASSPHRASE }}
|
||||
script: |
|
||||
cd ${{ secrets.PATH }}
|
||||
git pull
|
||||
yarn install
|
||||
yarn build
|
||||
pm2 start
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@@ -41,9 +41,6 @@ jspm_packages/
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
@@ -71,6 +68,9 @@ typings/
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# Nuxt generate
|
||||
dist
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
@@ -88,10 +88,5 @@ sw.*
|
||||
|
||||
# Vim swap files
|
||||
*.swp
|
||||
/build/
|
||||
|
||||
/dist/
|
||||
|
||||
# Local Netlify folder
|
||||
.netlify
|
||||
/pages/blog/preview/
|
||||
build
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
FROM node:15.8.0-alpine3.10
|
||||
|
||||
RUN mkdir -p /usr/src/artsite
|
||||
WORKDIR /usr/src/artsite
|
||||
RUN mkdir -p /usr/src/nuxtapp
|
||||
WORKDIR /usr/src/nuxtapp
|
||||
|
||||
COPY . /usr/src/artsite
|
||||
COPY nuxt-ts-app /usr/src/nuxtapp
|
||||
|
||||
RUN yarn install
|
||||
|
||||
@@ -11,6 +11,6 @@ RUN yarn build
|
||||
|
||||
EXPOSE 3333
|
||||
|
||||
COPY . .
|
||||
COPY nuxt-ts-app .
|
||||
|
||||
CMD ["yarn", "start"]
|
||||
|
||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright 2020 © Arthur Danjou
|
||||
Copyright 2021 © Arthur Danjou
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
41
README.md
41
README.md
@@ -1,33 +1,20 @@
|
||||
# ArtSite 🌍
|
||||
# nuxt-ts-app
|
||||
|
||||
This is my personnal website.
|
||||
Hosted version : [arthurdanjou.fr](https://arthurdanjou.fr)
|
||||
## Build Setup
|
||||
|
||||
## Features ✨
|
||||
```bash
|
||||
# install dependencies
|
||||
$ yarn install
|
||||
|
||||
- Blog
|
||||
- Portfolio
|
||||
- Dark/Light Mode
|
||||
- Contact Form
|
||||
- Personal CV
|
||||
- Automatic working state
|
||||
- Wonderfull Mobile-Header
|
||||
- Multi-Language site
|
||||
- Connected to ArtApi (my personal api)
|
||||
# serve with hot reload at localhost:3000
|
||||
$ yarn dev
|
||||
|
||||
## Tech used ⚙
|
||||
# build for production and launch server
|
||||
$ yarn build
|
||||
$ yarn start
|
||||
|
||||
- NuxtJs (SSR Framework)
|
||||
- VueJs (Frontend framework)
|
||||
- SCSS (Style preprocessor)
|
||||
- TailwindCss (Css framework)
|
||||
- Axios (Http request)
|
||||
# generate static project
|
||||
$ yarn generate
|
||||
```
|
||||
|
||||
## Author 👤
|
||||
➡ Arthur Danjou : Developer
|
||||
- Twitter : [@ArthurDanj](https://twitter.com/ArthurDanj)
|
||||
- GitHub : [@ArthurDanjou](https://github.com/ArthurDanjou)
|
||||
|
||||
## License 📑
|
||||
Copyright © 2020 - [@ArthurDanj](https://arthurdanjou.fr) \
|
||||
This project is [MIT](https://github.com/ArthurDanjou/artsite/blob/master/License) Licensed.
|
||||
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
.icon {
|
||||
transform: translate(3px, -3px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
position: static;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply dark:bg-dark-900
|
||||
}
|
||||
|
||||
* {
|
||||
@apply select-none outline-none;
|
||||
}
|
||||
|
||||
.nuxt-content-editor {
|
||||
@apply dark:bg-dark-800 border dark:border-white border-black border-solid;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
|
||||
@import "./style.scss";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 457 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>AdonisJS icon</title><path d="M13.333 1.333l-.596 1.193-2.404 4.807L8 2.667l-8 16h4.667l-2 4H24zm0 2.982l8.51 17.018H4.823l1.334-2.666H16l-4.922-9.843Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 228 B |
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 2350 2314.8" xml:space="preserve">
|
||||
<path d="M1175,0C525.8,0,0,525.8,0,1175c0,552.2,378.9,1010.5,890.1,1139.7c-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4
|
||||
c-79.3,0-152.8-35.2-185.1-99.9c-38.2-70.5-44.1-179.2-141-246.8c-29.4-23.5-5.9-47,26.4-44.1c61.7,17.6,111.6,58.8,158.6,120.4
|
||||
c47,61.7,67.6,76.4,155.7,76.4c41.1,0,105.7-2.9,164.5-11.8c32.3-82.3,88.1-155.7,155.7-190.9c-393.6-47-581.6-240.9-581.6-505.3
|
||||
c0-114.6,49.9-223.3,132.2-317.3c-26.4-91.1-61.7-279.1,11.8-352.5c176.3,0,282,114.6,308.4,143.9c88.1-29.4,185.1-47,284.9-47
|
||||
c102.8,0,196.8,17.6,284.9,47c26.4-29.4,132.2-143.9,308.4-143.9c70.5,70.5,38.2,261.4,8.8,352.5c82.3,91.1,129.3,202.7,129.3,317.3
|
||||
c0,264.4-185.1,458.3-575.7,499.4c108.7,55.8,185.1,214.4,185.1,331.9V2256c0,8.8-2.9,17.6-2.9,26.4
|
||||
C2021,2123.8,2350,1689.1,2350,1175C2350,525.8,1824.2,0,1175,0L1175,0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,13 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="256px" height="191px" viewBox="0 0 256 191" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
|
||||
<title>Group</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(0.000173, 0.000000)">
|
||||
<path d="M77.8911791,183.614864 C77.7012551,183.279 77.5321086,182.931804 77.384692,182.575232 C76.3622173,180.209762 76.0473968,177.598605 76.478347,175.057899 L15.9931374,175.057899 L105.88125,16.874014 L135.390782,68.7489446 L143.947746,53.6076496 L118.223538,8.29039232 C117.503793,6.98418906 113.158668,0 105.667993,0 C102.282527,0 97.4309144,1.46614656 93.485647,8.39702119 L2.42461749,168.500225 C1.65155838,169.8864 -2.10710822,177.163819 1.62490116,183.614864 C3.33096269,186.547156 6.9563432,190.039251 14.9535063,190.039251 L91.2197845,190.039251 C83.2759358,190.039251 79.5972406,186.600471 77.8911791,183.614864 Z" fill="#01C58E" />
|
||||
<path d="M253.242307,168.500225 L178.415518,36.6803211 C177.64246,35.2941462 173.323992,28.2832999 165.806658,28.2832999 C162.421193,28.2832999 157.56958,29.7227893 153.624314,36.6536639 L143.947746,53.6076496 L152.558025,68.7489446 L165.88663,45.157314 L239.913702,175.057899 L211.763688,175.057899 C212.123898,177.20534 211.921853,179.409465 211.17723,181.45563 C211.020409,181.907379 210.824167,182.344463 210.590771,182.761832 L210.350856,183.241662 C206.565533,189.692707 198.381769,190.039251 196.782337,190.039251 L240.820047,190.039251 C242.446137,190.039251 250.603243,189.692707 254.388568,183.241662 C256.067972,180.309369 257.267546,175.377785 253.242307,168.500225 Z" fill="#108775" />
|
||||
<path d="M210.350856,183.241662 L210.590771,182.761832 C210.824167,182.344463 211.020409,181.907379 211.17723,181.45563 C211.921853,179.409465 212.123898,177.20534 211.763688,175.057899 C211.348809,172.741872 210.517913,170.520128 209.311226,168.500225 L152.611339,68.7489446 L143.947746,53.6076496 L135.337467,68.7489446 L78.6642383,168.500225 C77.5638612,170.544123 76.8243845,172.762554 76.478347,175.057899 C76.0222311,177.590906 76.3092441,180.201797 77.3047209,182.575232 C77.4521368,182.931805 77.6212834,183.279 77.8112079,183.614864 C79.5172694,186.547156 83.1426494,190.039251 91.1398127,190.039251 L196.702365,190.039251 C198.381769,190.039251 206.565533,189.692707 210.350856,183.241662 L210.350856,183.241662 Z M143.947746,83.89024 L195.769362,175.057899 L92.1527868,175.057899 L143.947746,83.89024 Z" fill="#2F495E" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@@ -1,12 +0,0 @@
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="-92.4 101 489.5 512" enable-background="new -92.4 101 489.5 512" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#65459B" d="M263.6,546.1H163.4L96.7,613H30v-66.9H-92.4v-356l33.3-89.1h456.2v311.6L263.6,546.1z M352.7,390.5V145.5
|
||||
H-14.6v322.7H85.6V535l66.7-66.7h122.4L352.7,390.5z"/>
|
||||
<g id="Solo_Glitch_136_">
|
||||
<g>
|
||||
<path fill="#65459B" d="M230.2,234.6v133.6h44.5V234.6H230.2z M107.8,368.1h44.5V234.6h-44.5V368.1z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 573 B |
@@ -1 +0,0 @@
|
||||
<svg id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.24 102.59"><defs><style>.cls-1{fill:#1da1f2;}</style></defs><title>twitter-original</title><path id="original" class="cls-1" d="M40.58,115.3c47.64,0,73.69-39.47,73.69-73.69,0-1.12,0-2.24-.07-3.35a52.7,52.7,0,0,0,12.92-13.41,51.7,51.7,0,0,1-14.87,4.08A26,26,0,0,0,123.63,14.6a51.9,51.9,0,0,1-16.45,6.29A25.92,25.92,0,0,0,63.05,44.51,73.53,73.53,0,0,1,9.67,17.45a25.92,25.92,0,0,0,8,34.58A25.71,25.71,0,0,1,6,48.78c0,.11,0,.22,0,.33A25.91,25.91,0,0,0,26.73,74.5a25.86,25.86,0,0,1-11.7.44,25.93,25.93,0,0,0,24.2,18A52,52,0,0,1,7.06,104a52.72,52.72,0,0,1-6.18-.36,73.32,73.32,0,0,0,39.7,11.63" transform="translate(-0.88 -12.7)"/></svg>
|
||||
|
Before Width: | Height: | Size: 702 B |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div class="w-full mb-10">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EnvGroup"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<ul class="list-disc ml-10 text-gray-600 dark:text-dark-100 text-xl">
|
||||
<slot/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EnvList"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<li>
|
||||
{{ $t(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>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<h3 class="font-bold text-2xl md:text-4xl mb-2">
|
||||
{{ $t(title) }}
|
||||
<slot />
|
||||
</h3>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EnvTitle",
|
||||
props:{
|
||||
title: {
|
||||
default: 'Title',
|
||||
type: String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-row mb-5">
|
||||
<div class="self-center flex h-4 w-4 mr-4 relative">
|
||||
<span v-if="end === 'Today'" class="animate-ping relative inline h-4 w-4 rounded-full bg-orange-400 opacity-75"></span>
|
||||
<span v-else class="inline relative h-4 w-4 rounded-full bg-gray-400 opacity-75"></span>
|
||||
<span v-if="end === 'Today'" class="inline absolute rounded-full h-4 w-4 bg-orange-500"></span>
|
||||
<span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
|
||||
</div>
|
||||
<div class="leading-7">
|
||||
<p v-if="isSameDate()" class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ formatDate(begin) }} <span class="px-3">|</span> {{location}}</p>
|
||||
<p v-else class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
|
||||
<h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
|
||||
<h2 class="text-xl">{{ company }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Experience",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "Title"
|
||||
},
|
||||
company: {
|
||||
type: String,
|
||||
default: "ArtDanjProduction"
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
default: "France"
|
||||
},
|
||||
begin: {
|
||||
type: String,
|
||||
default: "Now"
|
||||
},
|
||||
end: {
|
||||
type: String,
|
||||
default: "Never"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
const dateFormat = date.split('-')
|
||||
return date === 'Today' ? this.$t('date.today') : this.$t('month.' + dateFormat[0]) + " " + dateFormat[1]
|
||||
},
|
||||
isSameDate() {
|
||||
return this.begin === this.end
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<footer class="footer w-full border-t-2 border-solid border-black dark:border-white mb-20 md:mb-0">
|
||||
<div>
|
||||
<div class="flex flex-col items-center py-4 text-center ">
|
||||
<div class="mb-3">
|
||||
<p class="inline">{{ $t('footer.find_me') }}
|
||||
<br class="md:hidden"/>
|
||||
<a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/img/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
|
||||
<span class="link">Twitch</span>
|
||||
</a>,
|
||||
<a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/img/socials/github.svg" alt="Github logo" height="20" width="20" />
|
||||
<span class="link">Github</span>
|
||||
</a> &
|
||||
<a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
|
||||
<span class="link">Twitter</span>
|
||||
</a>
|
||||
<br class="md:hidden"/>
|
||||
{{ $t('footer.separator') }}
|
||||
<a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank" rel="noopener noreferrer">
|
||||
<svg class="inline img" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="link">Mail</span>
|
||||
</a>
|
||||
</p>
|
||||
<br class="md:hidden"/>
|
||||
<span class="inline dark:text-dark-200 text-gray-600 text-xs">
|
||||
{{ $t('footer.links_click') }}
|
||||
</span>
|
||||
</div>
|
||||
<p>
|
||||
{{ $t('footer.credits') }}
|
||||
<a class="font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/img/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
|
||||
<span class="link">NuxtJs</span>
|
||||
</a>
|
||||
&
|
||||
<a class="font-semibold" target="_blank" href="https://preview.adonisjs.com/" rel="noopener noreferrer">
|
||||
<img class="inline img" src="@/assets/img/socials/adonisjs.svg" alt="AdonisJs logo" height="20" width="20" />
|
||||
<span class="link">AdonisJs</span>
|
||||
</a>
|
||||
{{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
|
||||
</p>
|
||||
<p>{{ $t('footer.copyrights', { date: date }) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Footer",
|
||||
data () {
|
||||
return {
|
||||
date: new Date().getFullYear()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.footer {
|
||||
.img {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply 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>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-row mb-5">
|
||||
<div class="self-center flex h-4 w-4 mr-4 relative">
|
||||
<span v-if="end === 'Today'" class="animate-ping relative inline h-4 w-4 rounded-full bg-orange-400 opacity-75"></span>
|
||||
<span v-else class="inline relative h-4 w-4 rounded-full bg-gray-400 opacity-75"></span>
|
||||
<span v-if="end === 'Today'" class="inline absolute rounded-full h-4 w-4 bg-orange-500"></span>
|
||||
<span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
|
||||
</div>
|
||||
<div class="leading-7">
|
||||
<p class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
|
||||
<h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
|
||||
<h2 class="text-xl">{{ $t(description) }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Formation",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "Title"
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "Description"
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
default: "Location"
|
||||
},
|
||||
begin: {
|
||||
type: String,
|
||||
default: "Now"
|
||||
},
|
||||
end: {
|
||||
type: String,
|
||||
default: "Never"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
const dateFormat = date.split('-')
|
||||
return date === 'Today' ? this.$t('date.today') : this.$t('month.' + dateFormat[0]) + " " + dateFormat[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,175 +0,0 @@
|
||||
<template>
|
||||
<header class="dark:bg-dark-900 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 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">
|
||||
<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'">
|
||||
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
<nuxt-link class="red hidden md:inline-block" to="/">
|
||||
<li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
|
||||
{{ $t('header.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">
|
||||
{{ $t('header.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">
|
||||
{{ $t('header.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">
|
||||
{{ $t('header.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">
|
||||
{{ $t('header.contact') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="dark:text-white dark:bg-dark-900 text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
|
||||
<nuxt-link to="/" class="w-1/5 red">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 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>
|
||||
{{ $t('header.home') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/about" class="w-1/5 orange">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
{{ $t('header.about') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/blog" class="w-1/5 green">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
|
||||
{{ $t('header.blog') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/work" class="w-1/5 blue">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
|
||||
{{ $t('header.work') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/contact" class="w-1/5 purple">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
|
||||
{{ $t('header.contact') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header",
|
||||
data () {
|
||||
return {
|
||||
scrollPosition: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeColorMode() {
|
||||
this.$colorMode.preference = this.$colorMode.value === 'light' ? 'dark' : 'light'
|
||||
},
|
||||
updateScroll() {
|
||||
this.scrollPosition = window.scrollY
|
||||
},
|
||||
async changeLanguage(lang) {
|
||||
await this.$i18n.setLocale(lang)
|
||||
if (this.$router.currentRoute.fullPath.includes('blog')) {
|
||||
await this.$nuxt.refresh()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.updateScroll);
|
||||
},
|
||||
destroy() {
|
||||
window.removeEventListener('scroll', this.updateScroll)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
|
||||
.header-container {
|
||||
|
||||
.nuxt-link-active {
|
||||
&.green {
|
||||
@apply text-green-400;
|
||||
}
|
||||
&.blue {
|
||||
@apply text-blue-400;
|
||||
}
|
||||
}
|
||||
|
||||
.nuxt-link-exact-active {
|
||||
&.red {
|
||||
@apply text-red-400;
|
||||
}
|
||||
&.orange {
|
||||
@apply text-orange-400;
|
||||
}
|
||||
&.green {
|
||||
@apply text-green-400;
|
||||
}
|
||||
&.blue {
|
||||
@apply text-blue-400;
|
||||
}
|
||||
&.purple {
|
||||
@apply text-purple-400;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-bottom-items li {
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<nuxt-link :to="link">
|
||||
<div
|
||||
class="mb-8 md:mb-0 home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
|
||||
:class="getColor"
|
||||
>
|
||||
<div class="ml-4">
|
||||
<h1 class="text-2xl md:text-3xl font-bold my-2">
|
||||
{{ $t(title) }}
|
||||
<slot />
|
||||
</h1>
|
||||
<p class="w-5/6 text-gray-900 dark:text-dark-100 text-justify duration-300">{{ $t(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
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
switch (this.color) {
|
||||
case 'orange':
|
||||
return 'hover:bg-orange-400 dark:hover:bg-orange-600 active:bg-orange-400 dark:active:bg-orange-600'
|
||||
case 'purple':
|
||||
return 'hover:bg-purple-400 dark:hover:bg-purple-600 active:bg-purple-400 dark:active:bg-purple-600'
|
||||
case 'blue':
|
||||
return 'hover:bg-blue-400 dark:hover:bg-blue-600 active:bg-blue-400 dark:active:bg-blue-600'
|
||||
case 'green':
|
||||
return 'hover:bg-green-400 dark:hover:bg-green-600 active:bg-green-400 dark:active:bg-green-600'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-link:hover {
|
||||
p {
|
||||
@apply dark:text-white
|
||||
}
|
||||
.arrow {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<h1
|
||||
class="mt-16 md:mt-32 font-bold text-2xl md:text-4xl mr-2 inline mb-4 border-b-2 border-solid"
|
||||
:class="getColor"
|
||||
>
|
||||
{{ $t(title) }}
|
||||
<slot />
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PageTitle",
|
||||
props: {
|
||||
title: {
|
||||
default: 'Title',
|
||||
type: String
|
||||
},
|
||||
color: {
|
||||
default: 'red',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
switch (this.color) {
|
||||
case 'orange':
|
||||
return 'border-orange-400'
|
||||
case 'purple':
|
||||
return 'border-purple-400'
|
||||
case 'blue':
|
||||
return 'border-blue-400'
|
||||
case 'green':
|
||||
return 'border-green-400'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<article
|
||||
class="post 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(${this.getBackgroundUrl})` }"
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
class="text-2xl md:text-3xl font-bold md:text-justify leading-7 mb-3"
|
||||
:class="lightBg ? 'text-black':'text-white'"
|
||||
>{{ title }}</p>
|
||||
<p
|
||||
class="text-lg italic text-justify leading-5"
|
||||
:class="lightBg ? 'text-gray-900':'text-dark-100'"
|
||||
>{{ description }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between mt-8 items-end"
|
||||
:class="lightBg ? 'text-gray-900':'text-dark-100'"
|
||||
>
|
||||
<div>
|
||||
<div>{{formatDate}}</div>
|
||||
<div>{{reading_time}} min</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 rounded font-semibold"
|
||||
:class="lightBg ? 'bg-black text-white':'bg-white text-black'"
|
||||
>
|
||||
#{{ $t(tag) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Post",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "New Post's title "
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "New Post's description"
|
||||
},
|
||||
reading_time: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
default: "Today"
|
||||
},
|
||||
tags: {
|
||||
type: Array,
|
||||
default: () => ["Tag1", "Tag2", "Tag3"],
|
||||
},
|
||||
cover: {
|
||||
type: String,
|
||||
default: "default.png"
|
||||
},
|
||||
lightBg: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatDate() {
|
||||
const dateFormat = this.date.split('-')
|
||||
return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
|
||||
},
|
||||
getBackgroundUrl() {
|
||||
return require(`~/assets/img/posts/${this.cover}.png`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.h-blog {
|
||||
min-height: 20rem;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@apply bg-opacity-50;
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="mb-3 mr-2 p-1 md:p-2 h-32 w-32 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="getColor">
|
||||
<div class="w-full h-full flex flex-col justify-center items-center">
|
||||
<div>
|
||||
<img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
|
||||
</div>
|
||||
<h1 class="md:text-lg text-md font-bold text-center">{{ skill }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Skill",
|
||||
props: {
|
||||
skill: {
|
||||
type: String,
|
||||
default: "Rien"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "red"
|
||||
},
|
||||
cover: {
|
||||
type: String,
|
||||
default: "logo.jpg"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
switch (this.color) {
|
||||
case 'red':
|
||||
return 'hover:bg-red-400'
|
||||
case 'orange':
|
||||
return 'hover:bg-orange-400'
|
||||
case 'purple':
|
||||
return 'hover:bg-purple-400'
|
||||
case 'blue':
|
||||
return 'hover:bg-blue-400'
|
||||
case 'green':
|
||||
return 'hover:bg-green-400'
|
||||
case 'yellow':
|
||||
return 'hover:bg-yellow-400'
|
||||
case 'cyan':
|
||||
return 'hover:bg-cyan-400'
|
||||
case 'teal':
|
||||
return 'hover:bg-teal-400'
|
||||
case 'amber':
|
||||
return 'hover:bg-amber-400'
|
||||
case 'blueGray':
|
||||
return 'hover:bg-blueGray-400'
|
||||
case 'emerald':
|
||||
return 'hover:bg-emerald-400'
|
||||
case 'lightBlue':
|
||||
return 'hover:bg-lightBlue-400'
|
||||
case 'lime':
|
||||
return 'hover:bg-lime-400'
|
||||
case 'rose':
|
||||
return 'hover:bg-rose-400'
|
||||
case 'black':
|
||||
return 'hover:bg-black'
|
||||
case 'white':
|
||||
return 'hover:bg-white'
|
||||
case 'pink':
|
||||
return 'hover:bg-pink-400'
|
||||
case 'fuchsia':
|
||||
return 'hover:bg-fuchsia-400'
|
||||
case 'violet':
|
||||
return 'hover:bg-violet-400'
|
||||
case 'indigo':
|
||||
return 'hover:bg-indigo-400'
|
||||
case 'warmGray':
|
||||
return 'hover:bg-warmGray-400'
|
||||
case 'trueGray':
|
||||
return 'hover:bg-trueGray-400'
|
||||
case 'gray':
|
||||
return 'hover:bg-gray-400'
|
||||
case 'coolGray':
|
||||
return 'hover:bg-coolGray-400'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer"
|
||||
:class="getColor">
|
||||
<div class="w-full h-full flex flex-col justify-center items-center">
|
||||
<div class="text-center">
|
||||
<img alt="Project Img" class="rounded-md" width="150" :src="require(`@/assets/img/works/${cover}.png`)">
|
||||
</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://', '')
|
||||
},
|
||||
getColor() {
|
||||
switch (this.color) {
|
||||
case 'orange':
|
||||
return 'hover:bg-orange-600'
|
||||
case 'purple':
|
||||
return 'hover:bg-purple-600'
|
||||
case 'blue':
|
||||
return 'hover:bg-blue-600'
|
||||
case 'green':
|
||||
return 'hover:bg-green-600'
|
||||
case 'yellow':
|
||||
return 'hover:bg-yellow-600'
|
||||
case 'cyan':
|
||||
return 'hover:bg-cyan-600'
|
||||
case 'teal':
|
||||
return 'hover:bg-teal-600'
|
||||
case 'amber':
|
||||
return 'hover:bg-amber-600'
|
||||
case 'blueGray':
|
||||
return 'hover:bg-blueGray-600'
|
||||
case 'emerald':
|
||||
return 'hover:bg-emerald-600'
|
||||
case 'lightBlue':
|
||||
return 'hover:bg-lightBlue-600'
|
||||
case 'lime':
|
||||
return 'hover:bg-lime-600'
|
||||
case 'rose':
|
||||
return 'hover:bg-rose-600'
|
||||
case 'black':
|
||||
return 'hover:bg-black'
|
||||
case 'white':
|
||||
return 'hover:bg-white'
|
||||
case 'pink':
|
||||
return 'hover:bg-pink-600'
|
||||
case 'fuchsia':
|
||||
return 'hover:bg-fuchsia-600'
|
||||
case 'violet':
|
||||
return 'hover:bg-violet-600'
|
||||
case 'indigo':
|
||||
return 'hover:bg-indigo-600'
|
||||
case 'warmGray':
|
||||
return 'hover:bg-warmGray-600'
|
||||
case 'trueGray':
|
||||
return 'hover:bg-trueGray-600'
|
||||
case 'gray':
|
||||
return 'hover:bg-gray-600'
|
||||
case 'coolGray':
|
||||
return 'hover:bg-coolGray-600'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25"
|
||||
:class="getColor"
|
||||
>
|
||||
<div class="w-full h-full flex flex-col justify-center items-center">
|
||||
<div>
|
||||
<img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
|
||||
</div>
|
||||
<h1 class="md:text-xl text-lg font-bold text-center">{{ 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"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
switch (this.color) {
|
||||
case 'red':
|
||||
return 'hover:bg-red-600'
|
||||
case 'orange':
|
||||
return 'hover:bg-orange-600'
|
||||
case 'purple':
|
||||
return 'hover:bg-purple-600'
|
||||
case 'blue':
|
||||
return 'hover:bg-blue-600'
|
||||
case 'green':
|
||||
return 'hover:bg-green-600'
|
||||
case 'yellow':
|
||||
return 'hover:bg-yellow-600'
|
||||
case 'cyan':
|
||||
return 'hover:bg-cyan-600'
|
||||
case 'teal':
|
||||
return 'hover:bg-teal-600'
|
||||
case 'amber':
|
||||
return 'hover:bg-amber-600'
|
||||
case 'blueGray':
|
||||
return 'hover:bg-blueGray-600'
|
||||
case 'emerald':
|
||||
return 'hover:bg-emerald-600'
|
||||
case 'lightBlue':
|
||||
return 'hover:bg-lightBlue-600'
|
||||
case 'lime':
|
||||
return 'hover:bg-lime-600'
|
||||
case 'rose':
|
||||
return 'hover:bg-rose-600'
|
||||
case 'black':
|
||||
return 'hover:bg-black'
|
||||
case 'white':
|
||||
return 'hover:bg-white'
|
||||
case 'pink':
|
||||
return 'hover:bg-pink-600'
|
||||
case 'fuchsia':
|
||||
return 'hover:bg-fuchsia-600'
|
||||
case 'violet':
|
||||
return 'hover:bg-violet-600'
|
||||
case 'indigo':
|
||||
return 'hover:bg-indigo-600'
|
||||
case 'warmGray':
|
||||
return 'hover:bg-warmGray-600'
|
||||
case 'trueGray':
|
||||
return 'hover:bg-trueGray-600'
|
||||
case 'gray':
|
||||
return 'hover:bg-gray-600'
|
||||
case 'coolGray':
|
||||
return 'hover:bg-coolGray-600'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,4 +0,0 @@
|
||||
export default {
|
||||
credentials: true,
|
||||
baseURL: 'https://api.arthurdanjou.fr/'
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
preference: 'system',
|
||||
fallback: 'light',
|
||||
classPrefix: '',
|
||||
classSuffix: '',
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export default {
|
||||
apiPrefix: 'api',
|
||||
nestedProperties: ['categories.slug'],
|
||||
markdown: {
|
||||
prism: {
|
||||
theme: 'prism-themes/themes/prism-darcula.css'
|
||||
},
|
||||
remarkPlugins: [
|
||||
'remark-squeeze-paragraphs',
|
||||
'remark-slug',
|
||||
'remark-autolink-headings',
|
||||
'remark-external-links',
|
||||
'remark-footnotes',
|
||||
],
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
export default {
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
{ hid: 'description', name: 'description', content: 'ArtSite is my personal website build using NuxtJs to create a single point of contact' },
|
||||
|
||||
{ hid: 'og:type', name: 'og:type', content: 'website' },
|
||||
{ hid: 'og:url', name: 'og:url', content: 'https://arthurdanjou.fr' },
|
||||
{ hid: 'og:title', name: 'og:title', content: 'Arthur Danjou | FullStack Web & Software Developer' },
|
||||
{ hid: 'og:site_name', name: 'og:site_name', content: 'Arthur Danjou | FullStack Web & Software Developer' },
|
||||
{ hid: 'og:locale', name: 'og:locale', content: 'fr' },
|
||||
{ hid: 'og:locale', name: 'og:locale', content: 'en' },
|
||||
{ hid: 'og:image', name: 'og:image', content: '/images/image.jpg' },
|
||||
],
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
|
||||
]
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export default [
|
||||
{ from: '/source', to: 'https://github.com/arthurdanjou/artsite' },
|
||||
{ from: '/twitter', to: 'https://twitter.com/arthurdanj' },
|
||||
{ from: '/github', to: 'https://github.com/arthurdanjou/' },
|
||||
{ from: '/shelf', to: '/blog' },
|
||||
{ from: '/posts', to: '/blog' },
|
||||
{ from: '/resume', to: '/cv' },
|
||||
]
|
||||
@@ -1,5 +0,0 @@
|
||||
export default {
|
||||
UserAgent: '*',
|
||||
Sitemap: 'https://arthurdanjou.fr/sitemap.xml',
|
||||
Allow: '*'
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default {
|
||||
path: '/sitemap.xml',
|
||||
hostname: 'https://arthurdanjou.fr',
|
||||
cacheTime: 720000,
|
||||
gzip: true,
|
||||
generate: false,
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default {
|
||||
cssPath: './assets/css/tailwind.css',
|
||||
configPath: 'tailwind.config.js',
|
||||
exposeConfig: true
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
export default {
|
||||
locales: [
|
||||
{
|
||||
code: 'en',
|
||||
name: 'English',
|
||||
iso: 'en-Us',
|
||||
file: 'en-US.ts',
|
||||
},
|
||||
{
|
||||
code: 'fr',
|
||||
iso: 'fr-FR',
|
||||
file: 'fr-FR.ts',
|
||||
name: 'Français'
|
||||
},
|
||||
],
|
||||
strategy: 'no_prefix',
|
||||
defaultLocale: 'en',
|
||||
langDir: 'locales/',
|
||||
lazy: true,
|
||||
seo: true,
|
||||
vueI18n: {
|
||||
fallbackLocale: 'en',
|
||||
},
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import Axios from './Axios'
|
||||
import Head from './Head'
|
||||
import ColorMode from './ColorMode'
|
||||
import Tailwind from './Tailwind'
|
||||
import Translation from './Translation'
|
||||
import Content from './Content'
|
||||
import Robots from './Robots'
|
||||
import SiteMap from "./SiteMap";
|
||||
import Redirect from "./Redirect";
|
||||
|
||||
export { Axios, Head, ColorMode, Tailwind, Translation, Content, Robots, SiteMap, Redirect }
|
||||
@@ -1,63 +0,0 @@
|
||||
---
|
||||
slug: how-i-start
|
||||
title: How did I start development?
|
||||
description: How did I start development? What am I capable of mastering? What will my future be?
|
||||
reading_time: 5
|
||||
tags: ["tags.life"]
|
||||
cover: post-2
|
||||
date: 07-01-2021
|
||||
background: true
|
||||
---
|
||||
## Presentation
|
||||
Many ask me how I started development, what training did I take and why did I start?
|
||||
Here is the article allowing you to discover everything.
|
||||
|
||||
### Summary
|
||||
- How it all began ?
|
||||
- And the web in all this?
|
||||
- What training did I follow?
|
||||
- What am I capable of achieving today?
|
||||
- How do I see my future in this area?
|
||||
- Conclusion
|
||||
|
||||
## 1. How did it all start?
|
||||
Being a video game player and very curious, I inquired about how a video game worked.
|
||||
At that time I was playing Minecraft, so I discovered the existence of development and my first programming language: **Java**.
|
||||
So I wanted to add my personal touch and my creativity to the community. Therefore, I learned to use this language, the syntax and all that goes with it.
|
||||
So I installed my first development environment and started with very small projects.
|
||||
|
||||
## 2. And the web in all this?
|
||||
It was much later that I became aware of the vastness of the web domain. As I got really interested in this new field,
|
||||
So I learned new programming languages: **JavaScript**, **Html** and **Css**.
|
||||
These languages were much easier to learn because I had a good foundation in programming. I trained as much in `Front` development as in` Back` development.
|
||||
The `Front` results in the interface of the application visible by a user and the` Back` by the part invisible and inaccessible by a user.
|
||||
|
||||
## 3. What training did I take?
|
||||
When I started, I took a course on [OpenClassrooms](https://openclassrooms.com) to learn Java syntax.
|
||||
In addition, I bought myself a big book, very big 400-page book called `Programming in Java`. I acquired new functionalities such as the principles of object programming for example.
|
||||
Today, I mostly learn on my own using the Internet and development discord servers.
|
||||
Recently, I have been taking training on [Udemy](https://udemy.com) in particular to learn **Go** and **Docker**.
|
||||
Finally, I also use [Youtube](https://youtube.com) to follow more or less technical tutorials.
|
||||
|
||||
## 4. What am I able to achieve today
|
||||
Currently, I am able to do entire web applications, both the `Back` and the `Front`. As mobile and office applications are based on the same technologies,
|
||||
I also know how to develop applications of this type. To see all my skills mastered, please visit my [About](/about) page, in the _Technical Skills_ section.
|
||||
|
||||
## 5. How do I see my future in this field?
|
||||
I am currently asking myself a lot of questions about my future in development and my professional future. So I attend a lot of computer conferences and do a lot of research.
|
||||
Lately, I learned about an area that I knew only vaguely. It was a very great interest that immediately developed for this area because it meets all my expectations,
|
||||
and I think I will thrive in this area a lot!
|
||||
|
||||
## 6. Conclusion
|
||||
Now you know everything about my beginning and my journey. I hope I have answered all of your questions and that you know how you can start your own journey!
|
||||
I am available for all your additional questions!
|
||||
|
||||
## Information
|
||||
Here are various links of development discord servers with an active community:
|
||||
- [ItsAlexousd](https://discord.gg/HE4UeBGvGA)
|
||||
- [La Meute](https://discord.gg/TzJJ4KVGDd)
|
||||
- [ArtDanjProduction](https://discord.gg/rEzmnWSp3V) (Brand-new server)
|
||||
|
||||
In addition, I would like to thank **\_RealAlpha\_** and **Freeze** (and all the others) who answered all my questions and with whom I share a great passion!
|
||||
I started the web efficiently thanks to Freeze, thanks to you 😉
|
||||
They are very active on discord servers and will be able to help you with Java and Web development.
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
slug: new-version-new-website
|
||||
title: Opening of the new version of my site!
|
||||
description: After long months of development, here is version 2 of my site!
|
||||
reading_time: 2
|
||||
tags: ["tags.dev"]
|
||||
cover: post-1
|
||||
date: 13-12-2020
|
||||
background: false
|
||||
---
|
||||
|
||||
## Presentation
|
||||
|
||||
After long months of development, I have the honor to present you the brand new version of my site.
|
||||
What's new ? What techniques were used ? Everything will be detailed in this article.
|
||||
|
||||
### Summary:
|
||||
- Why a new version?
|
||||
- Why was it so long?
|
||||
- What does this new version offer?
|
||||
- What technologies are used?
|
||||
- Conclusion
|
||||
|
||||
## 1. Why a new version?
|
||||
|
||||
You should know that I have discovered lots of new technologies concerning web development.
|
||||
Indeed, it is an area that I have always wanted to discover. So I started a year ago to release my site, its first version.
|
||||
Being new to this field, the code quickly became complicated to maintain and is not flexible at all.
|
||||
These constraints meant that I could not update it often and when I wanted.
|
||||
In addition, having more experience in this field, I wanted to improve the design of my site by making it more
|
||||
editable and improving the code.
|
||||
|
||||
## 2. Why was it so long?
|
||||
|
||||
I am currently in Terminale générale, which is why I have a lot of homework that takes time
|
||||
staff that I prefer to devote rather than to development. I am often under pressure because of this new
|
||||
Baccalaureate, where all marks count towards the final Baccalaureate mark.
|
||||
I don't really have a creative mind, so I try to be as satisfied as possible with the end result of the
|
||||
design of my site. I also discovered new technologies, yes again, which took a while
|
||||
learning before rushing headlong into the code. I tried to be more organized in the code,
|
||||
to save time, as I had little.
|
||||
|
||||
## 3. What does this new version offer?
|
||||
|
||||
This new version offers many more features than the previous version:
|
||||
|
||||
- Better mobile rendering 📱
|
||||
- A day module 🌞 and a night module 🌚
|
||||
- A multi-language site 🌍
|
||||
- A dynamization of the content ⚙
|
||||
- A blog ✒
|
||||
- A portfolio 🎓
|
||||
- A personal CV ✉
|
||||
- A better point of contact 📌
|
||||
|
||||
## 4. What technologies are used?
|
||||
|
||||
In this version, I used several technologies:
|
||||
|
||||
- NuxtJs for server-side rendering
|
||||
- VueJs for user interface
|
||||
- TailwindCss & Sass for style
|
||||
- NuxtJs / Content for all content
|
||||
|
||||
## 5. Conclusion
|
||||
|
||||
To conclude, I am very satisfied with the result of this new version, with its features.
|
||||
I'll let you visit the rest of the site and give me your opinion!
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
slug: how-i-start
|
||||
title: Comment ai-je commencé le développement ?
|
||||
description: Comment ai-je commencé le développement ? Que suis-je capable de maitriser ? Quel sera mon futur ?
|
||||
reading_time: 5
|
||||
tags: ["tags.life"]
|
||||
cover: post-2
|
||||
date: 07-01-2021
|
||||
background: false
|
||||
---
|
||||
|
||||
## Présentation
|
||||
Beaucoup me demandent comment ai-je commencé le développement, quelle formation ai-je suivi et pourquoi avoir commencé ?
|
||||
Voici donc l'article vous permettant de tout découvrir.
|
||||
|
||||
### Sommaire
|
||||
- Comment tout a commencé ?
|
||||
- Et le web dans tout ca ?
|
||||
- Quelles formations ai-je suivi ?
|
||||
- Que suis-je capable de realise aujourd'hui ?
|
||||
- Comment envisage-je mon futur dans ce domaine ?
|
||||
- Conclusion
|
||||
|
||||
## 1. Comment tout a commencé ?
|
||||
Etant un joueur de jeux-vidéos et tres curieux, je me suis renseigné sur comment un jeu-vidéo fonctionnait.
|
||||
À ce moment-là je jouais à Minecraft, j'ai donc découvert l'existence du développement et de mon premier langage de programmation : le **Java**.
|
||||
Je voulais donc ajouter ma touche personnelle et ma créativité a la communauté. C'est pourquoi, j'ai appris à utiliser ce langage, la syntaxe et tous ce qui va avec.
|
||||
J'ai donc installé mon premier environnement de développement et j'ai débuté avec de tous petits projets.
|
||||
|
||||
## 2. Et le web dans tout ca ?
|
||||
C'est bien plus tard que j'ai pris connaissance de l'immensité du domaine du web. Comme je me suis vraiment intéressé à ce nouveau domaine,
|
||||
j'ai donc appris de nouveaux langages de programmation : **JavaScript**, **Html** et **Css**.
|
||||
Ces langages étaient beaucoup plus simples à apprendre car je possédais de bonnes bases dans la programmation. Je me suis autant formé dans le développement `Front` que dans le développement `Back`.
|
||||
Le `Front` se traduit par l'interface visible de l'application par un utilisateur et le `Back` par la partie invisible et inaccessible par un utilisateur.
|
||||
|
||||
## 3. Quelles formations ai-je suivi ?
|
||||
À mon commencement, j'ai suivi une formation sur [OpenClassrooms](https://openclassrooms.com) pour apprendre la syntaxe du Java.
|
||||
De plus, je me suis acheté un gros livre, tres gros livre de 400 pages nommé `La programmation en Java`. J'ai acquis de nouvelles fonctionnalités comme les principes de la programmation objet par exemple.
|
||||
Aujourd'hui, j'apprends majoritairement en autodidacte à l'aide d'Internet et de serveurs discords de développement.
|
||||
Et depuis peu, je suis des formations sur [Udemy](https://udemy.com) notamment pour apprendre **Go** et **Docker**.
|
||||
Enfin, j'utilise également [Youtube](https://youtube.com) pour suivre des tutoriels plus ou moins techniques.
|
||||
|
||||
## 4. Que suis-je capable de réaliser aujourd'hui
|
||||
Actuellement, je suis capable de réaliser des applications Web en entier, à la fois le `Back` et le `Front`. Comme les applications mobiles et bureautiques se basent sur les memes technologies,
|
||||
je sais également développer des applications de ce type. Pour voir toutes mes compétences maitrisées, n'hésitez pas à visiter ma page [A propos](/about), dans la partie _Compétences Techniques_.
|
||||
|
||||
## 5. Comment envisage-je mon futur dans ce domaine ?
|
||||
Je me pose actuellement beaucoup de questions sur mon futur dans le développement et mon futur professionnel. J'assiste donc à de nombreuses conférences informatiques et je fais beaucoup de recherches.
|
||||
Dernièrement, j'ai pris connaissance d'un domaine que je ne connaissais que vaguement. C'est un tres grand intérêt qui s'est tout de suite développé pour ce domaine car il remplit toutes mes attentes
|
||||
et je pense beaucoup m'épanouir dans ce domaine !
|
||||
|
||||
## 6. Conclusion
|
||||
Maintenant, vous connaissez tout sur mon commencement et mon parcours. J'espère avoir répondu à toutes vos questions et que vous savez comment vous pouvez commencer votre propre parcours !
|
||||
Je suis disponible pour toutes vos questions supplémentaires !
|
||||
|
||||
## Informations
|
||||
Voici différents liens de serveurs discord de développement avec une communauté active :
|
||||
- [ItsAlexousd](https://discord.gg/HE4UeBGvGA)
|
||||
- [La Meute](https://discord.gg/TzJJ4KVGDd)
|
||||
- [ArtDanjProduction](https://discord.gg/rEzmnWSp3V) (Serveur tout neuf)
|
||||
|
||||
De plus, je tiens énormément à remercier **\_RealAlpha\_** et **Freeze** (et tous les autres) qui ont su répondre à toutes mes questions et avec qui je partage une tres grande passion !
|
||||
J'ai commencé efficacement le Web grace a Freeze, merci à toi 😉
|
||||
Ils sont tres actifs sur les serveurs discord et sauront vous aider pour le développement Java et Web
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
slug: new-version-new-website
|
||||
title: Ouverture de la nouvelle version de mon site !
|
||||
description: Après de long mois de développement, voici la version 2 de mon site !
|
||||
reading_time: 2
|
||||
tags: ["tags.dev"]
|
||||
cover: post-1
|
||||
date: 13-12-2020
|
||||
background: false
|
||||
---
|
||||
|
||||
## Présentation
|
||||
Après de long mois de développement, j'ai l'honneur de vous présenter la toute nouvelle version de mon site.
|
||||
Quelles sont les nouveautés ? Quelles sont les techniques utilisées ? Tout sera détaillé dans cet article.
|
||||
|
||||
### Sommaire :
|
||||
- Pourquoi une nouvelle version ?
|
||||
- Pourquoi c'était si long ?
|
||||
- Que propose cette nouvelle version ?
|
||||
- Quelles sont les technologies utilisées ?
|
||||
- Conclusion
|
||||
|
||||
## 1. Pourquoi une nouvelle version ?
|
||||
Il faut savoir que j'ai découvert pleins de nouvelles technologies concernant le développement web.
|
||||
En effet, c'est un domaine que j'ai toujours voulu découvrir. Je me suis donc lancé il y a un an pour sortir mon site, sa première version.
|
||||
Étant nouveau dans ce domaine, le code est vite devenu compliqué à maintenir et n'est pas du tout modulable.
|
||||
Ces contraintes font que je ne pouvais pas le mettre à jour souvent et quand je voulais.
|
||||
De plus, ayant plus d'expérience dans ce domaine, j'ai voulu améliorer le design de mon site en le rendant plus
|
||||
modifiable et en améliorant le code.
|
||||
|
||||
## 2. Pourquoi c'était si long ?
|
||||
Je suis actuellement en classe de Terminale générale, c'est donc pourquoi j'ai beaucoup de devoirs qui me demandent du temps
|
||||
personnel que je préfère consacrer plutôt qu'au développement. Je suis souvent sous pression à cause de ce nouveau
|
||||
Baccalauréat, où toutes les notes comptent pour la note finale du Baccalauréat.
|
||||
Je n'ai pas réellement un esprit créatif, je cherche donc à être le plus satisfait possible du résultat final du
|
||||
design de mon site. J'ai également découvert de nouvelles technologies, encore oui, qui m'ont demandées un temps
|
||||
d'apprentissage avant de foncer tête baissée dans le code. J'ai cherché à être plus organisé dans le code,
|
||||
pour gagner du temps, comme je n'en n'avait peu.
|
||||
|
||||
## 3. Que propose cette nouvelle version ?
|
||||
Cette nouvelle version propose beaucoup plus de fonctionnalités que la version précédente :
|
||||
|
||||
- Un meilleur rendu mobile 📱
|
||||
- Un module jour 🌞 et un module nuit 🌚
|
||||
- Un site multi-langage 🌍
|
||||
- Une dynamisation du contenu ⚙
|
||||
- Un blog ✒
|
||||
- Un portfolio 🎓
|
||||
- Un Cv personnel ✉
|
||||
- Un meilleur point de contact 📌
|
||||
|
||||
## 4. Quelles sont les technologies utilisées ?
|
||||
Dans cette version, j'ai utilisé plusieurs technologies :
|
||||
|
||||
- NuxtJs pour le rendu côté serveur
|
||||
- VueJs pour l'interface de l'utilisateur
|
||||
- TailwindCss & Sass pour le style
|
||||
- NuxtJs/Content pour tout le contenu
|
||||
|
||||
## 5. Conclusion
|
||||
Pour conclure, je suis très satisfait du résultat de cette nouvelle version, de ses fonctionnalités.
|
||||
Je vous laisse visiter le reste du site et me donner votre avis !
|
||||
@@ -1,34 +0,0 @@
|
||||
[
|
||||
{
|
||||
"slug": "erisium",
|
||||
"title": "experiences.erisium",
|
||||
"company": "Erisium",
|
||||
"location": "Remote",
|
||||
"begin_date": "02-2019",
|
||||
"end_date": "11-2020"
|
||||
},
|
||||
{
|
||||
"slug": "freelance",
|
||||
"title": "experiences.freelance",
|
||||
"company": "ArtDanjProduction",
|
||||
"location": "France",
|
||||
"begin_date": "09-2015",
|
||||
"end_date": "Today"
|
||||
},
|
||||
{
|
||||
"slug": "idemia",
|
||||
"title": "experiences.idemia",
|
||||
"company": "Idemia, Courbevoie",
|
||||
"location": "France",
|
||||
"begin_date": "06-2019",
|
||||
"end_date": "06-2019"
|
||||
},
|
||||
{
|
||||
"slug": "la-salle-a-manger",
|
||||
"title": "experiences.lsam",
|
||||
"company": "La Salle à manger, Boulogne Billancourt",
|
||||
"location": "France",
|
||||
"begin_date": "04-2018",
|
||||
"end_date": "04-2018"
|
||||
}
|
||||
]
|
||||
@@ -1,26 +0,0 @@
|
||||
[
|
||||
{
|
||||
"slug": "freelance",
|
||||
"title": "formations.freelance.title",
|
||||
"description": "formations.freelance.description",
|
||||
"location": "Remote",
|
||||
"begin_date": "04-2015",
|
||||
"end_date": "Today"
|
||||
},
|
||||
{
|
||||
"slug": "dnb",
|
||||
"title": "formations.dnb.title",
|
||||
"description": "formations.dnb.description",
|
||||
"location": "France",
|
||||
"begin_date": "09-2017",
|
||||
"end_date": "09-2018"
|
||||
},
|
||||
{
|
||||
"slug": "bac",
|
||||
"title": "formations.bac.title",
|
||||
"description": "formations.bac.description",
|
||||
"location": "France",
|
||||
"begin_date": "09-2020",
|
||||
"end_date": "Today"
|
||||
}
|
||||
]
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"age": 17,
|
||||
"hiring": {
|
||||
"status": "available",
|
||||
"color": "green"
|
||||
}
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
[
|
||||
{
|
||||
"title": "Java",
|
||||
"color": "blueGray",
|
||||
"cover": "Java",
|
||||
"slug": "java"
|
||||
},
|
||||
{
|
||||
"title": "TypeScript",
|
||||
"color": "cyan",
|
||||
"cover": "TypeScript",
|
||||
"slug": "typescript"
|
||||
},
|
||||
{
|
||||
"title": "JavaScript",
|
||||
"color": "yellow",
|
||||
"cover": "JavaScript",
|
||||
"slug": "javascript"
|
||||
},
|
||||
{
|
||||
"title": "Go",
|
||||
"color": "cyan",
|
||||
"cover": "GoLang",
|
||||
"slug": "go"
|
||||
},
|
||||
{
|
||||
"title": "NuxtJs",
|
||||
"color": "emerald",
|
||||
"cover": "NuxtJs",
|
||||
"slug": "nuxtjs"
|
||||
},
|
||||
{
|
||||
"title": "VueJs",
|
||||
"color": "emerald",
|
||||
"cover": "VueJs",
|
||||
"slug": "vueJs"
|
||||
},
|
||||
{
|
||||
"title": "AdonisJs",
|
||||
"color": "black",
|
||||
"cover": "AdonisJs",
|
||||
"slug": "adonisjs"
|
||||
},
|
||||
{
|
||||
"title": "Html",
|
||||
"color": "orange",
|
||||
"cover": "Html",
|
||||
"slug": "html"
|
||||
},
|
||||
{
|
||||
"title": "Css",
|
||||
"color": "lightBlue",
|
||||
"cover": "Css",
|
||||
"slug": "css"
|
||||
},
|
||||
{
|
||||
"title": "NodeJs",
|
||||
"color": "lime",
|
||||
"cover": "NodeJs",
|
||||
"slug": "nodejs"
|
||||
},
|
||||
{
|
||||
"title": "ElectronJs",
|
||||
"color": "teal",
|
||||
"cover": "ElectronJs",
|
||||
"slug": "electronjs"
|
||||
},
|
||||
{
|
||||
"title": "Git",
|
||||
"color": "orange",
|
||||
"cover": "Git",
|
||||
"slug": "git"
|
||||
},
|
||||
{
|
||||
"title": "MariaDB",
|
||||
"color": "blue",
|
||||
"cover": "MariaDB",
|
||||
"slug": "mariadb"
|
||||
},
|
||||
{
|
||||
"title": "RabbitMQ",
|
||||
"color": "orange",
|
||||
"cover": "RabbitMQ",
|
||||
"slug": "rabbitmq"
|
||||
},
|
||||
{
|
||||
"title": "Redis",
|
||||
"color": "red",
|
||||
"cover": "Redis",
|
||||
"slug": "redis"
|
||||
},
|
||||
{
|
||||
"title": "Sass",
|
||||
"color": "rose",
|
||||
"cover": "Sass",
|
||||
"slug": "sass"
|
||||
},
|
||||
{
|
||||
"title": "TailwindCss",
|
||||
"color": "teal",
|
||||
"cover": "TailwindCss",
|
||||
"slug": "tailwind"
|
||||
},
|
||||
{
|
||||
"title": "Docker",
|
||||
"color": "cyan",
|
||||
"cover": "Docker",
|
||||
"slug": "docker"
|
||||
}
|
||||
]
|
||||
@@ -1,11 +0,0 @@
|
||||
[
|
||||
{
|
||||
"slug": "tags.dev"
|
||||
},
|
||||
{
|
||||
"slug": "tags.tech"
|
||||
},
|
||||
{
|
||||
"slug": "tags.life"
|
||||
}
|
||||
]
|
||||
@@ -1,67 +0,0 @@
|
||||
[
|
||||
{
|
||||
"slug": "erisium",
|
||||
"title": "Erisium",
|
||||
"description": "works.erisium",
|
||||
"url": "https://erisium.com",
|
||||
"cover": "erisium",
|
||||
"color": "fuchsia",
|
||||
"skills": [
|
||||
"java",
|
||||
"git",
|
||||
"redis",
|
||||
"mariadb"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "artsite",
|
||||
"title": "ArtSite",
|
||||
"description": "works.artsite",
|
||||
"url": "https://arthurdanjou.fr",
|
||||
"cover": "artsite",
|
||||
"color": "trueGray",
|
||||
"skills": [
|
||||
"typescript",
|
||||
"nuxtjs",
|
||||
"vuejs",
|
||||
"git",
|
||||
"tailwindcss",
|
||||
"sass",
|
||||
"html",
|
||||
"css",
|
||||
"nodejs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "artapi",
|
||||
"title": "ArtApi",
|
||||
"description": "works.artapi",
|
||||
"url": "https://api.arthurdanjou.fr",
|
||||
"cover": "artapi",
|
||||
"color": "trueGray",
|
||||
"skills": [
|
||||
"typescript",
|
||||
"adonisjs",
|
||||
"git",
|
||||
"docker",
|
||||
"nodejs",
|
||||
"redis",
|
||||
"mariadb"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "artclick",
|
||||
"title": "ArtClick",
|
||||
"description": "works.artclick",
|
||||
"url": "https://artdanj.to",
|
||||
"cover": "artclick",
|
||||
"color": "trueGray",
|
||||
"skills": [
|
||||
"adonisjs",
|
||||
"git",
|
||||
"redis",
|
||||
"mariadb",
|
||||
"typescript"
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -1,79 +0,0 @@
|
||||
version: "3"
|
||||
|
||||
networks:
|
||||
proxy:
|
||||
name: proxy
|
||||
external: true
|
||||
internal:
|
||||
name: internal
|
||||
external: false
|
||||
|
||||
services:
|
||||
artsite:
|
||||
image: artsite:latest
|
||||
container_name: artsite
|
||||
labels:
|
||||
- traefik.http.routers.artsite.rule=Host(`arthurdanjou.fr`)
|
||||
- traefik.http.routers.artsite.tls=true
|
||||
- traefik.http.routers.artsite.tls.certresolver=lets-encrypt
|
||||
- traefik.docker.network=proxy
|
||||
- traefik.port=443
|
||||
ports:
|
||||
- 3333:3333
|
||||
networks:
|
||||
- internal
|
||||
- proxy
|
||||
depends_on:
|
||||
- artapi
|
||||
artapi:
|
||||
image: artapi:latest
|
||||
container_name: artapi
|
||||
labels:
|
||||
- traefik.http.routers.artapi.rule=Host(`api.arthurdanjou.fr`)
|
||||
- traefik.http.routers.artapi.tls=true
|
||||
- traefik.http.routers.artapi.tls.certresolver=lets-encrypt
|
||||
- traefik.docker.network=proxy
|
||||
- traefik.port=443
|
||||
ports:
|
||||
- 5555:5555
|
||||
networks:
|
||||
- internal
|
||||
- proxy
|
||||
depends_on:
|
||||
- mariadb
|
||||
- redis
|
||||
mariadb:
|
||||
image: mariadb:10.5.8-focal
|
||||
container_name: mariadb
|
||||
environment:
|
||||
MYSQL_ROOT_PASSWORD:
|
||||
ports:
|
||||
- 3306:3306
|
||||
networks:
|
||||
- internal
|
||||
- proxy
|
||||
labels:
|
||||
- traefik.tcp.routers.sql.rule=HostSNI(`sql.arthurdanjou.fr`)
|
||||
- traefik.tcp.routers.sql.tls=true
|
||||
- traefik.tcp.routers.sql.tls.certresolver=lets-encrypt
|
||||
- traefik.docker.network=proxy
|
||||
- traefik.port=3306
|
||||
volumes:
|
||||
- "/root/mariadb/data:/var/lib/mysql"
|
||||
redis:
|
||||
image: redis:6.0.10
|
||||
container_name: redis
|
||||
command: redis-server --requirepass ${REDIS_PASSWORD}
|
||||
ports:
|
||||
- 6379:6379
|
||||
networks:
|
||||
- internal
|
||||
- proxy
|
||||
labels:
|
||||
- traefik.tcp.routers.redis.rule=HostSNI(`redis.arthurdanjou.fr`)
|
||||
- traefik.tcp.routers.redis.tls=true
|
||||
- traefik.tcp.routers.redis.tls.certresolver=lets-encrypt
|
||||
- traefik.docker.network=proxy
|
||||
- traefik.port=6379
|
||||
volumes:
|
||||
- "/root/redis/data:/data"
|
||||
27
index.d.ts
vendored
Normal file
27
index.d.ts
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
import { NuxtAxiosInstance } from '@nuxtjs/axios'
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
$axios: NuxtAxiosInstance
|
||||
i18n: any
|
||||
}
|
||||
}
|
||||
|
||||
declare module '@nuxt/types' {
|
||||
interface NuxtAppOptions {
|
||||
$axios: NuxtAxiosInstance
|
||||
$i18n: any
|
||||
}
|
||||
|
||||
interface Context {
|
||||
$axios: NuxtAxiosInstance
|
||||
$i18n: any
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'vuex/types/index' {
|
||||
interface Store<S> {
|
||||
$axios: NuxtAxiosInstance
|
||||
i18n: any
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="dark:bg-dark-900 dark:text-white font-sans">
|
||||
<Header />
|
||||
<Nuxt class="z-10 pt-16 lg:pt-24 content" />
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "~/components/Header";
|
||||
import Footer from "~/components/Footer";
|
||||
export default {
|
||||
components: {Footer, Header},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<main class="error w-full px-5 xl:px-64">
|
||||
<div class="mt-24 w-full h-full flex items-center justify-center">
|
||||
<div class="flex flex-col items-center md:mb-20">
|
||||
<div class="flex">
|
||||
<div class="h-16 w-16 mr-4">
|
||||
<svg class="icon inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mb-12 lining-nums">
|
||||
<div class="mb-2">
|
||||
<p v-if="error.statusCode === 404" class="text-3xl md:text-6xl dark:text-white font-bold">
|
||||
{{ $t('error.error').toUpperCase() }} 404
|
||||
</p>
|
||||
<p v-else class="text-3xl md:text-6xl dark:text-white font-bold">
|
||||
{{ $t('error.error').toUpperCase() }} 500
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p v-if="error.statusCode === 404" class="text-xl md:text-2xl text-gray-900 dark:text-dark-100">
|
||||
{{ $t('error.no_page') }}
|
||||
</p>
|
||||
<p v-else class="text-xl md:text-2xl text-gray-900 dark:text-dark-100">
|
||||
{{ $t('error.internal') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nuxt-link class="home-btn" to="/">
|
||||
<div class="w-full py-4 px-8 md:py-8 md:px-16 font-bold hover:bg-red-500 duration-500 rounded">
|
||||
{{ $t('error.back') }}
|
||||
<svg class="inline arrow-img" 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>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "error",
|
||||
props: ['error'],
|
||||
head: {
|
||||
title: 'Error - Arthur Danjou'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
|
||||
.home-btn:hover .arrow-img {
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
|
||||
.arrow-img {
|
||||
transform: translate(3px, -3px);
|
||||
transition: .4s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
227
locales/en-US.ts
227
locales/en-US.ts
@@ -1,227 +0,0 @@
|
||||
export default {
|
||||
header: {
|
||||
title: 'Arthur Danjou',
|
||||
home: 'Home',
|
||||
about: 'About',
|
||||
blog: 'Blog',
|
||||
work: 'Work',
|
||||
contact: 'Contact'
|
||||
},
|
||||
|
||||
footer: {
|
||||
find_me: 'Find me on :',
|
||||
separator: 'et by',
|
||||
links_click: '(Clic it\'s free 🔗)',
|
||||
credits: 'Developed and designed with ❤ using',
|
||||
credits_separator: 'by',
|
||||
copyrights: '© Copyright {date} - All rights reserved'
|
||||
},
|
||||
|
||||
error: {
|
||||
back: 'Go to home',
|
||||
no_page: 'The page you are looking for does not exist',
|
||||
internal: 'Internal error',
|
||||
error: 'Error'
|
||||
},
|
||||
|
||||
part: {
|
||||
about: 'About',
|
||||
blog: 'My Blog',
|
||||
work: 'My Work',
|
||||
contact: 'Contact me',
|
||||
about_description: 'Learn more about me, how I work and who I am',
|
||||
blog_description: 'I write articles about my life, development and my passions',
|
||||
work_description: 'Discover my creations to get an idea of my skills',
|
||||
contact_description: 'Find all my social networks to contact me'
|
||||
},
|
||||
|
||||
home: {
|
||||
banner: {
|
||||
role: 'Developer & student',
|
||||
hello: 'Hello, I am',
|
||||
description: 'I am a {age} year old self-taught developer. I live in Paris 🇫🇷. I love creating more or less useful applications and software. I use modern technologies to get the best possible result ✨',
|
||||
},
|
||||
},
|
||||
|
||||
blog: {
|
||||
read: {
|
||||
back: 'Go back',
|
||||
thanks: 'Thanks for reading to the end!',
|
||||
time: 'Reading'
|
||||
},
|
||||
tweet: 'I love a new post from @ArthurDanj, check it out here:',
|
||||
no_posts: 'Unfortunately there are no items available yet. Come back later 😉',
|
||||
tags: {
|
||||
search: 'Are you looking for a specific type of article? Test the search by tag 🏷',
|
||||
back: 'Return to all articles',
|
||||
current: 'List of articles with the tag \'{tag}\':'
|
||||
},
|
||||
pagination: {
|
||||
prev: 'Previous',
|
||||
next: 'Next'
|
||||
}
|
||||
},
|
||||
|
||||
about: {
|
||||
banner: {
|
||||
hello: 'Hello, I am',
|
||||
1: 'I am a young creative developer who loves to tinker and touch everything! I am very interested in new technologies, development and IT.',
|
||||
2: 'I love sharing my knowledge and helping others through lives on Twitchs, technical articles on my blog, open-source projects or by reviewing community code. As long as I share my passions, I will continue to do this.',
|
||||
3: 'I am able to quickly learn new technologies to meet the needs of different projects. I often identify the need for new systems or tools to improve workflow efficiency. I am always motivated by a challenge and like to be well organized to produce consistent results.',
|
||||
},
|
||||
title: {
|
||||
skills: 'Skills',
|
||||
interests: 'Interests',
|
||||
technologies: 'Technologies',
|
||||
languages: 'Languages',
|
||||
formations: 'Formations',
|
||||
experiences: 'Experiences'
|
||||
},
|
||||
interests: {
|
||||
dev: 'Development',
|
||||
devops: 'DevOps',
|
||||
startups: 'Startups & innovative companies',
|
||||
sysadmin: 'System administration',
|
||||
trips: 'Trip',
|
||||
moto: 'Motorbike'
|
||||
},
|
||||
languages: {
|
||||
fr: 'French',
|
||||
en: 'English',
|
||||
native: 'Native',
|
||||
fluent: 'Fluent'
|
||||
},
|
||||
cv: 'Download my CV',
|
||||
environment: 'My Environment',
|
||||
env: {
|
||||
description: 'My development environment makes it possible to gain in productivity. Indeed, I organize myself in this way to always optimize my time for reflection and development. Here is a list of all my software that I use on a daily basis and my setup.',
|
||||
ide: 'Text editors',
|
||||
apps: 'Apps & Softwares',
|
||||
hosting: 'Hosting & Co',
|
||||
setup: 'Office setup'
|
||||
},
|
||||
ide: {
|
||||
java: 'Java editor',
|
||||
web: 'Web editor',
|
||||
go: 'Go editor',
|
||||
db: 'Databases editor',
|
||||
all: 'All-In-One'
|
||||
},
|
||||
police: 'Font',
|
||||
console: 'Console',
|
||||
wsl_2: 'WSL 2',
|
||||
email_client: 'Email Client',
|
||||
vpn_client: 'VPN Client',
|
||||
ftp_client: 'FTP Client',
|
||||
web_client: 'Web Browser',
|
||||
design_tool: 'Creation / Graphics',
|
||||
communication_tool: 'Communication tool',
|
||||
organisation_tool: 'Organisation tool',
|
||||
hosting: {
|
||||
vps: 'VPS hosting',
|
||||
ndd: 'Domain name'
|
||||
},
|
||||
setup: {
|
||||
desk: 'Desktop',
|
||||
phone: 'Phone',
|
||||
computer: 'Desktop computer',
|
||||
screen: 'Screen',
|
||||
keyboard: 'Keyboard',
|
||||
mouse: 'Mouse',
|
||||
headphone: 'Headphone',
|
||||
microphone: 'Headset'
|
||||
}
|
||||
},
|
||||
|
||||
work: {
|
||||
no_work: 'Unfortunately there are no projects available yet. Come back later 😉',
|
||||
description: 'Here are the different projects I was able to participate in in my past!',
|
||||
tech_used: 'Lists of skills used',
|
||||
go_back: 'Go back'
|
||||
},
|
||||
|
||||
contact: {
|
||||
newsletter: {
|
||||
title: 'Software & Tech Newsletter 📬',
|
||||
description: 'Subscribe to not miss my next offers, my next articles and my new projects.',
|
||||
unfollow: 'No spam. Unsubscribe whenever you want'
|
||||
},
|
||||
form: {
|
||||
name: 'Name',
|
||||
mail: 'Mail address',
|
||||
submit: 'Subscribe',
|
||||
error: 'Error in the form!',
|
||||
success: 'Registration confirmed for {email}!'
|
||||
},
|
||||
how_to: {
|
||||
title: 'How to contact me? ✉',
|
||||
description: 'Please don\'t hesitate to contact me if you have any questions, think we could work together or if you just want to chat ✌️'
|
||||
},
|
||||
available: {
|
||||
title: 'Am I available? 🚩',
|
||||
description: 'This status will be updated in real time to let you know if I am available for work.',
|
||||
start: 'I am currently',
|
||||
end: 'for work'
|
||||
}
|
||||
},
|
||||
|
||||
date: {
|
||||
today: 'Today'
|
||||
},
|
||||
copied: 'Copied',
|
||||
month: {
|
||||
'01': 'January',
|
||||
'02': 'February',
|
||||
'03': 'March',
|
||||
'04': 'April',
|
||||
'05': 'May',
|
||||
'06': 'June',
|
||||
'07': 'July',
|
||||
'08': 'August',
|
||||
'09': 'September',
|
||||
10: 'October',
|
||||
11: 'November',
|
||||
12: 'December',
|
||||
},
|
||||
hiring: {
|
||||
status: {
|
||||
not_available: 'not available',
|
||||
available: 'available'
|
||||
}
|
||||
},
|
||||
|
||||
tags: {
|
||||
life: 'Life',
|
||||
dev: 'Dev',
|
||||
tech: 'Tech'
|
||||
},
|
||||
|
||||
experiences: {
|
||||
erisium: 'Junior Developer',
|
||||
freelance: 'FullStack Software & Web FullStack Development',
|
||||
idemia: 'Discovery of the IT sector & the data-center',
|
||||
lsam: 'Room cleaning - Waiter - Taking orders - Welcoming customers'
|
||||
},
|
||||
|
||||
formations: {
|
||||
freelance: {
|
||||
title: 'Self-learning',
|
||||
description: 'Java, TypeScript, Go, etc...'
|
||||
},
|
||||
dnb: {
|
||||
title: 'Diplôme National du Brevet',
|
||||
description: 'Obtention du Brevet mention Très Bien'
|
||||
},
|
||||
bac: {
|
||||
title: 'Baccalauréat',
|
||||
description: 'General Baccalaureate Physics / Chemistry & Mathematics'
|
||||
}
|
||||
},
|
||||
|
||||
works: {
|
||||
artapi: 'ArtApi is my personal API connected to my various instances',
|
||||
artsite: 'ArtSite is my personal website creating a single point of contact',
|
||||
erisium: 'Erisium is a french minecraft mini-game server.',
|
||||
artclick: 'ArtClick is my url shortener'
|
||||
}
|
||||
}
|
||||
227
locales/fr-FR.ts
227
locales/fr-FR.ts
@@ -1,227 +0,0 @@
|
||||
export default {
|
||||
header: {
|
||||
title: 'Arthur Danjou',
|
||||
home: 'Accueil',
|
||||
about: 'Moi',
|
||||
blog: 'Blog',
|
||||
work: 'Travail',
|
||||
contact: 'Contact'
|
||||
},
|
||||
|
||||
footer: {
|
||||
find_me: 'Retrouvez moi sur :',
|
||||
separator: 'et par',
|
||||
links_click: '(Clique c\'est gratuit 🔗)',
|
||||
credits: 'Développé et conçu avec ❤ en utilisant',
|
||||
credits_separator: 'par',
|
||||
copyrights: '© Copyright {date} - Tous droits réservés'
|
||||
},
|
||||
|
||||
error: {
|
||||
back: 'Revenir à l\'accueil',
|
||||
no_page: 'La page demandée n\'existe pas',
|
||||
internal: 'Erreur interne',
|
||||
error: 'Erreur'
|
||||
},
|
||||
|
||||
part: {
|
||||
about: 'A Propos',
|
||||
blog: 'Mon Blog',
|
||||
work: 'Mon Travail',
|
||||
contact: 'Me Contacter',
|
||||
about_description: 'Apprenez en plus à mon propos, comment je travaille et qui je suis',
|
||||
blog_description: 'Je rédige des articles concernant ma vie, le développement et mes passions',
|
||||
work_description: 'Découvrez mes créations pour avoir une idée de mes compétences',
|
||||
contact_description: 'Retrouvez tous mes réseaux sociaux pour me contacter'
|
||||
},
|
||||
|
||||
home: {
|
||||
banner: {
|
||||
role: 'Développeur & étudiant',
|
||||
hello: 'Bonjour, je suis',
|
||||
description: 'Je suis un jeune développeur autodidacte de {age} 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 ✨',
|
||||
},
|
||||
},
|
||||
|
||||
blog: {
|
||||
read: {
|
||||
back: 'Retour en arrière',
|
||||
thanks: 'Merci d\'avoir lu jusqu\'au bout !',
|
||||
time: 'Lecture'
|
||||
},
|
||||
tweet: 'J\'aime un nouvel article d\'@ArthurDanj, venez le découvrir ici :',
|
||||
no_posts: 'Malheureusement il n\'y a pas encore d\'articles disponibles. Reviens plus tard 😉',
|
||||
tags: {
|
||||
search: 'Vous recherchez un type d\'article en particulier ? Tester la recherche par tag 🏷',
|
||||
back: 'Revenir à tous les articles',
|
||||
current: 'Liste des articles possédant le tag \'{tag}\' :'
|
||||
},
|
||||
pagination: {
|
||||
prev: 'Précédent',
|
||||
next: 'Suivant'
|
||||
}
|
||||
},
|
||||
|
||||
about: {
|
||||
banner: {
|
||||
hello: 'Bonjour, je suis',
|
||||
1: 'Je suis un jeune développeur créatif qui aime bricoler et toucher à tout ! Je m\'intéresse beaucoup aux nouvelles technologies, au développement et à l\'informatique.',
|
||||
2: 'J\'adore partager mes connaissances et aider les autres à travers des lives sur Twitchs, des articles techniques sur mon blog, des projets open-sources ou encore en relisant du code de la communauté. Tant que je partage mes passions, je continuerai à faire ça.',
|
||||
3: 'Je suis capable d\'apprendre rapidement des nouvelles technologies pour répondre aux besoins des différents projets. J\'identifie souvent le besoin de nouveaux systèmes ou outils pour améliorer l\'efficacité du flux de travail. Je suis toujours motivé par un défi et j\'aime être bien organisé pour produire des résultats cohérents.',
|
||||
},
|
||||
title: {
|
||||
skills: 'Compétences',
|
||||
interests: 'Intérêts',
|
||||
technologies: 'Technologies',
|
||||
languages: 'Langues',
|
||||
formations: 'Formations',
|
||||
experiences: 'Expériences'
|
||||
},
|
||||
interests: {
|
||||
dev: 'Développement',
|
||||
devops: 'DevOps',
|
||||
startups: 'Startups & Entreprises innovantes',
|
||||
sysadmin: 'Administration système',
|
||||
trips: 'Voyage',
|
||||
moto: 'Moto'
|
||||
},
|
||||
languages: {
|
||||
fr: 'Français',
|
||||
en: 'Anglais',
|
||||
native: 'Natal',
|
||||
fluent: 'Courant'
|
||||
},
|
||||
cv: 'Télécharger mon CV',
|
||||
environment: 'Mon Environnement',
|
||||
env: {
|
||||
description: '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.',
|
||||
ide: 'Editeurs de texte',
|
||||
apps: 'Apps & Logiciels',
|
||||
hosting: 'Hébergement',
|
||||
setup: 'Setup bureautique'
|
||||
},
|
||||
ide: {
|
||||
java: 'Editeur Java',
|
||||
web: 'Editeur Web',
|
||||
go: 'Editeur Go',
|
||||
db: 'Editeur Bases de données',
|
||||
all: 'All-In-One'
|
||||
},
|
||||
police: 'Police d\'Ecriture',
|
||||
console: 'Console',
|
||||
wsl_2: 'WSL 2',
|
||||
email_client: 'Client Email',
|
||||
vpn_client: 'Client VPN',
|
||||
ftp_client: 'Client FTP',
|
||||
web_client: 'Navigateur Web',
|
||||
design_tool: 'Création / Graphisme',
|
||||
communication_tool: 'Outil de Communication',
|
||||
organisation_tool: 'Outil d\'Organisation',
|
||||
hosting: {
|
||||
vps: 'Hébergeur VPS',
|
||||
ndd: 'Nom de domaine'
|
||||
},
|
||||
setup: {
|
||||
desk: 'Bureau',
|
||||
phone: 'Téléphone',
|
||||
computer: 'Ordinateur fixe',
|
||||
screen: 'Ecran',
|
||||
keyboard: 'Clavier',
|
||||
mouse: 'Souris',
|
||||
headphone: 'Ecouteurs',
|
||||
microphone: 'Casque / Micro'
|
||||
}
|
||||
},
|
||||
|
||||
work: {
|
||||
no_work: 'Malheureusement il n\'y a pas encore de projets disponibles. Reviens plus tard 😉',
|
||||
description: 'Voici les différents projets auxquels j\'ai pu participer dans mon passé !',
|
||||
tech_used: 'Listes des compétences utilisées',
|
||||
go_back: 'Retour en arrière'
|
||||
},
|
||||
|
||||
contact: {
|
||||
newsletter: {
|
||||
title: 'Software & Tech Newsletter 📬',
|
||||
description: 'Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets.',
|
||||
unfollow: 'Pas de spam. Désabonnement quand vous voulez'
|
||||
},
|
||||
form: {
|
||||
name: 'Prénom',
|
||||
mail: 'Adresse Mail',
|
||||
submit: 'S\'abonner',
|
||||
error: 'Erreur dans le formulaire !',
|
||||
success: 'Inscription confirmée pour {email} !'
|
||||
},
|
||||
how_to: {
|
||||
title: 'Comment me contacter ? ✉',
|
||||
description: 'N\'hésitez pas à me contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous discuter ✌️'
|
||||
},
|
||||
available: {
|
||||
title: 'Suis-je disponible ? 🚩',
|
||||
description: 'Ce status sera mis à jour en temps réel pour vous indiquer si je suis disponible pour du travail.',
|
||||
start: 'Je suis actuellement',
|
||||
end: 'pour du travail'
|
||||
}
|
||||
},
|
||||
|
||||
date: {
|
||||
today: 'Aujourd\'hui'
|
||||
},
|
||||
copied: 'Copié',
|
||||
month: {
|
||||
'01': 'Janvier',
|
||||
'02': 'Février',
|
||||
'03': 'Mars',
|
||||
'04': 'Avril',
|
||||
'05': 'Mai',
|
||||
'06': 'Juin',
|
||||
'07': 'Juillet',
|
||||
'08': 'Août',
|
||||
'09': 'Septembre',
|
||||
10: 'Octobre',
|
||||
11: 'Novembre',
|
||||
12: 'Décembre',
|
||||
},
|
||||
hiring: {
|
||||
status: {
|
||||
not_available: 'non disponible',
|
||||
available: 'disponible'
|
||||
}
|
||||
},
|
||||
|
||||
tags: {
|
||||
life: 'Vie',
|
||||
dev: 'Dev',
|
||||
tech: 'Tech'
|
||||
},
|
||||
|
||||
experiences: {
|
||||
erisium: 'Développeur Junior',
|
||||
freelance: 'Développement FullStack Software & Web FullStack',
|
||||
idemia: 'Découverte du secteur IT & du data-center',
|
||||
lsam: 'Nettoyage de la salle – Serveur – Prise de commandes – Accueil des clients'
|
||||
},
|
||||
|
||||
formations: {
|
||||
freelance: {
|
||||
title: 'Auto-apprentissage',
|
||||
description: 'Java, TypeScript, Go, etc...'
|
||||
},
|
||||
dnb: {
|
||||
title: 'Diplôme National du Brevet',
|
||||
description: 'Obtention du Brevet mention Très Bien'
|
||||
},
|
||||
bac: {
|
||||
title: 'Baccalauréat',
|
||||
description: 'Baccalauréat Général Physique/Chimie & Mathématiques'
|
||||
}
|
||||
},
|
||||
|
||||
works: {
|
||||
artapi: 'ArtApi est mon API personnelle connectée à mes diverses instances.',
|
||||
artsite: 'ArtSite est mon site personnel créant un point de contact unique.',
|
||||
erisium: 'Erisium est un serveur minecraft francophone de mini-jeux.',
|
||||
artclick: 'ArtClick est mon raccourcisseur d\'url'
|
||||
}
|
||||
}
|
||||
@@ -1,57 +1,22 @@
|
||||
import { Axios, Head, ColorMode, Tailwind, Translation, Content, Robots, SiteMap, Redirect } from './config'
|
||||
|
||||
export default {
|
||||
head: Head,
|
||||
|
||||
target: 'server',
|
||||
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 3333
|
||||
},
|
||||
|
||||
css: [
|
||||
],
|
||||
|
||||
plugins: [
|
||||
],
|
||||
import {defineNuxtConfig} from "@nuxtjs/composition-api";
|
||||
import head from './settings/Head'
|
||||
import buildModules from './settings/BuildModules'
|
||||
import modules from './settings/Modules'
|
||||
import build from './settings/Build'
|
||||
import arch from './settings/Arch'
|
||||
import plugins from './settings/Plugins'
|
||||
import css from './settings/Style'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
// Auto import components: https://go.nuxtjs.dev/config-components
|
||||
components: true,
|
||||
|
||||
buildModules: [
|
||||
['@nuxtjs/tailwindcss', Tailwind],
|
||||
['@nuxtjs/color-mode', ColorMode],
|
||||
'nuxt-postcss8'
|
||||
],
|
||||
head,
|
||||
modules,
|
||||
...arch,
|
||||
build,
|
||||
plugins,
|
||||
css,
|
||||
buildModules,
|
||||
|
||||
modules: [
|
||||
['@nuxtjs/axios', Axios],
|
||||
['nuxt-i18n', Translation],
|
||||
['@nuxt/content', Content],
|
||||
['@nuxtjs/robots', Robots],
|
||||
['@nuxtjs/sitemap', SiteMap],
|
||||
['@nuxtjs/redirect-module', Redirect]
|
||||
],
|
||||
|
||||
buildDir: 'build',
|
||||
|
||||
build: {
|
||||
postcss: {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
pageTransition: {
|
||||
name: 'page',
|
||||
mode: 'out-in',
|
||||
},
|
||||
|
||||
loadingIndicator: {
|
||||
name: 'circle',
|
||||
color: '#3B8070',
|
||||
background: 'white'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
31
package.json
31
package.json
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "artsite",
|
||||
"name": "nuxt-ts-app",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -9,25 +9,24 @@
|
||||
"generate": "nuxt generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/content": "^1.14.0",
|
||||
"@nuxtjs/axios": "5.13.1",
|
||||
"@nuxtjs/redirect-module": "0.3.1",
|
||||
"@nuxtjs/robots": "^2.4.2",
|
||||
"@nuxtjs/sitemap": "^2.4.0",
|
||||
"@tailwindcss/typography": "0.4.0",
|
||||
"nuxt": "2.15.2",
|
||||
"@nuxt/content": "^1.11.1",
|
||||
"@nuxtjs/axios": "^5.12.5",
|
||||
"@nuxtjs/composition-api": "^0.22.1",
|
||||
"core-js": "^3.8.3",
|
||||
"nuxt": "^2.14.12",
|
||||
"nuxt-i18n": "6.20.6",
|
||||
"prism-themes": "1.5.0",
|
||||
"sass": "1.32.8",
|
||||
"sass-loader": "11.0.1"
|
||||
"sass": "1.32.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/types": "^2.14.12",
|
||||
"@nuxt/typescript-build": "^2.0.4",
|
||||
"@nuxtjs/color-mode": "2.0.4",
|
||||
"@nuxtjs/tailwindcss": "3.4.2",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"css-loader": "5.1.1",
|
||||
"nuxt-postcss8": "^1.0.3",
|
||||
"postcss": "^8.2.6",
|
||||
"tailwindcss": "^2.0.3"
|
||||
"node-sass": "^5.0.0",
|
||||
"@nuxt/postcss8": "^1.0.3",
|
||||
"nuxt-vite": "^0.0.34",
|
||||
"nuxt-windicss": "^0.3.2",
|
||||
"sass-loader": "^10.1.1",
|
||||
"windicss": "2.4.3"
|
||||
}
|
||||
}
|
||||
|
||||
272
pages/about.vue
272
pages/about.vue
@@ -1,272 +0,0 @@
|
||||
<template>
|
||||
<main class="about flex flex-col items-center px-5 xl:px-64">
|
||||
<PageTitle
|
||||
title="part.about"
|
||||
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>
|
||||
</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 !" />
|
||||
</div>
|
||||
<div class="ml-2 text-lg leading-6 md:w-2/3 text-justify">
|
||||
<p>{{ $t('about.banner.hello') }} <span class="text-orange-400 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
|
||||
<p>{{ $t('about.banner.1')}}</p> <br/>
|
||||
<p>{{ $t('about.banner.2') }}</p> <br/>
|
||||
<p>{{ $t('about.banner.3') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-10 mt-4">
|
||||
<h3 class="font-bold text-2xl md:text-4xl mb-3">
|
||||
{{ $t('about.title.skills') }}
|
||||
<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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
</h3>
|
||||
<div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
|
||||
<div v-for="skill in skills">
|
||||
<Skill
|
||||
:skill="skill.title"
|
||||
:color="skill.color"
|
||||
:cover="skill.cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-10">
|
||||
<h3 class="font-bold text-2xl md:text-4xl">
|
||||
{{ $t('about.title.interests') }}
|
||||
<svg height="32" width="32" class="inline icon" 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 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
|
||||
</svg>
|
||||
</h3>
|
||||
<div>
|
||||
<ul class="text-xl">
|
||||
<li class="my-2">
|
||||
{{ $t('about.title.technologies') }}
|
||||
<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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
{{ $t('about.interests.dev') }}
|
||||
<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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
{{ $t('about.interests.devops') }}
|
||||
<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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
{{ $t('about.interests.startups') }}
|
||||
<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.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
{{ $t('about.interests.sysadmin') }}
|
||||
<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="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>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
{{ $t('about.interests.trips') }}
|
||||
<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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
{{ $t('about.interests.moto') }}
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-10">
|
||||
<h3 class="font-bold text-2xl md:text-4xl">
|
||||
{{ $t('about.title.languages') }}
|
||||
<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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
|
||||
</svg>
|
||||
</h3>
|
||||
<div>
|
||||
<table class="text-base text-xl">
|
||||
<tr>
|
||||
<td class="font-bold py-2 pr-4">{{ $t('about.languages.fr')}} 🇫🇷</td>
|
||||
<td class="py-2 px-4">{{ $t('about.languages.native') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-bold py-2 pr-4">{{ $t('about.languages.en')}} 🇬🇧</td>
|
||||
<td class="py-2 px-4">{{ $t('about.languages.fluent') }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-10">
|
||||
<h3 class="font-bold text-2xl md:text-4xl mb-3">
|
||||
{{ $t('about.title.formations') }}
|
||||
<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="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 v-for="formation in formations">
|
||||
<Formation
|
||||
:title="formation.title"
|
||||
:description="formation.description"
|
||||
:location="formation.location"
|
||||
:begin="formation.begin_date"
|
||||
:end="formation.end_date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-10">
|
||||
<h3 class="font-bold text-2xl md:text-4xl mb-3">
|
||||
{{ $t('about.title.experiences') }}
|
||||
<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="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 v-for="experience in experiences">
|
||||
<Experience
|
||||
:title="experience.title"
|
||||
:company="experience.company"
|
||||
: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-400 hover:bg-orange-600 cursor-pointer duration-500 rounded-full dark:text-black">
|
||||
{{ $t('about.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="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
|
||||
<PageTitle
|
||||
title="about.environment"
|
||||
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="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
|
||||
</svg>
|
||||
</PageTitle>
|
||||
<p class="text-lg leading-6 text-justify pb-8">{{ $t('about.env.description') }}</p>
|
||||
<EnvGroup>
|
||||
<EnvTitle title="about.env.ide">
|
||||
<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>
|
||||
</EnvTitle>
|
||||
<EnvList>
|
||||
<EnvListItem title="about.ide.java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
|
||||
<EnvListItem title="about.ide.web" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
|
||||
<EnvListItem title="about.ide.go" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
|
||||
<EnvListItem title="about.ide.db" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
|
||||
<EnvListItem title="about.ide.all" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
|
||||
<EnvListItem title="about.police" content="Jetbrains Mono" link="https://www.jetbrains.com/lp/mono/"/>
|
||||
<EnvListItem title="about.console" content="Terminus" link="https://github.com/Eugeny/terminus"/>
|
||||
<EnvListItem title="about.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="about.env.apps">
|
||||
<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>
|
||||
</EnvTitle>
|
||||
<EnvList>
|
||||
<EnvListItem title="about.email_client" content="Courrier by Microsoft" link="https://www.microsoft.com/fr-fr/p/courrier-et-calendrier/9wzdncrfhvqm?activetab=pivot:overviewtab"/>
|
||||
<EnvListItem title="about.vpn_client" content="Pritunl" link="https://pritunl.com/"/>
|
||||
<EnvListItem title="about.ftp_client" content="WinSCP" link="https://winscp.net/eng/download.php"/>
|
||||
<EnvListItem title="about.web_client" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
|
||||
<EnvListItem title="about.organisation_tool" content="Notion" link="https://www.notion.so/"/>
|
||||
<EnvListItem title="about.organisation_tool" content="Trello" link="https://www.trello.com/"/>
|
||||
<EnvListItem title="about.design_tool" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
|
||||
<EnvListItem title="about.communication_tool" content="Slack" link="https://slack.com/intl/fr-fr/"/>
|
||||
<EnvListItem title="about.communication_tool" content="Discord" link="https://www.discord.com/"/>
|
||||
<EnvListItem title="about.communication_tool" content="Mattermost" link="https://mattermost.com/"/>
|
||||
</EnvList>
|
||||
</EnvGroup>
|
||||
<EnvGroup>
|
||||
<EnvTitle title="about.env.hosting">
|
||||
<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>
|
||||
</EnvTitle>
|
||||
<EnvList>
|
||||
<EnvListItem title="about.hosting.vps" content="PulseHeberg" link="https://pulseheberg.com/"/>
|
||||
<EnvListItem title="about.hosting.ndd" content="OVH" link="https://ovh.com/"/>
|
||||
</EnvList>
|
||||
</EnvGroup>
|
||||
<EnvGroup>
|
||||
<EnvTitle title="about.env.setup">
|
||||
<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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</EnvTitle>
|
||||
<EnvList>
|
||||
<EnvListItem title="about.setup.desk" content="Ikea"/>
|
||||
<EnvListItem title="about.setup.phone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
|
||||
<EnvListItem title="about.setup.computer" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
|
||||
<EnvListItem title="about.setup.screen" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr/fr/produits/prolite-e2283hs-b3/"/>
|
||||
<EnvListItem title="about.setup.keyboard" content="Microsoft"/>
|
||||
<EnvListItem title="about.setup.mouse" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
|
||||
<EnvListItem title="about.setup.headphone" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
|
||||
<EnvListItem title="about.setup.microphone" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
|
||||
</EnvList>
|
||||
</EnvGroup>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<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'
|
||||
}
|
||||
},
|
||||
async asyncData({ $content }) {
|
||||
const skills = await $content('skills').fetch()
|
||||
const experiences = await $content('experiences')
|
||||
.sortBy('end_date', 'desc')
|
||||
.fetch()
|
||||
const formations = await $content('formations')
|
||||
.sortBy('end_date', 'desc')
|
||||
.fetch()
|
||||
|
||||
return {
|
||||
skills,
|
||||
experiences,
|
||||
formations
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.about {
|
||||
.logo-img {
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,201 +0,0 @@
|
||||
<template>
|
||||
<main class="blog flex flex-col items-center px-5 xl:px-96 mb-16 md:mb-32">
|
||||
<div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full">
|
||||
<div>
|
||||
<div class="mb-4 flex">
|
||||
<nuxt-link to="/blog" class="back-arrow flex">
|
||||
<div class="duration-300 arrow">
|
||||
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
{{ $t('blog.read.back') }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl md:text-5xl font-bold">
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
<h3 class="text-xl text-gray-800 dark:text-dark-100 my-4 md:mt-8">
|
||||
{{ post.description }}
|
||||
</h3>
|
||||
<div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
|
||||
<div>
|
||||
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Date</p>
|
||||
<p>{{ formatDate }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">{{ $t('blog.read.time') }}</p>
|
||||
<p>{{ post.reading_time }} min</p>
|
||||
</div>
|
||||
<div>
|
||||
<p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Tags</p>
|
||||
<p>{{ formatTags }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="flex justify-center w-full h-auto">
|
||||
<img class="w-full h-auto" :src="require(`@/assets/img/posts/${post.cover}.png`)" alt="Cover Img" />
|
||||
</div>
|
||||
</div>
|
||||
<nuxt-content
|
||||
:document="post"
|
||||
class="my-6 md:my-12 w-full text-justify max-w-none
|
||||
prose prose-sm sm:prose lg:prose-lg lg:max-w-none sm:max-w-none
|
||||
dark:prose-dark dark:max-w-none"
|
||||
/>
|
||||
<p class="mb-3">
|
||||
{{ $t('blog.read.thanks') }}
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="flex items-center mb-2 md:mb-0">
|
||||
<div
|
||||
@click="handleLike"
|
||||
class="h-16 end-blog flex flex-row justify-center items-center cursor-pointer duration-300 text-3xl p-3 border-solid border mr-2"
|
||||
:class="liked ? 'border-red-500 dark:border-red-500 hover:border-gray-400 dark:hover:border-dark-200' : 'border-gray-400 dark:border-dark-200 hover:border-red-500 dark:hover:border-red-500'"
|
||||
>
|
||||
<div class="mr-2 lining-nums">
|
||||
{{ likes }}
|
||||
</div>
|
||||
<div class="icon-hover inline">❤</div>
|
||||
</div>
|
||||
<a
|
||||
target="_blank"
|
||||
:href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + this.post.slug + '&text=' + $t('blog.tweet') + ' ' + post.title"
|
||||
class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 justify-center items-center"
|
||||
>
|
||||
<img class="inline img icon-hover" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="40" width="40" />
|
||||
</a>
|
||||
<div @click="scrollToTop"
|
||||
class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white">
|
||||
<svg class="inline icon-hover" width="40" height="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="M5 10l7-7m0 0l7 7m-7-7v18" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<nuxt-link to="/contact"
|
||||
class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white"
|
||||
>
|
||||
<svg class="inline icon-hover" width="40" height="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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
|
||||
</svg>
|
||||
</nuxt-link>
|
||||
<div
|
||||
@click="copyToClipBoard"
|
||||
class="h-16 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white"
|
||||
>
|
||||
<svg class="inline icon-hover" 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="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-if="isCopied" class="p-3 relative text-sm flex justify-center items-center text-green-500">
|
||||
{{ $t('copied') }}
|
||||
<svg class="inline icon" width="25" height="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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "blog",
|
||||
head() {
|
||||
return {
|
||||
title: 'Blog - Arthur Danjou - ' + this.post.title
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
likes: 0,
|
||||
post: null,
|
||||
|
||||
isCopied: false,
|
||||
liked: false
|
||||
}
|
||||
},
|
||||
async asyncData({ params, $content, app, $axios, error }) {
|
||||
const post = await $content(`articles/${app.i18n.locale}`, params.slug)
|
||||
.fetch()
|
||||
.catch(() => {
|
||||
error({ statusCode: 404, message: "Post not found" });
|
||||
});
|
||||
const {data: likes} = await $axios.get(`posts/${params.slug}`)
|
||||
const liked = await $axios.get(`posts/is/${params.slug}`)
|
||||
return {
|
||||
post,
|
||||
likes,
|
||||
liked: liked.data !== 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
})
|
||||
},
|
||||
copyToClipBoard() {
|
||||
navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + this.post.slug)
|
||||
this.isCopied = true
|
||||
setTimeout(() => {
|
||||
this.isCopied = false
|
||||
}, 7000)
|
||||
},
|
||||
async handleLike() {
|
||||
if (this.liked) {
|
||||
const {data} = await this.$axios.post(`posts/${this.post.slug}/unlike`)
|
||||
if (data.code === 200) {
|
||||
this.liked = false
|
||||
this.likes = data.post.likes
|
||||
}
|
||||
} else {
|
||||
const {data} = await this.$axios.post(`posts/${this.post.slug}/like`)
|
||||
if (data.code === 200) {
|
||||
this.liked = true
|
||||
this.likes = data.post.likes
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatDate() {
|
||||
const dateFormat = this.post.date.split('-')
|
||||
return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
|
||||
},
|
||||
formatTags() {
|
||||
let tags = ""
|
||||
this.post.tags.map(tag => {
|
||||
tags += this.$t(tag) + ", "
|
||||
})
|
||||
return tags.substring(0, tags.length - 2)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.blog {
|
||||
.back-arrow:hover .arrow {
|
||||
transform: translate(-8px, -1px);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transform: translate(3px, -1px);
|
||||
}
|
||||
|
||||
.end-blog .icon-hover {
|
||||
@apply duration-300
|
||||
}
|
||||
|
||||
.end-blog:hover .icon-hover {
|
||||
@apply transform scale-105;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,276 +0,0 @@
|
||||
<template>
|
||||
<main class="blog flex flex-col items-center px-5 xl:px-64">
|
||||
<PageTitle
|
||||
title="part.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>
|
||||
</PageTitle>
|
||||
<div class="flex flex-col mt-8 w-full md:w-1/2">
|
||||
<h1
|
||||
v-if="current_tag === ''"
|
||||
class="text-lg mb-2"
|
||||
>{{ $t('blog.tags.search') }}</h1>
|
||||
<div
|
||||
@click="resetPosts"
|
||||
v-if="current_tag !== ''"
|
||||
class="w-full"
|
||||
>
|
||||
<div class="w-full home-arrow flex cursor-pointer font-bold mb-3">
|
||||
<div class="arrow duration-300 mr-2">
|
||||
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</div>
|
||||
{{ $t('blog.tags.back') }}
|
||||
</div>
|
||||
<div class="w-full">
|
||||
{{ $t('blog.tags.current', { tag: $t(current_tag)}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-row w-full overflow-x-scroll md:overflow-x-hidden md:flex-wrap space-x-3 md:space-x-0">
|
||||
<div v-for="tag in tags">
|
||||
<div
|
||||
class="mb-3 md:mr-4 border-b-2 border-opacity-0 hover:border-opacity-100 border-green-400 border-solid duration-300 cursor-pointer font-black"
|
||||
@click="fetchPostsByTag(tag.slug)"
|
||||
>
|
||||
{{ $t(tag.slug) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog.no_posts') }}</h1>
|
||||
<div class="w-full xl:w-1/2" v-else>
|
||||
<div class="flex flex-col justify-around items-center py-8 w-full">
|
||||
<div class="w-full" v-for="post in posts">
|
||||
<nuxt-link :to="'/blog/' + post.slug">
|
||||
<Post
|
||||
:title="post.title"
|
||||
:reading_time="post.reading_time"
|
||||
:description="post.description"
|
||||
:tags="displayTags(post.tags)"
|
||||
:cover="post.cover"
|
||||
:date="post.date"
|
||||
:lightBg="post.background"
|
||||
/>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-row justify-between w-full mb-4" v-if="(next || prev) && this.postsCount > 5">
|
||||
<div
|
||||
class="duration-300 flex w-1/2 px-5 py-4 justify-center items-center"
|
||||
:class="prev === null ? 'opacity-0': 'opacity-100'"
|
||||
>
|
||||
<div class="flex items-center duration-300 prev-arrow" @click="prevPage">
|
||||
<div class="arrow duration-300">
|
||||
<svg class="inline icon" height="30" width="30" 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 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="inline ml-4 font-bold">{{ $t('blog.pagination.prev') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="duration-300 flex w-1/2 px-5 py-4 justify-center items-center"
|
||||
:class="next === null ? 'opacity-0': 'opacity-100'"
|
||||
>
|
||||
<div class="flex items-center duration-300 suiv-arrow" @click="nextPage">
|
||||
<div class="mr-4 font-bold">{{ $t('blog.pagination.next') }}</div>
|
||||
<div class="inline arrow duration-300">
|
||||
<svg class="inline icon" height="30" width="30" 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="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "~/components/Post";
|
||||
import PageTitle from "~/components/PageTitle";
|
||||
export default {
|
||||
name: "blog",
|
||||
components: {PageTitle, Post},
|
||||
head() {
|
||||
return {
|
||||
title: 'Blog - Arthur Danjou'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
postsCount: 0,
|
||||
page: 0,
|
||||
current_tag: '',
|
||||
posts: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
displayTags(tags) {
|
||||
const tags_label = []
|
||||
if (tags.length > 0) {
|
||||
tags.map(tag => {
|
||||
tags_label.push(tag)
|
||||
})
|
||||
}
|
||||
return tags_label
|
||||
},
|
||||
async fetchPostsByTag(tag) {
|
||||
this.current_tag = tag
|
||||
this.page = 0
|
||||
await this.fetchPosts()
|
||||
if (this.posts.length !== 0) {
|
||||
await this.fetchPrevAndNext()
|
||||
} else {
|
||||
this.next = null
|
||||
this.prev = null
|
||||
}
|
||||
},
|
||||
async resetPosts() {
|
||||
this.current_tag = ''
|
||||
this.posts = await this.$content(`articles/${this.$i18n.locale}`)
|
||||
.sortBy('date', 'asc')
|
||||
.limit(5)
|
||||
.fetch()
|
||||
},
|
||||
async nextPage() {
|
||||
this.page++
|
||||
await this.fetchPosts()
|
||||
await this.fetchPrevAndNext()
|
||||
|
||||
window.scrollTo({
|
||||
top: 100,
|
||||
behavior: "smooth"
|
||||
})
|
||||
},
|
||||
async prevPage() {
|
||||
this.page--
|
||||
await this.fetchPosts()
|
||||
await this.fetchPrevAndNext()
|
||||
window.scrollTo({
|
||||
top: 100,
|
||||
behavior: "smooth"
|
||||
})
|
||||
},
|
||||
async fetchPosts() {
|
||||
let postsTemp = []
|
||||
if (this.current_tag === "") {
|
||||
postsTemp = await this.$content(`articles/${this.$i18n.locale}`)
|
||||
.sortBy('date', 'asc')
|
||||
.limit(5)
|
||||
.skip(this.page * 5)
|
||||
.fetch()
|
||||
} else {
|
||||
postsTemp = await this.$content(`articles/${this.$i18n.locale}`)
|
||||
.sortBy('date', 'asc')
|
||||
.limit(5)
|
||||
.skip(this.page * 5)
|
||||
.where({
|
||||
tags: {
|
||||
$contains: this.current_tag
|
||||
}
|
||||
})
|
||||
.fetch()
|
||||
}
|
||||
|
||||
const posts = []
|
||||
postsTemp.map(post => {
|
||||
posts.push(post)
|
||||
})
|
||||
this.posts = posts
|
||||
},
|
||||
async fetchPrevAndNext() {
|
||||
const [_, next] = await this.$content(`articles/${this.$i18n.locale}`)
|
||||
.surround(this.posts[this.posts.length - 1].slug, {
|
||||
before: 1,
|
||||
after: 1
|
||||
})
|
||||
.fetch()
|
||||
const [prev, __] = await this.$content(`articles/${this.$i18n.locale}`)
|
||||
.skip(this.page)
|
||||
.surround(this.posts[0].slug, {
|
||||
before: 1,
|
||||
after: 1
|
||||
})
|
||||
.fetch()
|
||||
|
||||
this.prev = null
|
||||
this.next = null
|
||||
if (this.posts.length === 5) {
|
||||
this.next = next
|
||||
}
|
||||
if (this.page > 0) {
|
||||
this.prev = prev
|
||||
}
|
||||
}
|
||||
},
|
||||
async asyncData ({ $content, app }) {
|
||||
const tags = await $content('tags').fetch()
|
||||
const locale = await app.i18n.locale
|
||||
|
||||
const postsTemp = await $content(`articles/${locale}`)
|
||||
.sortBy('date', 'asc')
|
||||
.limit(5)
|
||||
.fetch()
|
||||
|
||||
const posts = []
|
||||
postsTemp.map(post => {
|
||||
posts.push(post)
|
||||
})
|
||||
|
||||
let prev = null
|
||||
let next = null
|
||||
|
||||
if (posts.length > 0) {
|
||||
const [_, nextTemp] = await $content(`articles/${locale}`)
|
||||
.surround(posts[posts.length - 1].slug, {
|
||||
before: 1,
|
||||
after: 1
|
||||
})
|
||||
.fetch()
|
||||
|
||||
const [prevTemp, __] = await $content(`articles/${locale}`)
|
||||
.surround(posts[0].slug, {
|
||||
before: 1,
|
||||
after: 1
|
||||
})
|
||||
.fetch()
|
||||
|
||||
next = nextTemp
|
||||
prev = prevTemp
|
||||
}
|
||||
|
||||
return {
|
||||
posts,
|
||||
postsCount: posts.length,
|
||||
tags,
|
||||
prev,
|
||||
next
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.blog {
|
||||
.home-arrow:hover .arrow {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
.prev-arrow:hover .arrow {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.suiv-arrow:hover .arrow {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,210 +0,0 @@
|
||||
<template>
|
||||
<main class="contact flex flex-col items-center px-5 xl:px-64">
|
||||
<PageTitle
|
||||
title="part.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="w-full lg:w-3/4 mb-10 mt-4">
|
||||
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-200">{{ $t('contact.newsletter.title') }}</h1>
|
||||
<h3 class="text-md md:text-lg">
|
||||
{{ $t('contact.newsletter.description') }} <br>
|
||||
<span class="font-bold self-start">{{ $t('contact.newsletter.unfollow') }}</span>
|
||||
</h3>
|
||||
<form class="flex flex-col lg:flex-row mt-4 w-full">
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="mb-3 lg:mr-4 w-full md:w-auto">
|
||||
<input v-model="form.name"
|
||||
class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-800 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
|
||||
type="text"
|
||||
:placeholder="$t('contact.form.name')"
|
||||
required
|
||||
id="name"/>
|
||||
</div>
|
||||
<div class="mb-3 lg:mr-4 w-full md:w-auto">
|
||||
<input v-model="form.email"
|
||||
class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-800 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
|
||||
type="email"
|
||||
:placeholder="$t('contact.form.mail')"
|
||||
required
|
||||
id="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 self-center">
|
||||
<button @click.prevent="handleForm" class="dark:text-black font-bold px-3 py-2 bg-purple-400 hover:bg-purple-500 cursor-pointer duration-300 rounded-lg btn">
|
||||
{{ $t('contact.form.submit')}}
|
||||
<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 v-if="error" class="flex">
|
||||
<div class="rounded-xl px-3 py-2 bg-red-300 font-bold dark:text-black">
|
||||
{{ $t('contact.form.error') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="success" class="flex">
|
||||
<div class="rounded-xl px-3 py-2 bg-green-300 font-bold dark:text-black">
|
||||
{{ $t('contact.form.success', { email: form.email }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/4 mb-10 mt-4">
|
||||
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
|
||||
{{ $t('contact.how_to.title') }}
|
||||
</h1>
|
||||
<h3 class="text-md md:text-lg">
|
||||
{{ $t('contact.how_to.description') }}
|
||||
</h3>
|
||||
<div class="mt-4 text-lg flex">
|
||||
<div class="flex email duration-300 text-purple-500 hover:text-purple-700 cursor-pointer">
|
||||
<a class="mr-2" href="mailto:me@arthurdanjou.fr?subject=Please enter here your project name">
|
||||
me@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>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/4 mb-10 mt-4">
|
||||
<h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
|
||||
{{ $t('contact.available.title') }}
|
||||
</h1>
|
||||
<h3 class="text-lg md:text-lg">
|
||||
{{ $t('contact.available.description') }}
|
||||
</h3>
|
||||
<div class="my-4 text-purple-500">
|
||||
{{ $t('contact.available.start') }}
|
||||
<span class="py-1 px-2 font-bold rounded-full m-0.5" :class="getColor">{{ $t('hiring.status.' + status) }}</span>
|
||||
{{ $t('contact.available.end') }}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageTitle from "~/components/PageTitle";
|
||||
export default {
|
||||
name: "contact",
|
||||
components: {PageTitle},
|
||||
data () {
|
||||
return {
|
||||
status: '',
|
||||
color: '',
|
||||
form: {
|
||||
name: '',
|
||||
email: ''
|
||||
},
|
||||
success: false,
|
||||
error: false
|
||||
}
|
||||
},
|
||||
async asyncData({ $content }) {
|
||||
const infos = await $content('infos').fetch()
|
||||
return {
|
||||
status: infos.hiring.status,
|
||||
color: infos.hiring.color
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleForm () {
|
||||
await this.$axios.post('subscribers',
|
||||
{
|
||||
email: this.form.email,
|
||||
name: this.form.name
|
||||
})
|
||||
.then(() => {
|
||||
this.success = true
|
||||
setTimeout(() => {
|
||||
this.success = false
|
||||
this.form.email = ''
|
||||
this.form.name = ''
|
||||
}, 5000)
|
||||
}).catch(() => {
|
||||
this.error = true
|
||||
setTimeout(() => {
|
||||
this.error = false
|
||||
}, 5000)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
switch (this.color) {
|
||||
case 'red':
|
||||
return 'bg-red-200 text-red-500'
|
||||
case 'orange':
|
||||
return 'bg-orange-200 text-orange-500'
|
||||
case 'purple':
|
||||
return 'bg-purple-200 text-purple-500'
|
||||
case 'blue':
|
||||
return 'bg-blue-200 text-blue-500'
|
||||
case 'green':
|
||||
return 'bg-green-200 text-green-500'
|
||||
case 'yellow':
|
||||
return 'bg-yellow-200 text-yellow-500'
|
||||
case 'cyan':
|
||||
return 'bg-cyan-200 text-cyan-500'
|
||||
case 'teal':
|
||||
return 'bg-teal-200 text-teal-500'
|
||||
case 'amber':
|
||||
return 'bg-amber-200 text-amber-500'
|
||||
case 'blueGray':
|
||||
return 'bg-blueGray-200 text-blueGray-500'
|
||||
case 'emerald':
|
||||
return 'bg-emerald-200 text-emerald-500'
|
||||
case 'lightBlue':
|
||||
return 'bg-lightBlue-200 text-lightBlue-500'
|
||||
case 'lime':
|
||||
return 'bg-lime-200 text-lime-500'
|
||||
case 'rose':
|
||||
return 'bg-rose-200 text-rose-500'
|
||||
case 'black':
|
||||
return 'bg-black text-black'
|
||||
case 'white':
|
||||
return 'bg-white text-white'
|
||||
case 'pink':
|
||||
return 'bg-pink-200 text-pink-500'
|
||||
case 'fuchsia':
|
||||
return 'bg-fuchsia-200 text-fuchsia-500'
|
||||
case 'violet':
|
||||
return 'bg-violet-200 text-violet-500'
|
||||
case 'indigo':
|
||||
return 'bg-indigo-200 text-indigo-500'
|
||||
case 'warmGray':
|
||||
return 'bg-warmGray-200 text-warmGray-500'
|
||||
case 'trueGray':
|
||||
return 'bg-trueGray-200 text-trueGray-500'
|
||||
case 'gray':
|
||||
return 'bg-gray-200 text-gray-500'
|
||||
case 'coolGray':
|
||||
return 'bg-coolGray-200 text-coolGray-500'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
117
pages/index.vue
117
pages/index.vue
@@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<main class="index px-5 xl:px-64">
|
||||
<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" width="100%" height="100%"/>
|
||||
</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">
|
||||
{{ $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">
|
||||
{{ $t('home.banner.role') }}
|
||||
</p>
|
||||
<p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-200">
|
||||
{{ $t('home.banner.description', {age: age}) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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="part.about"
|
||||
description="part.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>
|
||||
</HomeLink>
|
||||
<HomeLink
|
||||
title="part.blog"
|
||||
description="part.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="part.work"
|
||||
description="part.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="part.contact"
|
||||
description="part.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>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import HomeLink from "~/components/HomeLink";
|
||||
|
||||
export default Vue.extend({
|
||||
components: {HomeLink},
|
||||
head() {
|
||||
return {
|
||||
title: 'Arthur Danjou - FullStack Web & Software Developer'
|
||||
}
|
||||
},
|
||||
async asyncData({$content}) {
|
||||
const infos = await $content('infos').fetch()
|
||||
return {
|
||||
age: infos.age
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index {
|
||||
|
||||
.title {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.arrow-btn .icon {
|
||||
transform: translate(3px, -5px);
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
.arrow-btn:hover .icon {
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,150 +0,0 @@
|
||||
<template>
|
||||
<main class="px-5 xl:px-64 mb-16 md:mb-32">
|
||||
<div class="w-full flex flex-col lg:flex-row items-center md:items-start mt-8 md:mt-32">
|
||||
<div class="w-full lg:w-1/2 flex flex-col items-center">
|
||||
<div class="md:mb-24">
|
||||
<div class="mb-4 flex">
|
||||
<nuxt-link to="/work" class="back-arrow flex">
|
||||
<div class="duration-300 arrow">
|
||||
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
{{ $t('work.go_back') }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<img class="w-72 rounded-xl" :src="require(`@/assets/img/works/${work.cover}.png`)" alt="Project Img" />
|
||||
<a
|
||||
class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
|
||||
:class="getColor"
|
||||
:href="work.url"
|
||||
>{{work.url.replace('https://', '').replace('http://', '')}}</a>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/2 ml-5 ">
|
||||
<h1 class="text-xl lg:text-3xl font-bold">
|
||||
{{ work.title }}
|
||||
</h1>
|
||||
<p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-100">
|
||||
{{ $t(work.description) }}
|
||||
</p>
|
||||
<div>
|
||||
<h3 class="text-md lg:text-lg font-bold">
|
||||
{{ $t('work.tech_used') }}
|
||||
</h3>
|
||||
<div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
|
||||
<div v-for="skill in skills">
|
||||
<WorkSkill
|
||||
:skill="skill.title"
|
||||
:color="skill.color"
|
||||
:cover="skill.cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WorkSkill from "~/components/WorkSkill";
|
||||
|
||||
export default {
|
||||
components: {WorkSkill},
|
||||
head() {
|
||||
return {
|
||||
title: 'Work - Arthur Danjou'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
work: null
|
||||
}
|
||||
},
|
||||
async asyncData({ params, $content, error }) {
|
||||
const work = await $content('works', params.slug)
|
||||
.fetch()
|
||||
.catch(() => {
|
||||
error({
|
||||
statusCode: 404,
|
||||
message: 'Work not found',
|
||||
})
|
||||
});
|
||||
let skills = []
|
||||
if (work) {
|
||||
skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
|
||||
}
|
||||
return {
|
||||
work,
|
||||
skills
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
switch (this.work.color) {
|
||||
case 'red':
|
||||
return 'bg-red-400 hover:bg-red-600'
|
||||
case 'orange':
|
||||
return 'bg-orange-400 hover:bg-orange-600'
|
||||
case 'purple':
|
||||
return 'bg-purple-400 hover:bg-purple-600'
|
||||
case 'blue':
|
||||
return 'bg-blue-400 hover:bg-blue-600'
|
||||
case 'green':
|
||||
return 'bg-green-400 hover:bg-green-600'
|
||||
case 'yellow':
|
||||
return 'bg-yellow-400 hover:bg-yellow-600'
|
||||
case 'cyan':
|
||||
return 'bg-cyan-400 hover:bg-cyan-600'
|
||||
case 'teal':
|
||||
return 'bg-teal-400 hover:bg-teal-600'
|
||||
case 'amber':
|
||||
return 'bg-amber-400 hover:bg-amber-600'
|
||||
case 'blueGray':
|
||||
return 'bg-blueGray-400 hover:bg-blueGray-600'
|
||||
case 'emerald':
|
||||
return 'bg-emerald-400 hover:bg-emerald-600'
|
||||
case 'lightBlue':
|
||||
return 'bg-lightBlue-400 hover:bg-lightBlue-600'
|
||||
case 'lime':
|
||||
return 'bg-lime-400 hover:bg-lime-600'
|
||||
case 'rose':
|
||||
return 'bg-rose-400 hover:bg-rose-600'
|
||||
case 'black':
|
||||
return 'bg-black hover:bg-black'
|
||||
case 'white':
|
||||
return 'bg-white hover:bg-white'
|
||||
case 'pink':
|
||||
return 'bg-pink-400 hover:bg-pink-600'
|
||||
case 'fuchsia':
|
||||
return 'bg-fuchsia-400 hover:bg-fuchsia-600'
|
||||
case 'violet':
|
||||
return 'bg-violet-400 hover:bg-violet-600'
|
||||
case 'indigo':
|
||||
return 'bg-indigo-400 hover:bg-indigo-600'
|
||||
case 'warmGray':
|
||||
return 'bg-warmGray-400 hover:bg-warmGray-600'
|
||||
case 'trueGray':
|
||||
return 'bg-trueGray-400 hover:bg-trueGray-600'
|
||||
case 'gray':
|
||||
return 'bg-gray-400 hover:bg-gray-600'
|
||||
case 'coolGray':
|
||||
return 'bg-coolGray-400 hover:bg-coolGray-600'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.back-arrow:hover .arrow {
|
||||
transform: translate(-8px, -1px);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transform: translate(3px, -1px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<main class="work flex flex-col items-center px-5 xl:px-64">
|
||||
<PageTitle
|
||||
title="part.work"
|
||||
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>
|
||||
<h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('work.no_work') }}</h1>
|
||||
<div v-else class="flex flex-col justify-around items-center py-10 w-full">
|
||||
<h1 class="text-xl font-bold text-center mb-8">{{ $t('work.description') }}</h1>
|
||||
<div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
|
||||
<div v-for="work in works">
|
||||
<nuxt-link :to="'/work/' + work.slug">
|
||||
<Work
|
||||
:title="work.title"
|
||||
:url="work.url"
|
||||
:color="work.color"
|
||||
:cover="work.cover"
|
||||
/>
|
||||
</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'
|
||||
}
|
||||
},
|
||||
async asyncData({ $content }) {
|
||||
const works = await $content('works').fetch()
|
||||
return {
|
||||
works
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
34
settings/Arch.ts
Normal file
34
settings/Arch.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
const srcDir = 'src'
|
||||
|
||||
const dir = {
|
||||
assets: 'assets',
|
||||
layouts: 'layouts',
|
||||
middleware: 'middlewares',
|
||||
pages: 'pages',
|
||||
static: 'static',
|
||||
store: 'store',
|
||||
}
|
||||
|
||||
const build = {
|
||||
extractCss: true,
|
||||
}
|
||||
|
||||
const generate = {
|
||||
interval: 2000,
|
||||
}
|
||||
|
||||
const pageTransition = {
|
||||
name: 'page',
|
||||
mode: 'out-in',
|
||||
}
|
||||
|
||||
const target = 'server'
|
||||
|
||||
const server = {
|
||||
host: '0.0.0.0',
|
||||
port: 3333
|
||||
}
|
||||
|
||||
const buildDir = 'build'
|
||||
|
||||
export default { srcDir, dir, generate, build, pageTransition, target, server, buildDir }
|
||||
2
settings/Build.ts
Normal file
2
settings/Build.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
// Build Configuration: https://go.nuxtjs.dev/config-build
|
||||
export default {}
|
||||
16
settings/BuildModules.ts
Normal file
16
settings/BuildModules.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
|
||||
const color_mode = {
|
||||
preference: 'system',
|
||||
fallback: 'light',
|
||||
classPrefix: '',
|
||||
classSuffix: '',
|
||||
}
|
||||
|
||||
export default [
|
||||
'@nuxt/typescript-build',
|
||||
'@nuxtjs/composition-api',
|
||||
'@nuxt/postcss8',
|
||||
'nuxt-windicss',
|
||||
'nuxt-vite',
|
||||
['@nuxtjs/color-mode', color_mode],
|
||||
]
|
||||
39
settings/Head.ts
Normal file
39
settings/Head.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
// Global page headers: https://go.nuxtjs.dev/config-head
|
||||
const params = {
|
||||
title: 'nuxt-ts-app',
|
||||
color: '#0DA5FF',
|
||||
image: '/images/image.jpg',
|
||||
url: 'https://my-domain.com',
|
||||
favicon: {
|
||||
type: 'image/jpg',
|
||||
href: '/favicon.jpg',
|
||||
},
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
|
||||
}
|
||||
|
||||
export default {
|
||||
htmlAttrs: { lang: 'fr-FR' },
|
||||
title: params.title,
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ lang: 'fr-FR' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
{ hid: 'description', name: 'description', content: params.description },
|
||||
|
||||
/**
|
||||
* Open graph
|
||||
* See : https://ogp.me/
|
||||
*/
|
||||
{ hid: 'og:type', name: 'og:type', content: 'website' },
|
||||
{ hid: 'og:url', name: 'og:url', content: params.url },
|
||||
{ hid: 'og:title', name: 'og:title', content: params.title },
|
||||
{ hid: 'og:site_name', name: 'og:site_name', content: params.title },
|
||||
{ hid: 'og:locale', name: 'og:locale', content: 'fr' },
|
||||
{ hid: 'og:image', name: 'og:image', content: params.image },
|
||||
|
||||
{ name: 'msapplication-TileColor', content: params.color },
|
||||
{ name: 'theme-color', content: params.color },
|
||||
],
|
||||
link: [{ rel: 'icon', type: params.favicon.type, href: params.favicon.href }],
|
||||
}
|
||||
54
settings/Modules.ts
Normal file
54
settings/Modules.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
const axios = {
|
||||
credentials: true,
|
||||
baseURL: process.env.NODE_ENV == 'production'
|
||||
? 'https://my-domain.fr'
|
||||
: 'http://localhost:3333',
|
||||
}
|
||||
|
||||
const i18n = {
|
||||
locales: [
|
||||
{
|
||||
code: 'en',
|
||||
name: 'English',
|
||||
iso: 'en-EN',
|
||||
file: 'en-EN.ts',
|
||||
},
|
||||
{
|
||||
code: 'fr',
|
||||
iso: 'fr-FR',
|
||||
file: 'fr-FR.ts',
|
||||
name: 'Français'
|
||||
},
|
||||
],
|
||||
strategy: 'no_prefix',
|
||||
defaultLocale: 'en',
|
||||
langDir: 'locales/',
|
||||
lazy: true,
|
||||
seo: true,
|
||||
vueI18n: {
|
||||
fallbackLocale: 'en',
|
||||
},
|
||||
}
|
||||
|
||||
const content = {
|
||||
apiPrefix: 'api',
|
||||
nestedProperties: ['categories.slug'],
|
||||
markdown: {
|
||||
prism: {
|
||||
theme: 'prism-themes/themes/prism-darcula.css'
|
||||
},
|
||||
remarkPlugins: [
|
||||
'remark-squeeze-paragraphs',
|
||||
'remark-slug',
|
||||
'remark-autolink-headings',
|
||||
'remark-external-links',
|
||||
'remark-footnotes',
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
export default [
|
||||
['@nuxtjs/axios', axios],
|
||||
['nuxt-i18n', i18n],
|
||||
['@nuxt/content', content],
|
||||
]
|
||||
2
settings/Plugins.ts
Normal file
2
settings/Plugins.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
|
||||
export default []
|
||||
2
settings/Style.ts
Normal file
2
settings/Style.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
// Global CSS: https://go.nuxtjs.dev/config-css
|
||||
export default []
|
||||
7
src/assets/README.md
Normal file
7
src/assets/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# ASSETS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
|
||||
29
src/components/Logo.vue
Normal file
29
src/components/Logo.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
|
||||
fill="#00C58E"
|
||||
/>
|
||||
<path
|
||||
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
|
||||
fill="#108775"
|
||||
/>
|
||||
<path
|
||||
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
|
||||
fill="#2F495E"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.NuxtLogo {
|
||||
animation: 1s appear;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
src/components/README.md
Normal file
7
src/components/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# COMPONENTS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
The components directory contains your Vue.js Components.
|
||||
|
||||
_Nuxt.js doesn't supercharge these components._
|
||||
18
src/content/hello.md
Normal file
18
src/content/hello.md
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Getting started
|
||||
description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
|
||||
---
|
||||
|
||||
Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
|
||||
|
||||
## Writing content
|
||||
|
||||
Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
|
||||
|
||||
## Fetching content
|
||||
|
||||
Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
|
||||
|
||||
## Displaying content
|
||||
|
||||
Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
|
||||
7
src/layouts/README.md
Normal file
7
src/layouts/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# LAYOUTS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your Application Layouts.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user