Add project page

2026-01-18 16:37:30 +01:00 · 2024-09-28 02:00:00 +02:00
parent 0fb094c998
commit d1070c71c9
14 changed files with 490 additions and 100 deletions
--- a/.prettierignor
+++ b/.prettierignor
@@ -0,0 +1,3 @@
+node_modules
+build
+dist
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "tabWidth": 2
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
        "eslint-plugin-react-refresh": "^0.4.9",
        "globals": "^15.9.0",
+        "prettier": "^3.3.3",
        "typescript": "^5.5.3",
        "typescript-eslint": "^8.0.1",
        "vite": "^5.4.1"
@@ -2805,6 +2806,22 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
+    "prettier": "^3.3.3",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
--- a/public/assets/images/cdf.png
+++ b/public/assets/images/cdf.png
--- a/public/assets/images/serge.png
+++ b/public/assets/images/serge.png
--- a/src/App.css
+++ b/src/App.css
@@ -410,3 +410,102 @@
    height: 50px;
    background-color: black;
 }
+
+.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;
+    padding-right: 1em;
+    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;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,10 @@
-import React from "react";
-import "./App.css";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import Home from "./pages/Home";
-import NotFound from "./pages/404";
-import Partenaires from "./pages/Partenaires.tsx";
+import React from 'react';
+import './App.css';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Home from './pages/Home';
+import NotFound from './pages/404';
+import Partenaires from './pages/Partenaires';
+import Projets from './pages/Projets';

 const App: React.FC = () => {
  return (
@@ -12,11 +13,12 @@ const App: React.FC = () => {
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/partenaires" element={<Partenaires />} />
+          <Route path="/projets" element={<Projets />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </Router>
  );
-}
+};

 export default App;
--- a/src/components/projectcard/projectcard.tsx
+++ b/src/components/projectcard/projectcard.tsx
@@ -0,0 +1,56 @@
+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<ProjectBigCardProps> = ({
+  imgtitle,
+  lefttext,
+  rightimage,
+  downtitle,
+  downcontent,
+}) => {
+  return (
+    <div className={'project-big-card'}>
+      <img src={imgtitle} alt={imgtitle} />
+      <div className={'middle-div-project-big-card'}>
+        <div
+          className={'left-text-project-big-card'}
+          dangerouslySetInnerHTML={lefttext}
+        />
+        <img src={rightimage} alt={rightimage} />
+      </div>
+      <div className={'down-div-project-big-card'}>
+        <h2>{downtitle}</h2>
+        <p>{downcontent}</p>
+      </div>
+    </div>
+  );
+};
+
+export const ProjectSmallCard: React.FC<ProjectSmallCardProps> = ({
+  img,
+  title,
+  content,
+}) => {
+  return (
+    <div className={'project-small-card'}>
+      <img src={img} alt={img} />
+      <div className={'project-small-card-content'}>
+        <h2>{title}</h2>
+        <p>{content}</p>
+      </div>
+    </div>
+  );
+};
--- a/src/components/projetheader/projectheadercard.tsx
+++ b/src/components/projetheader/projectheadercard.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface ProjectHeaderCardProps {
+  title: string;
+  content: string[];
+}
+
+export const ProjectHeaderCard: React.FC<ProjectHeaderCardProps> = ({
+  title,
+  content,
+}) => {
+  return (
+    <div className={'project-header-card'}>
+      <h2>{title}</h2>
+      <ul className={'project-header-card-ul'}>
+        {content.map((item, index) => (
+          <li className={'project-header-card-li'} key={index}>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
--- a/src/components/projetheader/projetheader.tsx
+++ b/src/components/projetheader/projetheader.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { ProjectHeaderCard } from './projectheadercard.tsx';
+
+export const ProjetsHeader: React.FC = () => {
+  return (
+    <div className={'project-header-container'}>
+      <h1>PROJETS</h1>
+      <p>Vous retrouvez ici la liste des projets en cours et passé.</p>
+      <div className={'project-header-card-list'}>
+        <ProjectHeaderCard
+          title={'Projets en cours'}
+          content={[
+            'Coupe de France de robotique 2025',
+            'Digitalisation du bureau',
+          ]}
+        />
+        <ProjectHeaderCard
+          title={'Projets passés'}
+          content={['Coupe de France de robotique 2024', 'Drone DIY']}
+        />
+      </div>
+    </div>
+  );
+};
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,40 +1,124 @@
-import React from "react";
-import {Navbar} from "../components/navbar/navbar.tsx";
-import {MiddleText} from "../components/middletext/middletext.tsx";
-import {FromRightCard} from "../components/sidecard/fromrightcard.tsx";
-import {SocialNetworks} from "../components/socialnetwork/socialnetwork.tsx";
-import {FromLeftCardCarousel} from "../components/sidecard/fromleftcard.tsx";
-import {Carousel} from "../components/carousel/carousel.tsx";
-import {Team} from "../components/team/team.tsx";
-import {Footer} from "../components/footer/footer.tsx";
+import React from 'react';
+import { Navbar } from '../components/navbar/navbar.tsx';
+import { MiddleText } from '../components/middletext/middletext.tsx';
+import { FromRightCard } from '../components/sidecard/fromrightcard.tsx';
+import { SocialNetworks } from '../components/socialnetwork/socialnetwork.tsx';
+import { FromLeftCardCarousel } from '../components/sidecard/fromleftcard.tsx';
+import { Carousel } from '../components/carousel/carousel.tsx';
+import { Team } from '../components/team/team.tsx';
+import { Footer } from '../components/footer/footer.tsx';

 const Home: React.FC = () => {
  return (
    <>
      <Navbar />
-            <div className={"logo-container"}>
-                <img src={"/assets/images/logo-full.png"} alt={"Modelec Logo"} id={"logo-full-home"}/>
+      <div className={'logo-container'}>
+        <img
+          src={'/assets/images/logo-full.png'}
+          alt={'Modelec Logo'}
+          id={'logo-full-home'}
+        />
      </div>
-            <div className={"photo-container"}>
-                <img src={"/assets/images/coupe-2024.png"} alt={"Modelec Photo"} id={"photo-coupe-home"}/>
+      <div className={'photo-container'}>
+        <img
+          src={'/assets/images/coupe-2024.png'}
+          alt={'Modelec Photo'}
+          id={'photo-coupe-home'}
+        />
      </div>
-            <div className={"content-container"}>
-                <MiddleText triptic={{__html: "ROBOTIQUE<br> ELECTRONIQUE<br> MODELESIME<br>"}} text={{__html: "<h3>Qui sommes-nous ?</h3>Bienvenue ! Nous sommes Modelec, le club de robotique, électronique et modelisme de l'ISEN Nantes. Nous sommes une association étudiante qui a pour but de promouvoir la robotique, l'électronique et le modelisme auprès des étudiants de l'ISEN Nantes. Nous organisons des ateliers et des événements autour de ces thèmes. Nous participons également à la coupe de france de robotique où pour notre première participation en 2024 nous avons fini 14e sur 82.<h2>CLUB 100% ETUDIANTS</h2>"}}/>
-                <FromRightCard title={"Coupe de France de robotique"} content={{__html: "<span style='color: #0693E3;font-size: 1.5em;'>14 ème</span> sur 82 équipes<br>1 ère participation<p style='font-size: 2em; margin: 0 auto;'>100% étudiants</p>"}} image={"/assets/images/serge-pixel.png"} className={"coupe-title"}/>
-                <h1 className={"title-white"}>Nos Réseaux</h1>
-                <SocialNetworks networks={[{icon: "/assets/svg/github.svg", link: "https://www.github.com/modelec", name: "Modelec_ISEN"}, {icon: "/assets/svg/youtube.svg", link: "https://youtube.com/modelec", name: "Modelec_ISEN"}, {icon: "/assets/svg/insta.svg", link: "https://www.instagram.com/modelec_isen", name: "Modelec_ISEN"}]}/>
-                <FromLeftCardCarousel title={"Nos Partenaires"} carousel={["/assets/images/isen.png", "/assets/images/mercurycloud.png", "/assets/images/bde.png"]} links={["https://isen-nantes.fr", "https://mercurycloud.fr", "https://instagram.com/odyssey_bde"]}/>
-                <MiddleText triptic={{__html: "GRANDE<br> ECOLE<br> D'INGENIEUR<br>"}} text={{__html: "<h3>Notre actualité</h3>Parce que les technologies du numérique sont partout, l’ISEN forme des ingénieurs aptes à répondre aux besoins des entreprises dans tous les secteurs d’activités. Sur un parc de 10 hectares, le campus est doté d'un restaurant. Depuis la rentrée 2021 les étudiants sont accueillis dans le nouveau bâtiment ISEN construit avec le soutien de la Région Pays de la Loire."}}/>
+      <div className={'content-container'}>
+        <MiddleText
+          triptic={{ __html: 'ROBOTIQUE<br> ELECTRONIQUE<br> MODELESIME<br>' }}
+          text={{
+            __html:
+              "<h3>Qui sommes-nous ?</h3>Bienvenue ! Nous sommes Modelec, le club de robotique, électronique et modelisme de l'ISEN Nantes. Nous sommes une association étudiante qui a pour but de promouvoir la robotique, l'électronique et le modelisme auprès des étudiants de l'ISEN Nantes. Nous organisons des ateliers et des événements autour de ces thèmes. Nous participons également à la coupe de france de robotique où pour notre première participation en 2024 nous avons fini 14e sur 82.<h2>CLUB 100% ETUDIANTS</h2>",
+          }}
+        />
+        <FromRightCard
+          title={'Coupe de France de robotique'}
+          content={{
+            __html:
+              "<span style='color: #0693E3;font-size: 1.5em;'>14 ème</span> sur 82 équipes<br>1 ère participation<p style='font-size: 2em; margin: 0 auto;'>100% étudiants</p>",
+          }}
+          image={'/assets/images/serge-pixel.png'}
+          className={'coupe-title'}
+        />
+        <h1 className={'title-white'}>Nos Réseaux</h1>
+        <SocialNetworks
+          networks={[
+            {
+              icon: '/assets/svg/github.svg',
+              link: 'https://www.github.com/modelec',
+              name: 'Modelec_ISEN',
+            },
+            {
+              icon: '/assets/svg/youtube.svg',
+              link: 'https://youtube.com/modelec',
+              name: 'Modelec_ISEN',
+            },
+            {
+              icon: '/assets/svg/insta.svg',
+              link: 'https://www.instagram.com/modelec_isen',
+              name: 'Modelec_ISEN',
+            },
+          ]}
+        />
+        <FromLeftCardCarousel
+          title={'Nos Partenaires'}
+          carousel={[
+            '/assets/images/isen.png',
+            '/assets/images/mercurycloud.png',
+            '/assets/images/bde.png',
+          ]}
+          links={[
+            'https://isen-nantes.fr',
+            'https://mercurycloud.fr',
+            'https://instagram.com/odyssey_bde',
+          ]}
+        />
+        <MiddleText
+          triptic={{ __html: "GRANDE<br> ECOLE<br> D'INGENIEUR<br>" }}
+          text={{
+            __html:
+              "<h3>Notre actualité</h3>Parce que les technologies du numérique sont partout, l’ISEN forme des ingénieurs aptes à répondre aux besoins des entreprises dans tous les secteurs d’activités. Sur un parc de 10 hectares, le campus est doté d'un restaurant. Depuis la rentrée 2021 les étudiants sont accueillis dans le nouveau bâtiment ISEN construit avec le soutien de la Région Pays de la Loire.",
+          }}
+        />
      </div>
-            <div className={"botton-container-home"}>
+      <div className={'botton-container-home'}>
        <h1>Nos Projets</h1>
-                <Carousel images={['/assets/images/robot1.jpg', '/assets/images/robot2.jpg', '/assets/images/robot3.jpg', '/assets/images/robot4.jpg', '/assets/images/robot5.jpg']} />
+        <Carousel
+          images={[
+            '/assets/images/robot1.jpg',
+            '/assets/images/robot2.jpg',
+            '/assets/images/robot3.jpg',
+            '/assets/images/robot4.jpg',
+            '/assets/images/robot5.jpg',
+          ]}
+        />
        <h1>L'équipe</h1>
-                <Team team={[{name: "Jean Dupont", role: "Président", image: "/assets/images/team-member/maxime.png"}, {name: "Marie Dupont", role: "Trésorière", image: "/assets/images/team-member/maxime.png"}, {name: "Pierre Dupont", role: "Secrétaire", image: "/assets/images/team-member/maxime.png"}]}/>
+        <Team
+          team={[
+            {
+              name: 'Jean Dupont',
+              role: 'Président',
+              image: '/assets/images/team-member/maxime.png',
+            },
+            {
+              name: 'Marie Dupont',
+              role: 'Trésorière',
+              image: '/assets/images/team-member/maxime.png',
+            },
+            {
+              name: 'Pierre Dupont',
+              role: 'Secrétaire',
+              image: '/assets/images/team-member/maxime.png',
+            },
+          ]}
+        />
      </div>
      <Footer />
    </>
  );
-}
+};

-export default Home
+export default Home;
--- a/src/pages/Partenaires.tsx
+++ b/src/pages/Partenaires.tsx
@@ -1,47 +1,62 @@
-import React from "react";
-import { Navbar } from "../components/navbar/navbar";
-import PartenairesList from "../components/partenaires/partenaires";
-import {Footer} from "../components/footer/footer.tsx";
-import {FromLeftCard} from "../components/sidecard/fromleftcard.tsx";
-import {FromRightCard} from "../components/sidecard/fromrightcard.tsx";
+import React from 'react';
+import { Navbar } from '../components/navbar/navbar';
+import PartenairesList from '../components/partenaires/partenaires';
+import { Footer } from '../components/footer/footer.tsx';
+import { FromLeftCard } from '../components/sidecard/fromleftcard.tsx';
+import { FromRightCard } from '../components/sidecard/fromrightcard.tsx';

 const Partenaires: React.FC = () => {
  return (
    <>
      <Navbar />
-            <PartenairesList partenaires={[
+      <PartenairesList
+        partenaires={[
          {
-                    title: "ISEN Nantes",
-                    logo: "/assets/images/isen.png",
-                    link: "https://www.isen-nantes.fr"
+            title: 'ISEN Nantes',
+            logo: '/assets/images/isen.png',
+            link: 'https://www.isen-nantes.fr',
          },
          {
-                    title: "MercuryCloud",
-                    logo: "/assets/images/mercurycloud.png",
-                    link: "https://www.mercurycloud.fr"
+            title: 'MercuryCloud',
+            logo: '/assets/images/mercurycloud.png',
+            link: 'https://www.mercurycloud.fr',
          },
          {
-                    title: "Odyssey BDE",
-                    logo: "/assets/images/bde.png",
-                    link: "https://instagram.com/odyssey_bde"
+            title: 'Odyssey BDE',
+            logo: '/assets/images/bde.png',
+            link: 'https://instagram.com/odyssey_bde',
+          },
+        ]}
+      />
+      <div className={'content-container'}>
+        <FromLeftCard
+          title={'ISEN Nantes'}
+          image={'/assets/images/isen.png'}
+          content={
+            "L'ISEN Nantes est une école d'ingénieurs généraliste en 5 ans. Elle forme des ingénieurs dans les domaines de l'électronique, de l'informatique et des télécommunications. Ils nous mettent à disposition un local pour travailler sur nos projets."
          }
-            ]}/>
-            <div className={"content-container"}>
-                <FromLeftCard title={"ISEN Nantes"}
-                              image={"/assets/images/isen.png"}
-                              content={"L'ISEN Nantes est une école d'ingénieurs généraliste en 5 ans. Elle forme des ingénieurs dans les domaines de l'électronique, de l'informatique et des télécommunications. Ils nous mettent à disposition un local pour travailler sur nos projets."} />
-                <div className={"separator"}></div>
-                <FromRightCard title={"MercuryCloud"}
-                               image={"/assets/images/mercurycloud.png"}
-                               content={{__html:"MercuryCloud est un hébergeur web, de vps ainsi que de serveur de jeu. Ils nous mettent à disposition un vps pour de la compilation et pour héberger certains service dont ce site web."}} />
-                <div className={"separator"}></div>
-                <FromLeftCard title={"Odyssey BDE"}
-                              image={"/assets/images/bde.png"}
-                              content={"Le BDE de l'ISEN Nantes, Odyssey, est un partenaire de longue date. Ils nous aident dans l'organisation de nos évènements et nous soutiennent dans nos projets."} />
+        />
+        <div className={'separator'}></div>
+        <FromRightCard
+          title={'MercuryCloud'}
+          image={'/assets/images/mercurycloud.png'}
+          content={{
+            __html:
+              'MercuryCloud est un hébergeur web, de vps ainsi que de serveur de jeu. Ils nous mettent à disposition un vps pour de la compilation et pour héberger certains service dont ce site web.',
+          }}
+        />
+        <div className={'separator'}></div>
+        <FromLeftCard
+          title={'Odyssey BDE'}
+          image={'/assets/images/bde.png'}
+          content={
+            "Le BDE de l'ISEN Nantes, Odyssey, est un partenaire de longue date. Ils nous aident dans l'organisation de nos évènements et nous soutiennent dans nos projets."
+          }
+        />
      </div>
      <Footer />
    </>
  );
-}
+};

 export default Partenaires;
--- a/src/pages/Projets.tsx
+++ b/src/pages/Projets.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Navbar } from '../components/navbar/navbar';
+import { ProjetsHeader } from '../components/projetheader/projetheader';
+import { Footer } from '../components/footer/footer';
+import {
+  ProjectBigCard,
+  ProjectSmallCard,
+} from '../components/projectcard/projectcard.tsx';
+
+const Projets: React.FC = () => {
+  return (
+    <>
+      <Navbar />
+      <ProjetsHeader />
+      <div className={'content-container'}>
+        <ProjectBigCard
+          imgtitle={'/assets/images/cdf.png'}
+          lefttext={{
+            __html:
+              "1 robot<br>3000 heures<br>0 compétances<br>10 étudiants<br>1ère participation<br><span style='color: #0693E3;'>14 ème</span> sur 82 équipes",
+          }}
+          rightimage={'/assets/images/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."
+          }
+        />
+        <div className={'separator'}></div>
+        <ProjectSmallCard
+          img={'/assets/images/digitalisation.png'}
+          title={'Constructions tables de jeu CDF'}
+          content={
+            'Afin de pouvoir tester notre robot, nous avons construit 1 table de jeu pour la coupe de France de robotique. Elles sont faites en bois et en vynile.'
+          }
+        />
+        <div className={'separator'}></div>
+        <ProjectSmallCard
+          img={'/assets/images/pami-V1.png'}
+          title={'PAMI V1'}
+          content={
+            "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."
+          }
+        />
+        <div className={'separator'}></div>
+        <ProjectSmallCard
+          img={'/assets/images/digitalisation.png'}
+          title={'Digitalisation du bureau'}
+          content={
+            'Afin de faciliter la gestion du club, nous avons décidé de digitaliser le bureau.'
+          }
+        />
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default Projets;