mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-01-19 06:21:47 +01:00
fix some detail + BackUp tailwind.config.js
This commit is contained in:
@@ -10,3 +10,11 @@ img, svg {
|
||||
* {
|
||||
@apply select-none outline-none;
|
||||
}
|
||||
|
||||
.nuxt-content-editor {
|
||||
@apply dark:bg-dark-200 border dark:border-white border-black border-solid;
|
||||
}
|
||||
|
||||
.nuxt-content {
|
||||
@apply dark:text-dark-700;
|
||||
}
|
||||
|
||||
@@ -121,9 +121,6 @@ export default {
|
||||
},
|
||||
changeLanguage(lang) {
|
||||
this.$i18n.setLocale(lang)
|
||||
if (this.$router.currentRoute.fullPath.includes('blog')) {
|
||||
this.$fetch()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
77
content/articles/fr/new-version-new-website.md
Normal file
77
content/articles/fr/new-version-new-website.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
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: 'default'
|
||||
date: 13-12-2020
|
||||
background: false
|
||||
---
|
||||
|
||||
Todo:
|
||||
|
||||
- Parler de pourquoi une nouvelle version
|
||||
- Pourquoi si long
|
||||
- Technologies utilisées
|
||||
- Ce que ca propose (blog etc)
|
||||
- Conclusion
|
||||
- Informations supplémentaires
|
||||
|
||||
## 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
|
||||
- Informations supplémentaires
|
||||
|
||||
## 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
|
||||
@@ -1,21 +1,32 @@
|
||||
---
|
||||
slug: test-1
|
||||
title: Mon premier Article
|
||||
description: C'est un article écrit pour tester mon super système
|
||||
reading_time: 15
|
||||
tags: ["tags.dev", "tags.life"]
|
||||
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: 0
|
||||
tags: ["tags.dev"]
|
||||
cover: 'default'
|
||||
date: 12-04-2020
|
||||
background: false
|
||||
---
|
||||
|
||||
Hey bro
|
||||
Whats'up
|
||||
I'am fine
|
||||
- Informations suplémentaires
|
||||
|
||||
## hey bro
|
||||
```java
|
||||
public void main (String[] args) {
|
||||
System.out.println("New test here !");
|
||||
}
|
||||
```
|
||||
|
||||
# Hey
|
||||
`test` test
|
||||
|
||||
Faut bien test hein
|
||||
> Test
|
||||
|
||||
Test de lien [Twitter](https://twitter.com/ArthurDanj)
|
||||
|
||||
---
|
||||
|
||||
Hey
|
||||
**Hey**
|
||||
__hey__
|
||||
|
||||
~~Hey~~
|
||||
|
||||
@@ -40,12 +40,9 @@
|
||||
<img class="w-full h-auto" :src="'http://localhost:5555/files/'+post.cover" alt="Cover Img" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="my-6 md:my-12 text-gray-800 dark:text-dark-900">
|
||||
|
||||
</p>
|
||||
<nuxt-content
|
||||
:document="post"
|
||||
class="my-6 md:my-12 prose prose-sm sm:prose lg:prose-lg xl:prose-xl prose-black dark:prose-dark-900"
|
||||
class="my-6 md:my-12 max-w-none w-full text-justify prose prose-sm sm:prose lg:prose-lg xl:prose-2xl dark:prose dark:prose-dark"
|
||||
/>
|
||||
<p class="mb-3">
|
||||
{{ $t('blog.read.thanks') }}
|
||||
@@ -64,11 +61,17 @@
|
||||
<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 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-800 mr-2 hover:border-cyan-500 dark:hover:border-cyan-500"
|
||||
class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-800 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>
|
||||
|
||||
<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-800 hover:border-dark-200 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-800 hover:border-dark-200 dark:hover:border-white"
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-row justify-between w-full mb-4" v-if="next || prev">
|
||||
<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'"
|
||||
|
||||
@@ -3,18 +3,18 @@
|
||||
<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" />
|
||||
<img src="@/assets/img/computer.png" alt="It's me !" class="icon"/>
|
||||
</div>
|
||||
<div class="mb-4 md:mb-10 lg:w-1/2 self-center">
|
||||
<h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
|
||||
{{ $t('home.banner.hello') }} <br />
|
||||
{{ $t('home.banner.hello') }} <br/>
|
||||
<span class="text-red-700 font-black">Arthur Danjou</span> 👋
|
||||
</h1>
|
||||
<p class="text-2xl md:text-3xl my-5 font-semibold">
|
||||
{{ $t('home.banner.role') }}
|
||||
</p>
|
||||
<p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-900">
|
||||
{{ $t('home.banner.description', { age: age }) }}
|
||||
{{ $t('home.banner.description', {age: age}) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,9 +25,11 @@
|
||||
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 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
|
||||
@@ -36,8 +38,10 @@
|
||||
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 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>
|
||||
@@ -48,8 +52,10 @@
|
||||
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 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
|
||||
@@ -58,9 +64,12 @@
|
||||
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 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>
|
||||
@@ -80,7 +89,7 @@ export default Vue.extend({
|
||||
title: 'Arthur Danjou - Web & Software Developer'
|
||||
}
|
||||
},
|
||||
async asyncData({ $content }) {
|
||||
async asyncData({$content}) {
|
||||
const infos = await $content('infos').fetch()
|
||||
return {
|
||||
age: infos.age
|
||||
|
||||
@@ -11,6 +11,78 @@ module.exports = {
|
||||
presets: [],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
typography: (theme) => ({
|
||||
dark: {
|
||||
css: [
|
||||
{
|
||||
color: theme('colors.dark.900'),
|
||||
h1: {
|
||||
color: theme('colors.white'),
|
||||
},
|
||||
h2: {
|
||||
color: theme('colors.white'),
|
||||
},
|
||||
h3: {
|
||||
color: theme('colors.white'),
|
||||
},
|
||||
h4: {
|
||||
color: theme('colors.white'),
|
||||
},
|
||||
h5: {
|
||||
color: theme('colors.white'),
|
||||
},
|
||||
h6: {
|
||||
color: theme('colors.white'),
|
||||
},
|
||||
a: {
|
||||
color: theme('color.dark.900'),
|
||||
},
|
||||
strong: {
|
||||
color: theme('color.dark.900'),
|
||||
},
|
||||
blockquote: {
|
||||
color: theme('color.dark.900'),
|
||||
borderLeftColor: theme('colors.white'),
|
||||
},
|
||||
code: {
|
||||
color: theme('color.dark.900'),
|
||||
},
|
||||
pre: {
|
||||
backgroundColor: theme('colors.gray.900'),
|
||||
color: theme('colors.dark.900'),
|
||||
},
|
||||
thead: {
|
||||
color: theme('colors.dark.900'),
|
||||
borderBottomColor: theme('colors.dark.700'),
|
||||
},
|
||||
'tbody tr': {
|
||||
borderBottomColor: theme('colors.dark.700'),
|
||||
},
|
||||
'ol > li::before': {
|
||||
color: theme('colors.dark.700'),
|
||||
},
|
||||
'ul > li::before': {
|
||||
backgroundColor: theme('colors.dark.700'),
|
||||
},
|
||||
maxWidth: '65ch',
|
||||
'[class~="lead"]': {
|
||||
color: theme('colors.dark.700'),
|
||||
},
|
||||
hr: {
|
||||
borderColor: theme('colors.white'),
|
||||
},
|
||||
'figure figcaption': {
|
||||
color: theme('colors.dark.700'),
|
||||
},
|
||||
'a code': {
|
||||
color: theme('colors.dark.900'),
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
},
|
||||
screens: {
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
@@ -831,7 +903,6 @@ module.exports = {
|
||||
placeholderOpacity: ['responsive', 'focus'],
|
||||
pointerEvents: ['responsive'],
|
||||
position: ['responsive'],
|
||||
prose: ['dark'],
|
||||
resize: ['responsive'],
|
||||
ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
|
||||
ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
|
||||
@@ -858,6 +929,7 @@ module.exports = {
|
||||
transitionProperty: ['responsive'],
|
||||
transitionTimingFunction: ['responsive'],
|
||||
translate: ['responsive', 'hover', 'focus'],
|
||||
typography: ['dark'],
|
||||
userSelect: ['responsive'],
|
||||
verticalAlign: ['responsive'],
|
||||
visibility: ['responsive'],
|
||||
|
||||
Reference in New Issue
Block a user