mirror of
https://github.com/Ladebeze66/devsite.git
synced 2025-12-13 12:46:49 +01:00
five
This commit is contained in:
parent
72190c8245
commit
4530b6c762
@ -20,33 +20,34 @@ export default async function Page() {
|
||||
const competences = await getAllCompetences();
|
||||
|
||||
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>
|
||||
|
||||
<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) => {
|
||||
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";
|
||||
|
||||
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}`}>
|
||||
<div className="overflow-hidden">
|
||||
<div className="overflow-hidden w-full h-48">
|
||||
<img
|
||||
src={imageUrl}
|
||||
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 className="p-4">
|
||||
<div className="p-4 flex-grow">
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,48 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import React from "react";
|
||||
import Footer from "./components/Footer";
|
||||
import "./assets/main.css";
|
||||
import NavLink from "./components/NavLink";
|
||||
|
||||
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 (
|
||||
<html lang="fr">
|
||||
<body>
|
||||
@ -61,11 +24,10 @@ export default function RootLayout({ children }) {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<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`}>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
{/* 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">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
@ -30,14 +30,14 @@ export default async function HomePage() {
|
||||
const imageUrl = photo?.url ? `${baseUrl}${photo.url}` : null;
|
||||
|
||||
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) */}
|
||||
<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">
|
||||
<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 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">
|
||||
<ReactMarkdown>{cv}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@ -20,36 +20,36 @@ export default async function Page() {
|
||||
const projects = await getAllprojects();
|
||||
|
||||
return (
|
||||
<div className="w-full p-6">
|
||||
<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>
|
||||
|
||||
{/* 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) => {
|
||||
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";
|
||||
|
||||
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 */}
|
||||
<Link href={`/portfolio/${project.slug}`}>
|
||||
<div className="overflow-hidden">
|
||||
<div className="overflow-hidden w-full h-48">
|
||||
<img
|
||||
src={imageUrl}
|
||||
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 className="p-4">
|
||||
<div className="p-4 flex-grow">
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user