i18n updates + HP + components

2022-12-22 11:01:52 +01:00 · 2022-12-22 11:01:52 +01:00 · 23c79e579c
parent 1ab35db47d
commit 23c79e579c
67 changed files with 1355 additions and 542 deletions
--- a/.astro-i18n/generated.d.ts
+++ b/.astro-i18n/generated.d.ts
@ -1,10 +1,10 @@
 type DefaultLangCode = "fr"
 type SupportedLangCode = "en"
-type LangCode = "fr" | "en"
-type RouteUri = | "/articles" | "/tags/[tag]" | "/tags" | "/" 
-type RouteParams = {"/articles": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; }
-type TranslationPath = "accueil" | "tagline" | "copyright" | "contact" | "contactLien" | "contactTel" | "contenuVide" | "header.skipLink" | "header.mainNav" | "header.homeLink" | "sitemap" | "prevNext.contenus" | "prevNext.precedent" | "prevNext.suivant" | "article.titre" | "article.tagline" | "article.published" | "meta.publication" | "meta.modification" | "meta.credit" | "fragments.titre" | "fragments.tagline" | "projet.titre" | "projet.tagline" | "projet.cta" | "projet.lienTitle" | "projet.fenetre" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.article.title" | "seo.article.description" | "seo.projet.title" | "seo.projet.description" | "seo.code.title" | "seo.code.description" | "index.articles" | "index.title" | "index.quoi" | "index.comment" | "index.opensource" | "index.projetsRecents" | "index.articlesRecents"
-type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact": {} | undefined; "contactLien": {} | undefined; "contactTel": {} | undefined; "contenuVide": {} | undefined; "header.skipLink": {} | undefined; "header.mainNav": {} | undefined; "header.homeLink": {} | undefined; "sitemap": {} | undefined; "prevNext.contenus": {} | undefined; "prevNext.precedent": {} | undefined; "prevNext.suivant": {} | undefined; "article.titre": {} | undefined; "article.tagline": {} | undefined; "article.published": { datetime: unknown; options: unknown; }; "meta.publication": {} | undefined; "meta.modification": {} | undefined; "meta.credit": {} | undefined; "fragments.titre": {} | undefined; "fragments.tagline": {} | undefined; "projet.titre": {} | undefined; "projet.tagline": {} | undefined; "projet.cta": {} | undefined; "projet.lienTitle": {} | undefined; "projet.fenetre": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.projet.title": {} | undefined; "seo.projet.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "index.articles": {} | undefined; "index.title": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.projetsRecents": {} | undefined; "index.articlesRecents": {} | undefined; }
+type LangCode = DefaultLangCode | SupportedLangCode
+type RouteUri = | "/articles/[slug]" | "/articles" | "/tags/[tag]" | "/tags" | "/" 
+type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; }
+type TranslationPath = "accueil" | "tagline" | "copyright" | "contact.title" | "contact.email" | "contact.tel" | "contenuVide" | "header.skipLink" | "header.mainNav" | "header.homeLink" | "sitemap" | "prevNext.contenus" | "prevNext.precedent" | "prevNext.suivant" | "article.titre" | "article.tagline" | "article.published" | "meta.publication" | "meta.modification" | "meta.credit" | "fragments.titre" | "fragments.tagline" | "projet.titre" | "projet.tagline" | "projet.cta" | "projet.lienTitle" | "projet.fenetre" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.article.title" | "seo.article.description" | "seo.projet.title" | "seo.projet.description" | "seo.code.title" | "seo.code.description" | "index.articles.pageName" | "index.articles.subtitle" | "index.title" | "index.subtitle" | "index.quoi" | "index.comment" | "index.opensource" | "index.writing" | "index.latestProjects" | "index.latestArticles" | "contact.contenuVide"
+type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact.title": {} | undefined; "contact.email": {} | undefined; "contact.tel": {} | undefined; "contenuVide": {} | undefined; "header.skipLink": {} | undefined; "header.mainNav": {} | undefined; "header.homeLink": {} | undefined; "sitemap": {} | undefined; "prevNext.contenus": {} | undefined; "prevNext.precedent": {} | undefined; "prevNext.suivant": {} | undefined; "article.titre": {} | undefined; "article.tagline": {} | undefined; "article.published": { datetime: unknown; options: unknown; }; "meta.publication": {} | undefined; "meta.modification": {} | undefined; "meta.credit": {} | undefined; "fragments.titre": {} | undefined; "fragments.tagline": {} | undefined; "projet.titre": {} | undefined; "projet.tagline": {} | undefined; "projet.cta": {} | undefined; "projet.lienTitle": {} | undefined; "projet.fenetre": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.projet.title": {} | undefined; "seo.projet.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "index.articles.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.title": {} | undefined; "index.subtitle": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.writing": {} | undefined; "index.latestProjects": {} | undefined; "index.latestArticles": {} | undefined; "contact.contenuVide": {} | undefined; }

 declare module "astro-i18n" {
 	export * from "astro-i18n/"
@ -12,17 +12,19 @@ declare module "astro-i18n" {
 	export function l<Uri extends RouteUri>(
 		route: Uri | string & {},
 		...args: undefined extends RouteParams[Uri]
-			? [params?: RouteParams[Uri], query?: Record<string, string>, langCode?: LangCode]
-			: [params: RouteParams[Uri], query?: Record<string, string>, langCode?: LangCode]
+			? [params?: RouteParams[Uri], targetLangCode?: LangCode, routeLangCode?: LangCode]
+			: [params: RouteParams[Uri], targetLangCode?: LangCode, routeLangCode?: LangCode]
 	): string
 	
 	export function t<Path extends TranslationPath>(
-		path: Path | string & {},
+		path: Path,
 		...args: undefined extends TranslationOptions[Path]
 			? [options?: TranslationOptions[Path], langCode?: LangCode]
 			: [options: TranslationOptions[Path], langCode?: LangCode]
 	): string
 	
+	export function extractRouteLangCode(route: string): LangCode | undefined
+	
 	type Translation = string | { [translationKey: string]: string | Translation }
 	type Translations = { [langCode: string]: Record<string, Translation> }
 	type RouteTranslations = { [langCode: string]: Record<string, string> }
@ -37,6 +39,7 @@ declare module "astro-i18n" {
 		get langCode(): LangCode
 		set langCode(langCode: LangCode)
 		get formatters(): Record<string, InterpolationFormatter>
+		init(Astro: { url: URL }, formatters?: Record<string, InterpolationFormatter>): void
 		getFormatter(name: string): InterpolationFormatter | undefined
 		setFormatter(name: string, formatter: InterpolationFormatter): void
 		deleteFormatter(name: string): void
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -9,5 +9,8 @@ import mdx from "@astrojs/mdx";

 // https://astro.build/config
 export default defineConfig({
+	experimental: {
+		contentCollections: true,
+	},
 	integrations: [i18n(), image(), mdx()],
 });
--- a/astro.i18n.config.ts
+++ b/astro.i18n.config.ts
@ -8,9 +8,5 @@ export default defineAstroI18nConfig({
 		fr: "src/i18n/fr.json",
 		en: "src/i18n/en.json",
 	},
-	routeTranslations: {
-		en: {
-			articles: "blog",
-		},
-	},
+	routeTranslations: {},
 });
--- a/package.json
+++ b/package.json
@ -13,15 +13,13 @@
 		"i18n:sync": "astro-i18n sync"
 	},
 	"dependencies": {
-		"@astrojs/image": "^0.12.0",
-		"@astrojs/mdx": "^0.12.0",
-		"@astrojs/rss": "^1.0.3",
-		"astro": "^1.6.12",
-		"astro-i18n": "^1.2.0",
-		"open-props": "^1.5.1"
+		"@astrojs/image": "^0.12.1",
+		"@astrojs/mdx": "^0.13.0",
+		"astro": "1.7.2",
+		"astro-i18n": "^1.4.1"
 	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.13",
-		"postcss": "^8.4.19"
+		"postcss": "^8.4.20"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/assets/images/home/about.svg
+++ b/public/assets/images/home/about.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 325 350.01">
+  <path fill="#ff826c" d="M200 0v174.86h-10V110h-30v20h-14.8v44.86H110V240h100.2v-60H230V0h-30z"/>
+  <path fill="#162e57" d="M195 85h-49.8v45H160v-20h35V85z"/>
+  <path fill="#d4ebf2" d="M50 240h64.72v60H50zm185.18-60.26V240H125v60h165V179.74h-54.82z"/>
+  <path fill="#ff826c" d="M290 205h30v20h-30z"/>
+  <path fill="#d4ebf2" d="M80 309.98h70v10.03H80zM0 300h70v10.03H0zm255 0h70v10.03h-70zm-115 29.98h70v10.03h-70zm-105 10h70v10.03H35z"/>
+  <path fill="#ff826c" d="M100 185h30v125h-30z"/>
+</svg>
--- a/public/assets/images/home/icon-desktop.svg
+++ b/public/assets/images/home/icon-desktop.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="desktop">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#162e57" d="M15 35h120v80H15z"/>
+    <path fill="#ff826c" d="M15 35h120v8H15z"/>
+    <path fill="#162e57" d="M17.67 37.67h2.67v2.67h-2.67zm5.33 0h2.67v2.67H23zm5.33 0H31v2.67h-2.67z"/>
+    <path fill="#ff826c" d="M25.67 59H55v26.67H25.67zm0 29.33H55V91H25.67zM60.33 59h29.33v26.67H60.33zm0 29.33h29.33V91H60.33zM95 59h29.33v26.67H95zm0 29.33h29.33V91H95z"/>
+  </g>
+</svg>
--- a/public/assets/images/home/icon-heart.svg
+++ b/public/assets/images/home/icon-heart.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="heart">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#ff826c" d="M103.57 50.43V39H80.71v11.43H69.29V39H46.43v11.43H35v34.28h11.43v11.43h11.43v11.43h11.43V119h11.42v-11.43h11.43V96.14h11.43V84.71H115V50.43h-11.43z"/>
+  </g>
+</svg>
--- a/public/assets/images/home/icon-methodo.svg
+++ b/public/assets/images/home/icon-methodo.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 150 150">
+  <path fill="#162e57" d="m100.52 58.11 3.94 2.28 3.94 2.27 6.76-11.7-3.94-2.27 4.55-7.89-7.89-4.55-4.55 7.89-2.2 3.81-15.77-9.1 2.2-3.82 4.56-7.88-7.89-4.56-4.55 7.89-3.94-2.28-6.83 11.83 7.88 4.55-2.2 3.81 23.66 13.66 2.27-3.94zM51.75 87.95l-2.27 3.94-3.94-2.28-3.94-2.27-6.76 11.7 3.94 2.27-4.55 7.89 7.89 4.55 6.82-11.83 15.77 9.11-6.83 11.82 7.89 4.56 4.55-7.89 3.94 2.28 6.76-11.7-3.94-2.28-3.95-2.28 2.28-3.93-23.66-13.66z"/>
+  <path fill="#ff826c" d="m75.41 101.6-3.94-2.27L94.3 59.78l3.94 2.27h.01L74.59 48.39v.01l3.94 2.27L55.7 90.22l-3.94-2.27h-.01l23.66 13.66v-.01z"/>
+</svg>
--- a/public/assets/images/home/icon-mobile.svg
+++ b/public/assets/images/home/icon-mobile.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="mobile">
+    <path fill="#d4ebf2" d="M0 0h150v150H0z"/>
+    <path fill="#10113a" d="M48.33 25h53.33v100H48.33z"/>
+    <path fill="#162e57" d="M71.67 113.33h6.67V120h-6.67zM55 31.67h40v76.67H55z"/>
+    <path fill="#ff826c" d="M62.78 38.33h24.44v22.22H62.78zm0 24.45h24.44V65H62.78zm0 8.89h24.44v22.22H62.78zm0 24.44h24.44v2.22H62.78z"/>
+  </g>
+</svg>
--- a/public/assets/images/home/icon-philo.svg
+++ b/public/assets/images/home/icon-philo.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="articles">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#162e57" d="M56.54 51.92v9.23H28.85v9.24H15v13.84h13.85v9.23h4.61v13.85h13.85V93.46h9.23v9.23h36.92V51.92H56.54z"/>
+    <path fill="#ff826c" d="M107.31 47.31h13.85v9.23h-13.85zm0 23.07H135v9.23h-27.69zm13.84-32.3H135v9.23h-13.85zm-13.84 55.38h13.85v9.23h-13.85zm13.84 9.23H135v9.23h-13.85z"/>
+  </g>
+</svg>
--- a/public/assets/images/home/methodo-1.svg
+++ b/public/assets/images/home/methodo-1.svg
@ -0,0 +1,12 @@
+<svg id="aa0241e5-d9cf-4e93-b83f-4d24f8d4da9a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 495">
+  <g>
+    <polygon points="114.46 90 0 90 0 295 34.46 295 34.46 495 64.46 495 64.46 295 79.46 295 79.46 495 109.46 495 109.46 295 114.46 295 114.46 90" fill="#162e57"/>
+    <polygon points="94.46 25.16 94.46 0 49.46 0 49.46 25.16 49.46 35.16 109.46 35.16 109.46 25.16 94.46 25.16" fill="#162e57"/>
+  </g>
+  <polygon points="280 125 280 120 285 120 290 120 290 105.16 285 105.16 285 95.16 275 95.16 275 105.16 275 110 255 110 255 105.16 255 95.16 245 95.16 245 105.16 240 105.16 240 120.16 250 120.16 250 125 255 125 255 175.16 250 175.16 250 180.16 245 180.16 240 180.16 240 195 245 195 245 205 255 205 255 190 275 190 275 205 285 205 285 195 290 195 290 180.16 285 180.16 280 180.16 280 175.16 275 175.16 275 125 280 125" fill="#10113a"/>
+  <g>
+    <polygon points="94.46 90 94.46 35.16 49.38 35.16 49.38 90 74.46 90 74.46 120 104.46 120 104.46 90 94.46 90" fill="#ff826c"/>
+    <polygon points="55 90 0 90 0 155 0 210.16 0 305 34.46 305 34.46 210.16 55 210.16 55 90" fill="#ff826c"/>
+    <polygon points="275 125 240 125 240 130 155 130 114.46 130 114.46 165 155 165 255 165 255 142.53 275 142.53 275 125" fill="#ff826c"/>
+  </g>
+</svg>
--- a/public/assets/images/home/methodo.svg
+++ b/public/assets/images/home/methodo.svg
@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 510 495">
+  <path fill="#162e57" d="M40 280h30v215H40zm60 0H75v125h10v90h30V280h-15z"/>
+  <path fill="#ff826c" d="M60 0v90h45V30h15V0H60z"/>
+  <path fill="#d4ebf2" d="M15 90h115v190H15z"/>
+  <path fill="#162e57" d="M85 90h15v135H85z"/>
+  <path fill="#ff826c" d="M130 110V90h-25v315h25V140h120v-30H130z"/>
+  <path fill="#162e57" d="M280 185v-15h-5v-15h-5v-55h5v-5h-30v5h5v55h-5v15h-5v15h-10v25h60v-25h-10z"/>
+  <path fill="#ff826c" d="M275 65h10v10h-10zm-15 10h5v5h-5zm0-30h10v10h-10zm130 165v-5h-10v-80h5v-5h-25v5h5v80h-10v5h-5v30h5v5h35v-5h5v-30h-5zm40-90v5h5v115h15V125h5v-5h-25z"/>
+  <path fill="#d4ebf2" d="M365 145v5h40v110h5V150h40v-5h-85z"/>
+  <path fill="#ff826c" d="M440 240h5v5h-5z"/>
+  <path fill="#162e57" d="M435 195h15v45h-15z"/>
+  <path fill="#d4ebf2" d="M510 260H180v25h10v210h310V285h10v-25z"/>
+  <path fill="#ff826c" d="M15 90v25H0v195h15v95h60V90H15z"/>
+</svg>
--- a/public/assets/images/home/offres.svg
+++ b/public/assets/images/home/offres.svg
@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="aefb6044-044f-4f8d-bc9f-2a475efc35ba" viewBox="0 0 420 390">
+  <path fill="#ff826c" d="M155 20h40v50.21h-40Zm0-20h50v20h-50Z"/>
+  <path fill="#d4ebf2" d="M255 150H155V40H70v30H40v140.57h115V180h100v-30z"/>
+  <path fill="#ff826c" d="M280 180h-25v-25h25Z"/>
+  <path fill="#10113a" d="M40 210v40h145v140h40V210Zm305-110v85h-90v12.54h110V100Z"/>
+  <path fill="#ff826c" d="M240 195h177.33v25H240Zm75 25h30v170h-30Z"/>
+  <path fill="#10113a" d="M315 220h30v15h-30Z"/>
+  <path fill="#ff826c" d="M30 250V105H0v170h10v115h20V275h80v115h20V275h10v-25Z"/>
+  <path fill="#d4ebf2" d="M410 155v-10h-30v50h30v-15h5v-5h-5v-14.95h5V175h5v-20h-10z"/>
+  <path fill="#ff826c" d="M385 55h10v20h-10Zm-10 30h10v10h-10Zm20-40h10v10h-10Zm-5 55h15v10h-15Zm10 20h5v15h-5Zm-10 20h5v5h-5Z"/>
+</svg>
--- a/src/components/CardEditorial.astro
+++ b/src/components/CardEditorial.astro
@ -0,0 +1,112 @@
+---
+const { item, routeName } = Astro.props;
+---
+
+<div class="card">
+	<div>
+		<h3>
+			<a class="card__link" href={`${routeName}/${item.frontmatter.slug}`}
+				>{item.frontmatter.title}</a
+			>
+		</h3>
+		<h4>{item.frontmatter.subtitle}</h4>
+		<!-- <tags-list list={item.tags}></tags-list> -->
+	</div>
+</div>
+
+<style scoped>
+	.card {
+		padding: 2.4rem 1.6rem;
+		position: relative;
+		display: block;
+		height: 100%;
+		cursor: pointer;
+		box-shadow: var(--shadow-elevation-medium);
+		background-color: var(--white);
+	}
+	.card:hover {
+		box-shadow: var(--shadow-elevation-high);
+	}
+	.card:focus-within {
+		box-shadow: var(--shadow-elevation-high);
+	}
+	.card:hover h3::after,
+	.card:focus-within h3::after {
+		transform: translateX(0);
+		opacity: 1;
+	}
+	.card:hover h3,
+	.card:focus-within h3 {
+		color: var(--brique);
+	}
+	.card::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		height: 100%;
+		width: 2px;
+		transform: scaleY(0);
+		transform-origin: bottom;
+		background-color: var(--brique);
+	}
+	.card:hover::before,
+	.card:focus-within::before {
+		transform: scaleY(1);
+		transform-origin: top;
+	}
+
+	h3 {
+		padding-right: 3rem;
+		position: relative;
+		font-size: clamp(2.4rem, 2.2222rem + 0.5556vw, 2.8rem);
+		font-weight: bold;
+		text-transform: none;
+	}
+	h3::after {
+		content: url("~assets/svg/arrow-right.svg");
+		position: absolute;
+		width: 30px;
+		top: 0;
+		right: 0;
+		opacity: 0;
+		transform: translateX(1rem);
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.card {
+			transition: box-shadow 0.2s ease;
+		}
+		.card::before {
+			transition: transform 0.2s ease-in-out;
+		}
+		h3 {
+			transition: color ease 0.2s;
+		}
+		h3::after {
+			transition: opacity ease 0.2s, transform ease 0.2s;
+		}
+	}
+
+	.card h4 {
+		margin-top: 0.8rem;
+		font-size: 2rem;
+		font-weight: 500;
+		color: var(--darkBlue);
+	}
+
+	@media screen and (min-width: 768px) {
+		h3 {
+			margin-top: 0;
+			margin-bottom: 0.8rem;
+		}
+		.card {
+			padding: 3.2rem 2.4rem;
+		}
+	}
+	@media screen and (min-width: 1060px) {
+		.card {
+			margin: 0;
+		}
+	}
+</style>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -4,38 +4,36 @@ import { t, l } from "astro-i18n";
 import Navigation from "../components/Navigation.astro";
 ---

-<header class="" role="banner">
+<header role="banner">
 	<a href="#skip-content" class="skip-link"> {t("header.skipLink")}</a>
-	<p class="logo">
-		<a href={l("/")} aria-label={t("header.homeLink")}>nardu.in</a>
-	</p>
-	<Navigation />
+	<div class="container">
+		<a href={l("/")} class="logo" aria-label={t("header.homeLink")}>nardu.in</a>
+		<Navigation />
+	</div>
 </header>

 <style>
 	header {
+		container-name: header;
+		container-type: inline-size;
+	}
+	.container {
 		padding: var(--space-xs-s) 0;
-		margin: 0 auto var(--space-xs-s) 0;
 		display: flex;
 		flex-flow: row wrap;
 		gap: var(--space-xs-s);
-		justify-content: space-between;
+		justify-content: center;
+		align-items: baseline;
 		inline-size: 100%;
 	}
-	header > .logo {
-		/* margin-inline-end: auto; */
-		flex-grow: 1;
-		/* flex-basis: 100%; */
-		text-align: center;
+	@container header (min-width: 31rem) {
+		.container {
+			justify-content: space-between;
+		}
 	}
-	header > .logo a {
-		text-align: center;
-	}
-	header > :global(:last-child) {
-		flex-grow: 999;
-		margin-inline-start: auto;
-	}
-	a {
+	:global(a) {
+		color: var(--color-dark);
+		font-weight: normal;
 		text-decoration: none;
 	}
 	.skip-link {
--- a/src/components/LangSwitcher.astro
+++ b/src/components/LangSwitcher.astro
@ -0,0 +1,21 @@
+---
+import { l, astroI18n } from "astro-i18n";
+
+// get all the locales available on the website and remove the one currently in use
+const availableLocales = astroI18n.langCodes.filter(
+	(locale) => locale !== astroI18n.langCode
+);
+// current path
+const currentRoute = Astro.url.pathname;
+---
+
+<ul role="list">
+	{
+		// create a list of available alternative locale
+		availableLocales.map((locale) => (
+			<li>
+				<a href={l(currentRoute as any, {}, locale as any)}>{locale}</a>
+			</li>
+		))
+	}
+</ul>
--- a/src/components/LanguageSwitcher.astro
+++ b/src/components/LanguageSwitcher.astro
@ -1,26 +0,0 @@
---
-import { l, astroI18n } from "astro-i18n";
-import { I18nProvider } from "astro-i18n/components";
-
-// get the locale currently in use
-const currentLocale = astroI18n.langCode;
-// get all the locales available on the website and remove the one currently in use
-const availableLocales = astroI18n.langCodes.filter(
-	(locale) => locale !== currentLocale
-);
-// current path
-const currentRoute = Astro.url.pathname;
---
-
-<I18nProvider>
-	<ul role="list">
-		{
-			// create a list of available alternative locale
-			availableLocales.map((locale) => (
-				<li>
-					<a href={l(currentRoute as any, {}, {}, locale as any)}>{locale}</a>
-				</li>
-			))
-		}
-	</ul>
-</I18nProvider>
--- a/src/components/ListCards.astro
+++ b/src/components/ListCards.astro
@ -0,0 +1,15 @@
+---
+const { list, routeName } = Astro.props;
+
+import CardEditorial from "./CardEditorial.astro";
+---
+
+<ul role="list">
+	{
+		list.map((item) => (
+			<li class="list__item">
+				<CardEditorial item={item} routeName={routeName} />
+			</li>
+		))
+	}
+</ul>
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@ -1,16 +1,16 @@
 ---
 import { t, l } from "astro-i18n";
-import LanguageSwitcher from "./LanguageSwitcher.astro";
+import LanguageSwitcher from "./LangSwitcher.astro";
 ---

 <nav role="navigation" aria-label={t("header.mainNav")}>
 	<ul class="main-nav" role="list">
 		<li>
-			<a href={l("/")}>{t("accueil")}</a>
+			<a href={l("/articles")}>{t("article.titre")}</a>
 			<span aria-hidden="true">&middot;</span>
 		</li>
 		<li>
-			<a href={l("/articles")}>{t("article.titre")}</a>
+			<a href={l("/")}>{t("projet.titre")}</a>
 			<span aria-hidden="true">&middot;</span>
 		</li>
 		<li>
@ -21,8 +21,8 @@ import LanguageSwitcher from "./LanguageSwitcher.astro";
 			<a
 				href="mailto:contact@nardu.in"
 				class="nice-link"
-				title={t("contactLien")}
-				>{t("contact")}
+				title={t("contact.email")}
+				>{t("contact.title")}
 			</a>
 			<span aria-hidden="true">&#x7C;</span>
 		</li>
--- a/src/components/QuickAccessCard.astro
+++ b/src/components/QuickAccessCard.astro
@ -0,0 +1,81 @@
+---
+const { item } = Astro.props;
+---
+
+<div class="card">
+	<div class="card-container">
+		<div class="card__illustration">
+			<img
+				src={item.quickImage}
+				width="150"
+				height="150"
+				alt=""
+				aria-hidden="true"
+			/>
+		</div>
+		<a href={`#${item.id}`} class="card__link clean-link">{item.quickTitle}</a>
+	</div>
+</div>
+
+<style>
+	.card {
+		container-name: card;
+		container-type: inline-size;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+	.card-container {
+		padding: var(--space-xs-s);
+		position: relative;
+		display: flex;
+		block-size: 100%;
+		flex-flow: column;
+		align-items: center;
+		text-align: center;
+		gap: var(--space-xs);
+		cursor: pointer;
+		background-color: var(--color-light-blue);
+		transform: translateY(0);
+	}
+	.card:focus-within {
+		outline: dotted 3px var(--color-blue);
+	}
+	.card:focus-within .card__link:focus {
+		outline: dotted 3px transparent;
+	}
+	.card__link {
+		font-weight: normal;
+		text-decoration: none;
+		color: currentColor;
+	}
+	.card__link:hover {
+		text-decoration: none;
+	}
+	.card__link::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.card {
+			transition: all ease 0.2s;
+		}
+		.card:hover {
+			transform: translateY(-10px);
+			box-shadow: var(--shadow-elevation-high);
+		}
+		.card:focus-within {
+			transform: translateY(-10px);
+		}
+	}
+
+	@container card (min-width: 20rem) {
+		.card-container {
+			flex-direction: row;
+			text-align: left;
+		}
+		.card__illustration {
+			max-inline-size: 100px;
+		}
+	}
+</style>
--- a/src/data/HP/en/01-offre.md
+++ b/src/data/HP/en/01-offre.md
@ -0,0 +1,28 @@
+---
+type: section
+id: offre
+lang: en
+image: /assets/images/home/offres.svg
+order: 1
+quickTitle: My offers
+quickImage: /assets/images/home/icon-desktop.svg
+---
+
+## Full website offer.
+
+### Small website, blog, landing page…
+
+Whether it's a creation or a redesign, I can handle everything:
+
+- graphic design,
+- custom development,
+- configuration of a content management system (if needed),
+- hosting and deploying
+- maintenance
+
+### Bigger websites, e-commerce.
+
+When the project is larger, I call on talented partners who share the same values:
+
+- [Rose Primaire](https://roseprimaire.com/) for the monitoring and management of the project,
+- [Sylvain Plantier](https://jedessinebien.com/) and/or [Benoît Etchevery](http://ben-etche.com/) for illustration and art direction
--- a/src/data/HP/en/02-methodo.md
+++ b/src/data/HP/en/02-methodo.md
@ -0,0 +1,29 @@
+---
+type: section
+id: methodology
+lang: en
+image: /assets/images/home/methodo.svg
+order: 2
+quickTitle: My methodology
+quickImage: /assets/images/home/icon-methodo.svg
+---
+
+## Methodology.
+
+### Accessibility by default.
+
+Committed to a more accessible web, I create **websites** relying on the [french General Accessibility Guidelines (RGAA)](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/) as well as the [Opquast recommandations.](https://www.opquast.com/en/making-the-web-better/)
+
+### Sobriety by choice.
+
+I specialize in the development of **static websites**, adopting an [eco-design](https://en.wikipedia.org/wiki/Ecological_design) approach.  
+It means that the website is designed to only include the necessary functionalities for its use.
+
+This methodology has **many advantages:**
+
+- great performances
+- enhanced security
+- reduced costs
+- easier maintenance
+
+When the project requires it, I set up a content management system (CMS) decoupled from the interface. This ensures that **the website stays online** even if the CMS stops working.
--- a/src/data/HP/en/03-about.md
+++ b/src/data/HP/en/03-about.md
@ -0,0 +1,24 @@
+---
+type: section
+id: about
+lang: en
+image: /assets/images/home/about.svg
+order: 3
+quickTitle: Me
+quickImage: /assets/images/home/icon-heart.svg
+---
+
+## About.
+
+### Trainings and certifications.
+
+In order to strengthen my skills, I have completed the following training and certifications:
+
+- [Opquast](https://directory.opquast.com/en/certificat/CTQSKP/) - Mastering Web Quality Assurance
+- [Access42](https://certification.access42.pro/) - Developing and coding accessible websites (cert number: 696fa2e0-cc67-11ec-88d2-9dabf3f992d4)
+
+### Free time.
+
+I try to contribute to [open source projects](https://git.nardu.in/explore/repos) that I enjoy.
+
+Oh and I write [articles!](/en/articles/) Articles about design and the web in general.
--- a/src/data/HP/fr/01-offre.md
+++ b/src/data/HP/fr/01-offre.md
@ -0,0 +1,28 @@
+---
+type: section
+id: offre
+lang: fr
+image: /assets/images/home/offres.svg
+order: 1
+quickTitle: Mes offres en freelance
+quickImage: /assets/images/home/icon-desktop.svg
+---
+
+## Offres site web.
+
+### Petit site vitrine, blog, landing page.
+
+Qu'il s'agisse d'une création ou d'une refonte, je m'occupe de tout&nbsp;:
+
+- propositions graphiques,
+- développement sur-mesure,
+- configuration d'un outil de gestion des contenus (si pertinent),
+- hébergement et mise en ligne
+- maintenance
+
+### Plus gros site, e-commerce.
+
+Lorsque le projet est plus volumineux, je fais appel à des partenaires talentueux partageant les mêmes valeurs&nbsp;:
+
+- [Rose Primaire](https://roseprimaire.com/) pour le conseil et l'accompagnement du projet,
+- [Sylvain Plantier](https://jedessinebien.com/) et/ou [Benoît Etchevery](http://ben-etche.com/) pour l'illustration et la direction artistique
--- a/src/data/HP/fr/02-methodo.md
+++ b/src/data/HP/fr/02-methodo.md
@ -0,0 +1,29 @@
+---
+type: section
+id: methodology
+lang: fr
+image: /assets/images/home/methodo.svg
+order: 2
+quickTitle: Ma méthodologie
+quickImage: /assets/images/home/icon-methodo.svg
+---
+
+## Méthodologie.
+
+### Accessibilité par défaut.
+
+Engagé pour un web plus accessible, je crée des **sites web** en m'appuyant sur le [référentiel général d'amélioration de l'accessibilité (RGAA)](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/) ainsi que sur les bonnes pratiques [Opquast.](https://www.opquast.com/rendre-le-web-meilleur/)
+
+### Sobriété par choix.
+
+Je privilégie le développement de **sites statiques** en adoptant une approche [d'éco-conception numérique.](https://eco-conception.designersethiques.org/guide/fr/)  
+C'est-à-dire que le site est pensé pour n'embarquer que les fonctionnalités nécessaires à son utilisation.
+
+Cette approche présente de **nombreux avantages&nbsp;:**
+
+- chargement rapide des pages
+- sécurité renforcée
+- coûts serveur réduits
+- maintenance facilitée
+
+Lorsque le projet le demande, je mets en place un outil de gestion des contenus (CMS) découplé de l'interface. Cela permet de garantir que **le site reste en ligne** même si le CMS venait à ne plus fonctionner.
--- a/src/data/HP/fr/03-about.md
+++ b/src/data/HP/fr/03-about.md
@ -0,0 +1,24 @@
+---
+type: section
+id: about
+lang: fr
+image: /assets/images/home/about.svg
+order: 3
+quickTitle: Moi
+quickImage: /assets/images/home/icon-heart.svg
+---
+
+## À propos.
+
+### Formations et certifications.
+
+Afin de solidifier mes compétences, j'ai suivi les formations et passé les certifications suivantes&nbsp;:
+
+- [Opquast](https://directory.opquast.com/fr/certificat/CTQSKP/) - Maîtrise de la qualité en projet web
+- [Access42](https://certification.access42.pro/) - Développer et coder des sites accessibles (certificat numéro&nbsp;: 696fa2e0-cc67-11ec-88d2-9dabf3f992d4)
+
+### Temps libre.
+
+J’essaie de contribuer à des [projets open source](https://git.nardu.in/explore/repos) qui me tiennent à cœur et je m'engage localement avec le collectif [good-it!](https://www.good-it.org/)
+
+Ah et j’écris [des articles](/articles/) aussi&nbsp;! Des articles sur le design, le développement web et l’informatique.
--- a/src/pages/articles/en/post-0.mdx
+++ b/src/pages/articles/en/post-0.mdx
@ -1,5 +1,6 @@
 ---
 title: "My First Blog Post"
+slug: "article-1"
 lang: en
 pubDate: 2022-07-01
 description: "This is the first post of my new Astro blog."
--- a/src/data/articles/en/sci-hub-blocage.md
+++ b/src/data/articles/en/sci-hub-blocage.md
@ -0,0 +1,147 @@
+---
+title: "Access blocked Sci-hub"
+subtitle: "The science of sharing."
+lang: en
+excerpt: "In March 2019, the Paris Regional Court ruled in favour of the publishers of scientific articles Elsevier and Springer Nature by ordering internet service providers to block access to these two websites. Here is how to access them if they are blocked in your country anyway."
+tags: ["Internet", "Science"]
+pubDate: "2019-10-18T07:47:36.000Z"
+---
+
+The current sci-hub address is: <a href="https://sci-hub.se" rel="noreferer noopener">sci-hub.se</a>
+
+## What is this about?
+
+Not being a researcher myself, here’s an [extremely well done explanatory video](https://youtu.be/rcgxY__YXEc) on the subject of scientific publication (french audio with auto subtitle).
+
+> “This is outrageous!”
+
+I noticed that my ISP was indeed blocking access. I have not yet been able to check for the other suppliers, but I imagine that they have all complied with the court decision.
+The restriction in place is quite basic. This is a “DNS” block. A DNS is a server that is used to link a domain name: _www.sci-hub.tw_ to an IP address: _186.2.163.90_
+It is, in a way, the Internet phone book. Without the address, it is impossible to contact the domain. What ISPs have certainly done: block requests to the sci-hub domain name. As a result, no IP address is returned and the site is not accessible.
+
+## How to bypass this?
+
+- Either by using a VPN
+- Either by modifying the DNS servers of your computers/Internet box
+
+I would recommend the second solution because it allows you to protect yourself against future blockages/filtering/censorship from your ISP and does not require any financial compensation.
+I will focus on change from a computer because it will be effective wherever you are and not only from your home.
+
+### MacOs
+
+Go to:
+
+1. System Preferences
+1. Network
+1. (wi-fi or ethernet)
+1. Advanced
+1. DNS
+
+From there, you can add DNS servers by clicking the + icon. Click ok and apply the new settings. You might need to restart your computer for the changes to work.
+
+<nuxt-img
+    src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
+    sizes="sm:100vw xl:728px"
+    width="728"
+    height="1060"
+    alt="MacOS network and DNS settings"
+    loading="lazy">
+</nuxt-img>
+
+### Windows (10)
+
+Go to:
+
+1. System Settings
+1. Network & Internet
+1. Change adapter options
+1. Right click your adapter then “properties”
+1. Select “internet protocol version 4” (and/or 6)
+1. Properties
+1. Use the following DNS server addresses
+
+From there, you can add DNS servers. Click save. You might need to restart your computer for the changes to work.
+
+<picture width="728" height="319">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows system settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="803">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-network.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-network.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="327">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network connections settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="434">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network adapter settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+## Which DNS?
+
+There are many DNS servers available. The best known are Google, Cloudflare and OpenDNS. If you really want to use Google’s, I’ll let you look up their address. Here are my recommendations in order of preference.
+
+### [FDN DNS](https://www.fdn.fr/actions/dns/)
+
+My favorite since it is a [french association](https://www.fdn.fr/)
+
+1. IPV4
+   - 80.67.169.12
+   - 80.67.169.40
+2. IPV6
+   - 2001:910:800::12
+   - 2001:910:800::40
+
+### [Cloudflare DNS](https://1.1.1.1/)
+
+For those who want the [“fastest DNS servers in the world”.](https://www.dnsperf.com/#!dns-resolvers)
+
+1. IPV4
+   - 1.1.1.1
+   - 1.0.0.1
+2. IPV6
+   - 2606:4700:4700::1111
+   - 2606:4700:4700::1001
+
+## That's it.
+
+By changing these settings, you are free from your ISPs and their content filtering rules.
+
+For the moment, these restrictions are almost symbolic because if Sci-hub were to change its url, the block would no longer work. But the publishers’ victory in court shows that they have not had their last word. We are therefore not immune to a wider and stronger block in the future.
+
+If you want to learn more about the struggle of the people who fight to ensure that research is not a paid commodity, I recommend [this documentary](https://youtu.be/y_CQATGOX2w) on Aaron Shwartz. Or [this article](https://arstechnica.com/tech-policy/2016/04/a-spiritual-successor-to-aaron-swartz-is-angering-publishers-all-over-again/) about the founder of Sci-hub.
+
+In the meantime, good readings to all of you. We stand with you!
--- a/src/data/articles/en/sci-hub.mdx
+++ b/src/data/articles/en/sci-hub.mdx
@ -0,0 +1,30 @@
+---
+title: "Sci-Hub EN"
+slug: "sci-hub"
+lang: en
+pubDate: 2022-10-11
+description: "This is the first post of my new Astro blog."
+author: "Astro Learner"
+tags: ["astro", "blogging", "learning in public"]
+---
+
+export const image = {
+	url: "/oui.jpg",
+	alt: "oui oui oui",
+	width: "394",
+	height: "512",
+};
+
+Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
+
+## What I've accomplished
+
+1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
+
+2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
+
+3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
+
+## What's next
+
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
--- a/src/pages/articles/fr/post-0.mdx
+++ b/src/pages/articles/fr/post-0.mdx
@ -1,5 +1,6 @@
 ---
 title: "Mon premier article"
+slug: "article-1"
 lang: fr
 pubDate: 2022-07-01
 description: "youpi"
--- a/src/data/articles/fr/sci-hub-blocage.md
+++ b/src/data/articles/fr/sci-hub-blocage.md
@ -0,0 +1,150 @@
+---
+title: "Sci-hub bloqué, comment contourner"
+subtitle: "La science du partage."
+lang: fr
+excerpt: "Le tribunal de grande instance de Paris a ordonné aux fournisseurs d’accès à internet de bloquer l’accès à sci-hub. Voici comment contourner les blocages mis en place."
+tags: ["Internet", "Science"]
+pubDate: "2019-03-31T07:47:36.000Z"
+---
+
+L'adresse actuelle de sci-hub est&nbsp;: [sci-hub.se](https://sci-hub.se)
+
+## Résumé de la situation
+
+N’étant pas moi-même directement chercheur, je vous laisse regarder [cette vidéo](https://youtu.be/rcgxY__YXEc) explicative extrêmement bien faite sur le sujet de la publication scientifique.
+
+> “ Mais c’est scandaleux ! ”
+
+J’ai constaté que le blocage était actif chez SFR. Je n’ai pas encore pu vérifier pour les autres fournisseurs mais j’imagine qu’ils se sont tous conformés à la décision de justice.
+Le blocage mis en place est assez basique. Il s’agit d’un blocage “ DNS ”.
+
+Un DNS est un serveur qui sert à faire le lien entre un nom de domaine&nbsp;: **sci-hub.tw** et une adresse IP : **186.2.163.90**.
+
+C’est en quelque sorte l’annuaire d’internet. Sans l’adresse, impossible de contacter le domaine. Ce que les FAI ont certainement fait&nbsp;: bloquer les requêtes au nom de domaine [sci-hub.tw.](http://sci-hub.tw/) Ainsi, aucune adresse IP n’est renvoyée et le site n’est pas accessible.
+
+## Comment contourner ce blocage&nbsp;?
+
+- Soit en utilisant un VPN
+- Soit en modifiant les serveurs DNS de vos ordinateurs/box internet
+
+Je recommande la deuxième solution car elle permet de se prémunir contre de futurs blocages/filtrages/censures de la part de votre FAI et ne nécessite pas de contrepartie financière.
+Je vais me focaliser sur le changement depuis un ordinateur car il sera effectif où que vous soyez.
+
+### Sur MacOs&nbsp;:
+
+Ouvrez&nbsp;:
+
+1. Préférences système
+1. Réseau
+1. Avancé
+1. DNS
+1. Serveurs DNS
+
+De là, vous pouvez ajouter des serveurs DNS en cliquant sur l'icône +. Cliquez sur ok et appliquez les nouveaux paramètres. Vous devrez peut-être redémarrer votre ordinateur pour que les changements fonctionnent.
+
+<nuxt-img
+    src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
+    sizes="sm:100vw xl:728px"
+    width="728"
+    height="1060"
+    alt="MacOS réglages réseau et DNS"
+    loading="lazy">
+</nuxt-img>
+
+### Sur Windows (ici 10)&nbsp;:
+
+Ouvrez&nbsp;:
+
+1. Réglages
+1. Réseau et internet
+1. Modifier les options de l'adaptateur
+1. Clic droit sur les propriétés de votre interface réseau
+1. Selectionnez «&nbsp;protocole Internet version 4&nbsp;» (et/ou 6)
+1. Propriétés
+1. Utiliser l’adresse de serveur DNS suivante
+
+<picture width="728" height="319">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Réglages windows"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="803">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-network.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-network.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows réglages réseaux"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="327">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows régalges connections réseaux"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="434">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows options adaptateur réseau"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+## Quels serveurs DNS utiliser&nbsp;?
+
+Il y a de nombreux serveurs DNS accessibles. Les plus connus étant ceux de Google, Cloudflare et OpenDNS. Si vous tenez vraiment à utiliser ceux de Google, je vous laisse chercher leur adresse. Voici mes recommandations par ordre de préférence.
+
+Plusieurs fournisseurs :
+
+### [FDN DNS](https://www.fdn.fr/actions/dns/)
+
+Mes favoris puisqu’il s’agit d’une [association française.](https://www.fdn.fr/)
+
+1. IPV4
+   - 80.67.169.12
+   - 80.67.169.40
+2. IPV6
+   - 2001:910:800::12
+   - 2001:910:800::40
+
+### [Cloudflare DNS](https://1.1.1.1/)
+
+Pour ceux qui veulent les serveurs DNS [“&nbsp;les plus rapides du monde&nbsp;”.](https://www.dnsperf.com/#!dns-resolvers)
+
+1. IPV4
+   - 1.1.1.1
+   - 1.0.0.1
+2. IPV6
+   - 2606:4700:4700::1111
+   - 2606:4700:4700::1001
+
+## C'est tout.
+
+En modifiant ces réglages, vous vous affranchissez de vos fournisseurs d’accès et de leurs règles de filtrage du contenu.
+
+Pour l’instant, ces blocages sont presque symboliques car si Sci-hub venait à changer d’url, le blocage ne fonctionnerait plus. Mais la victoire des éditeurs au tribunal montre qu’ils n’ont pas dit leur dernier mot. Nous ne sommes donc pas à l’abri d’un futur blocage plus large et plus dur à contrer.
+
+Si vous voulez en apprendre plus sur le combat de ces gens qui se battent pour que la recherche ne soit pas une marchandise, je vous conseille [ce documentaire](https://youtu.be/y_CQATGOX2w) sur Aaron Shwartz. Ou plus simplement [cet article](https://arstechnica.com/tech-policy/2016/04/a-spiritual-successor-to-aaron-swartz-is-angering-publishers-all-over-again/) sur la fondatrice de Sci-hub.
+
+En attendant, bonnes lectures à tou·te·s. On est avec vous !
--- a/src/data/articles/fr/sci-hub.mdx
+++ b/src/data/articles/fr/sci-hub.mdx
@ -0,0 +1,30 @@
+---
+title: "Sci-Hub FR"
+slug: "sci-hub"
+lang: fr
+pubDate: 2022-10-11
+description: "This is the first post of my new Astro blog."
+author: "Astro Learner"
+tags: ["astro", "blogging", "learning in public"]
+---
+
+export const image = {
+	url: "/oui.jpg",
+	alt: "oui oui oui",
+	width: "394",
+	height: "512",
+};
+
+Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
+
+## What I've accomplished
+
+1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
+
+2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
+
+3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
+
+## What's next
+
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -2,10 +2,12 @@
 	"accueil": "home",
 	"tagline": "Freelance web designer and front-end developer.",
 	"copyright": "(re)Made with Astro",
-	"contact": "contact",
-	"contactLien": "Send me an email (open in application).",
-	"contactTel": "Call or text me (open in application).",
-	"contenuVide": "Soon: really nice content.",
+	"contact": {
+		"title": "contact",
+		"email": "Send me an email (open in application).",
+		"tel": "Call or text me (open in application).",
+		"contenuVide": "Soon: really nice content."
+	},
 	"header": {
 		"skipLink": "Skip to content",
 		"mainNav": "Main menu",
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@ -1,10 +1,12 @@
 {
 	"accueil": "accueil",
 	"tagline": "Designer et developpeur web freelance à Toulouse.",
-	"copyright": "Fait avec un 🖥️ circa 2020",
-	"contact": "contact",
-	"contactLien": "Envoyez-moi un mail (ouverture du logiciel automatique).",
-	"contactTel": "Contactez-moi par téléphone (ouverture du logiciel automatique).",
+	"copyright": "(re)Fait avec Astro",
+	"contact": {
+		"title": "contact",
+		"email": "Envoyez-moi un mail (ouverture du logiciel automatique).",
+		"tel": "Contactez-moi par téléphone (ouverture du logiciel automatique)."
+	},
 	"contenuVide": "Bientôt ici : du contenu de qualité",
 	"header": {
 		"skipLink": "Accéder au contenu",
@ -28,11 +30,11 @@
 		"credit": "Image par"
 	},
 	"fragments": {
-		"titre": "Fragments",
+		"titre": "fragments",
 		"tagline": "Les tutos de Nico mdr."
 	},
 	"projet": {
-		"titre": "Projets",
+		"titre": "projets",
 		"tagline": "Mon travail en freelance",
 		"cta": "Consulter le site",
 		"lienTitle": "Site web de",
--- a/src/images/home/about.svg
+++ b/src/images/home/about.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 325 350.01">
+  <path fill="#ff826c" d="M200 0v174.86h-10V110h-30v20h-14.8v44.86H110V240h100.2v-60H230V0h-30z"/>
+  <path fill="#162e57" d="M195 85h-49.8v45H160v-20h35V85z"/>
+  <path fill="#d4ebf2" d="M50 240h64.72v60H50zm185.18-60.26V240H125v60h165V179.74h-54.82z"/>
+  <path fill="#ff826c" d="M290 205h30v20h-30z"/>
+  <path fill="#d4ebf2" d="M80 309.98h70v10.03H80zM0 300h70v10.03H0zm255 0h70v10.03h-70zm-115 29.98h70v10.03h-70zm-105 10h70v10.03H35z"/>
+  <path fill="#ff826c" d="M100 185h30v125h-30z"/>
+</svg>
--- a/src/images/home/icon-desktop.svg
+++ b/src/images/home/icon-desktop.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="desktop">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#162e57" d="M15 35h120v80H15z"/>
+    <path fill="#ff826c" d="M15 35h120v8H15z"/>
+    <path fill="#162e57" d="M17.67 37.67h2.67v2.67h-2.67zm5.33 0h2.67v2.67H23zm5.33 0H31v2.67h-2.67z"/>
+    <path fill="#ff826c" d="M25.67 59H55v26.67H25.67zm0 29.33H55V91H25.67zM60.33 59h29.33v26.67H60.33zm0 29.33h29.33V91H60.33zM95 59h29.33v26.67H95zm0 29.33h29.33V91H95z"/>
+  </g>
+</svg>
--- a/src/images/home/icon-heart.svg
+++ b/src/images/home/icon-heart.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="heart">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#ff826c" d="M103.57 50.43V39H80.71v11.43H69.29V39H46.43v11.43H35v34.28h11.43v11.43h11.43v11.43h11.43V119h11.42v-11.43h11.43V96.14h11.43V84.71H115V50.43h-11.43z"/>
+  </g>
+</svg>
--- a/src/images/home/icon-methodo.svg
+++ b/src/images/home/icon-methodo.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 150 150">
+  <path fill="#162e57" d="m100.52 58.11 3.94 2.28 3.94 2.27 6.76-11.7-3.94-2.27 4.55-7.89-7.89-4.55-4.55 7.89-2.2 3.81-15.77-9.1 2.2-3.82 4.56-7.88-7.89-4.56-4.55 7.89-3.94-2.28-6.83 11.83 7.88 4.55-2.2 3.81 23.66 13.66 2.27-3.94zM51.75 87.95l-2.27 3.94-3.94-2.28-3.94-2.27-6.76 11.7 3.94 2.27-4.55 7.89 7.89 4.55 6.82-11.83 15.77 9.11-6.83 11.82 7.89 4.56 4.55-7.89 3.94 2.28 6.76-11.7-3.94-2.28-3.95-2.28 2.28-3.93-23.66-13.66z"/>
+  <path fill="#ff826c" d="m75.41 101.6-3.94-2.27L94.3 59.78l3.94 2.27h.01L74.59 48.39v.01l3.94 2.27L55.7 90.22l-3.94-2.27h-.01l23.66 13.66v-.01z"/>
+</svg>
--- a/src/images/home/icon-mobile.svg
+++ b/src/images/home/icon-mobile.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="mobile">
+    <path fill="#d4ebf2" d="M0 0h150v150H0z"/>
+    <path fill="#10113a" d="M48.33 25h53.33v100H48.33z"/>
+    <path fill="#162e57" d="M71.67 113.33h6.67V120h-6.67zM55 31.67h40v76.67H55z"/>
+    <path fill="#ff826c" d="M62.78 38.33h24.44v22.22H62.78zm0 24.45h24.44V65H62.78zm0 8.89h24.44v22.22H62.78zm0 24.44h24.44v2.22H62.78z"/>
+  </g>
+</svg>
--- a/src/images/home/icon-philo.svg
+++ b/src/images/home/icon-philo.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="articles">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#162e57" d="M56.54 51.92v9.23H28.85v9.24H15v13.84h13.85v9.23h4.61v13.85h13.85V93.46h9.23v9.23h36.92V51.92H56.54z"/>
+    <path fill="#ff826c" d="M107.31 47.31h13.85v9.23h-13.85zm0 23.07H135v9.23h-27.69zm13.84-32.3H135v9.23h-13.85zm-13.84 55.38h13.85v9.23h-13.85zm13.84 9.23H135v9.23h-13.85z"/>
+  </g>
+</svg>
--- a/src/images/home/methodo-1.svg
+++ b/src/images/home/methodo-1.svg
@ -0,0 +1,12 @@
+<svg id="aa0241e5-d9cf-4e93-b83f-4d24f8d4da9a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 495">
+  <g>
+    <polygon points="114.46 90 0 90 0 295 34.46 295 34.46 495 64.46 495 64.46 295 79.46 295 79.46 495 109.46 495 109.46 295 114.46 295 114.46 90" fill="#162e57"/>
+    <polygon points="94.46 25.16 94.46 0 49.46 0 49.46 25.16 49.46 35.16 109.46 35.16 109.46 25.16 94.46 25.16" fill="#162e57"/>
+  </g>
+  <polygon points="280 125 280 120 285 120 290 120 290 105.16 285 105.16 285 95.16 275 95.16 275 105.16 275 110 255 110 255 105.16 255 95.16 245 95.16 245 105.16 240 105.16 240 120.16 250 120.16 250 125 255 125 255 175.16 250 175.16 250 180.16 245 180.16 240 180.16 240 195 245 195 245 205 255 205 255 190 275 190 275 205 285 205 285 195 290 195 290 180.16 285 180.16 280 180.16 280 175.16 275 175.16 275 125 280 125" fill="#10113a"/>
+  <g>
+    <polygon points="94.46 90 94.46 35.16 49.38 35.16 49.38 90 74.46 90 74.46 120 104.46 120 104.46 90 94.46 90" fill="#ff826c"/>
+    <polygon points="55 90 0 90 0 155 0 210.16 0 305 34.46 305 34.46 210.16 55 210.16 55 90" fill="#ff826c"/>
+    <polygon points="275 125 240 125 240 130 155 130 114.46 130 114.46 165 155 165 255 165 255 142.53 275 142.53 275 125" fill="#ff826c"/>
+  </g>
+</svg>
--- a/src/images/home/methodo.svg
+++ b/src/images/home/methodo.svg
@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 510 495">
+  <path fill="#162e57" d="M40 280h30v215H40zm60 0H75v125h10v90h30V280h-15z"/>
+  <path fill="#ff826c" d="M60 0v90h45V30h15V0H60z"/>
+  <path fill="#d4ebf2" d="M15 90h115v190H15z"/>
+  <path fill="#162e57" d="M85 90h15v135H85z"/>
+  <path fill="#ff826c" d="M130 110V90h-25v315h25V140h120v-30H130z"/>
+  <path fill="#162e57" d="M280 185v-15h-5v-15h-5v-55h5v-5h-30v5h5v55h-5v15h-5v15h-10v25h60v-25h-10z"/>
+  <path fill="#ff826c" d="M275 65h10v10h-10zm-15 10h5v5h-5zm0-30h10v10h-10zm130 165v-5h-10v-80h5v-5h-25v5h5v80h-10v5h-5v30h5v5h35v-5h5v-30h-5zm40-90v5h5v115h15V125h5v-5h-25z"/>
+  <path fill="#d4ebf2" d="M365 145v5h40v110h5V150h40v-5h-85z"/>
+  <path fill="#ff826c" d="M440 240h5v5h-5z"/>
+  <path fill="#162e57" d="M435 195h15v45h-15z"/>
+  <path fill="#d4ebf2" d="M510 260H180v25h10v210h310V285h10v-25z"/>
+  <path fill="#ff826c" d="M15 90v25H0v195h15v95h60V90H15z"/>
+</svg>
--- a/src/images/home/offres.svg
+++ b/src/images/home/offres.svg
@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="aefb6044-044f-4f8d-bc9f-2a475efc35ba" viewBox="0 0 420 390">
+  <path fill="#ff826c" d="M155 20h40v50.21h-40Zm0-20h50v20h-50Z"/>
+  <path fill="#d4ebf2" d="M255 150H155V40H70v30H40v140.57h115V180h100v-30z"/>
+  <path fill="#ff826c" d="M280 180h-25v-25h25Z"/>
+  <path fill="#10113a" d="M40 210v40h145v140h40V210Zm305-110v85h-90v12.54h110V100Z"/>
+  <path fill="#ff826c" d="M240 195h177.33v25H240Zm75 25h30v170h-30Z"/>
+  <path fill="#10113a" d="M315 220h30v15h-30Z"/>
+  <path fill="#ff826c" d="M30 250V105H0v170h10v115h20V275h80v115h20V275h10v-25Z"/>
+  <path fill="#d4ebf2" d="M410 155v-10h-30v50h30v-15h5v-5h-5v-14.95h5V175h5v-20h-10z"/>
+  <path fill="#ff826c" d="M385 55h10v20h-10Zm-10 30h10v10h-10Zm20-40h10v10h-10Zm-5 55h15v10h-15Zm10 20h5v15h-5Zm-10 20h5v5h-5Z"/>
+</svg>
--- a/src/images/projects/parole-expression/hero.png
+++ b/src/images/projects/parole-expression/hero.png
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -1,15 +1,15 @@
 ---
 import { astroI18n } from "astro-i18n";
-import { I18nProvider } from "astro-i18n/components"
-import '../styles/style.css';
+astroI18n.init(Astro);

-import Header from '../components/Header.astro';
+import "../styles/style.css";

-const currentLocale = astroI18n.langCode;
-const { pageTitle, titleColor } = Astro.props;
+import Header from "../components/Header.astro";
+
+const { pageTitle, titleColor, lang } = Astro.props;
 ---
-<I18nProvider>
-<html lang={currentLocale} dir="ltr">
+
+<html lang={astroI18n.langCode} dir="ltr">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@ -21,14 +21,13 @@ const { pageTitle, titleColor } = Astro.props;
 		<div class="wrapper">
 			<Header />
 			<main id="skip-content" role="main">
-				<slot/>
+				<slot />
 			</main>
 		</div>
 	</body>
 	<style define:vars={{ titleColor }}>
 		h1 {
-		 color: var(--titleColor);
+			color: var(--titleColor);
 		}
-	 </style>
+	</style>
 </html>
-</I18nProvider>
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@ -1,13 +1,11 @@
 ---
 import { l, t, astroI18n } from "astro-i18n";
-import AstroImage from "../components/AstroImage.astro";
+// import AstroImage from "../components/AstroImage.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";

-const currentLocale = astroI18n.langCode;
-
 const { frontmatter, image, title } = Astro.props;
 const publishedDate = new Date(frontmatter.pubDate);
-const localizedDate = new Intl.DateTimeFormat(currentLocale, {
+const localizedDate = new Intl.DateTimeFormat(astroI18n.langCode, {
 	dateStyle: "long",
 }).format(publishedDate);
 ---
@ -38,7 +36,7 @@ const localizedDate = new Intl.DateTimeFormat(currentLocale, {
 	<p>{frontmatter.description}</p>
 	<pre></pre>
 	<hr />
-	{
+	<!-- {
 		!!image && (
 			<AstroImage
 				src={image.url}
@ -47,7 +45,7 @@ const localizedDate = new Intl.DateTimeFormat(currentLocale, {
 				height={image.height}
 			/>
 		)
-	}
+	} -->
 	<hr />
 	<slot />
 </BaseLayout>
--- a/src/pages/articles/[slug].astro
+++ b/src/pages/articles/[slug].astro
@ -0,0 +1,26 @@
+---
+import { astroI18n } from "astro-i18n";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export async function getStaticPaths({}) {
+	const allPosts = await Astro.glob("../../data/articles/**/*.mdx");
+
+	const localizedPost = allPosts.filter((post) => {
+		return post.frontmatter.lang === astroI18n.langCode;
+	});
+
+	return localizedPost.map((post) => {
+		return {
+			params: { slug: post.frontmatter.slug },
+			props: { post },
+		};
+	});
+}
+
+const { slug } = Astro.params;
+const { post } = Astro.props;
+---
+
+<BaseLayout>
+	{post.frontmatter.title}
+</BaseLayout>
--- a/src/pages/articles/i18n/en.json
+++ b/src/pages/articles/i18n/en.json
@ -1,7 +1,4 @@
 {
-	"{route}": "blog",
-	"pageName": "Blog",
-	"pageName{cool:'yes'}": "Blog cools",
-	"pageName{cool:'no'}": "Blog nuls",
-	"trad": "hello english"
+	"pageName": "Articles",
+	"subtitle": "I blog, sometimes."
 }
--- a/src/pages/articles/i18n/fr.json
+++ b/src/pages/articles/i18n/fr.json
@ -1,6 +1,4 @@
 {
 	"pageName": "Articles",
-	"pageName{cool:'yes'}": "Articles cools",
-	"pageName{cool:'no'}": "Articles nuls",
-	"trad": "slt sava"
+	"subtitle": "Je blog, un peu."
 }
--- a/src/pages/articles/index.astro
+++ b/src/pages/articles/index.astro
@ -1,29 +1,29 @@
 ---
 import { l, t, astroI18n } from "astro-i18n";

-const currentLocale = astroI18n.langCode;
-
 import "../../styles/style.css";

 import BaseLayout from "../../layouts/BaseLayout.astro";
 import ContentPost from "../../components/ContentPost.astro";

-const allPosts = await Astro.glob(`./**/*.mdx`);
+const allPosts = await Astro.glob(`../../data/articles/**/*.mdx`);
 const localizedPost = allPosts.filter((post) => {
-	return post.frontmatter.lang === currentLocale;
+	return post.frontmatter.lang === astroI18n.langCode;
 });

 const pageTitle = t("index.articles.pageName");
 ---

 <BaseLayout pageTitle={pageTitle}>
-	<h2>{t("index.articles.pageName", { cool: "yes" }, "fr")}</h2>
-	<p>{t("index.articles.trad")}</p>
+	<h2>{t("index.articles.pageName")}</h2>
+	<p>{t("index.articles.subtitle")}</p>
 	<ul>
 		{
 			localizedPost.map((post) => (
 				<li>
-					<ContentPost url={post.url} title={post.frontmatter.title} />
+					<a href={l(`/articles/${post.frontmatter.slug}`)}>
+						{post.frontmatter.title}
+					</a>
 				</li>
 			))
 		}
--- a/src/pages/articles/post-1.mdx
+++ b/src/pages/articles/post-1.mdx
@ -1,15 +0,0 @@
---
-layout: ../../layouts/MarkdownPostLayout.astro
-title: My Second Blog Post
-author: Astro Learner
-description: "After learning some Astro, I couldn't stop!"
-image:
-  url: "/hackerman.png"
-  alt: "hack"
-	width: 1920
-	height: 1080
-pubDate: 2022-07-08
-tags: ["astro", "blogging", "learning in public", "successes"]
---
-
-After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
--- a/src/pages/articles/post-2.mdx
+++ b/src/pages/articles/post-2.mdx
@ -1,15 +0,0 @@
---
-layout: ../../layouts/MarkdownPostLayout.astro
-title: Special tag
-author: Astro Learner
-pubDate: 2022-07-08
-tags: ["nicool"]
---
-
-That's it bb
-
-```html
-<main>
-	<header></header>
-</main>
-```
--- a/src/pages/en/articles/[slug].astro
+++ b/src/pages/en/articles/[slug].astro
@ -0,0 +1,9 @@
+---
+import Page from "../../articles/[slug].astro"
+
+export { getStaticPaths } from "../../articles/[slug].astro"
+
+const { props } = Astro
+---
+
+<Page {...props} />
--- a/src/pages/en/articles/index.astro
+++ b/src/pages/en/articles/index.astro
--- a/src/pages/i18n/en.json
+++ b/src/pages/i18n/en.json
@ -1,9 +1,10 @@
 {
 	"title": "Crafting  <a href='#methodology' clean-link>sober and accessible</a> <span class='highlight'>websites</span>",
+	"subtitle": "Learn more about…",
 	"quoi": "I design <strong>websites</strong> and <strong>web applications</strong> following <a href='https://www.a11yproject.com/' title='A11y project’s website (new window)' target='_blank' rel='noreferer noopener' >accessibility</a> best practices.",
 	"comment": "More precisely, I create web and mobile interfaces. From UX to UI, from development to deployment. I put digital accessibility standards, for which I have obtained the <a href='https://directory.opquast.com/fr/certificat/CTQSKP/' title='My Opquast certificate (new window)' target='_blank' rel='noreferer noopener'>Opquast certification</a>, forwards. I also keep <a href='https://en.wikipedia.org/wiki/Ecological_design' title='eco-design definition (new window)' target='_blank' rel='noreferer noopener'>eco-design</a> in mind when working.",
 	"opensource": "I try to contribute to <a class='u-nice-links' href='https://git.nardu.in/explore/repos' title='Open source projects I worked on (new window)' target='_blank' rel='noreferer noopener'>open source projects</a> that I enjoy.",
-	"articles": "Oh and I write <a class='u-nice-links' href='/en/articles/'>articles!</a> Articles about design and the web in general.",
-	"projetsRecents": "Latest projects",
-	"articlesRecents": "Latest articles"
+	"writing": "Oh and I write <a class='u-nice-links' href='/en/articles/'>articles!</a> Articles about design and the web in general.",
+	"latestProjects": "Latest projects",
+	"latestArticles": "Latest articles"
 }
--- a/src/pages/i18n/fr.json
+++ b/src/pages/i18n/fr.json
@ -1,9 +1,10 @@
 {
 	"title": "Création de <span class='highlight'>sites&nbsp;web</span> <a href='/articles/faq' clean-link>sobres et accessibles</a>",
+	"subtitle": "Apprenez-en plus sur…",
 	"quoi": "Je crée des <strong>sites</strong> et des <strong>applications web</strong> en suivant les bonnes pratiques <a href='https://access42.net/decouvrir-accessibilite' title='Définition selon Access42 (nouvelle fenêtre)' target='_blank' rel='noreferer noopener' >d’accessibilités</a>.",
 	"comment": "Plus précisément, je crée des interfaces web et mobiles. De l’ergonomie jusqu’au design final, de l’intégration jusqu’à la mise en ligne. Je mets en avant les standards d’accessibilité numérique, pour lesquels j’ai obtenu la <a href='https://directory.opquast.com/fr/certificat/CTQSKP/' title='Certificat Opquast personnel (nouvelle fenêtre)' target='_blank' rel='noreferer noopener'>certification Opquast</a>. Je m’inscris également dans une démarche <a href='https://www.ademe.fr/expertises/consommer-autrement/passer-a-laction/ameliorer-pratiques/lecoconception' title='Définition de l’ADEME (nouvelle fenêtre)' rel='noopener noreferer'>d’éco-conception</a> des services que je propose.",
 	"opensource": "J’essaie de contribuer à des <a href='https://git.nardu.in/explore/repos' title='Projets sur lesquels j’ai travaillé (nouvelle fenêtre)' target='_blank' rel='noreferer noopener'>projets open source</a> qui me tiennent à cœur.",
-	"articles": "Ah et j’écris <a href='/articles/'>des articles</a> aussi&nbsp;! Des articles sur le graphisme et l’informatique.",
-	"projetsRecents": "Derniers projets",
-	"articlesRecents": "Derniers articles"
+	"writing": "Ah et j’écris <a href='/articles/'>des articles</a> aussi&nbsp;! Des articles sur le graphisme et l’informatique.",
+	"latestProjects": "Derniers projets",
+	"latestArticles": "Derniers articles"
 }
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,10 +1,171 @@
 ---
-import { t, l } from "astro-i18n";
+// init i18n
+import { l, t, astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
+
+// import stuff
 import BaseLayout from "../layouts/BaseLayout.astro";
+import QuickAccessCard from "../components/QuickAccessCard.astro";
+import CardEditorial from "../components/CardEditorial.astro";
+import ListCards from "../components/ListCards.astro";

 const pageTitle = t("accueil");
+
+// get all HP sections
+const allSections = await Astro.glob("../data/HP/**/*.md");
+// only keep the right locale version
+const localizedSections = allSections.filter((section) => {
+	return section.frontmatter.lang === astroI18n.langCode;
+});
+
+// get all articles
+const allArticles = await Astro.glob("../data/articles/**/*.{md,mdx}");
+// only keep the right locale version
+const localizedArticles = allArticles.filter((article) => {
+	return article.frontmatter.lang === astroI18n.langCode;
+});
+// sort articles by descending publication date
+const sortedArticles = localizedArticles.sort(
+	(a, b) => b.frontmatter.pubDate - a.frontmatter.pubDate
+);
 ---

 <BaseLayout pageTitle={pageTitle}>
-	<h1 set:html={t("index.title")}></h1>
+	<section class="region intro">
+		<h1 set:html={t("index.title")} />
+		<section class="quick-access">
+			<h2 class="intro__subtitle">{t("index.subtitle")}</h2>
+			<ul class="quick-access__list" role="list">
+				{
+					localizedSections.map((section) => (
+						<li>
+							<QuickAccessCard item={section.frontmatter} />
+						</li>
+					))
+				}
+			</ul>
+		</section>
+	</section>
+
+	{
+		localizedSections.map((section) => (
+			<section id={section.frontmatter.id} class="region section">
+				<div class="section__container">
+					<div class="flow section__content">
+						<section.Content />
+					</div>
+					<div class="section__image">
+						<img
+							src={section.frontmatter.image}
+							width="400"
+							height="350"
+							alt=""
+							aria-hidden="true"
+						/>
+					</div>
+				</div>
+			</section>
+		))
+	}
+
+	<section class="latest">
+		<div class="latest__work">
+			<h2>{t("index.latestArticles")}</h2>
+			<ListCards list={sortedArticles} routeName={t("article.titre")} />
+		</div>
+	</section>
 </BaseLayout>
+
+<style>
+	/* INTRO */
+	.intro {
+		position: relative;
+	}
+	.intro::before {
+		content: "";
+		position: absolute;
+		top: -30%;
+		left: -10%;
+		max-width: 100vw;
+		width: 320px;
+		height: 320px;
+		z-index: -1;
+		border-radius: 50%;
+		background-color: var(--color-light-blue);
+	}
+	.intro h1 {
+		font-size: clamp(3.25rem, calc(1.92rem + 6.67vw), 6.25rem);
+		text-align: center;
+	}
+	.intro h1 :global(a) {
+		color: currentColor;
+		text-decoration: underline;
+		text-decoration-thickness: auto;
+		text-decoration-color: var(--color-brique);
+		text-decoration-thickness: 6px;
+	}
+	.intro h1 :global(a:hover) {
+		text-decoration: none;
+	}
+	.intro__subtitle {
+		margin: var(--space-s-m) 0;
+		font-family: "wotfard";
+		font-weight: 500;
+		text-align: center;
+		color: var(--color-dark-blue);
+	}
+	.quick-access {
+		margin-top: var(--space-xl-2xl);
+		container-type: inline-size;
+		container-name: intro;
+	}
+	.quick-access__list {
+		margin: var(--space-l-xl) auto 0;
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--space-m-l);
+	}
+	.quick-access__list > li {
+		flex-grow: 1;
+		flex-basis: 240px;
+	}
+
+	/* SECTIONS */
+	.section {
+		container-name: section;
+		container-type: inline-size;
+	}
+	.section__container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-m-l);
+	}
+
+	.section :global(h2) {
+		font-size: var(--size-3);
+		color: var(--color-blue);
+	}
+	.section :global(h3) {
+		font-size: var(--size-1);
+	}
+
+	@container section (min-width: 50rem) {
+		.section__container {
+			flex-direction: row;
+			align-items: flex-start;
+		}
+		.section__image {
+			order: 1;
+			position: sticky;
+			top: 20px;
+			flex-grow: 1;
+			flex-basis: 18rem;
+		}
+		.section__content {
+			order: 2;
+			flex-basis: 0;
+			min-width: 40ch;
+		}
+	}
+</style>
--- a/src/pages/rss.xml.js
+++ b/src/pages/rss.xml.js
@ -1,9 +0,0 @@
-import rss from '@astrojs/rss';
-
-export const get = () => rss({
-  title: 'Nicolas Arduin | Articles',
-  description: 'Je blog un peu',
-  site: 'https://www.nardu.in',
-  items: import.meta.glob('./**/*.md'),
-  customData: `<language>fr-fr</language>`,
-});
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@ -3,7 +3,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 import ContentPost from "../../components/ContentPost.astro";

 export async function getStaticPaths({}) {
-	const allPosts = await Astro.glob("../articles/*.mdx");
+	const allPosts = await Astro.glob("../../data/**/*.mdx");
 	const uniqueTags = [
 		...new Set(allPosts.map((post) => post.frontmatter.tags).flat()),
 	];
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
@ -2,7 +2,7 @@
 import BaseLayout from "../../layouts/BaseLayout.astro";

 const pageTitle = "Tag Index";
-const allPosts = await Astro.glob("../articles/*.mdx");
+const allPosts = await Astro.glob("../../data/**/*.mdx");
 const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
 ---

--- a/src/styles/blocks/section.css
+++ b/src/styles/blocks/section.css
@ -1,18 +0,0 @@
-.section > .curve {
-	transform: translateY(-1px);
-}
-
-.section > .curve:first-child {
-	transform: rotate(180deg) translateY(-1px);
-}
-
-.section__inner {
-	background: var(--spot-bg-color, transparent);
-	color: var(--spot-text-color, var(--color-dark));
-}
-
-.section blockquote {
-	font-weight: 700;
-	line-height: 1;
-	font-size: var(--size-4);
-}
--- a/src/styles/compositions/sidebar.css
+++ b/src/styles/compositions/sidebar.css
@ -30,24 +30,24 @@ EXCEPTIONS
 /* 
 A flipped version where the sidebar is on the right
 */
-.sidebar[data-direction='rtl'] {
+.sidebar[data-direction="rtl"] {
 	flex-direction: row-reverse;
 }

 /* REVERSE sidebar on right*/

-.sidebar--reverse {
+.sidebar-reverse {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--gutter, var(--space-xs-s));
 }

-.sidebar--reverse > :last-child {
+.sidebar-reverse > :last-child {
 	flex-basis: var(--sidebar-target-width, 20rem);
 	flex-grow: 1;
 }

-.sidebar--reverse > :first-child {
+.sidebar-reverse > :first-child {
 	flex-basis: 0;
 	flex-grow: 999;
 	min-width: var(--sidebar-content-min-width, 50%);
--- a/src/styles/global/global-styles.css
+++ b/src/styles/global/global-styles.css
@ -7,6 +7,9 @@
 	color: var(--color-light-blue);
 	background-color: var(--color-dark-blue);
 }
+::marker {
+	color: var(--color-brique);
+}

 body {
 	font-family: var(--font-primary);
@ -14,6 +17,7 @@ body {
 	line-height: 1.4;
 	color: var(--color-dark);
 	background-color: var(--color-light-white);
+	accent-color: var(--color-brique);
 }

 main {
@ -56,13 +60,16 @@ h5,
 	color: var(--color-darkBlue);
 }

-a,
+a {
+	font-weight: 500;
+	color: var(--color-blue);
+	text-decoration: none;
+}
 a:visited {
-	position: relative;
-	color: currentcolor;
+	color: currentColor;
 }
 a:hover {
-	text-decoration: none;
+	text-decoration: underline;
 }

 hr {
@ -143,3 +150,7 @@ button[disabled] {
 	border-color: var(--color-grey);
 	background-color: var(--color-white);
 }
+
+.highlight {
+	color: var(--color-blue);
+}
--- a/src/styles/utilities/flow.css
+++ b/src/styles/utilities/flow.css
@ -1,7 +1,7 @@
 .flow > * + * {
-	margin-block-start: var(--flow-space, var(--space-m-l));
+	margin-block-start: var(--flow-space, var(--space-s-m));
 }

 .flow > :where(h1, h2, h3) + * {
-	margin-block-start: var(--flow-space-title, var(--space-s-m));
+	margin-block-start: var(--flow-space-title, var(--space-xs-s));
 }
--- a/src/styles/utilities/wrapper.css
+++ b/src/styles/utilities/wrapper.css
@ -7,7 +7,7 @@
 	padding-inline-start: var(--_content-padding);
 	padding-inline-end: var(--_content-padding);
 	position: relative; */
-	--content-width: 80rem;
+	--content-width: 65rem;
 	--grid-wrapper: [full-start] 1fr [wrapper-start]
 		minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];

--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,3 +1,6 @@
 {
-  "extends": "astro/tsconfigs/base"
-}
+	"extends": "astro/tsconfigs/base",
+	"compilerOptions": {
+		"strictNullChecks": true
+	}
+}