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

five

Browse Source
This commit is contained in:
Ladebeze66 2025-02-01 17:14:09 +00:00
parent 72190c8245
commit 4530b6c762
4 changed files with 25 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/Competences/page.jsx
View File

@ -20,33 +20,34 @@ export default async function Page() {
const competences = await getAllCompetences(); const competences = await getAllCompetences();
return ( return (
<div className="w-full p-6"> <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">Mes Compétences</h1>
<div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(250px,1fr))]"> {/* Grille dynamique pour un affichage équilibré */}
<div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(280px,1fr))] max-w-6xl mx-auto">
{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 imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg"; const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
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 w-72 h-96 flex flex-col">
<Link href={`/competences/${competence.slug}`}> <Link href={`/competences/${competence.slug}`}>
<div className="overflow-hidden"> <div className="overflow-hidden w-full h-48">
<img <img
src={imageUrl} src={imageUrl}
alt={picture?.name || "Competence image"} alt={picture?.name || "Competence image"}
className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12" className="w-full h-full object-cover object-center"
/> />
</div> </div>
<div className="p-4"> <div className="p-4 flex-grow">
<p className="font-bold text-xl mb-2">{competence.name}</p> <p className="font-bold text-xl mb-2">{competence.name}</p>
<p className="text-gray-700">{competence.description}</p> <p className="text-gray-700 text-sm line-clamp-3">{competence.description}</p>
</div> </div>
</Link> </Link>
</div> </div>
); );
})} })}
</div> </div>
</div> </main>
); );
} }

48
app/layout.tsx
View File

@ -1,48 +1,11 @@
"use client"; "use client";
import React, { useEffect, useState, useRef } from "react"; import React from "react";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
import "./assets/main.css"; import "./assets/main.css";
import NavLink from "./components/NavLink"; import NavLink from "./components/NavLink";
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
const containerRef = useRef<HTMLDivElement>(null);
const [containerWidth, setContainerWidth] = useState("w-full"); // ✅ Par défaut pleine largeur
const [containerHeight, setContainerHeight] = useState("min-h-[50vh]");
useEffect(() => {
if (!containerRef.current) return;
const childCount = containerRef.current.children.length; // 📌 Compte le nombre d'enfants
// 📌 Ajuster la largeur UNIQUEMENT si peu d'éléments
if (childCount <= 2) {
setContainerWidth("max-w-3xl"); // ✅ Rétrécir pour la home ou peu de contenu
} else {
setContainerWidth("w-full"); // ✅ Sinon pleine largeur
}
// 📌 Ajuster la hauteur dynamiquement
const observer = new ResizeObserver((entries) => {
for (let entry of entries) {
const contentHeight = entry.contentRect.height;
if (contentHeight > 800) {
setContainerHeight("min-h-[90vh]");
} else if (contentHeight > 600) {
setContainerHeight("min-h-[80vh]");
} else if (contentHeight > 400) {
setContainerHeight("min-h-[70vh]");
} else {
setContainerHeight("min-h-[50vh]");
}
}
});
observer.observe(containerRef.current);
return () => observer.disconnect();
}, [children]);
return ( return (
<html lang="fr"> <html lang="fr">
<body> <body>
@ -61,11 +24,10 @@ export default function RootLayout({ children }) {
</div> </div>
</header> </header>
<div className="overflow-x-auto"> {/* Ne pas forcer de largeur ici, chaque page gère son `main` */}
<main ref={containerRef} className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 transition-all duration-300`}> <main className="w-full mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 transition-all duration-300">
{children} {children}
</main> </main>
</div>
<Footer /> <Footer />
</div> </div>

6
app/page.tsx
View File

@ -30,14 +30,14 @@ export default async function HomePage() {
const imageUrl = photo?.url ? `${baseUrl}${photo.url}` : null; const imageUrl = photo?.url ? `${baseUrl}${photo.url}` : null;
return ( return (
<div className="flex flex-col items-center justify-center homepage-content p-6"> <main className="max-w-3xl mx-auto flex flex-col items-center justify-center p-6">
{/* Texte court (title) */} {/* Texte court (title) */}
<h1 className="text-3xl font-bold text-gray-800 mb-4">{title}</h1> <h1 className="text-3xl font-bold text-gray-800 mb-4">{title}</h1>
{/* Photo en cadre ovale avec effet hover */} {/* Photo en cadre ovale avec effet hover */}
{imageUrl ? ( {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">
<img src={imageUrl} alt="Photo de profil" className="w-full h-full object-cover" /> <img src={imageUrl} alt="Photo de profil" className="w-full h-full object-cover object-center" />
</div> </div>
) : ( ) : (
<div className="w-64 h-64 flex items-center justify-center bg-gray-500 text-gray-200 rounded-full shadow-md"> <div className="w-64 h-64 flex items-center justify-center bg-gray-500 text-gray-200 rounded-full shadow-md">
@ -49,6 +49,6 @@ export default async function HomePage() {
<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 p-4 text-center">
<ReactMarkdown>{cv}</ReactMarkdown> <ReactMarkdown>{cv}</ReactMarkdown>
</div> </div>
</div> </main>
); );
} }

16
app/portfolio/page.jsx
View File

@ -20,36 +20,36 @@ export default async function Page() {
const projects = await getAllprojects(); const projects = await getAllprojects();
return ( return (
<div className="w-full p-6"> <main className="w-full p-6">
{/* Titre de la page */} {/* 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">Portfolio formation 42</h1>
{/* Grille dynamique pour afficher les projets */} {/* Grille dynamique pour afficher les projets */}
<div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(250px,1fr))]"> <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(280px,1fr))] max-w-6xl mx-auto">
{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 imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg"; const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
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 w-72 h-96 flex flex-col">
{/* 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 w-full h-48">
<img <img
src={imageUrl} src={imageUrl}
alt={picture?.name || "Project image"} alt={picture?.name || "Project image"}
className="w-full h-48 object-cover transform transition-transform duration-300 hover:scale-125 hover:rotate-12" className="w-full h-full object-cover"
/> />
</div> </div>
<div className="p-4"> <div className="p-4 flex-grow">
<p className="font-bold text-xl mb-2">{project.name}</p> <p className="font-bold text-xl mb-2">{project.name}</p>
<p className="text-gray-700">{project.description}</p> <p className="text-gray-700 text-sm line-clamp-3">{project.description}</p>
</div> </div>
</Link> </Link>
</div> </div>
); );
})} })}
</div> </div>
</div> </main>
); );
} }