mguilbert/matheoguilbert.fr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed design project page

Browse Source
This commit is contained in:
Mathéo GUILBERT
2026-04-16 10:47:28 +02:00
parent 5e1368f790
commit 2bf8bae473
12 changed files with 65 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/page.tsx
+2 -2
View File
@@ -5,13 +5,13 @@ import TimelineSection from "@/components/sections/AboutSection";
import { getAllProjects } from "@/lib/projects/get-projects";
type Props = {
type props = {
params: Promise<{
locale: string;
}>;
};
export default async function Home({ params }: Props) {
export default async function Home({ params }: props) {
const { locale } = await params;
const projects = getAllProjects();
app/[locale]/works/[slug]/page.tsx
+10 -12
View File
@@ -1,13 +1,13 @@
import { notFound } from "next/navigation";
import { MDXRemote } from "next-mdx-remote/rsc";
import { getAllProjects, getProjectBySlug, getProjectSlugs } from "@/lib/projects/get-projects";
import { mdxComponents } from "@/components/mdx/mdx-components";
import { mdxComponents } from "@/components/mdx/mdxComponents";
import { ProjectHero } from "@/components/sections/ProjectHero";
import { ProjectMeta } from "@/components/sections/ProjectMeta";
import { ProjectTechnologies } from "@/components/sections/ProjectTechnologies";
import { OtherProjects } from "@/components/sections/OtherProjects";
type Props = {
type props = {
params: Promise<{
locale: string;
slug: string;
@@ -21,7 +21,7 @@ export function generateStaticParams() {
]);
}
export default async function ProjectPage({ params }: Props) {
export default async function ProjectPage({ params }: props) {
const { locale, slug } = await params;
const project = getProjectBySlug(slug);
@@ -39,17 +39,17 @@ export default async function ProjectPage({ params }: Props) {
}));
return (
<main className="bg-[#f5f3ef] text-[#2b160f]">
<div className="mx-auto max-w-7xl px-6 py-6">
<main className="bg-[#f5f3ef]">
<div className="mx-auto max-w-full ">
<ProjectHero
locale={locale}
title={project.title}
subtitle={project.subtitle}
year={project.year}
description={project.description}
dateLabel={project.dateLabel}
/>
<ProjectMeta
year={project.year}
dateLabel={project.dateLabel}
category={project.category}
roles={project.roles}
client={project.client}
@@ -58,13 +58,11 @@ export default async function ProjectPage({ params }: Props) {
<ProjectTechnologies technologies={project.technologies} />
<section className="pb-16">
<article
className="
<article className="
prose prose-neutral max-w-none
prose-h2:text-6xl prose-h2:font-semibold prose-h2:text-[#2b160f]
prose-p:text-base prose-p:leading-8 prose-p:text-neutral-800
"
>
">
<MDXRemote source={project.content} components={mdxComponents} />
</article>
</section>
components/mdx/mdx-components.tsx → components/mdx/mdxComponents.tsx
View File
components/sections/OtherProjects.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import Link from "next/link";
type Props = {
type props = {
locale: string;
projects: {
slug: string;
@@ -9,7 +9,7 @@ type Props = {
}[];
};
export function OtherProjects({ locale, projects }: Props) {
export function OtherProjects({ locale, projects }: props) {
if (!projects.length) return null;
return (
components/sections/ProjectHero.tsx
+17 -13
View File
@@ -1,32 +1,36 @@
import Link from "next/link";
type Props = {
import { GoArrowLeft } from "react-icons/go";
type props = {
title: string;
subtitle: string;
year: number;
description: string;
dateLabel: string;
locale: string;
};
export function ProjectHero({ title, subtitle, year, locale }: Props) {
export function ProjectHero({ title, description, dateLabel, locale }: props) {
return (
<section className="rounded-[28px] bg-[#2b160f] px-6 py-16 text-white md:px-12 md:py-28">
<div className="md:pt-22">
<section className="rounded-[10px] bg-brand-brown flex flex-col items-center justify-center text-brand-beige px-6 py-4">
<Link
href={`/${locale}/works`}
className="mb-10 inline-flex text-sm text-white/80 hover:text-white"
href={`/${locale}#works`}
className="w-full mb-10 inline-flex items-center justify-start gap-2 text-sm text-brand-beige"
>
← Retour aux projets
<GoArrowLeft /> Retour aux projets
</Link>
<div className="mx-auto flex min-h-[360px] max-w-4xl flex-col items-center justify-center text-center">
<h1 className="text-5xl font-semibold md:text-7xl">{title}</h1>
<p className="mt-4 text-lg text-white/80 md:text-2xl">{subtitle}</p>
<div className="mx-auto flex min-h-90 max-w-4xl flex-col items-center justify-center text-center">
<h1 className="text-5xl font-serif md:text-7xl">{title}</h1>
<p className="mt-4 font-sans text-base text-brand-beige/80">{description}</p>
<div className="mt-8 flex items-center gap-4 text-sm text-white/70">
<div className="mt-8 flex items-center gap-4 text-sm text-brand-beige/70">
<span className="h-px w-16 bg-white/30" />
<span>{year}</span>
<span>{dateLabel}</span>
<span className="h-px w-16 bg-white/30" />
</div>
</div>
</section>
</div>
);
}
components/sections/ProjectMeta.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
type Props = {
year: number;
type props = {
dateLabel: string;
category: string;
roles: string[];
client: string;
@@ -20,10 +20,10 @@ function Item({
);
}
export function ProjectMeta({ year, category, roles, client }: Props) {
export function ProjectMeta({ dateLabel, category, roles, client }: props) {
return (
<section className="grid gap-8 py-10 md:grid-cols-4">
<Item label="Année">{year}</Item>
<Item label="Année">{dateLabel}</Item>
<Item label="Catégorie">{category}</Item>
<Item label="Rôles">
<div className="flex flex-col gap-1">
components/sections/ProjectTechnologies.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
type Props = {
type props = {
technologies: string[];
};
export function ProjectTechnologies({ technologies }: Props) {
export function ProjectTechnologies({ technologies }: props) {
return (
<section className="pb-16">
<p className="mb-4 text-sm text-neutral-500">Technologies</p>
@@ -11,7 +11,7 @@ export function ProjectTechnologies({ technologies }: Props) {
{technologies.map((tech) => (
<span
key={tech}
className="rounded-full bg-[#2b160f] px-4 py-2 text-sm text-white"
className="rounded-full bg-brand-brown px-4 py-2 text-sm text-white"
>
{tech}
</span>
components/sections/WorksSection.tsx
+2 -2
View File
@@ -1,12 +1,12 @@
import { Project } from "@/lib/projects/types";
import { ProjectCard } from "../ui/ProjectCard";
type Props = {
type props = {
projects: Project[];
locale: string;
};
export default function WorksSection({ projects, locale }: Props) {
export default function WorksSection({ projects, locale }: props) {
return (
<section id="works" className="w-full flex flex-col items-start justify-start">
<h2 className="text-[clamp(80px,10vw,128px)] font-serif text-brand-brown mt-6 mb-4">Travaux</h2>
components/ui/ProjectCard.tsx
+9 -9
View File
@@ -2,30 +2,29 @@ import Link from "next/link";
import { GoArrowRight } from "react-icons/go";
import { Project } from "@/lib/projects/types";
type Props = {
type props = {
project: Project;
locale: string;
isTheLast?: boolean;
};
export const ProjectCard = ({
project,
locale,
isTheLast = false,
}: Props) => {
export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
return (
<div className="w-full pb-12">
<div className="w-full h-px bg-brand-brown/20" />
<Link href={`/${locale}/works/${project.slug}`} className="group block">
<div className="flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-center lg:gap-14 relative">
{/* Date label */}
<div className="text-5xl font-serif text-brand-brown/40 mt-6 font-semibold lg:absolute lg:top-1 lg:right-1">
{project.dateLabel ?? project.year}
{project.dateLabel}
</div>
{/* Left image */}
<div className="w-full lg:w-3/5 h-92.5 bg-gray-600 overflow-hidden">
{project.preview1 ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={project.preview1}
alt={project.title}
@@ -34,6 +33,7 @@ export const ProjectCard = ({
) : null}
</div>
{/* Right content */}
<div className="flex flex-col items-start justify-center w-full gap-7.5">
<div className="flex flex-col items-start justify-center w-full">
<div className="p-1.5 bg-brand-brown rounded-px text-brand-beige font-sans">{project.category}</div>
@@ -47,7 +47,7 @@ export const ProjectCard = ({
</div>
</div>
<div className="text-base font-normal font-sans">{project.description ?? project.subtitle}</div>
<div className="text-base font-normal font-sans">{project.description}</div>
<div className="border-b text-base flex flex-row justify-center items-center gap-0.5 transition group-hover:gap-1.5">
<p>READ</p>
content/projects/EverEastSolutions.mdx
+1 -2
View File
@@ -1,7 +1,6 @@
---
title: "EverEast Solutions"
subtitle: "Maître d'oeuvre du web"
year: 2026
priority: 1
dateLabel: "2026 - auj."
category: "Application web"
client: "EverEast Solutions"
lib/projects/get-projects.ts
+1 -1
View File
@@ -38,5 +38,5 @@ export function getAllProjects(): Project[] {
return getProjectSlugs()
.map((slug) => getProjectBySlug(slug))
.filter((project): project is Project => project !== null)
.sort((a, b) => b.year - a.year);
.sort((a, b) => b.priority - a.priority);
}
lib/projects/types.ts
+1 -2
View File
@@ -1,7 +1,6 @@
export type ProjectFrontmatter = {
title: string;
subtitle: string;
year: number;
priority: number;
category: string;
client: string;
roles: string[];