ajout page anglais, debut des revues experiences

ChevalMonsieur · Sep 17, 2023 · 208f8d0 · 208f8d0
1 parent 9a00be8
commit 208f8d0
Show file tree

Hide file tree

Showing 10 changed files with 421 additions and 27 deletions.
diff --git a/html css/DeathGrips.html b/html css/DeathGrips.html
@@ -1,13 +1,91 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <link rel="stylesheet" href="html css/general.css"> 
-    <link rel="stylesheet" href="bootstrap/bootstrap.css"> 
+    <link rel="stylesheet" href="general.css"> 
+    <link rel="stylesheet" href="../bootstrap/bootstrap.css"> 
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Portfolio experience DeathGrips</title>
 </head>
-<body>
-
+<body id="body">
+    <header>
+        <p>
+            <a class="AccueilButton" href="../images/CV_HURSON_Justin.pdf" style="color: whitesmoke;" target="_blank">Mon CV</a>
+            <a href="../index.html" style="color: whitesmoke;">Accueil</a>|
+            <a href="https://github.com/Kamizzs/JeuJK" style="color: whitesmoke;" target="_blank">Voir Git</a>|
+            <a href="https://mrcheval.itch.io/death-grips" style="color: whitesmoke;" target="_blank">Tester le jeu</a>|
+            <a href="#footerAncre" style="color: whitesmoke;">Contact</a>
+            <a href="https://mrcheval.itch.io" class="reseauxLien" target="_blank"><img src="../images/logoItch.png" alt="logo Itch.io" class="reseaux"></a>
+            <a href="https://github.com/ChevalMonsieur" class="reseauxLien" target="_blank"><img src="../images/logoGithub.png" alt="logo Github" class="reseaux"></a>
+            <a href="https://www.linkedin.com/in/justin-hurson-0794b1253/" class="reseauxLien" target="_blank"><img src="../images/logoLinkedin.webp" alt="logo Linkedin" class="reseaux"></a>
+        </p>
+    </header>
+
+    <a href="#body" class="noHover">
+        <div>
+            <img src="../images/black1.png" alt="remonter" class="fixe" style="right: 2em;">
+        </div>
+    </a>
+
+    <a href="" class="noHover">
+        <div>
+            <img src="../images/drapeauUS.png" alt="" class="fixe" style="left: 2em; width: 5rem; border-radius: 0.5rem;">
+        </div>
+    </a>
+
+    <div class="contenu col-10 titres" style="margin-top: 5rem;">
+        <img class="newHover" src="../images/DeathGripsMenu.png" alt="menu du jeu death grips" style="width: 60%;">
+
+        <details>
+            <summary class="resume" style="margin-top: 5rem;"><b> Death grips </b> est ma première expérience faisant partie du domaine du développement de jeux vidéo, il s'agit d'un plateformer 2D d'une durée de jeu d'environ 5 à 10 minutes. Ce projet a été réalisé en trio avec la collaboration de <br></summary>
+            <a class="textLink" href="https://kamizzs.github.io" target="_blank"> Kamila Medellel</a> et Mathieu Adamietz. J'ai eu l'occasion de participer à la création du jeu lors d'une option fournie par le but. Cette option nous proposait de créer, par groupe de 2 ou 3, un jeu vidéo simple et court via <b> Unity </b> sur la durée d'un semestre à hauteur de 2h par semaine.
+            <br><br> Mon rôle était majoritairement de former le gameplay du jeu, c'est à dire tout le code sauf les menus et transitions. J'ai également créé une tilemap en 8x8, puis je l'ai rééditée en 16x16 :
+            <br> <img class="newHover" src="../images/TilemapTotal16.png" alt="Tilemap en 16x16" style="margin-top: 3rem; margin-bottom: 3rem; width: 90%;">
+            <br> Créer le gameplay du jeu m'a permis de me faire réflechir réellement pour la première fois au game design, un aspect qu'aujourd'hui j'adore personnellement. J'ai également pu me familiariser avec le moteur de jeu <b> Unity </b> et comprendre son fonctionnement. Pour les déplacements du personnage, nous sommes parti avec 2 sauts et un dash a 8 directions
+        </details>
+    </p>
+    </div>
+
+    <div>
+        <span class="anchor" id="competences"></span>
+        <h2 class="contenu col-12 titres col" style="margin-bottom: 4rem; margin-top: 7rem;">COMPÉTENCES DÉVELOPPÉES :</h2>
+
+        <h4 class="titrePourcent">LANGAGES DE PROGRAMMATION / BALISAGE</h4>
+        <p class="titrePourcent" style="margin-bottom: 2rem; font-size: small;">* chacune des compétences est mesurée en
+            rapport avec la meilleure compétence de la même catégorie</p>
+
+        <p class="titrePourcent">C#</p>
+        <div class="col-10 container" style="flex-direction: row; display: flex;">
+            <div class="fondPourcent">
+                <p class="pourcent" style="width: 100%; font-weight: bold; color: wh;">100%</p>
+            </div>
+        </div>
+
+        <p class="titrePourcent">JAVA</p>
+        <div class="col-10 container" style="flex-direction: row; display: flex;">
+            <div class="fondPourcent">
+                <p class="pourcent" style="width: 85%; font-weight: bold;">85%</p>
+            </div>
+        </div>
+    </div>
+
+    <footer>
+        <div class="itemfooter" id="footerAncre">
+            <img class="imgfooter" src="../images/logoMail.png" alt="mail">
+            <p class="footerText"> mail :</p>
+            <p class="footerText" style="font-weight: bold;"> <a href="mailto:[email protected]"> just.1et2mii
+                    @gmail.com </a></p>
+        </div>
+        <div class="itemfooter">
+            <img class="imgfooter" src="../images/logoTel.png" alt="téléphone">
+            <p class="footerText"> téléphone :</p>
+            <p class="footerText" style="font-weight: bold;"> 06 33 41 82 62 </p>
+        </div>
+        <div class="itemfooter">
+            <img class="imgfooter" src="../images/logoMaison.png" alt="localisation">
+            <p class="footerText"> localisation :</p>
+            <p class="footerText" style="font-weight: bold;"> 33 Rue des Bahutiers (Bordeaux) </p>
+        </div>
+    </footer>
 </body>
diff --git a/html css/general.css b/html css/general.css
@@ -23,8 +23,8 @@ header {
 
 .fixe {
     border: solid whitesmoke;
-    width: 3em;
-    height: 3em;
+    width: 3rem;
+    height: 3rem;
     border-width: 2px;
     border-radius: 100%;
     background-color: black;
@@ -34,9 +34,15 @@ header {
     color: whitesmoke;
     float: left;
     position:fixed;
-    bottom: 2em;
-    right: 2em;
+    bottom: 2rem;
     background-size: cover;
+    transition: transform .2s;
+}
+
+.fixe:hover {
+    -ms-transform: scale(1.2);
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
 }
 
 .imagesArt {
@@ -128,6 +134,16 @@ header {
     padding-bottom: 20%;
 }
 
+.newHover {
+    transition: transform .5s;
+}
+
+.newHover:hover {
+    -ms-transform: scale(1.2);
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+}
+
 .void {
     padding-bottom: 10%;
 }
@@ -205,10 +221,27 @@ img {
     line-height: 100%;
 }
 
+.reseaux {
+    width: 1.5rem;
+}
+
+.reseauxLien {
+    margin: 0rem 1.5rem 0rem 0rem;
+    float: right;
+}
+
 @media screen and (max-width: 1000px) {
     .TitreRetex {
     font-size: 130%;
     }
+
+    header {
+        font-size: 75%;
+    }
+
+    .reseauxLien {
+        margin: 0 1rem 0 0;
+    }
 }
 
 @media screen and (max-width: 650px) {
@@ -217,6 +250,14 @@ img {
         margin-bottom: 10%;
     }
 
+    .reseaux {
+        width: .7rem;
+    }
+
+    .reseauxLien {
+        margin: 0 0.5rem 0 0;
+    }
+
     .smNoPadding {
         padding: 0%;
     }
@@ -247,7 +288,7 @@ img {
     }
 
     header {
-        font-size: 55%;
+        font-size: 50%;
     }
 
     header p {
@@ -320,6 +361,19 @@ footer {
     width: 80%;
 }
 
+.textLink {
+    margin: 0;
+    color: rgb(151, 175, 198);
+    text-decoration: none;
+    transition: transform .3s;
+}
+
+.textLink:hover {
+    color: rgb(151, 175, 198);
+    text-decoration: none;
+
+}
+
 .pourcent {
     background-color: color-mix(in srgb, rgb(190, 121, 121) 0%, rgb(121, 190, 148) 100%);
     text-align: center;
@@ -346,10 +400,16 @@ span.anchor {
     background-position: 3px 50px;
 }
 
+.resume::after {
+    color: rgb(151, 175, 198);
+    content:'... voir plus';
+}
+
 summary::after {
-    content:'... \D voir plus';
+    color: rgb(151, 175, 198);
+    content:'... see more';
 }
 
 details[open] summary::after {
     content: none;
-}
+}
diff --git a/images/DeathGripsMenu.png b/images/DeathGripsMenu.png
diff --git a/images/TilemapTotal16.png b/images/TilemapTotal16.png
diff --git a/images/drapeauFrance.png b/images/drapeauFrance.png
diff --git a/images/drapeauUS.png b/images/drapeauUS.png
diff --git a/images/logoItch.png b/images/logoItch.png
diff --git a/images/logoLinkedin.webp b/images/logoLinkedin.webp
diff --git a/index.html b/index.html
@@ -7,25 +7,32 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PortFolio Accueil</title>
+    <title>Accueil portfolio</title>
 </head>
 
 <body id="body">
     <header>
         <p>
             <a class="AccueilButton" href="images/CV_HURSON_Justin.pdf" style="color: whitesmoke;" target="_blank">Mon CV</a>
-            <a href="#competences" style="color: whitesmoke;">Mes compétences</a>|
-            <a href="#experiences" style="color: whitesmoke;">Mes expériences</a>|
-            <a href="#art" style="color: whitesmoke;">Mon art</a>|
+            <a href="#competences" style="color: whitesmoke;">Compétences</a>|
+            <a href="#experiences" style="color: whitesmoke;">Expériences</a>|
+            <a href="#art" style="color: whitesmoke;">Art</a>|
             <a href="#footerAncre" style="color: whitesmoke;">Contact</a>
-            <a href="https://github.com/ChevalMonsieur" style="float: right; margin: 0 1rem 0 0;"><img src="images/logoGithub.png" alt="logo Github" style="width: 1.5rem;"></a>
+            <a href="https://mrcheval.itch.io" class="reseauxLien" target="_blank"><img src="images/logoItch.png" alt="logo Itch.io" class="reseaux"></a>
+            <a href="https://github.com/ChevalMonsieur" class="reseauxLien" target="_blank"><img src="images/logoGithub.png" alt="logo Github" class="reseaux"></a>
+            <a href="https://www.linkedin.com/in/justin-hurson-0794b1253/" class="reseauxLien" target="_blank"><img src="images/logoLinkedin.webp" alt="logo Linkedin" class="reseaux"></a>
         </p>
-
     </header>
 
     <a href="#body" class="noHover">
         <div>
-            <img src="images/black1.png" alt="" class="fixe">
+            <img src="images/black1.png" alt="" class="fixe" style="right: 2em;">
+        </div>
+    </a>
+
+    <a href="indexUS.html" class="noHover">
+        <div>
+            <img src="images/drapeauUS.png" alt="" class="fixe" style="left: 2em; width: 5rem; border-radius: 0.5rem;">
         </div>
     </a>
 
@@ -34,7 +41,7 @@
         <h1>HURSON JUSTIN</h1>
         <br>
         <details style="display: flex;">
-            <summary>Etudiant français de 2eme année en BUT informatique, j'aime l'art digital et les jeux vidéos. Dans mon temps libre <br></summary>
+            <summary class="resume">Etudiant français de 2eme année en BUT informatique, j'aime l'art digital et les jeux vidéos. Dans mon temps libre <br></summary>
             j'associe les deux pour créer des jeux et des projets informatiques. Mes jeux favoris sont Portal 2, Celeste, Minecraft, Stardew Valley et Inscryption. En dehors du domaine vidéo-ludique, je pratique aussi du parkour du skate et de l'escalade quand je trouve le temps.
             <br><br> En ce moment, je cherche un stage a l'étranger, plus précisement aux Etats-unis, Canada, Japon ou Australie, dans le développement de jeux vidéos chez des studios indépendants. A long terme, je cherche à trouver un emploi dans le même domaine, en France ou à l'étranger.
             <br><br> N'hésitez pas à me contacter si vous etes intéressé pour me prendre en stage ou pour toute autre raison !
@@ -54,28 +61,28 @@ <h3 class="titrePourcent">LANGAGES DE PROGRAMMATION / BALISAGE</h3>
         <p class="titrePourcent">C#</p>
         <div class="col-10 container" style="flex-direction: row; display: flex;">
             <div class="fondPourcent">
-                <p class="pourcent" style="width: 100%;">100%</p>
+                <p class="pourcent" style="width: 100%; font-weight: bold; color: wh;">100%</p>
             </div>
         </div>
 
         <p class="titrePourcent">JAVA</p>
         <div class="col-10 container" style="flex-direction: row; display: flex;">
             <div class="fondPourcent">
-                <p class="pourcent" style="width: 85%;">85%</p>
+                <p class="pourcent" style="width: 85%; font-weight: bold;">85%</p>
             </div>
         </div>
 
         <p class="titrePourcent">PYTHON</p>
         <div class="col-10 container" style="flex-direction: row; display: flex;">
             <div class="fondPourcent">
-                <p class="pourcent" style="width: 70%;">70%</p>
+                <p class="pourcent" style="width: 70%; font-weight: bold;">70%</p>
             </div>
         </div>
 
         <p class="titrePourcent">HTML/CSS</p>
         <div class="col-10 container" style="flex-direction: row; display: flex;">
             <div class="fondPourcent">
-                <p class="pourcent" style="width: 70%;">70%</p>
+                <p class="pourcent" style="width: 70%; font-weight: bold;">70%</p>
             </div>
         </div>
 
@@ -85,26 +92,26 @@ <h3 class="titrePourcent" style="margin-top: 3.5rem; margin-bottom: 1.5rem;">OUT
         <p class="titrePourcent">ASEPRITE</p>
         <div class="col-10 container" style="flex-direction: row; display: flex;">
             <div class="fondPourcent">
-                <p class="pourcent" style="width: 100%;">100%</p>
+                <p class="pourcent" style="width: 100%; font-weight: bold;">100%</p>
             </div>
         </div>   
         <p class="titrePourcent">BLENDER</p>
         <div class="col-10 container" style="flex-direction: row; display: flex;">
             <div class="fondPourcent">
-                <p class="pourcent" style="width: 95%;">95%</p>
+                <p class="pourcent" style="width: 95%; font-weight: bold;">95%</p>
             </div>
         </div>
 
         <p class="titrePourcent">CANVA</p>
         <div class="col-10 container" style="flex-direction: row; display: flex;">
             <div class="fondPourcent">
-                <p class="pourcent" style="width: 80%;">80%</p>
+                <p class="pourcent" style="width: 80%; font-weight: bold;">80%</p>
             </div>
         </div>        
         <p class="titrePourcent">KRITA</p>
         <div class="col-10 container" style="flex-direction: row; display: flex;">
             <div class="fondPourcent">
-                <p class="pourcent" style="width: 70%;">70%</p>
+                <p class="pourcent" style="width: 70%; font-weight: bold;">70%</p>
             </div>
         </div>