Finitions

debug.log

@@ -5,3 +5,4 @@
 [0621/002553.054:ERROR:(-1)] Check failed: false. 
 [0621/134732.729:ERROR:(-1)] Check failed: false. 
 [0621/193354.311:ERROR:(-1)] Check failed: false. 
+[0622/174844.159:ERROR:(-1)] Check failed: false. 

src/App.css

@@ -1,3 +1,7 @@
+.min-h-screen {
+    min-height: 100vh;
+}
+
 .blurred {
     width: inherit;
     height: inherit;
@@ -16,6 +20,11 @@
     border-radius: 1em;
 }
 
+.bottom-rounded {
+    border-bottom-left-radius: 1em;
+    border-bottom-right-radius: 1em;
+}
+
 .is-carousel-focused {
     max-height: .8em;
     transition: max-height .15s;
@@ -24,4 +33,4 @@
 .is-carousel {
     max-height: .5em;
     transition: max-height .15s;
-}
+}

src/App.js

@@ -21,7 +21,7 @@ const router = createBrowserRouter([
 
 function App() {
   return (
-    <div className="App has-background-white-bis is-flex-direction-column" style={{minHeight: "100vh"}}>
+    <div className="App has-background-white-bis is-flex is-flex-direction-column" style={{minHeight: "100vh"}}>
         <Navbar/>
         <RouterProvider router={router} />
         <Footer/>

src/Components/Carousel.js

@@ -51,7 +51,15 @@ class Carousel extends Component {
                 </div>
             }
             case "picture": {
-                return <img className="rounded soft-shadow" alt="Showcase media" src={media.value}/>
+                return <div className="is-relative">
+                    <img className="rounded soft-shadow" alt="Showcase media" src={media.value}/>
+                    {
+                        media.description !== undefined ?
+                            <div className="has-text-white p-2 bottom-rounded" style={{position: "absolute", bottom: "6px", background: "#000C", width: "100%"}}>
+                                {media.description}
+                            </div> : null
+                    }
+                </div>
             }
             default: {
                 return <div/>
@@ -62,16 +70,19 @@ class Carousel extends Component {
     render() {
         return <div>
             {this.getMediaHTML(this.props.images[this.state.currentImage])}
-            <div className="is-inline-flex mt-2" style={{width: "100%"}}>
+            {
-                <div style={{flex: "1"}}/>
+                this.props.images.length > 1 ?
-                <span className="button" onClick={this.handlePreviousImage}>&lt;</span>
+                <div className="is-inline-flex mt-2" style={{width: "100%"}}>
-                {this.props.images.map((image, index) => {
+                    <div style={{flex: "1"}}/>
-                    let focused = this.state.currentImage === index ? "is-carousel-focused" : "is-carousel";
+                    <span className="button" onClick={this.handlePreviousImage}>&lt;</span>
-                    return <img key={index} alt="" src="https://www.svgrepo.com/download/35641/dot.svg" className={"mr-1 ml-1 mt-auto mb-auto " + focused}/>;
+                    {this.props.images.map((image, index) => {
-                })}
+                        let focused = this.state.currentImage === index ? "is-carousel-focused" : "is-carousel";
-                <span className="button" onClick={this.handleNextImage}>&gt;</span>
+                        return <img key={index} alt="" src="https://www.svgrepo.com/download/35641/dot.svg" className={"mr-1 ml-1 mt-auto mb-auto " + focused}/>;
-                <div style={{flex: "1"}}/>
+                    })}
-            </div>
+                    <span className="button" onClick={this.handleNextImage}>&gt;</span>
+                    <div style={{flex: "1"}}/>
+                </div> : null
+            }
         </div>
     }
 }

src/Pages/Homepage/Homepage.js

@@ -15,12 +15,12 @@ export default function Homepage() {
             <div style={{position: "absolute", height: "30em", width: "100%"}}>
                 <h1 className="title is-1 has-text-white has-text-centered" style={{marginTop: "3.55em"}}>Ewen Horville</h1>
                 <p className="title is-2 has-text-centered has-text-white">
-                    Étudiant et passionné en Informatique
+                    Étudiant en informatique
                 </p>
             </div>
         </div>
-        <div className="is-flex is-flex-direction-column soft-shadow" style={{height: "30em"}}>
+        <div className="is-flex is-flex-direction-column soft-shadow pb-6 pt-6">
-            <h1 className="title is-1 has-text-centered m-auto pt-6">A Propos</h1>
+            <h1 className="title is-1 has-text-centered m-auto">A Propos</h1>
             <div className="tile is-ancestor m-auto" style={{paddingLeft: "10%", paddingRight: "10%"}}>
                 <div className="tile p-4 is-align-items-center">
                     <div className="mr-5">
@@ -29,31 +29,35 @@ export default function Homepage() {
                         </figure>
                     </div>
                     <div>
-                        <p className="has-text-justified">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer cursus mi lectus. Curabitur congue consectetur orci non consectetur. Donec at purus sodales, mollis dui ac, volutpat tellus. Nullam non pulvinar nisl. Maecenas fringilla auctor sem, vitae posuere turpis ultricies vitae. Nullam urna neque, accumsan nec ex eget, aliquet ultrices nulla. Aenean id nisl eu erat iaculis venenatis. Nullam semper sapien leo, vitae mollis augue auctor in. Donec at dui in orci varius placerat aliquet id neque.</p>
+                        <p className="has-text-justified">
-                    </div>
+                            Passionné par l'informatique depuis le collège, je programme sur mon temps libre et j'apprend
-                </div>
+                            tous les jours.
-                <div className="tile p-4 is-align-items-center">
+                            <br/>
-                    <div className="mr-5">
+                            Je me suis aussi lancé dans la gestion de mon propre serveur maison et j'héberge actuellement
-                        <figure className="image is-128x128">
+                            plusieurs serveurs de jeu ainsi que ce portfolio.
-                            <img alt="placeholder" src="https://bulma.io/images/placeholders/128x128.png"/>
+                            <br/>
-                        </figure>
+                            D'autres projets sont à venir !
-                    </div>
+                            <br/><br/>
-                    <div>
+                            Je suis aujourd'hui à la recherche d'une alternance en informatique afin de continuer mes études
-                        <p className="has-text-justified">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer cursus mi lectus. Curabitur congue consectetur orci non consectetur. Donec at purus sodales, mollis dui ac, volutpat tellus. Nullam non pulvinar nisl. Maecenas fringilla auctor sem, vitae posuere turpis ultricies vitae. Nullam urna neque, accumsan nec ex eget, aliquet ultrices nulla. Aenean id nisl eu erat iaculis venenatis. Nullam semper sapien leo, vitae mollis augue auctor in. Donec at dui in orci varius placerat aliquet id neque.</p>
+                            en école d'ingénieur.
+                        </p>
                     </div>
                 </div>
             </div>
         </div>
         <div className="tile is-ancestor is-white p-4 is-vertical">
             <div className="tile is-parent mr-auto ml-auto m-4">
-                <h1 className="title is-1">Mes Projets</h1>
+                <h1 className="title is-1">Réalisations</h1>
             </div>
             <div className="tile is-parent mr-auto ml-auto">
                 <div className="tile p-4 is-black"><ProjectCard index={0} project={projects[0]}/></div>
                 <div className="tile p-4 is-black"><ProjectCard index={1} project={projects[1]}/></div>
                 <div className="tile p-4 is-black"><ProjectCard index={2} project={projects[2]}/></div>
             </div>
-            <div className="tile is-parent">
+            <div className="tile is-parent mr-auto ml-auto m-4">
+                <h1 className="title is-1">Travaux en cours</h1>
+            </div>
+            <div className="tile is-parent mr-auto ml-auto">
                 <div className="tile p-4 is-black"><ProjectCard index={3} project={projects[3]}/></div>
                 <div className="tile p-4 is-black"><ProjectCard index={4} project={projects[4]}/></div>
                 <div className="tile p-4 is-black"><ProjectCard index={5} project={projects[5]}/></div>

src/Pages/Project/Project.js

@@ -36,8 +36,10 @@ export default function Project() {
         }
     }
 
+    console.log(project)
+
     return (
-        <div className="pt-5 pb-5" style={{marginLeft: "10%", marginRight: "10%"}}>
+        <div className="pt-5 pb-5 mt-auto mb-auto" style={{marginLeft: "10%", marginRight: "10%"}}>
             <div className="box">
                 <div className="is-inline-flex" style={{width: "100%"}}>
                     <div className="m-2" style={{flex: "1"}}>
@@ -49,10 +51,13 @@ export default function Project() {
                     </div>
                 </div>
             </div>
-            <div className="m-auto box" style={{paddingLeft: "7%", paddingRight: "7%"}}>
+            {
-                <h1 className="title is-1 has-text-centered">Plus d'images</h1>
+                project.secondaryMedia !== undefined ?
-                <Carousel images={project.secondaryMedia}></Carousel>
+                <div className="m-auto box" style={{paddingLeft: "7%", paddingRight: "7%"}}>
-            </div>
+                    <h1 className="title is-1 has-text-centered">Plus d'images</h1>
+                    <Carousel images={project.secondaryMedia}></Carousel>
+                </div> : null
+            }
         </div>
     );
 }

src/Projects/manifest.js

@@ -1,3 +1,5 @@
+import {NavLink} from "react-router-dom";
+
 const projectData = [
     {
         title: "AquaticWeb",
@@ -12,19 +14,19 @@ const projectData = [
             Durant un stage de 10 semaines, j'ai été en charge de la refonte complète de l'API du site web ainsi que de
             la modernisation de la structure de la base de données.
             <br/><br/><br/>
-            <strong>Technologies utilisées : Symfony (PHP), ReactJS</strong>
+            <strong>Technologies utilisées : Symfony (PHP), React (JavaScript)</strong>
             <br/>
             <strong>Dates du stage: 04/2023 - 06/2023</strong>
         </p>,
         thumbnail: require("./Aquaticweb/homepage.png"),
         mainMedia: {type: "picture", value: require("./Aquaticweb/homepage.png")},
         secondaryMedia: [
-            {type: "picture", value: require("./Aquaticweb/homepage.png")},
+            {type: "picture", value: require("./Aquaticweb/homepage.png"), description: "Page d'accueil"},
-            {type: "picture", value: require("./Aquaticweb/homepage-2.png")},
+            {type: "picture", value: require("./Aquaticweb/homepage-2.png"), description: "Page d'accueil, FAQ & Footer"},
-            {type: "picture", value: require("./Aquaticweb/taxa.png")},
+            {type: "picture", value: require("./Aquaticweb/taxa.png"), description: "Page des taxons"},
-            {type: "picture", value: require("./Aquaticweb/signup.png")},
+            {type: "picture", value: require("./Aquaticweb/signup.png"), description: "Page d'inscription"},
-            {type: "picture", value: require("./Aquaticweb/sources.png")},
+            {type: "picture", value: require("./Aquaticweb/sources.png"), description: "Page des sources"},
-            {type: "picture", value: require("./Aquaticweb/api.png")}
+            {type: "picture", value: require("./Aquaticweb/api.png"), description: "API Back-end"}
         ],
         date: <strong>04/2023 - 06/2023</strong>
     },
@@ -45,17 +47,18 @@ const projectData = [
             Aujourd'hui, Kaiser compte plus de <strong>7 500</strong> lignes de code et est utilisé par la majorité
             des joueurs du serveur.
             <br/><br/>
-            <strong>Langage utilisées : Lua</strong><br/>
+            <strong>Technologies utilisées : Lua, Illustrator (UI)</strong><br/>
             <strong>Date de sortie : 2020</strong>
         </p>,
         thumbnail: require("./Kaiser/menu.jpg"),
         mainMedia: {type: "picture", value: require("./Kaiser/menu.jpg")},
         secondaryMedia: [
-            {type: "picture", value: require("./Kaiser/status.jpg")},
+            {type: "picture", value: require("./Kaiser/status.jpg"), description: "Statut du vaisseau"},
-            {type: "picture", value: require("./Kaiser/warp.jpg")},
+            {type: "picture", value: require("./Kaiser/warp.jpg"), description: "Menu de déplacement"},
-            {type: "picture", value: require("./Kaiser/tactical.jpg")},
+            {type: "picture", value: require("./Kaiser/tactical.jpg"), description: "Écran tactique (armement)"},
-            {type: "picture", value: require("./Kaiser/stargate.jpg")},
+            {type: "picture", value: require("./Kaiser/stargate.jpg"), description: "Écran de contrôle de la porte des étoiles."},
-            {type: "picture", value: require("./Kaiser/options.jpg")},
+            {type: "picture", value: require("./Kaiser/options.jpg"), description: "Menu d'options"},
+            {type: "picture", value: require("./Kaiser/illustrator.png"), description: "Prototype sur Illustrator"},
             {type: "youtube", value: "https://youtube.com/embed/gLH1JaEDfuQ"}
         ],
         date: <strong>Date de sortie : 2020</strong>
@@ -65,52 +68,91 @@ const projectData = [
         shortDesc: <span>
             Réalisé dans Blender, différents models 3D ayant pour but d'être importé dans <a target="_blank" rel="noreferrer" href="https://gmod.facepunch.com">Garry's Mod</a>.
         </span>,
-        longDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
+        longDesc: <p>
+            Durant mon temps libre, je conçoit de temps à autres des models 3D déstinés à être utilisés au sein de jeux vidéos.
+            <br/><br/>
+            J'ai acquis grâce à cela une certaine connaissance de <strong>Blender</strong> afin de créer des models 3D simples
+            et parfois animés.
+            <br/><br/>
+            <strong>Technologie utilisée : Blender</strong>
+        </p>,
         thumbnail: require("./Models/farragut.png"),
         mainMedia: {type: "picture", value: require("./Models/farragut.png")},
         secondaryMedia: [
-            {type: "picture", value: require("./Models/modbridge_v2.jpg")},
+            {type: "picture", value: require("./Models/modbridge_v2.jpg"), description: <p>
-            {type: "picture", value: require("./Models/lawgiver.png")},
+                    Couloirs de vaisseaux modulaires
-            {type: "picture", value: require("./Models/warp_core.png")},
+                </p>},
+            {type: "picture", value: require("./Models/lawgiver.png"), description: <p>
+                    Lawgiver MkII de l'univers Judge Dredd (<a target="_blank" rel="noreferrer" href="https://www.imfdb.org/images/thumb/7/75/Dredd-Lawgiver-Mk-II-1.jpg/400px-Dredd-Lawgiver-Mk-II-1.jpg">Référence</a>)
+                </p>},
+            {type: "picture", value: require("./Models/warp_core.png"), description: <p>
+                    Model 3D : Chambre antimatière provenant de Star Trek (<a target="_blank" rel="noreferrer" href="https://64.media.tumblr.com/591aaafae1bc5eaf477b5717a7d75e1d/tumblr_otwcnuAAp41w8hpj6o1_1280.png">Référence</a>)
+            </p>},
             {type: "youtube", value: "https://youtube.com/embed/A0rNRkiQSeA"}
         ],
         date: <strong>2019 - 2023</strong>
     },
     {
-        title: "AquaticWeb v4",
+        title: "Luna",
-        shortDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
+        shortDesc: <span>
-        longDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
+            Le successeur de <NavLink to={"projects/1"}>Kaiser</NavLink>, un script permettant aux joueurs de contrôler leur
-        thumbnail: "https://bulma.io/images/placeholders/1280x960.png",
+            vaisseau avec des capacités améliorées et un code plus performant et mieux écrit.
-        mainMedia: {type: "picture", value: "https://www.jacksonsquareshopping.co.uk/wp-content/uploads/2016/12/placeholder-1920x1080-copy.png"},
+        </span>,
-        secondaryMedia: [
+        longDesc: <p>
-            {type: "youtube", value: "https://youtube.com/embed/3Okx0T5vpFc"},
+            Kaiser est un script permettant aux joueurs d'un serveur de jeu de contrôler leur vaisseau spatial. Créé en 2020,
-            {type: "picture", value: "https://www.jacksonsquareshopping.co.uk/wp-content/uploads/2016/12/placeholder-1920x1080-copy.png"}
+            Kaiser est aujourd'hui l'un des scripts les plus populaire auprès des joueurs, c'est pourquoi j'ai décidé de recréer
-        ],
+            un script similaire avec plus de fonctionnalités et une organisation du code améliorée.
-        date: "04/2023 - 06/2023"
+            <br/><br/>
+            Luna est un projet en développement reprenant les principes de fonctionnement de Kaiser avec plus de fonctionnalités
+            comme la capacité pour un joueur de développer et facilement pouvoir intégrer ses propres fonctionnalités en utilisant
+            un système de module.
+            <br/><br/>
+            Luna est aujourd'hui encore en développement avec une partie serveur implémentée et une interface utilisateur
+            encore à l'état de prototype sur Inkscape.
+            <br/><br/>
+            <strong>Technologies utilisées : Lua, Inkscape (design UI)</strong>
+        </p>,
+        thumbnail: require("./Luna/menu.png"),
+        mainMedia: {type: "picture", value: require("./Luna/menu.png")},
     },
     {
-        title: "AquaticWeb v5",
+        title: "Celestia",
-        shortDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
+        shortDesc: <span>
-        longDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
+            Un site web permettant à des joueurs de partager leur vaisseaux spatiaux ou leur scripts.
-        thumbnail: "https://www.jacksonsquareshopping.co.uk/wp-content/uploads/2016/12/placeholder-1920x1080-copy.png",
+        </span>,
-        mainMedia: {type: "picture", value: "https://www.jacksonsquareshopping.co.uk/wp-content/uploads/2016/12/placeholder-1920x1080-copy.png"},
+        longDesc: <p>
-        secondaryMedia: [
+            Afin de faciliter le partage des création de joueurs sur un serveur de jeu, l'idée m'est venu de créer un
-            {type: "youtube", value: "https://youtube.com/embed/3Okx0T5vpFc"},
+            site web permettant de mettre en ligne ses créations et de les partager avec d'autres joueurs.
-            {type: "picture", value: "https://www.jacksonsquareshopping.co.uk/wp-content/uploads/2016/12/placeholder-1920x1080-copy.png"}
+            <br/><br/>
-        ],
+            Le développement du site se fera avec React (JavaScript) ainsi que Symfony (PHP) afin de créer une API.
-        date: "04/2023 - 06/2023"
+            <br/>
+            Le site n'est aujourd'hui encore qu'à l'état de prototype.
+            <br/><br/>
+            <strong>Technologies utilisées : React (JavaScript), Symfony (PHP), Inkscape (UI)</strong>
+        </p>,
+        thumbnail: require("./Celestia/celestia.png"),
+        mainMedia: {type: "picture", value: require("./Celestia/celestia.png")},
     },
     {
-        title: "AquaticWeb v6",
+        title: "Wavefront Importer",
-        shortDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
+        shortDesc: <span>
-        longDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
+            Un script permettant d'importer des objets au format wavefront (.obj) en jeu et de les afficher.
-        thumbnail: "https://bulma.io/images/placeholders/1280x960.png",
+        </span>,
-        mainMedia: {type: "picture", value: "https://www.jacksonsquareshopping.co.uk/wp-content/uploads/2016/12/placeholder-1920x1080-copy.png"},
+        longDesc: <p>
+            Un script simple permettant d'importer des objets au format wavefront (.obj) en jeu et de les afficher en temps réel.
+            <br/><br/>
+            Le script est capable de recréer un model avec mapping UV, normales et séparation des différents groupes de matériaux.
+            <br/>
+            Le but de ce script est de faciliter le chargement dynamique de models 3D en jeu. Capacité qui n'est actuellement
+            pas supportée par le jeu.
+            <br/><br/>
+            <strong>Technologies utilisées : Lua, Blender (3D)</strong>
+        </p>,
+        thumbnail: require("./Wavefront/blender.png"),
+        mainMedia: {type: "picture", value: require("./Wavefront/blender.png")},
         secondaryMedia: [
-            {type: "youtube", value: "https://youtube.com/embed/3Okx0T5vpFc"},
+            {type: "picture", value: require("./Wavefront/ingame.jpg"), description: "Model en jeu"}
-            {type: "picture", value: "https://www.jacksonsquareshopping.co.uk/wp-content/uploads/2016/12/placeholder-1920x1080-copy.png"}
         ],
-        date: "04/2023 - 06/2023"
     }
 ]