From 7115a383161a9933eb6cc4bdff9a8e06a0085506 Mon Sep 17 00:00:00 2001 From: TitiLaPierre Date: Thu, 17 Oct 2024 15:56:54 +0200 Subject: [PATCH] Updated Projects page --- src/components/projectcard/projectcard.tsx | 56 ------- .../projetheader/projectheadercard.tsx | 24 --- src/components/projetheader/projetheader.tsx | 24 --- src/components/timeline/timeline.css | 145 ++++++++++++++++++ src/components/timeline/timeline.tsx | 81 ++++++++++ src/pages/projets/Projets.css | 104 ------------- src/pages/projets/Projets.tsx | 103 ++++++++----- 7 files changed, 288 insertions(+), 249 deletions(-) delete mode 100644 src/components/projectcard/projectcard.tsx delete mode 100644 src/components/projetheader/projectheadercard.tsx delete mode 100644 src/components/projetheader/projetheader.tsx create mode 100644 src/components/timeline/timeline.css create mode 100644 src/components/timeline/timeline.tsx delete mode 100644 src/pages/projets/Projets.css diff --git a/src/components/projectcard/projectcard.tsx b/src/components/projectcard/projectcard.tsx deleted file mode 100644 index f8ddba6..0000000 --- a/src/components/projectcard/projectcard.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -interface ProjectBigCardProps { - imgtitle: string; - lefttext: { __html: string }; - rightimage: string; - downtitle: string; - downcontent: string; -} - -interface ProjectSmallCardProps { - img: string; - title: string; - content: string; -} - -export const ProjectBigCard: React.FC = ({ - imgtitle, - lefttext, - rightimage, - downtitle, - downcontent, -}) => { - return ( -
- {imgtitle} -
-
- {rightimage} -
-
-

{downtitle}

-

{downcontent}

-
-
- ); -}; - -export const ProjectSmallCard: React.FC = ({ - img, - title, - content, -}) => { - return ( -
- {img} -
-

{title}

-

{content}

-
-
- ); -}; diff --git a/src/components/projetheader/projectheadercard.tsx b/src/components/projetheader/projectheadercard.tsx deleted file mode 100644 index cdc2ce0..0000000 --- a/src/components/projetheader/projectheadercard.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -interface ProjectHeaderCardProps { - title: string; - content: string[]; -} - -export const ProjectHeaderCard: React.FC = ({ - title, - content, -}) => { - return ( -
-

{title}

-
    - {content.map((item, index) => ( -
  • - {item} -
    • - ))} -
-
- ); -}; diff --git a/src/components/projetheader/projetheader.tsx b/src/components/projetheader/projetheader.tsx deleted file mode 100644 index 64f28a4..0000000 --- a/src/components/projetheader/projetheader.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { ProjectHeaderCard } from './projectheadercard.tsx'; - -export const ProjetsHeader: React.FC = () => { - return ( -
-

PROJETS

-

Vous retrouvez ici la liste des projets en cours et passé.

-
- - -
-
- ); -}; diff --git a/src/components/timeline/timeline.css b/src/components/timeline/timeline.css new file mode 100644 index 0000000..bacbfac --- /dev/null +++ b/src/components/timeline/timeline.css @@ -0,0 +1,145 @@ +.timeline { + display: flex; + flex-direction: column; + align-items: center; + gap: 150px; + position: relative; + z-index: 0; +} +.timeline::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 10px; + height: 100%; + translate: -50% 0; + border-radius: 999px; + background: var(--gray); + z-index: -1; +} +.timeline-tag { + background: var(--gray); + padding: 0.5rem 2rem; + border-radius: 5px; + font-size: 0.8rem; + text-transform: uppercase; + user-select: none; + width: fit-content; +} +.timeline-project { + background: var(--white); + box-shadow: var(--shadow); + padding: 2rem; + border-radius: 15px; + width: 100%; + max-width: 750px; + position: relative; + display: flex; + flex-direction: column; + align-self: center; + gap: 2rem; +} +.timeline-project::before, .timeline-project::after { + content: ''; + position: absolute; + top: 50%; + translate: 0 -50%; + background: var(--main); + width: 4px; + height: 100%; + max-height: 150px; + border-radius: 999px; +} +.timeline-project::before { left: -15px; } +.timeline-project::after { right: -15px; } +.timeline-project-content { + display: flex; + flex-direction: column; + gap: 0.1rem; +} +.timeline-project-title { + font-size: 1.5rem; + font-weight: 800; + text-transform: uppercase; +} +.timeline-project-date { + font-size: 0.8rem; + color: var(--darkGray); +} +.timeline-project-banner { + position: absolute; + max-width: 50%; + max-height: 250px; + right: 0; + top: 0; + translate: 0 -50%; +} +.timeline-project-description { + display: flex; + flex-direction: column; + gap: 1rem; +} +.timeline-project-paragraph { + color: var(--darkGray); + & > u { + color: var(--black); + text-decoration: underline var(--main) 2px; + } +} +.timeline-project-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 1rem; +} +.timeline-project-card { + aspect-ratio: 1/1; + max-width: 150px; + border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; + &.card_stat { + background: var(--lightGray); + } + &.card_image_contain { + padding: 2rem 1rem; + border: 1px solid var(--lightGray); + & .timeline-project-card-image { + object-fit: contain; + } + } + &.card_image_cover .timeline-project-card-image { + object-fit: cover; + } +} +.timeline-project-card-number { + color: var(--main); + font-size: 2em; + font-weight: 700; +} +.timeline-project-card-subtext { + color: var(--darkGray); + font-size: 0.8em; + text-transform: uppercase; + text-align: center; +} +.timeline-project-card-image { + width: 100%; + height: 100%; +} + +@media screen and (max-width: 800px) { + .timeline { + gap: 75px; + } + .timeline-project-banner { + max-width: 100%; + max-height: 200px; + object-fit: contain; + translate: 0 0; + position: static; + } +} \ No newline at end of file diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx new file mode 100644 index 0000000..ef2b053 --- /dev/null +++ b/src/components/timeline/timeline.tsx @@ -0,0 +1,81 @@ +import React from "react"; + +import './timeline.css'; + +interface StatCardProps { + type: "stat"; + data: string; + label: string; +}; + +interface ImageCardProps { + type: "image"; + src: string; + alt: string; + fit: "contain" | "cover"; +}; + +interface TimelineProjectProps { + title: string; + date: string; + banner?: string; + paragraphs: React.ReactNode[]; + cards?: (StatCardProps|ImageCardProps)[]; +}; + +interface TimelineProps { + projects: TimelineProjectProps[]; +}; + +const TimelineProjectCard: React.FC = (props) => { + if (props.type === "stat") { + const { data, label } = props as StatCardProps; + return ( +
+

{data}

+

{label}

+
+ ); + } else if (props.type === "image") { + const { src, alt, fit } = props as ImageCardProps; + return ( +
+ {alt} +
+ ); + } +}; + +export const TimelineProject: React.FC = ({ title, banner, date, paragraphs, cards }) => { + return ( +
+
+

{title}

+

{date}

+
+ { banner && {title} } +
+ { paragraphs.map((paragraph, i) =>

{paragraph}

) } +
+
+ { cards && cards.map((card, i) => ) } +
+
+ ); +} + +export const Timeline: React.FC = ({ projects }) => { + return ( +
+

Aujourd'hui

+ { + projects.map((project, i) => { + return ( + + ); + }) + } +

Il y a quelques temps

+
+ ); +} \ No newline at end of file diff --git a/src/pages/projets/Projets.css b/src/pages/projets/Projets.css deleted file mode 100644 index 65d0a2c..0000000 --- a/src/pages/projets/Projets.css +++ /dev/null @@ -1,104 +0,0 @@ -.project-header-container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - gap: 1em; - margin: 2em 0; -} - -.project-header-container h1 { - font-size: 3em; - font-weight: 300; -} - -.project-header-card-list { - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - gap: 10em; -} - -.project-header-card { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - gap: 1em; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); - border-radius: 20px; - padding-right: 1em; -} - -.project-header-card h2 { - font-size: 2em; - font-weight: 300; - background-color: black; - color: white; - border-radius: 20px; - width: 105%; - text-align: center; -} - -.project-header-card-li { - list-style-type: none; -} - -.project-big-card { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - gap: 1em; - border-radius: 20px; - background-color: white; - color: black; - width: 50%; - padding: 5em; -} - -.project-big-card img { - width: 45%; - height: auto; -} - -.middle-div-project-big-card { - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - gap: 1em; - background-color: black; - color: white; - border-radius: 20px; - width: 75%; -} - -.middle-div-project-big-card img { - width: 55%; - height: auto; -} - -.down-div-project-big-card h2 { - color: #0693E3; -} - -.project-small-card { - background-color: white; - color: black; - border-radius: 20px; - width: 50%; - display: flex; - flex-direction: row; - justify-content: space-evenly; - align-items: center; - gap: 2em; -} - -.project-small-card img { - width: 25%; - height: auto; - border-bottom-left-radius: 20px; - border-top-left-radius: 20px; -} \ No newline at end of file diff --git a/src/pages/projets/Projets.tsx b/src/pages/projets/Projets.tsx index d628eb0..707006d 100644 --- a/src/pages/projets/Projets.tsx +++ b/src/pages/projets/Projets.tsx @@ -1,51 +1,72 @@ import React from 'react'; -import { ProjetsHeader } from '../../components/projetheader/projetheader'; -import { - ProjectBigCard, - ProjectSmallCard, -} from '../../components/projectcard/projectcard'; - +import { Timeline, TimelineProject } from '../../components/timeline/timeline'; import './Projets.css'; const Projets: React.FC = () => { return ( <> - -
- 3000 heures
0 compétances
10 étudiants
1ère participation
14 ème sur 82 équipes", - }} - rightimage={'https://r2.modelec.club/serge.png'} - downtitle={'Notre robot'} - downcontent={ - "Voici Serge, notre robot pour la coupe de France de robotique 2024. Il est équipé de 2 roues motrices, 2 roues codeuses, 3 pinces et 2 bras d'orientation pour les panneaux solaires. Il est également équipé d'une caméra pour la vision et d'un lidar pour la détection d'adversaire et la triangulation. Coté hardware, il est géré par un raspberry pi 5 et un arduino mega. Côté software, il est géré par des programmes C++ fait sur mesure dont le code est disponible sur notre github. A coté Serge est accompagné de 2 Pixels, ses PAMI (Partie Autonome Mobile Intelligente) qui sont des robots autonomes qui peuvent se déplacer et se repérer dans l'espace. Ils sont gérés par des arduino uno." +

Cette année

+ Cette année encore, nous participons à la Coupe de France de Robotique pour notre deuxième participation !, + ]} + /> +

Remonter dans le Temps

+ Voici Serge, notre robot pour la coupe de France de Robotique 2024 !, + <>Il est équipé de 2 roues motrices, 2 roues codeuses, 3 pinces et 2 bras d'orientation pour les panneaux solaires. Il est également équipé d'une caméra pour la vision et d'un LiDAR pour la détection d'adversaire et la triangulation., + <>Coté Hardware, il est géré par un Raspberry Pi 5 et un Arduino Mega., + <>Côté Software, il est géré par des programmes C++ faits sur mesure dont le code est disponible sur notre Github., + <>Serge n'est pas seul, il est accompagné de 2 Pixels, ses Partie Autonome Mobile Intelligente ou PAMI qui sont des robots autonomes gérés par des Arduino Uno qui peuvent se déplacer et se repérer dans l'espace. + ], + cards: [ + { type: 'stat', data: '3000', label: 'Heures de travail' }, + { type: 'stat', data: '10', label: 'Étudiants' }, + { type: 'stat', data: '2024', label: 'Première participation' }, + { type: 'stat', data: '14', label: '/82 équipes' }, + { type: 'image', src: 'https://r2.modelec.club/cdf.png', alt: 'Logo Coupe de France de Robotique', fit: 'contain' }, + ], + }, + { + title: 'Construction de la table de jeu', + date: '2024', + paragraphs: [ + <>Afin de pouvoir tester notre robot, nous avons construit une table de jeu pour la coupe de France de Robotique., + <>Elle est faite en bois et en vinyle., + ], + cards: [ + { type: 'image', src: 'https://r2.modelec.club/table2024.jpg', alt: 'Table de jeu pour la Coupe de France de Robotique', fit: 'cover' }, + ], + }, + { + title: 'PAMI v1', + date: '2024', + paragraphs: [ + <>Les PAMI v1 sont des robots autonomes qui peuvent se déplacer et se repérer dans l'espace., + <>Ils sont gérés par des Arduino Uno., + ], + cards: [ + { type: 'image', src: 'https://r2.modelec.club/PAMI-V1.png', alt: 'PAMI v1', fit: 'cover' }, + ], + }, + { + title: 'Digitalisation du bureau', + date: '2024', + paragraphs: [ + <>Afin de faciliter la gestion du club, nous avons décidé de digitaliser le bureau., + ], } - /> - - - -
+ ]} + /> + ); };