Fix small issue and add Mercury Cloud

src/assets/DATA.ts

@@ -57,6 +57,12 @@ const Felix = {
             description: "Projet de robot avec le club Modelec ISEN pour la coupe de france de robotique (Developpement et déploiment sur Raspberry Pi)",
             tags: ["C++", "QT", "Raspberry Pi"],
             link: "https://github.com/modelec"
+        },
+        {
+            title: "Mercury Cloud",
+            description: "Projet d'herbergeur de serveur de jeu et VPS. Poste de support technique, administrateur des service VPS, Game et web.",
+            tags: ["Linux", "Virtualisation", "CPanel", "Plesk", "WHMCS"],
+            link: "https://mercurycloud.fr/"
         }
     ]
 };

src/components/Project.tsx

@@ -6,9 +6,11 @@ function Projects({projects}) {
     return(
         <div>
             <h1 className="mt-8 text-2xl md:text-4xl text-center font-extrabold dark:text-gray-200">Mes projets</h1>
-            {projects.map((project) => (
-                <ProjectCard project={project} />
-            ))}
+                <div className="flex-row flex-wrap flex justify-center gap-4">
+                    {projects.map((project) => (
+                        <ProjectCard project={project} />
+                    ))}
+                </div>
         </div>
     )
 };

src/components/ProjectCard.tsx

@@ -4,7 +4,7 @@ import GitHubButton from 'react-github-btn';
 
 const projectCard = ({ project: { title, description, tags, link} }) => {
     return (
-        <div className="group w-full sm:w-1/2 m-4 mx-auto p-6 rounded-xl border-2 border-gray-300 dark:border-gray-700">
+        <div className="group w-full sm:w-5/12 m-4 mx-auto p-6 rounded-xl border-2 border-gray-300 dark:border-gray-700">
             <a href={link}>
                 <h1 className="text-xl text-center font-bold dark:text-gray-200">
                     {title}{" "}
@@ -13,7 +13,7 @@ const projectCard = ({ project: { title, description, tags, link} }) => {
             </a>
             <hr className="my-4" />
             <p className="dark:text-gray-300">{description}</p>
-            <div className="mt-4 mb-8 flex flex-warp justify-center items-center gap-2">
+            <div className="mt-4 mb-8 flex flex-wrap justify-center items-center gap-2">
                 {tags.map((tag) => (
                     <div className="px-4 py-1 border-2 rounded-full dark:text-gray-300">{tag}</div>
                 ))}