six

app/Competences/page.jsx

@@ -21,27 +21,32 @@ export default async function Page() {
 
   return (
     <main className="w-full p-6">
-      <h1 className="text-3xl mb-6 font-bold text-gray-700">Mes Compétences</h1>
+      <h1 className="text-3xl mb-6 font-bold text-gray-700 text-center">Mes Compétences</h1>
 
-      {/* Grille dynamique pour un affichage équilibré */}
+      {/* Grille améliorée avec une meilleure gestion de l'espace */}
-      <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(280px,1fr))] max-w-6xl mx-auto">
+      <div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(300px,1fr))] max-w-7xl mx-auto">
         {competences.map((competence) => {
-          const picture = competence.picture?.[0]; // Récupère la première image si elle existe
+          const picture = competence.picture?.[0];
           const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
 
           return (
-            <div key={competence.id} className="bg-white rounded-lg shadow-md overflow-hidden w-72 h-96 flex flex-col">
+            <div 
+              key={competence.id} 
+              className="bg-white rounded-lg shadow-md overflow-hidden w-80 h-96 flex flex-col transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
+            >
               <Link href={`/competences/${competence.slug}`}>
                 <div className="overflow-hidden w-full h-48">
                   <img
                     src={imageUrl}
                     alt={picture?.name || "Competence image"}
-                    className="w-full h-full object-cover object-center"
+                    className="w-full h-full object-cover"
                   />
                 </div>
                 <div className="p-4 flex-grow">
                   <p className="font-bold text-xl mb-2">{competence.name}</p>
-                  <p className="text-gray-700 text-sm line-clamp-3">{competence.description}</p>
+                  <p className="text-gray-700 text-sm hover:text-base transition-all duration-200 ease-in-out">
+                    {competence.description}
+                  </p>
                 </div>
               </Link>
             </div>

app/layout.tsx

@@ -25,7 +25,7 @@ export default function RootLayout({ children }) {
           </header>
 
           {/* Ne pas forcer de largeur ici, chaque page gère son `main` */}
-          <main className="w-full mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 transition-all duration-300">
+          <main >
             {children}
           </main>
 

app/page.tsx

@@ -30,13 +30,13 @@ export default async function HomePage() {
   const imageUrl = photo?.url ? `${baseUrl}${photo.url}` : null;
 
   return (
-    <main className="max-w-3xl mx-auto flex flex-col items-center justify-center p-6">
+    <main className="max-w-3xl w-full mx-auto flex flex-col items-center justify-center p-6 bg-white/30 rounded-lg mt-3 mb-3">
       {/* Texte court (title) */}
       <h1 className="text-3xl font-bold text-gray-800 mb-4">{title}</h1>
 
       {/* Photo en cadre ovale avec effet hover */}
       {imageUrl ? (
-        <div className="relative w-64 h-64 rounded-full overflow-hidden shadow-lg border-4 border-gray-300 transition-transform duration-300 hover:scale-110">
+        <div className="relative w-64 h-64 rounded-full overflow-hidden shadow-lg border-4 border-gray-300 transition-transform duration-300 hover:scale-110 hover:rotate-3">
           <img src={imageUrl} alt="Photo de profil" className="w-full h-full object-cover object-center" />
         </div>
       ) : (
@@ -46,7 +46,7 @@ export default async function HomePage() {
       )}
 
       {/* Texte riche en Markdown */}
-      <div className="mt-6 text-lg text-black-700 max-w-2xl p-4 text-center">
+      <div className="mt-6 text-lg text-black-700 max-w-2xl px-6 text-center">
         <ReactMarkdown>{cv}</ReactMarkdown>
       </div>
     </main>

app/portfolio/page.jsx

@@ -22,16 +22,19 @@ export default async function Page() {
   return (
     <main className="w-full p-6">
       {/* Titre de la page */}
-      <h1 className="text-3xl mb-6 font-bold text-gray-700">Portfolio formation 42</h1>
+      <h1 className="text-3xl mb-6 font-bold text-gray-700 text-center">Portfolio formation 42</h1>
 
-      {/* Grille dynamique pour afficher les projets */}
+      {/* Grille améliorée avec une meilleure largeur et des colonnes plus équilibrées */}
-      <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(280px,1fr))] max-w-6xl mx-auto">
+      <div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(300px,1fr))] max-w-7xl mx-auto">
         {projects.map((project) => {
-          const picture = project.picture?.[0]; // Récupère la première image si elle existe
+          const picture = project.picture?.[0];
           const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
 
           return (
-            <div key={project.id} className="bg-white rounded-lg shadow-md overflow-hidden w-72 h-96 flex flex-col">
+            <div 
+              key={project.id} 
+              className="bg-white rounded-lg shadow-md overflow-hidden w-80 h-96 flex flex-col transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
+            >
               {/* Lien vers la page de détail du projet */}
               <Link href={`/portfolio/${project.slug}`}>
                 <div className="overflow-hidden w-full h-48">
@@ -43,7 +46,9 @@ export default async function Page() {
                 </div>
                 <div className="p-4 flex-grow">
                   <p className="font-bold text-xl mb-2">{project.name}</p>
-                  <p className="text-gray-700 text-sm line-clamp-3">{project.description}</p>
+                  <p className="text-gray-700 text-sm hover:text-base transition-all duration-200 ease-in-out">
+                    {project.description}
+                  </p>
                 </div>
               </Link>
             </div>