mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-02-01 20:57:54 +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 {defineNuxtConfig} from "@nuxtjs/composition-api";
|
||||||
|
import {NuxtConfig} from "@nuxt/types";
|
||||||
import head from './settings/Head'
|
import head from './settings/Head'
|
||||||
import buildModules from './settings/BuildModules'
|
import buildModules from './settings/BuildModules'
|
||||||
import modules from './settings/Modules'
|
import modules from './settings/Modules'
|
||||||
@@ -6,7 +7,6 @@ import build from './settings/Build'
|
|||||||
import arch from './settings/Arch'
|
import arch from './settings/Arch'
|
||||||
import plugins from './settings/Plugins'
|
import plugins from './settings/Plugins'
|
||||||
import css from './settings/Style'
|
import css from './settings/Style'
|
||||||
import {NuxtConfig} from "@nuxt/types";
|
|
||||||
|
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
head,
|
head,
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
"@nuxt/content": "^1.11.1",
|
"@nuxt/content": "^1.11.1",
|
||||||
"@nuxtjs/axios": "^5.12.5",
|
"@nuxtjs/axios": "^5.12.5",
|
||||||
"@nuxtjs/composition-api": "^0.22.2",
|
"@nuxtjs/composition-api": "^0.22.2",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.9.1",
|
||||||
"nuxt": "^2.14.12",
|
"nuxt": "^2.14.12",
|
||||||
"nuxt-i18n": "6.21.1",
|
"nuxt-i18n": "6.21.1",
|
||||||
"prism-themes": "1.6.0",
|
"prism-themes": "1.6.0",
|
||||||
@@ -22,10 +22,10 @@
|
|||||||
"@nuxt/types": "^2.14.12",
|
"@nuxt/types": "^2.14.12",
|
||||||
"@nuxt/typescript-build": "^2.0.4",
|
"@nuxt/typescript-build": "^2.0.4",
|
||||||
"@nuxtjs/color-mode": "2.0.5",
|
"@nuxtjs/color-mode": "2.0.5",
|
||||||
"@nuxtjs/tailwindcss": "^4.0.1",
|
|
||||||
"node-sass": "^5.0.0",
|
"node-sass": "^5.0.0",
|
||||||
"nuxt-vite": "^0.0.36",
|
"nuxt-vite": "^0.0.36",
|
||||||
"postcss": "^8.2.8",
|
"nuxt-windicss": "^0.4.6",
|
||||||
"sass-loader": "^11.0.1"
|
"sass-loader": "10.1.1",
|
||||||
|
"vue-windicss-preprocess": "^2.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,2 +1,3 @@
|
|||||||
// Build Configuration: https://go.nuxtjs.dev/config-build
|
// Build Configuration: https://go.nuxtjs.dev/config-build
|
||||||
export default {}
|
export default {
|
||||||
|
}
|
||||||
|
|||||||
@@ -8,18 +8,34 @@ const color_mode = {
|
|||||||
classSuffix: '',
|
classSuffix: '',
|
||||||
}
|
}
|
||||||
|
|
||||||
const tailwindcss = {
|
const windicss = {
|
||||||
cssPath: './assets/css/tailwind.css',
|
scan: {
|
||||||
configPath: 'tailwind.config.js',
|
dirs: [ './' ],
|
||||||
exposeConfig: true,
|
exclude: [
|
||||||
jit: true
|
'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 [
|
export default [
|
||||||
'@nuxt/typescript-build',
|
'@nuxt/typescript-build',
|
||||||
'@nuxtjs/composition-api',
|
'@nuxtjs/composition-api',
|
||||||
'@nuxt/postcss8',
|
['nuxt-windicss', windicss],
|
||||||
['@nuxtjs/tailwindcss', tailwindcss],
|
|
||||||
//'nuxt-vite',
|
//'nuxt-vite',
|
||||||
['@nuxtjs/color-mode', color_mode],
|
['@nuxtjs/color-mode', color_mode],
|
||||||
] as NuxtOptionsModule[]
|
] as NuxtOptionsModule[]
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
transform: translate(3px, -3px);
|
transform: translate(3px, -3px);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
@@ -13,6 +15,7 @@ body {
|
|||||||
|
|
||||||
* {
|
* {
|
||||||
@apply select-none outline-none;
|
@apply select-none outline-none;
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nuxt-content-editor {
|
.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"
|
default: "Never"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props: FormationProps) {
|
setup(props: ExperienceProps) {
|
||||||
const {$i18n} = useContext()
|
const {$i18n} = useContext()
|
||||||
const getBeginDate = computed(() => {
|
const getBeginDate = computed(() => {
|
||||||
const dateFormat = props.begin.split('-')
|
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>
|
<template>
|
||||||
<div class="container">
|
<main class="index px-5 xl:px-64">
|
||||||
<div>
|
<section class="mt-16 md:mt-32 banner w-full mb-16">
|
||||||
<Logo />
|
<div class="flex flex-col lg:flex-row-reverse mb-4">
|
||||||
<h1 class="title">
|
<div class="mb-4 md:mb-10 lg:w-1/2 self-center">
|
||||||
nuxt-ts-app
|
<h1 @click="debug" class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
|
||||||
</h1>
|
{{ $t('home.banner.hello') }} <br/>
|
||||||
<div class="links">
|
<span class="text-red-700 font-black">Arthur Danjou</span> 👋
|
||||||
<a
|
</h1>
|
||||||
href="https://nuxtjs.org/"
|
<p class="text-2xl md:text-3xl my-5 font-semibold">
|
||||||
target="_blank"
|
{{ $t('home.banner.role') }}
|
||||||
rel="noopener noreferrer"
|
</p>
|
||||||
class="button--green"
|
<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}) }}
|
||||||
Documentation
|
</p>
|
||||||
</a>
|
|
||||||
<div
|
|
||||||
class="button--grey"
|
|
||||||
@click="setLocale(getLocale.toString() === 'fr' ? 'en' : 'fr')"
|
|
||||||
>
|
|
||||||
{{ $t("test") }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex flex-col items-center w-full">
|
||||||
</div>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue'
|
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({
|
export default Vue.extend({
|
||||||
|
head() {
|
||||||
setup() {
|
|
||||||
return {
|
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
.container {
|
.index {
|
||||||
margin: 0 auto;
|
.title {
|
||||||
min-height: 100vh;
|
line-height: 3rem;
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.arrow-btn .icon {
|
||||||
font-family:
|
transform: translate(3px, -5px);
|
||||||
'Quicksand',
|
transition-duration: .3s;
|
||||||
'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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
.arrow-btn:hover .icon {
|
||||||
font-weight: 300;
|
transform: translate(3px, 0);
|
||||||
font-size: 42px;
|
}
|
||||||
color: #526488;
|
|
||||||
word-spacing: 5px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links {
|
|
||||||
padding-top: 15px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
"strict": true,
|
"strict": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"baseUrl": "./nuxt-ts-app",
|
"baseUrl": "./artsite",
|
||||||
"paths": {
|
"paths": {
|
||||||
"~/*": ["./*"],
|
"~/*": ["./*"],
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["./src/*"]
|
||||||
|
|||||||
@@ -1,17 +1,7 @@
|
|||||||
const colors = require('tailwindcss/colors')
|
const colors = require('windicss/colors')
|
||||||
|
const typography = require('windicss/plugin/typography')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
purge: {
|
|
||||||
enabled: process.env.NODE_ENV === 'production',
|
|
||||||
content: [
|
|
||||||
'components/**/*.vue',
|
|
||||||
'layouts/**/*.vue',
|
|
||||||
'pages/**/*.vue',
|
|
||||||
'plugins/**/*.ts',
|
|
||||||
'nuxt.config.ts',
|
|
||||||
'content/**/*.md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
presets: [],
|
presets: [],
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
@@ -841,128 +831,7 @@ module.exports = {
|
|||||||
'active',
|
'active',
|
||||||
'disabled',
|
'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: [
|
plugins: [
|
||||||
require('@tailwindcss/typography'),
|
typography
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user