refactor: update project titles in ReactData and add JSData for Vanilla JS/TS examples

src/data/Data.jsx

@@ -2,14 +2,14 @@ export const ReactData = [
 	{
 		imageURL:
 			"https://res.cloudinary.com/dadobos/image/upload/v1673023170/web/uxfuyzap5kbs1si34g29.png",
-		title: "React Shop",
+		title: "Shop",
 		description: "",
 		url: "https://dadobos.github.io/react-shop/",
 	},
 	{
 		imageURL:
 			"https://res.cloudinary.com/dadobos/image/upload/v1685729092/web/tzoxavfsfa44z2o9wrgi.png",
-		title: "React Quiz App",
+		title: "Quiz App",
 		description: "",
 		url: "https://dadobos.github.io/react-quiz-app/",
 	},
@@ -92,3 +92,13 @@ export const CSSData = [
 		url: "https://codepen.io/diaid/full/xxJRGMB",
 	},
 ];
+
+export const JSData = [
+	{
+		imageURL:
+			"https://res.cloudinary.com/dadobos/image/upload/v1761648607/web/ADOSIanaslkdfOASadkn.png",
+		title: "Vanilla TS/JS Carousel",
+		description: "",
+		url: "https://codepen.io/diaid/pen/GgoGwva",
+	},
+];

src/lang/en.json

@@ -4,6 +4,7 @@
 	"navigation.best-practices": "Best Practices",
 	"navigation.blog": "Blog",
 	"navigation.about": "About",
+	"about.description.line1": "Simple, better.",
 	"blog.pantone.title": "Exploring Pantone Colors: A Journey Through Shades and Hues",
 	"blog.pantone.description.line1": "A Pantone color is a standardized, proprietary color created by the Pantone company, which assigns a unique code to each color. These colors are used in various industries to ensure color consistency across different materials and locations, as they provide a shared language for specifying and reproducing colors accurately. Pantone colors are often more vibrant and consistent than colors created with the standard CMYK or RGB color models.",
 

src/lang/nl.json

@@ -4,6 +4,7 @@
 	"navigation.best-practices": "Beste praktijken",
 	"navigation.blog": "Blog",
 	"navigation.about": "Over",
+	"about.description.line1": "Eenvoudig, beter.",
 	"blog.pantone.title": "Pantone-kleuren verkennen: een reis door tinten en nuances",
 	"blog.pantone.description.line1": "Een Pantone-kleur is een gestandaardiseerde, propriëtaire kleur die is ontwikkeld door het bedrijf Pantone, dat elke kleur een unieke code toekent. Deze kleuren worden in diverse sectoren gebruikt om kleurconsistentie te waarborgen over verschillende materialen en locaties, omdat ze een gemeenschappelijke taal bieden voor het nauwkeurig specificeren en reproduceren van kleuren. Pantone-kleuren zijn vaak levendiger en consistenter dan kleuren die met de standaard CMYK- of RGB-kleurmodellen worden gemaakt.",
 

src/pages/about/About.jsx

@@ -2,8 +2,11 @@ import React from "react";
 import { Container, Grid2, Typography, Link } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 
+import { useIntl } from "react-intl";
+
 const About = () => {
 	const theme = useTheme();
+	const t = useIntl();
 
 	return (
 		<Container id="about">
@@ -50,8 +53,10 @@ const About = () => {
 
 						<Grid2>
 							<Typography align="right" inline="true" sx={{ fontSize: "22px" }}>
-								Characterized by the desire of understanding and implementing
-								technological innovations.
+								{t.formatMessage({
+									id: "about.description.line1",
+									defaultMessage: "Simple, better.",
+								})}
 							</Typography>
 						</Grid2>
 

src/pages/best-practices/BestPractices.jsx

@@ -1,9 +1,14 @@
 import React from "react";
-import { CSSData } from "data/Data";
+import { CSSData, JSData } from "data/Data";
 import MainAccordion from "components/main-accordion/MainAccordion";
 
 const BestPractices = () => {
-  return <MainAccordion items={CSSData} title="CSS Only" />;
+	return (
+		<>
+			<MainAccordion items={CSSData} title="CSS Only" />
+			<MainAccordion items={JSData} title="Vanilla JS/TS" />
+		</>
+	);
 };
 
 export default BestPractices;