Ladebeze66/devsite
1
0
Fork 0
mirror of https://github.com/Ladebeze66/devsite.git synced 2025-12-17 06:17:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

ajust

Browse Source
This commit is contained in:
Ladebeze66 2025-02-01 16:30:35 +00:00
parent 2c1869dcd7
commit ecde85d760
2 changed files with 22 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/Competences/page.jsx
View File

@ -20,43 +20,26 @@ export default async function Page() {
const competences = await getAllCompetences(); const competences = await getAllCompetences();
return ( return (
<div> <div className="w-full p-6">
{/* Titre de la page */} <h1 className="text-3xl mb-6 font-bold text-gray-700">Mes Compétences</h1>
<h1 className="text-3xl mb-6 font-bold text-grey-700">Mes Compétences</h1>
{/* Grille pour afficher les compétences */} <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(250px,1fr))]">
<div className="grid grid-cols-2 gap-6">
{competences.map((competence) => { {competences.map((competence) => {
const picture = competence.picture?.[0]; // Récupère la première image si elle existe const picture = competence.picture?.[0]; // Récupère la première image si elle existe
const largeImageUrl = picture?.formats?.large?.url; // Vérifie que le format "large" existe const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
const originalImageUrl = picture?.url; // URL de l'image originale
// Utilisez l'URL de l'image originale si disponible, sinon l'URL de l'image large
const imageUrl = originalImageUrl
? `http://localhost:1337${originalImageUrl}`
: `http://localhost:1337${largeImageUrl}`;
return ( return (
<div key={competence.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100"> <div key={competence.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100">
{/* Lien vers la page de détail de la compétence */}
<Link href={`/competences/${competence.slug}`}> <Link href={`/competences/${competence.slug}`}>
<div className="overflow-hidden"> <div className="overflow-hidden">
{/* Affichage de l'image de la compétence */} <img
{imageUrl ? ( src={imageUrl}
<img alt={picture?.name || "Competence image"}
src={imageUrl} className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
alt={picture?.name || "Competence image"} />
className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
/>
) : (
<div className="bg-gray-200 text-gray-500 text-center rounded-md shadow-md p-4">
Image indisponible
</div>
)}
</div> </div>
<div className="p-4"> <div className="p-4">
{/* Affichage du nom de la compétence */}
<p className="font-bold text-xl mb-2">{competence.name}</p> <p className="font-bold text-xl mb-2">{competence.name}</p>
{/* Affichage de la description de la compétence */}
<p className="text-gray-700">{competence.description}</p> <p className="text-gray-700">{competence.description}</p>
</div> </div>
</Link> </Link>
@ -67,5 +50,3 @@ export default async function Page() {
</div> </div>
); );
} }

44
app/portfolio/page.jsx
View File

@ -19,54 +19,30 @@ async function getAllprojects() {
export default async function Page() { export default async function Page() {
const projects = await getAllprojects(); const projects = await getAllprojects();
// Déterminer la largeur du conteneur en fonction du nombre de projets
let containerWidth = "max-w-4xl";
if (projects.length > 10) {
containerWidth = "max-w-full";
} else if (projects.length > 5) {
containerWidth = "max-w-6xl";
} else if (projects.length > 3) {
containerWidth = "max-w-5xl";
}
return ( return (
<div className={`mx-auto p-6 ${containerWidth}`}> <div className="w-full p-6">
{/* Titre de la page */} {/* Titre de la page */}
<h1 className="text-3xl mb-6 font-bold text-grey-700">Portfolio formation 42</h1> <h1 className="text-3xl mb-6 font-bold text-gray-700">Portfolio formation 42</h1>
{/* Grille pour afficher les projets */} {/* Grille dynamique pour afficher les projets */}
<div className="grid grid-cols-2 gap-6"> <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(250px,1fr))]">
{/* Boucle sur les projets pour les afficher */}
{projects.map((project) => { {projects.map((project) => {
const picture = project.picture?.[0]; // Récupère la première image si elle existe const picture = project.picture?.[0]; // Récupère la première image si elle existe
const largeImageUrl = picture?.formats?.large?.url; // Vérifie que le format "large" existe const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
const originalImageUrl = picture?.url; // URL de l'image originale
// Utilisez l'URL de l'image originale si disponible, sinon l'URL de l'image large
const imageUrl = originalImageUrl ? `http://localhost:1337${originalImageUrl}` : `http://localhost:1337${largeImageUrl}`;
return ( return (
<div key={project.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100"> <div key={project.id} className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:bg-blue-100">
{/* Lien vers la page de détail du projet */} {/* Lien vers la page de détail du projet */}
<Link href={`/portfolio/${project.slug}`}> <Link href={`/portfolio/${project.slug}`}>
<div className="overflow-hidden"> <div className="overflow-hidden">
{/* Affichage de l'image du projet */} <img
{imageUrl ? ( src={imageUrl}
<img alt={picture?.name || "Project image"}
src={imageUrl} className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
alt={picture?.name || "Project image"} />
className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12"
/>
) : (
<div className="bg-gray-200 text-gray-500 text-center rounded-md shadow-md p-4">
Image indisponible
</div>
)}
</div> </div>
<div className="p-4"> <div className="p-4">
{/* Affichage du nom du projet */}
<p className="font-bold text-xl mb-2">{project.name}</p> <p className="font-bold text-xl mb-2">{project.name}</p>
{/* Affichage de la description du projet */}
<p className="text-gray-700">{project.description}</p> <p className="text-gray-700">{project.description}</p>
</div> </div>
</Link> </Link>