<!DOCTYPE html>
<html lang="fr"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Étudiant de 19 ans en seconde et dernière année de MMI (Métiers du Multimédia et de l’Internet) à Angoulême, je suis autant à l’aise devant un écran à taper des lignes de code que derrière une caméra."/> <title>Portfolio | Orphée Besson : Concepteur de produits et services multimédia dans le domaine de l'audiovisuel, du graphisme et du développement web.</title>
<link rel="icon" type="image/png" href="http://www.orpheebesson.fr:80/portfolio/assets/img/Logo_OB.png"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<link href="http://www.orpheebesson.fr:80/portfolio/assets/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="home">
<h1 class="sentence w100">
<span class="sentence--brackets">{</span>
Un
<span class="sentence__words w500">
<span>
développeur
</span>
<span>
réalisateur
</span>
<span>
webdesigner
</span>
</span>
<span class="sentence__end">qui vaut de l'or
<span class="sentence--brackets">}</span></span>
</h1>
<header class="headerHorizontal">
<a class="headerHorizontal__logo" href="http://www.orpheebesson.fr:80/portfolio/">
<img src="http://www.orpheebesson.fr:80/portfolio/assets/img/Logo_OB.png" alt="Logo Orphée Besson"/>
</a>
<nav class="headerHorizontal__nav">
<ul>
<li class="nav__item"><a class="nav__anchor scrollTo" href=".introduction">présentation</a></li>
<li class="nav__item"><a class="nav__anchor scrollTo" href=".skills">compétences</a></li>
<li class="nav__item"><a class="nav__anchor scrollTo" href=".productions">réalisations</a></li>
<li class="nav__item"><a class="nav__anchor scrollTo" href=".contact">contact</a></li>
</ul>
</nav>
</header>
<div class="burger">
<a href="#" class="burger__button">
<svg>
<circle cx="21" cy="21" r="20" />
</svg>
<span class="burger__button--bar"></span>
</a>
</div>
<div class="menu menu__overlay">
<div class="menuVertical">
<nav class="menuVertical__nav">
<ul>
<li class="nav__item"><a class="nav__anchor scrollTo" href=".introduction">présentation</a></li>
<li class="nav__item"><a class="nav__anchor scrollTo" href=".skills">compétences</a></li>
<li class="nav__item"><a class="nav__anchor scrollTo" href=".productions">réalisations</a></li>
<li class="nav__item"><a class="nav__anchor scrollTo" href=".contact">contact</a></li>
<li class="nav__item">
<span class="moins">A-</span>
<span class="dyslexie">dyslexique</span>
<span class="plus">A+</span>
</li>
<li class="nav__item">
<a href="http://www.orpheebesson.fr:80/portfolio/?lang=fr">FR</a>
<a href="http://www.orpheebesson.fr:80/portfolio/?lang=en">EN</a>
</li>
</ul>
</nav>
</div>
</div> <div class="mouse">
<a class="scrollTo" href=".introduction">
<div class="scroll">
<div class="scroll__scroller"></div>
</div>
</a>
</div>
</section>
<section class="introduction">
<h1 class="title w700">présentation</h1>
<div class="introduction__container">
<img src="http://www.orpheebesson.fr:80/portfolio/assets/img/profil_picture.jpg" alt="Photo Orphée Besson" class="introduction__image"/>
<article class="introduction__article">
<h2 class="introduction__title w700">Orphée Besson</h2>
<p class="introduction__article--caption">Je suis un étudiant BAC+3 de 20 ans en licence professionnelle MIAW (Métiers de l’Informatique et Applications Web) à La Rochelle, spécialité DFS (Développement Full Stack), qui forme les futurs professionnels à la conception et à la création de produits et services multimédia. En parallèle de mes études, je travaille en tant que développeur front-end en contrat d'alternance chez Raccourci Agency. Le reste, à vous de le découvrir.</p>
<div>
<a href="http://www.orpheebesson.fr:80/portfolio/assets/medias/CV_Orphee_Besson.pdf" target="_blank" class="btn btn__full btn__full--defaut slide w500">consulter mon cv</a>
</div>
</article>
</div>
</section>
<section class="skills">
<h1 class="title w700">compétences</h1>
<div class="skills__aptitudes">
<figure class="skill">
<figcaption class="skill__title w700">
<i class="fas fa-code"></i>
Développement web
</figcaption>
<p class="skill__caption">
Peu après avoir rejoint la formation MMI, j’ai vite été séduit par le développement web et le potentiel qu'il reflète. J'ai pu acquérir une certaine expérience avec la manipulation de langages informatiques, tant au niveau back-end que front-end.
</p>
</figure>
<figure class="skill">
<figcaption class="skill__title w700">
<i class="fas fa-cut"></i>
Montage vidéo
</figcaption>
<p class="skill__caption">
Passionné de montage vidéo dès le plus jeune âge, je suis en capacité d'éditer des films en tout genre à partir des rushes de tournage et d'éléments graphiques et sonores selon les intentions définies au préalable.
</p>
</figure>
<figure class="skill">
<figcaption class="skill__title w700">
<i class="fas fa-video"></i>
Prise de vue
</figcaption>
<p class="skill__caption">
Quand je ne suis pas derrière un écran, il m'arrive parfois d'être sur le terrain derrière l'objectif pour capter différents événements nécessaires à la production de films divers : vidéo corporate, clip, court-métrage, interview, teaser, voyage...
</p>
</figure>
<figure class="skill">
<figcaption class="skill__title w700">
<i class="fas fa-pen-nib"></i>
Identité visuelle
</figcaption>
<p class="skill__caption">
Du logotype à la charte graphique, je suis capable d'imaginer l’environnement graphique en cohérence avec l'esprit de votre entreprise en y apportant ma touche de créativité.
</p>
</figure>
<figure class="skill">
<figcaption class="skill__title w700">
<i class="fas fa-layer-group"></i>
Web design
</figcaption>
<p class="skill__caption">
D’un simple site web statique à un site plus complexe, je vous accompagne dans la conception de votre site internet, en construisant des visuels adaptés à chaque support numérique.
</p>
</figure>
<figure class="skill">
<figcaption class="skill__title w700">
<i class="fas fa-feather-alt"></i>
Communication
</figcaption>
<p class="skill__caption">
De l'analyse concurrentielle en passant par l'identification des cibles prioritaires, je suis en mesure d'établir la stratégie de communication de votre structure en prenant compte des forces et des faiblesses de cette dernière.
</p>
</figure>
</div>
<div class="skills__technos">
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/html55e7bbea60d861.png" alt="Logo HTML5">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/css35e5959e2313f8.png" alt="Logo CSS3">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/sass5e5959db8d606.png" alt="Logo Sass">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/javascript5e5959ba93515.png" alt="Logo JavaScript">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/php5e5959c8825a9.png" alt="Logo PHP">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/mysql5e59599672ce3.png" alt="Logo MySQL">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/wordpress5e5959b0471aa.png" alt="Logo WordPress">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/bootstrap5e59598ba852a.png" alt="Logo Bootstrap">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/symfony5e59595275be2.png" alt="Logo Symfony">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/adobe5e595912314a8.png" alt="Logo Adobe Suite">
</div>
<div class="techno">
<img class="techno__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/softwares/finalcutpro5e59593b84692.png" alt="Logo Final Cut Pro X">
</div>
</div>
</section>
<section class="productions">
<h1 class="title w700">réalisations</h1>
<nav class="productions__menu">
<ul class="productions__list">
<li data-filter="*" class="productions__item productions__item--active w500">tout voir</li>
<li data-filter=".web" class="productions__item w500">
Web
</li>
<li data-filter=".video" class="productions__item w500">
Vidéo
</li>
<li data-filter=".graphisme" class="productions__item w500">
Identité visuelle
</li>
</ul>
</nav>
<ul class="gallery">
<li class="gallery__item web">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/culturallye5e7de98551d30.jpg" alt="Site Culturallye">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Culturallye</h2>
<p class="gallery__subtitle">
Site web
</p>
<a class="gallery__open-1 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Culturallye</h3>
<p> Site web
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/culturallye5e7de98551d30.jpg" alt="Site Culturallye">
<p class="work__caption">
Création d'un site internet pour une entreprise fictive spécialisée dans le rallye touristique. Le site devait dans un premier temps donner une visibilité numérique à l'entreprise et dans un second temps, orienter les internautes vers un programme adapté à leurs besoins.
</p>
<a class="btn btn__full btn__full--defaut slide w500" href="http://orpheebesson.fr/culturallye/" target="_blank">voir le site</a>
</div>
</div>
</li>
<li class="gallery__item web">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/mmi-event5e7de5956fa63.jpg" alt="Site MMI-Event">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">MMI-Event</h2>
<p class="gallery__subtitle">
Site web & backoffice
</p>
<a class="gallery__open-2 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">MMI-Event</h3>
<p> Site web & backoffice
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/mmi-event5e7de5956fa63.jpg" alt="Site MMI-Event">
<p class="work__caption">
MMI-Event est le résultat d'un projet ayant pour but de créer un site où les contenus sont gérés dynamiquement à l'aide d'un back office. De plus, ce travail m'a permis de me familiariser avec le célèbre moteur de template Twig appartenant au framework Symfony. Le site utilise la méthode MVC (Models - Views - Controllers).
</p>
<a class="btn btn__full btn__full--defaut slide w500" href="http://www.orpheebesson.fr/mmi-event/" target="_blank">voir le site</a>
</div>
</div>
</li>
<li class="gallery__item web">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/shortcuts5f4a629d2d4cd.jpg" alt="Application Shortcuts iOS">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Raccourcis iOS</h2>
<p class="gallery__subtitle">
Productivité & automatisation
</p>
<a class="gallery__open-3 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Raccourcis iOS</h3>
<p> Productivité & automatisation
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/shortcuts5f4a629d2d4cd.jpg" alt="Application Shortcuts iOS">
<p class="work__caption">
Apple a introduit depuis peu l'application Shortcuts permettant de créer des raccourcis personnalisés. Un raccourci est un moyen rapide d’effectuer une ou plusieurs tâches avec vos apps préférées. C'est pourquoi j'ai décidé de vous partager les meilleurs raccourcis qui vous feront gagner en productivité et vous donneront une première approche avec la logique algorithmique.
</p>
<a class="btn btn__full btn__full--defaut slide w500" href="http://www.orpheebesson.fr/raccourcis" target="_blank">voir le site</a>
</div>
</div>
</li>
<li class="gallery__item web">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/chaise-dada-site5f4a5aa5de19b.jpg" alt="Site chaise dada">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">La chaise dada</h2>
<p class="gallery__subtitle">
Site e-commerce
</p>
<a class="gallery__open-4 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">La chaise dada</h3>
<p> Site e-commerce
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/chaise-dada-site5f4a5aa5de19b.jpg" alt="Site chaise dada">
<p class="work__caption">
Réalisation d'un site web e-commerce avec le célèbre CMS WordPress, associé au plugin WooCommerce pour la gestion de la boutique en ligne, des stocks, des paiements, des commandes...
</p>
<a class="btn btn__full btn__full--defaut slide w500" href="https://www.lachaisedada.com" target="_blank">voir le site</a>
</div>
</div>
</li>
<li class="gallery__item video">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/booklight5e7deae896e71.jpg" alt="Livre lumineux">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Light</h2>
<p class="gallery__subtitle">
Vidéo esthétique
</p>
<a class="gallery__open-5 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Light</h3>
<p> Vidéo esthétique
</p>
<div class="work__video">
<iframe src="https://player.vimeo.com/video/323282443?color=EEEEEE&title=0&byline=0&portrait=0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="work__caption">
Réalisation d'une vidéo artistique dans le cadre d'un projet en cours d'esthétique sur le thème de « Cacher pour mieux montrer ».
</p>
</div>
</div>
</li>
<li class="gallery__item graphisme">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/logo-albydoc5e7dea9d7b87d.jpg" alt="Logo Albyd'OC">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Albyd'oc</h2>
<p class="gallery__subtitle">
Logotype
</p>
<a class="gallery__open-6 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Albyd'oc</h3>
<p> Logotype
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/logo-albydoc5e7dea9d7b87d.jpg" alt="Logo Albyd'OC">
<p class="work__caption">
J'ai pu imaginer le logo d'une médiathèque fictive : Albyd'OC. Le signe infini dans lequel se dessine les lettres « a » et « d », initiales du nom de la médiathèque, peut avoir plusieurs significations : l'éternité et la transmission du savoir qui constituent une véritable boucle sans fin, mais également le processus d'emprunt et de restitution, principes mêmes d'une médiathèque, qui perdure dans le temps. Enfin, le texte « albyd'oc » vient survoler cette boucle infinie, avec un typographie arrondie en liaison avec les courbes de cette dernière. Les lettres « d o c » sont plus épaisses que les autres afin de rappeler qu'il s'agit d’un lieu de documentation. Ces lettres se retrouvent également dans le nom de la région d'Occitanie, région de la ville d'Albi.
</p>
</div>
</div>
</li>
<li class="gallery__item video">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/la-martiniere5e7dea2a69ca0.jpg" alt="Glacier la Martinière - Île de Ré">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">La Martinière</h2>
<p class="gallery__subtitle">
Vidéo corporate
</p>
<a class="gallery__open-7 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">La Martinière</h3>
<p> Vidéo corporate
</p>
<div class="work__video">
<iframe src="https://player.vimeo.com/video/294966539?color=EEEEEE&title=0&byline=0&portrait=0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="work__caption">
Durant l'été 2018, j'ai pu être contacté par La Martinière, célèbre glacier implanté sur l'île de Ré. La vidéo retrace le processus de fabrication artisanale des glaces, des gaufres et des desserts glacés à travers les différents lieux de dégustation où vous pourrez passer un agréable moment pour les plus gourmands d'entre-vous.
</p>
</div>
</div>
</li>
<li class="gallery__item graphisme">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/logo-ob5e7de9de93070.jpg" alt="Logo Orphée Besson">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Signature OB</h2>
<p class="gallery__subtitle">
Logotype
</p>
<a class="gallery__open-8 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Signature OB</h3>
<p> Logotype
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/logo-ob5e7de9de93070.jpg" alt="Logo Orphée Besson">
<p class="work__caption">
Un logotype est un outil de communication qui permet d'affirmer son identité et de reconnaitre une structure et la différencier des autres. Après quelques esquisses sur papier et plusieurs essais sur Illustrator, voici le résultat. Je me suis basé sur les initiales de mon nom pour en faire quelque chose de simple et raffiné. De plus, je voulais quelque chose qui puisse se réutiliser sur de nombreux supports tels que des cartes de visite, des stickers...
</p>
</div>
</div>
</li>
<li class="gallery__item video">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/tolms-bb5e7de950614b0.jpg" alt="Tolms - BB">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Tolms - BB</h2>
<p class="gallery__subtitle">
Clip vidéo
</p>
<a class="gallery__open-9 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Tolms - BB</h3>
<p> Clip vidéo
</p>
<div class="work__video">
<iframe src="https://player.vimeo.com/video/394612802?color=EEEEEE&title=0&byline=0&portrait=0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="work__caption">
Réalisation d'un clip vidéo pour un ami.
</p>
</div>
</div>
</li>
<li class="gallery__item video">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/london5e7de90fadc5d.jpg" alt="Rue de Londres">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Londres</h2>
<p class="gallery__subtitle">
Vidéo trip
</p>
<a class="gallery__open-10 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Londres</h3>
<p> Vidéo trip
</p>
<div class="work__video">
<iframe src="https://player.vimeo.com/video/394615811?color=EEEEEE&title=0&byline=0&portrait=0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="work__caption">
Durant l'été 2019, j'ai eu la chance de visiter la ville de Londres. J'en ai donc profité pour sortir ma caméra et capter les meilleurs moments de ce voyage. C'est un endroit riche et diversifié en terme d'histoire, de culture et d'architecture.
</p>
</div>
</div>
</li>
<li class="gallery__item graphisme">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/affiche-culturallye5e7de83623d18.jpg" alt="Affiche Culturallye - Team building">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Culturallye</h2>
<p class="gallery__subtitle">
Affiche
</p>
<a class="gallery__open-11 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Culturallye</h3>
<p> Affiche
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/affiche-culturallye5e7de83623d18.jpg" alt="Affiche Culturallye - Team building">
<p class="work__caption">
Conception d'une affiche pour une entreprise fictive spécialisée dans le team-building proposant des activités sportives et culturelles en lien avec la bande dessinée.
</p>
</div>
</div>
</li>
<li class="gallery__item video">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/circuit-des-remparts5e7de7dec9578.jpg" alt="Circuit des Remparts 2020">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Circuit des Remparts</h2>
<p class="gallery__subtitle">
Teaser vidéo
</p>
<a class="gallery__open-12 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Circuit des Remparts</h3>
<p> Teaser vidéo
</p>
<div class="work__video">
<iframe src="https://player.vimeo.com/video/394689119?color=EEEEEE&title=0&byline=0&portrait=0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="work__caption">
Mon projet tuteuré de deuxième année consistait à produire une vidéo destinée à l'association du Circuit des Remparts d'Angoulême afin de promouvoir l'impact économique sur la région angoumoisine et ses alentours. La vidéo retrace les moments forts de l'événement ainsi que le programme de ce dernier illustré par quelques mots du président.
</p>
</div>
</div>
</li>
<li class="gallery__item graphisme">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/logo-yhugo-slave5e7de78da0659.jpg" alt="Logo Yhugo Slave">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Yhugo Slave</h2>
<p class="gallery__subtitle">
Logotype
</p>
<a class="gallery__open-13 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Yhugo Slave</h3>
<p> Logotype
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/logo-yhugo-slave5e7de78da0659.jpg" alt="Logo Yhugo Slave">
<p class="work__caption">
Conception d'un logotype pour un jeune producteur de musique.
</p>
</div>
</div>
</li>
<li class="gallery__item web">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/mangez-moi5e7de76662dc6.jpg" alt="Site Mangez Moi Île de Ré">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Mangez Moi</h2>
<p class="gallery__subtitle">
Site web
</p>
<a class="gallery__open-14 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Mangez Moi</h3>
<p> Site web
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/mangez-moi5e7de76662dc6.jpg" alt="Site Mangez Moi Île de Ré">
<p class="work__caption">
Mangez Moi veut vous faire partager une cuisine simple et authentique, pleine de bon sens et conviviale. De ce fait, j'ai réalisé un site vitrine qui correspond à ces valeurs grâce au CMS WordPress.
</p>
<a class="btn btn__full btn__full--defaut slide w500" href="https://www.mangezmoi-iledere.com/" target="_blank">voir le site</a>
</div>
</div>
</li>
<li class="gallery__item video">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/sweat-and-sweat5e7de72664046.jpg" alt="Coucher de soleil">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Sweat & Sweat</h2>
<p class="gallery__subtitle">
Vidéo corporate
</p>
<a class="gallery__open-15 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Sweat & Sweat</h3>
<p> Vidéo corporate
</p>
<div class="work__video">
<iframe src="https://player.vimeo.com/video/321336807?color=EEEEEE&title=0&byline=0&portrait=0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="work__caption">
Épisode 4 de la série Sweat & Sweat dans laquelle j'ai pu produire une vingtaine d'épisodes, sortant toutes les semaines durant l'été 2017, afin de promouvoir une boutique de vêtements vintage.
</p>
</div>
</div>
</li>
<li class="gallery__item video">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/plus-tard5e7de6d177c6c.jpg" alt="Tolms - Plus Tard">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Tolms - Plus Tard</h2>
<p class="gallery__subtitle">
Clip vidéo
</p>
<a class="gallery__open-16 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Tolms - Plus Tard</h3>
<p> Clip vidéo
</p>
<div class="work__video">
<iframe src="https://player.vimeo.com/video/321336944?color=EEEEEE&title=0&byline=0&portrait=0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="work__caption">
Un ami chanteur amateur m'a réquisitionné pour la conception d'un clip vidéo sur le thème d'Halloween. J'ai donc apporté mes idées et choisi les lieux de tournage en accord avec l'ambiance du son. Le maquillage laisse à désirer mais cet élément permet de capter l'attention des spectateurs et de créer une atmosphère particulière.
</p>
</div>
</div>
</li>
<li class="gallery__item graphisme">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/logo-team-invictus5e7de68d80197.jpg" alt="Logo Team Invictus">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Invictus</h2>
<p class="gallery__subtitle">
Logotype
</p>
<a class="gallery__open-17 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Invictus</h3>
<p> Logotype
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/logo-team-invictus5e7de68d80197.jpg" alt="Logo Team Invictus">
<p class="work__caption">
Réalisation d'un logotype pour Invictus, une équipe de foot en salle située dans le Sud de la France. Ce logo apparaît sur les maillots de l'équipe.
</p>
</div>
</div>
</li>
<li class="gallery__item video">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/hotel-ile-sous-le-vent5e7de65c5da3d.jpg" alt="Hôtel l'Île sous le vent">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">L'île sous le vent</h2>
<p class="gallery__subtitle">
Vidéo corporate
</p>
<a class="gallery__open-18 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">L'île sous le vent</h3>
<p> Vidéo corporate
</p>
<div class="work__video">
<iframe src="https://player.vimeo.com/video/295004231?color=EEEEEE&title=0&byline=0&portrait=0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="work__caption">
Réalisation d'une vidéo promotionnelle pour l'hôtel l'île sous le Vent implanté sur l'île de Ré.
</p>
</div>
</div>
</li>
<li class="gallery__item graphisme">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/chaise-dada5e7de5ede7215.jpg" alt="Logo chaise dada">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">La chaise dada</h2>
<p class="gallery__subtitle">
Logotype
</p>
<a class="gallery__open-19 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">La chaise dada</h3>
<p> Logotype
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/chaise-dada5e7de5ede7215.jpg" alt="Logo chaise dada">
<p class="work__caption">
« À la fois chaise haute et cheval à bascule, la chaise Dada est une chaise modulable destinée aux enfants de bas-âge permettant de développer leur équilibre et leur motricité en toute sécurité ». À partir de cette description, j'ai réalisé le logo ci-dessus en insistant sur le côté 2 en 1 de la chaise. On y retrouve la tête de cheval sur le dossier, les pieds de la chaise et enfin, l'arc de cercle qui fait référence au mouvement de bascule.
</p>
</div>
</div>
</li>
<li class="gallery__item web">
<div class="gallery__overlay"></div>
<img class="gallery__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/maison-chateau-rouge5e8789226b5b5.jpg" alt="Site Maison Château Rouge">
<div class="gallery__infos slideTop">
<h2 class="gallery__title w700">Maison Château Rouge</h2>
<p class="gallery__subtitle">
Site mobile first & CSS Grid
</p>
<a class="gallery__open-20 btn btn__outline slide w500">voir plus</a>
</div>
<div class="work work--close">
<nav class="work__nav">
<ul class="work__list">
<li class="work__item work__item--close"><i class="far fa-times-circle fa-2x"></i></li>
</ul>
</nav>
<div class="work__details">
<h3 class="work__title w700">Maison Château Rouge</h3>
<p> Site mobile first & CSS Grid
</p>
<img class="work__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/productions/maison-chateau-rouge5e8789226b5b5.jpg" alt="Site Maison Château Rouge">
<p class="work__caption">
Dans le cadre d'un cours de développement front-end, je devais construire un site pensé dans un premier temps pour les smartphones (mobile-first) à l'aide de techniques de positionnement étudiées dans ce même cours : Flexbox et CSS Grid. Ce projet m'a également permis de me familiariser avec Git, qui permet de travailler tout en gardant une trace des modifications apportées à un projet.
</p>
<a class="btn btn__full btn__full--defaut slide w500" href="https://maisonchateaurouge.netlify.com/" target="_blank">voir le site</a>
</div>
</div>
</li>
</ul>
</section>
<section class="contact">
<h1 class="title w700">contact</h1>
<img class="contact__image" src="http://www.orpheebesson.fr:80/portfolio/assets/img/Logo_OB.png" alt="Logo Orphée Besson"/>
<form class="contact__form" method="post" action="mail">
<div class="contact__row">
<input type="text" name="subject" placeholder="Sujet" required>
<input type="email" name="mail" placeholder="E-mail" required>
</div>
<textarea name="message" placeholder="Message" cols="30" rows="10" required></textarea>
<button name="submit" class="btn btn__outline slide w500">envoyer</button>
</form>
<address class="contact__information">
<a class="contact__link" href="mailto:bessonorphee@gmail.com"><i class="fas fa-paper-plane"></i></a>
<a class="contact__link" href="https://www.linkedin.com/in/orphee-besson/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</address>
</section>
<a href=".home" class="scrollTo">
<div class="arrow">
<svg class="arrow__circle" viewbox="-1 -1 102 102">
<path class="arrow__circle--shape" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
</a>
<footer class="footer">
<ul class="footer__list">
<li>Orphée BESSON © 2021<span class="w300">|</span></li>
<li><a href="http://www.orpheebesson.fr:80/portfolio/mentions-legales">Mentions légales</a></li>
</ul>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="http://www.orpheebesson.fr:80/portfolio/assets/js/main.js"></script>
</body>
</html>
