mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-01-14 12:14:42 +01:00
💻 | Working on review
This commit is contained in:
40
@types/types.ts
Normal file
40
@types/types.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
interface FormData {
|
||||
email: string,
|
||||
name: string
|
||||
}
|
||||
|
||||
interface InfoData {
|
||||
age: number
|
||||
hiring: {
|
||||
status: string,
|
||||
color: string
|
||||
}
|
||||
}
|
||||
|
||||
interface Skill {
|
||||
title: string,
|
||||
color: string,
|
||||
cover: string,
|
||||
slug: string
|
||||
}
|
||||
|
||||
interface Experience {
|
||||
slug: string,
|
||||
title: string,
|
||||
company: string,
|
||||
location: string,
|
||||
begin_date: string,
|
||||
end_date: string
|
||||
}
|
||||
|
||||
interface Formation {
|
||||
slug: string,
|
||||
title: string,
|
||||
description: string,
|
||||
location: string,
|
||||
begin_date: string,
|
||||
end_date: string
|
||||
}
|
||||
|
||||
|
||||
export { FormData, InfoData, Skill, Experience, Formation }
|
||||
@@ -1,4 +1,5 @@
|
||||
import {defineNuxtConfig} from "@nuxtjs/composition-api";
|
||||
import {NuxtConfig} from "@nuxt/types";
|
||||
import head from './settings/Head'
|
||||
import buildModules from './settings/BuildModules'
|
||||
import modules from './settings/Modules'
|
||||
@@ -6,7 +7,6 @@ import build from './settings/Build'
|
||||
import arch from './settings/Arch'
|
||||
import plugins from './settings/Plugins'
|
||||
import css from './settings/Style'
|
||||
import {NuxtConfig} from "@nuxt/types";
|
||||
|
||||
export default defineNuxtConfig({
|
||||
head,
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"@nuxt/content": "^1.11.1",
|
||||
"@nuxtjs/axios": "^5.12.5",
|
||||
"@nuxtjs/composition-api": "^0.22.2",
|
||||
"core-js": "^3.8.3",
|
||||
"core-js": "^3.9.1",
|
||||
"nuxt": "^2.14.12",
|
||||
"nuxt-i18n": "6.21.1",
|
||||
"prism-themes": "1.6.0",
|
||||
@@ -22,10 +22,10 @@
|
||||
"@nuxt/types": "^2.14.12",
|
||||
"@nuxt/typescript-build": "^2.0.4",
|
||||
"@nuxtjs/color-mode": "2.0.5",
|
||||
"@nuxtjs/tailwindcss": "^4.0.1",
|
||||
"node-sass": "^5.0.0",
|
||||
"nuxt-vite": "^0.0.36",
|
||||
"postcss": "^8.2.8",
|
||||
"sass-loader": "^11.0.1"
|
||||
"nuxt-windicss": "^0.4.6",
|
||||
"sass-loader": "10.1.1",
|
||||
"vue-windicss-preprocess": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
// Build Configuration: https://go.nuxtjs.dev/config-build
|
||||
export default {}
|
||||
export default {
|
||||
}
|
||||
|
||||
@@ -8,18 +8,34 @@ const color_mode = {
|
||||
classSuffix: '',
|
||||
}
|
||||
|
||||
const tailwindcss = {
|
||||
cssPath: './assets/css/tailwind.css',
|
||||
configPath: 'tailwind.config.js',
|
||||
exposeConfig: true,
|
||||
jit: true
|
||||
const windicss = {
|
||||
scan: {
|
||||
dirs: [ './' ],
|
||||
exclude: [
|
||||
'node_modules',
|
||||
'.git',
|
||||
'.nuxt/**/*',
|
||||
'build/**/*',
|
||||
'*.template.html',
|
||||
'app.html'
|
||||
],
|
||||
include: []
|
||||
},
|
||||
transformCSS: 'pre',
|
||||
preflight: {
|
||||
alias: {
|
||||
// add nuxt aliases
|
||||
'nuxt-link': 'a',
|
||||
// @nuxt/image module
|
||||
'nuxt-img': 'img',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default [
|
||||
'@nuxt/typescript-build',
|
||||
'@nuxtjs/composition-api',
|
||||
'@nuxt/postcss8',
|
||||
['@nuxtjs/tailwindcss', tailwindcss],
|
||||
['nuxt-windicss', windicss],
|
||||
//'nuxt-vite',
|
||||
['@nuxtjs/color-mode', color_mode],
|
||||
] as NuxtOptionsModule[]
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
|
||||
|
||||
.icon {
|
||||
transform: translate(3px, -3px);
|
||||
z-index: 1;
|
||||
@@ -13,6 +15,7 @@ body {
|
||||
|
||||
* {
|
||||
@apply select-none outline-none;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
|
||||
.nuxt-content-editor {
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
|
||||
@import "./style.scss";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -50,7 +50,7 @@ export default {
|
||||
default: "Never"
|
||||
}
|
||||
},
|
||||
setup(props: FormationProps) {
|
||||
setup(props: ExperienceProps) {
|
||||
const {$i18n} = useContext()
|
||||
const getBeginDate = computed(() => {
|
||||
const dateFormat = props.begin.split('-')
|
||||
|
||||
63
src/content/articles/en/how-i-start.md
Normal file
63
src/content/articles/en/how-i-start.md
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
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.
|
||||
69
src/content/articles/en/new-version-new-website.md
Normal file
69
src/content/articles/en/new-version-new-website.md
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
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!
|
||||
|
||||
64
src/content/articles/fr/how-i-start.md
Normal file
64
src/content/articles/fr/how-i-start.md
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
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
|
||||
62
src/content/articles/fr/new-version-new-website.md
Normal file
62
src/content/articles/fr/new-version-new-website.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
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 !
|
||||
34
src/content/experiences.json
Normal file
34
src/content/experiences.json
Normal file
@@ -0,0 +1,34 @@
|
||||
[
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
26
src/content/formations.json
Normal file
26
src/content/formations.json
Normal file
@@ -0,0 +1,26 @@
|
||||
[
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
7
src/content/infos.json
Normal file
7
src/content/infos.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"age": 18,
|
||||
"hiring": {
|
||||
"status": "available",
|
||||
"color": "green"
|
||||
}
|
||||
}
|
||||
110
src/content/skills.json
Normal file
110
src/content/skills.json
Normal file
@@ -0,0 +1,110 @@
|
||||
[
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
11
src/content/tags.json
Normal file
11
src/content/tags.json
Normal file
@@ -0,0 +1,11 @@
|
||||
[
|
||||
{
|
||||
"slug": "tags.dev"
|
||||
},
|
||||
{
|
||||
"slug": "tags.tech"
|
||||
},
|
||||
{
|
||||
"slug": "tags.life"
|
||||
}
|
||||
]
|
||||
67
src/content/works.json
Normal file
67
src/content/works.json
Normal file
@@ -0,0 +1,67 @@
|
||||
[
|
||||
{
|
||||
"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,81 +1,117 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div>
|
||||
<Logo />
|
||||
<h1 class="title">
|
||||
nuxt-ts-app
|
||||
</h1>
|
||||
<div class="links">
|
||||
<a
|
||||
href="https://nuxtjs.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="button--green"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<div
|
||||
class="button--grey"
|
||||
@click="setLocale(getLocale.toString() === 'fr' ? 'en' : 'fr')"
|
||||
>
|
||||
{{ $t("test") }}
|
||||
<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="mb-4 md:mb-10 lg:w-1/2 self-center">
|
||||
<h1 @click="debug" 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 v-if="info && info.age" class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-200">
|
||||
{{ $t('home.banner.description', {age: info.age}) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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 lang="ts">
|
||||
import Vue from 'vue'
|
||||
import {setLocale, getLocale} from "../services/useTranslation";
|
||||
import {useAsync, useContext, watch, watchEffect} from "@nuxtjs/composition-api";
|
||||
import {InfoData} from "../../@types/types";
|
||||
|
||||
export default Vue.extend({
|
||||
|
||||
setup() {
|
||||
head() {
|
||||
return {
|
||||
setLocale, getLocale
|
||||
title: 'Arthur Danjou - FullStack Web & Software Developer'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const {$content} = useContext()
|
||||
const info = useAsync(() => {
|
||||
return $content('infos').fetch<InfoData>()
|
||||
})
|
||||
|
||||
return {
|
||||
info
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.index {
|
||||
.title {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
'Quicksand',
|
||||
'Source Sans Pro',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
font-size: 100px;
|
||||
color: #35495e;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.arrow-btn .icon {
|
||||
transform: translate(3px, -5px);
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 300;
|
||||
font-size: 42px;
|
||||
color: #526488;
|
||||
word-spacing: 5px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.links {
|
||||
padding-top: 15px;
|
||||
.arrow-btn:hover .icon {
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"experimentalDecorators": true,
|
||||
"baseUrl": "./nuxt-ts-app",
|
||||
"baseUrl": "./artsite",
|
||||
"paths": {
|
||||
"~/*": ["./*"],
|
||||
"@/*": ["./src/*"]
|
||||
|
||||
@@ -1,17 +1,7 @@
|
||||
const colors = require('tailwindcss/colors')
|
||||
const colors = require('windicss/colors')
|
||||
const typography = require('windicss/plugin/typography')
|
||||
|
||||
module.exports = {
|
||||
purge: {
|
||||
enabled: process.env.NODE_ENV === 'production',
|
||||
content: [
|
||||
'components/**/*.vue',
|
||||
'layouts/**/*.vue',
|
||||
'pages/**/*.vue',
|
||||
'plugins/**/*.ts',
|
||||
'nuxt.config.ts',
|
||||
'content/**/*.md'
|
||||
]
|
||||
},
|
||||
presets: [],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
@@ -841,128 +831,7 @@ module.exports = {
|
||||
'active',
|
||||
'disabled',
|
||||
],
|
||||
variants: {
|
||||
accessibility: ['responsive', 'focus-within', 'focus'],
|
||||
alignContent: ['responsive'],
|
||||
alignItems: ['responsive'],
|
||||
alignSelf: ['responsive'],
|
||||
animation: ['responsive'],
|
||||
appearance: ['responsive'],
|
||||
backgroundAttachment: ['responsive'],
|
||||
backgroundClip: ['responsive'],
|
||||
backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
|
||||
backgroundImage: ['responsive'],
|
||||
backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
|
||||
backgroundPosition: ['responsive'],
|
||||
backgroundRepeat: ['responsive'],
|
||||
backgroundSize: ['responsive'],
|
||||
borderCollapse: ['responsive'],
|
||||
borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
|
||||
borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'dark'],
|
||||
borderRadius: ['responsive'],
|
||||
borderStyle: ['responsive'],
|
||||
borderWidth: ['responsive'],
|
||||
boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'dark'],
|
||||
boxSizing: ['responsive'],
|
||||
clear: ['responsive'],
|
||||
container: ['responsive'],
|
||||
cursor: ['responsive'],
|
||||
display: ['responsive'],
|
||||
divideColor: ['responsive', 'dark'],
|
||||
divideOpacity: ['responsive'],
|
||||
divideStyle: ['responsive'],
|
||||
divideWidth: ['responsive'],
|
||||
fill: ['responsive'],
|
||||
flex: ['responsive'],
|
||||
flexDirection: ['responsive'],
|
||||
flexGrow: ['responsive'],
|
||||
flexShrink: ['responsive'],
|
||||
flexWrap: ['responsive'],
|
||||
float: ['responsive'],
|
||||
fontFamily: ['responsive'],
|
||||
fontSize: ['responsive'],
|
||||
fontSmoothing: ['responsive'],
|
||||
fontStyle: ['responsive'],
|
||||
fontVariantNumeric: ['responsive'],
|
||||
fontWeight: ['responsive'],
|
||||
gap: ['responsive'],
|
||||
gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
|
||||
gridAutoColumns: ['responsive'],
|
||||
gridAutoFlow: ['responsive'],
|
||||
gridAutoRows: ['responsive'],
|
||||
gridColumn: ['responsive'],
|
||||
gridColumnEnd: ['responsive'],
|
||||
gridColumnStart: ['responsive'],
|
||||
gridRow: ['responsive'],
|
||||
gridRowEnd: ['responsive'],
|
||||
gridRowStart: ['responsive'],
|
||||
gridTemplateColumns: ['responsive'],
|
||||
gridTemplateRows: ['responsive'],
|
||||
height: ['responsive'],
|
||||
inset: ['responsive'],
|
||||
justifyContent: ['responsive'],
|
||||
justifyItems: ['responsive'],
|
||||
justifySelf: ['responsive'],
|
||||
letterSpacing: ['responsive'],
|
||||
lineHeight: ['responsive'],
|
||||
listStylePosition: ['responsive'],
|
||||
listStyleType: ['responsive'],
|
||||
margin: ['responsive'],
|
||||
maxHeight: ['responsive'],
|
||||
maxWidth: ['responsive'],
|
||||
minHeight: ['responsive'],
|
||||
minWidth: ['responsive'],
|
||||
objectFit: ['responsive'],
|
||||
objectPosition: ['responsive'],
|
||||
opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
|
||||
order: ['responsive'],
|
||||
outline: ['responsive', 'focus-within', 'focus'],
|
||||
overflow: ['responsive'],
|
||||
overscrollBehavior: ['responsive'],
|
||||
padding: ['responsive'],
|
||||
placeContent: ['responsive'],
|
||||
placeItems: ['responsive'],
|
||||
placeSelf: ['responsive'],
|
||||
placeholderColor: ['responsive', 'dark', 'focus'],
|
||||
placeholderOpacity: ['responsive', 'focus'],
|
||||
pointerEvents: ['responsive'],
|
||||
position: ['responsive'],
|
||||
resize: ['responsive'],
|
||||
ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
|
||||
ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
|
||||
ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
|
||||
ringOpacity: ['responsive', 'focus-within', 'focus'],
|
||||
ringWidth: ['responsive', 'focus-within', 'focus'],
|
||||
rotate: ['responsive', 'hover', 'focus'],
|
||||
scale: ['responsive', 'hover', 'focus'],
|
||||
skew: ['responsive', 'hover', 'focus'],
|
||||
space: ['responsive'],
|
||||
stroke: ['responsive'],
|
||||
strokeWidth: ['responsive'],
|
||||
tableLayout: ['responsive'],
|
||||
textAlign: ['responsive'],
|
||||
textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
|
||||
textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
|
||||
textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
|
||||
textOverflow: ['responsive'],
|
||||
textTransform: ['responsive'],
|
||||
transform: ['responsive'],
|
||||
transformOrigin: ['responsive'],
|
||||
transitionDelay: ['responsive'],
|
||||
transitionDuration: ['responsive'],
|
||||
transitionProperty: ['responsive'],
|
||||
transitionTimingFunction: ['responsive'],
|
||||
translate: ['responsive', 'hover', 'focus'],
|
||||
typography: ['dark', 'responsive'],
|
||||
userSelect: ['responsive'],
|
||||
verticalAlign: ['responsive'],
|
||||
visibility: ['responsive'],
|
||||
whitespace: ['responsive'],
|
||||
width: ['responsive'],
|
||||
wordBreak: ['responsive'],
|
||||
zIndex: ['responsive', 'focus-within', 'focus'],
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
typography
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user