<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style.css">
    <SCRIPT TYPE="text/javascript" SRC="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></SCRIPT>
    <link rel="icon" type="image/png" href="../img/favicon.png">
    <script src="script.js"></script>
    <title>Laroche benjamin CV</title>
</head>

<body class="page1 un">
    <section class="container">
        <nav class="navbar">
            <div class="hamburger-menu">
                <div class="line line-1"></div>
                <div class="line line-2"></div>
                <div class="line line-3"></div>
            </div>
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="#presentation" class="nav-link">Presentation</a>
                </li>
                <li class="nav-item">
                    <a href="#Competences" class="nav-link">Competences</a>
                </li>
                <li class="nav-item">
                    <a href="#Parcours" class="nav-link">Parcours</a>
                </li>
                <li class="nav-item">
                    <a href="#Passions" class="nav-link">Passions</a>
                </li>
                <li class="nav-item">
                    <a href="#Réalisation" class="nav-link"> Réalisations</a>
                </li>
                <li class="nav-item">
                    <a href="#contacts" class="nav-link">contacts</h3></a>
                </li>
            </ul>
        </nav>
    </section>
    <div class="arriver">
        <img src="../img/signatureV2.svg" alt="logo" class="logo">
        <img class="welcome" src="../img/texte.svg" alt="">

    </div>
    <section id="main" tabIndex="-1">

        <article id="one">
            <section class="container">
                <h2 id="presentation">Presentation</h2>


                <div class="elements">
                    <div class="presentation">

                        <img src="../img/ecritureKlit.png" alt="" class="ecrit">


                        <p class="text">
                        Salut belle personne que tu es et bienvenue dans mon CV interactif.
                        Je me présente, je m'appelle Benjamin Laroche. Étudiant de MMI, je suis quelqu'un qu'on peut qualifier de créatifs ainsi que d'inventifs. Plutôt polyvalent, j'arrive très bien à maîtriser les outils de conception et de création numérique. Ayant fait de l'internat, j'arrive facilement à travailler en équipe et à être autonome.
                        </p>

                    </div>


                    <div class="moi" alt="la tête du créateur">
                        <div class="surprise nope">
                            <div class="lin-behance nope">

                                <a href="https://www.linkedin.com/in/benjamin-laroche-57b3861b9/" target="_blank"><img
                                        class="reseaux nope" src="../img/icons/linkedin.png" alt="lien linkedin"
                                        class="nope"></a>

                                <a href="https://www.behance.net/benjaminlaroche" target="_blank"><img
                                        class="reseaux nope" src="../img/icons/behance-logo.png" alt="lien behance"
                                        class="nope"></a>
                            </div>

                            <a href="../Benjamin_laroche_CV.pdf" download>
                                <h3 class="download nope">Télécharger CV</h3>

                            </a>

                        </div>
                    </div>


                </div>
            </section>
        </article>
    </section>


    <section id="main" tabIndex="-1">


        <article id="about">

            <section class="container">
                <h2 id="Competences">Competences</h2>

                <div class="centrer2">


                    <div class="skills-bar">
                        <div class="bar ">
                            <div class="infos">
                                <span>procreate</span>
                            </div>
                            <div class="progress-line procreate"><span></span></div>
                        </div>
                        <div class="bar">
                            <div class="infos">
                                <span>photoshop</span>
                            </div>
                            <div class="progress-line photoshop"><span></span></div>
                        </div>
                        <div class="bar">
                            <div class="infos">
                                <span>illustrator</span>
                            </div>
                            <div class="progress-line illustrator"><span></span></div>
                        </div>
                        <div class="bar">
                            <div class="infos">
                                <span>indesign</span>
                            </div>
                            <div class="progress-line indesign"><span></span></div>
                        </div>
                        <div class="bar">
                            <div class="infos">
                                <span>premiere pro</span>
                            </div>
                            <div class="progress-line premiere"><span></span></div>
                        </div>
                        <div class="bar">
                            <div class="infos">
                                <span>adobe XD/ Figma </span>
                            </div>
                            <div class="progress-line figma"><span></span></div>
                        </div>
                        <div class="bar">
                            <div class="infos">
                                <span>Html/css</span>
                            </div>
                            <div class="progress-line css"><span></span></div>
                        </div>
                        <div class="bar">
                            <div class="infos">
                                <span>javascript</span>
                            </div>
                            <div class="progress-line javascript"><span></span></div>
                        </div>



                    </div>



                    <div class="graph">

                        <img class="statistique" src="../img/graphisme.svg"
                            alt="competences français:100%,anglais:80%,espagnol:50%"></img>

                        <img class="statistique" src="../img/wheelstats.svg" alt="">
                    </div>

                </div>



            </section>

        </article>

    </section>




    <article id="Parcours" id="two">
        <section class="container">
            <h2>Parcours</h2>
            <div class="container3">
                <div class="portfolio">
                    <div class="cache">
                    </div>
                    <div class="projet">
                        <!--<img src="https://picsum.photos/200" alt="" class="image_projet">-->
                        <div class="titre open pink" data-target="e1">
                            <h3 class="nom_projet">Dut MMI</h3>
                        </div>
                    </div>

                    <div class="description nope e1">
                        <h3>Université Paris Est Marne-la-Vallée</h3>
                        <p>Le DUT Métiers du Multimédia et de l'Internet est une formation universitaire sélective
                            qui permet aux étudiants d'acquérir les compétences nécessaires pour travailler dans des
                            secteurs comme le développement web et mobile, le web design, la gestion de projet
                            digital, ou encore l'audiovisuel. Cette formation permet de mettre en pratique ses
                            compétences notamment pendant les projets tutorés et les stages, afin de se rapprocher
                            du monde professionnel.
                            <br>

                            Parmi ses enseignements, on retrouve des modules comme :</p>

                        <ul>
                            <li>
                                <p> Intégration web</p>
                            </li>
                            <li>
                                <p>Algorithmique et programmation / Développement web</p>
                            </li>
                            <li>
                                <p>Base de données</p>
                            </li>
                            <li>
                                <p>Services sur réseaux</p>
                            </li>
                            <li>
                                <p>Culture scientifique et traitement de l'information</p>
                            </li>
                            <li>
                                <p>Production audiovisuelle</p>
                            </li>
                            <li>
                                <p>Infographie</p>
                            </li>
                            <li>
                                <p>Gestion de projet</p>
                            </li>
                            <li>
                                <p>Environnement juridique, économique et mercatique des organisations</p>
                            </li>
                        </ul>
                        <p><a href="http://www.dut-mmi-champs.fr/" target="_blank"> en savoir plus</a></p>
                    </div>



                    <div class="projet">
                        <!--<img src="https://picsum.photos/200" alt="" class="image_projet">-->
                        <div class="titre open yellow blue" data-target="e2">
                            <h3 class="nom_projet">Projet <br> Tutoré</h3>
                        </div>


                    </div>

                    <div class="description nope e2 ">
                        <h3>FuturaMMI</h3>
                        <p>FuturaMMI est mon projet tutoré de première année.
                            L'objectif est de créer un site web afin de faire découvrir aux nouveaux universitaires de MMI les métiers possibles après cette filaire.
                            <br>
                            Dans ce projet, je suis le chef de projet ainsi que le directeur artistique.
                            J'ai dû gérer l'organisation et l'avancé du projet ainsi que la charte graphique.
                            <p><a href="https://etudiant.u-pem.fr/~mvelasco/Futurami/#accueil" target="_blank" > en savoir plus</a></p>
                    </div>

                    <div class="projet">
                        <!--<img src="https://picsum.photos/200" alt="" class="image_projet">-->
                        <div class="titre open red" data-target="e3">
                            <h3 class="nom_projet">bac S </h3>
                        </div>




                    </div>

                    <div class="description nope e3">
                        <h3>Lycée Saint Martin de France, Pontoise</h3>
                        <p>Baccalauréat général,Sciences Physiques et informatique,Mention assez bien
                            <br>
                            troupe de Théâtres, équipe de Rugby, option art Plastique
                        </p>


                    </div>


                    <div class="projet">
                        <!--<img src="https://picsum.photos/200" alt="" class="image_projet">-->
                        <div class="titre open green" data-target="e4">
                            <h3 class="nom_projet">Vendeur <br> caissier</h3>
                        </div>




                    </div>
                    <div class="description nope e4">
                        <h3>Minimax, Marseille</h3>
                        <p>
                            Ce poste fut une initiation aux techniques de ventes durant
                            lequel j'ai du:</p>
                        <ul>
                            <li>gérer les réceptions de marchandises, ranger les rayons
                                pour créer des ambiances d'incitation à la vente.</li>
                            <li>tenir et clôturer quotidiennement la caisse</li>
                            <li>répondre et anticiper les besoins de la clientèle</li>
                        </ul>


                    </div>
                    <div class="projet">
                        <!--<img src="https://picsum.photos/200" alt="" class="image_projet">-->
                        <div class="titre open purple" data-target="e5">
                            <h3 class="nom_projet">Assistant <br> d'architecte</h3>
                        </div>



                    </div>
                    <div class="description nope e5">
                        <h3>THE BRAND TAILORS, Vincennes</h3>
                        <p>participation à la
                            création de plan d'espaces pour rénover un restaurant.</p>

                    </div>
                    <div class="projet">
                        <!--<img src="https://picsum.photos/200" alt="" class="image_projet">-->
                        <div class="titre open yellow" data-target="e6">
                            <h3 class="nom_projet">projet <br> marque de <br> vêtments</h3>
                        </div>




                    </div>
                    <div class="description nope e6">
                        <h3>Biosty</h3>
                        <p>Création d’une micro-entreprise de fabrication éco-responsable de vêtement : « Biosty »
                        Production de type : « Print on demand » qui propose des produits textiles. Mon rôle dans ce projet : styliste chargée de la création de la ligne graphique.
                         </p>
                    </div>


                    <div class="projet">
                        <!--<img src="https://picsum.photos/200" alt="" class="image_projet">-->
                        <div class="titre  beige open" data-target="e7">
                            <h3 class="nom_projet">Retoucheur <br> photo</h3>
                        </div>



                    </div>

                    <div class="description nope e7">
                        <h3>Troyes, Grand Est, France</h3>
                        <p>Au sein de cette entreprise d'importation, j'ai participé à
                            l'élaboration de catalogue de produits:</p>
                        <ul>
                            <li>
                                <p>utilisation de Photoshop
                                    et pratique de la mise en page style catalogue.</p>
                            </li>
                        </ul>

                    </div>


                    <div class="projet">
                        <!--<img src="https://picsum.photos/200" alt="" class="image_projet">-->
                        <div class="titre blaune open" data-target="e8">
                            <h3 class="nom_projet">Voyages</h3>
                        </div>


                    </div>

                    <div class="description nope e8">
                        <h3>VOYAGES ET SÉJOURS LINGUISTIQUES</h3>
                        <p>
                            Échanges & Voyages linguistiques:
                            <ul>
                                <li>Summer camp: Boston: 6 semaines (2019)</li>
                                <li>Echanges Lycée : Mexico, Madrid</li>
                                <li>Séjours en famille d’accueil : Irlande (collège)</li>
                            </ul>


                            Voyages de découverte :
                            <ul>
                                <li>Afrique du Sud: rugby & bénévolat</li>
                                <li>Pologne: visite mémorielle des camps de concentration</li>
                                <li>En famille : Europe, Canada, US</li>
                            </ul>
                        </p>

                        <p><a href="#"> en savoir plus</a></p>

                    </div>


        </section>






    </article>
    </div>
    </section>


    <article id="Passions" id="about">
        <section class="container">
            <h2>Passions</h2>
            <div class="centrer4">
                <div class="cache">

                </div>
                <div class="passion1">
                    <img class='snk' src="../img/sneakers_custompng.png" alt="emoticone custom de sneakers (chaussure)">

                    <h3>custom de sneakers
                    </h3>
                </div>

                <div class="passion1">
                    <img class='snk' src="../img/basketball-ball.png" alt="emoticone custom de sneakers (chaussure)">

                    <h3>baskets/sport
                    </h3>
                </div>

                <div class="passion1">
                    <img class='snk' src="../img/color-palette.png" alt="emoticone custom de sneakers (chaussure)">

                    <h3>l'art
                    </h3>
                </div>

                <div class="passion1">
                    <img class='snk' src="../img/mushroom.png" alt="emoticone custom de sneakers (chaussure)">

                    <h3>les jeux vidéos
                    </h3>
                </div>


        </section>
    </article>


    <article id="three">
        <section class="container">
            <h2 id="Réalisation">Réalisations</h2>
            <div class="centrer">



                <div class="popup-overlay e1">

                    <h3>création de fausse pub</h3>
                    <p>Je suis quelqu’un qui aime provoquer le rire de mes amis grâce à mes blagues et mes calembours.
                        Je trouve que le monde de la pub est un domaine qui est le mélange parfait entre l’art et la
                        Créativité et l’humour.
                    </p>
                    <button class="close">LET'S GO</button>

                </div>

                <div class="popup-overlay e2">
                    <div>
                        <h3>Mes projet de MMI</h3>
                        <p>
                            Grâce à la MMI, j’ai pu faire des projets divers et variés. Certains projets étaient très artistiques tels que faire une affiche pour un événements artistique, ou bien des projet plus professionnels comme la conception et la création de site web.</p>
                        <button class="close">LET'S GO</button>
                    </div>
                </div>
            </div>

            <div class="popup-overlay  e3">
                <div>
                    <h3>Mes dessins</h3>
                    <p>
                        Je suis une personne que l’on pourrait qualifier de créative. J’essaye toujours d’exprimer les
                        choses via l’art. Au début, c’était avec une feuille et un crayon et maintenant, c’est grâce
                        plein d’autres outils comme de la peinture, ma tablette graphique, certes il y a toujours ma
                        feuille et mon crayon ainsi qu’une meilleure technique et maîtrise, mais l’imagination reste
                        toujours la même : infini.
                    </p>
                    <button class="close">LET'S GO</button>
                </div>
            </div>


            <div class="popup-overlay e4 ">
                <div>
                    <h3>Mon projet tutoré</h3>
                    <p>
                        FuturaMMI est mon projet tutoré de première années.
                        L'objectif est de crée un site web afin de faire découvrir aux nouveaux universitaire de MMI les
                        métier possible après cette filiaire.

                        Dans ce projet je suis le chef de projet ainsi que le directeur artistique.
                        J'ai du gérer l'organisation et l'avancé du projet ainsi que la charte graphique.
                    </p>
                    <button class="close">LET'S GO</button>
                </div>
            </div>

            <div class="slider">
                <div class="slides">
                    <div class="slide" data-target="e1">
                        <img src="../img/ikeo.png" alt="">
                    </div>
                    <div class="slide" data-target="e2">
                        <img src="../img/poster.jpg" alt="">
                    </div>
                    <div class="slide" data-target="e3">
                        <img src="../img/effetliquid.png" alt=""> </div>
                    <div class="slide disp " data-target="e4">
                        <img src="../img/logoV2.png" alt="">
                        <img src="../img/mascote.png" alt=""></div>
                </div>
            </div>




        </section>
    </article>



    <article id="about">
        <section class="container">
            <h2 id="contacts">contacts</h2>
            <div class="centrer">

                <form method="post">
                    <div class="corps-formulaire">
                        <div class="gauche">
                            <div class="groupe">
                                <label>Votre nom</label>
                                <input type="text" autocomplete="off" name="nom"/>
                            </div>
                            <div class="groupe">
                                <label>Votre prénom</label>
                                <input type="text" autocomplete="off" name="prenom" />
                            </div>
                            <div class="groupe">
                                <label>Votre adresse e-mail</label>
                                <input name="email" type="text" autocomplete="off" />
                            </div>
                        </div>

                        <div class="droite">
                            <div class="groupe">
                                <label>Message</label>
                                <textarea placeholder="Saisissez ici..." name="msg"></textarea>
                            </div>
                        </div>

                        <div class="pied-formulaire">
                            <button> Envoyer le message </button>
                        </div>
                    </div>


                </form>



        </section>
    </article>




</body>

</html>


<?php
$host = "sqletud.u-pem.fr";
$dbname = "blaroc01_db";
$username = "blaroc01";
$password = "npk3oe6eeU";

try {
    $link = new PDO ("mysql:host={$host};dbname={$dbname};", $username, $password, array
    (PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
}

catch (Exception $e) {
    die('Erreur : '.$e->getMessage());
}
// pour le serveur de l'UPEM, remplacer localhost par sqletud.u-pem.fr
 
if(isset($_POST["nom"]) & isset($_POST["email"]) & isset($_POST["msg"]) & isset($_POST["prenom"]) ){
  $sql = "INSERT INTO cv_contact(nom, email, prenom, msg) VALUES (:nom, :email, :prenom, :msg)";
  // On prépare la requête avant l'envoi :
  $req = $link -> prepare($sql);
  // On exécute la requête en insérant la valeur transmise en POST
  $req -> execute(array('nom' => $_POST["nom"], 
                        'email' => $_POST["email"], 
                        'prenom' => $_POST["prenom"],
                        'msg' => $_POST["msg"]));
                        if (isset($_POST['email']) && isset($_POST['nom']) && isset($_POST["prenom"]) && isset($_POST['msg'])) {

                          $retour = mail('blaroc01@etud.u-pem.fr', $_POST['nom'], $_POST["prenom"], $_POST['msg']);

                          if($retour){
                              echo '<script>alert("Message Envoyé !")</script>';
                          }
                          else{
                              echo '<script>alert("Une erreur est survenue :(")</script>';
                          }
                      }

  // $req = null;
  // On affiche l'adresse inscrite en évitant une injection de code JS
  echo "<h1 style='margin: auto;'>Merci pour votre message !</h1>";
}

?>

<!-- PDOStatement::execute(): SQLSTATE[HY093]: Invalid parameter number: parameter was not defined in  -->