2017-07-14 15:51:49 +02:00
<!DOCTYPE html>
2017-07-22 12:01:22 +02:00
< html lang = "fr" >
2017-07-14 15:51:49 +02:00
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2017-07-18 14:29:57 +02:00
< title > Max SPIEGEL - Motion Designer< / title >
2017-07-14 18:13:15 +02:00
< link rel = "icon" type = "image/jpg" href = "img/favicon.jpg" / >
2017-07-14 15:51:49 +02:00
<!-- Bootstrap core CSS -->
< link href = "vendor/bootstrap/css/bootstrap.min.css" rel = "stylesheet" >
<!-- Custom fonts for this template -->
< link href = "vendor/font-awesome/css/font-awesome.min.css" rel = "stylesheet" type = "text/css" >
< link href = 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel = 'stylesheet' type = 'text/css' >
< link href = 'https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel = 'stylesheet' type = 'text/css' >
<!-- Plugin CSS -->
< link href = "vendor/magnific-popup/magnific-popup.css" rel = "stylesheet" >
<!-- Custom styles for this template -->
< link href = "css/creative.css" rel = "stylesheet" >
<!-- Temporary navbar container fix -->
< style >
.navbar-toggler {
z-index: 1;
}
@media (max-width: 576px) {
nav > .container {
width: 100%;
}
}
< / style >
< / head >
< body id = "page-top" >
<!-- Navigation -->
< nav class = "navbar fixed-top navbar-toggleable-md navbar-light" id = "mainNav" >
< button class = "navbar-toggler navbar-toggler-right" type = "button" data-toggle = "collapse" data-target = "#navbarExample" aria-controls = "navbarExample" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "container" >
2017-07-15 18:33:39 +02:00
< a class = "navbar-brand" href = "#page-top" > Max Spiegel< small > - Motion Designer< / small > < / a >
2017-07-14 15:51:49 +02:00
< div class = "collapse navbar-collapse" id = "navbarExample" >
< ul class = "navbar-nav ml-auto" >
< li class = "nav-item" >
2017-07-15 01:07:40 +02:00
< a class = "nav-link" href = "#about" > Portfolio< / a >
2017-07-14 15:51:49 +02:00
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#contact" > Contact< / a >
< / li >
< / ul >
< / div >
< / div >
< / nav >
< header class = "masthead" >
2017-07-19 18:01:56 +02:00
< video id = "masthead-video" > < / video >
2017-07-14 15:51:49 +02:00
2017-07-14 18:17:14 +02:00
< a class = "btn btn-default btn-xl" href = "#about" >
2017-07-15 16:27:24 +02:00
< i class = "fa fa-angle-down fa-2x" aria-hidden = "true" > < / i >
2017-07-14 18:17:14 +02:00
< / a >
2017-07-14 20:30:10 +02:00
2017-07-20 13:37:09 +02:00
< a id = "video-sound" class = "btn btn-default" href = "#" >
2017-07-18 16:55:02 +02:00
< svg class = "icone icone-son" aria-hidden = "true" >
< use xlink:href = "/vector/sprite.svg#sound-off" > < / use >
< / svg >
2017-07-15 16:27:24 +02:00
< / a >
2017-07-16 23:21:41 +02:00
< a id = "youtube-link" class = "btn btn-default" href = "https://youtube.com" >
2017-07-15 16:27:24 +02:00
< i class = "fa fa-youtube fa-2x" aria-hidden = "true" > < / i >
2017-07-14 20:30:10 +02:00
< / a >
2017-07-20 13:37:09 +02:00
< a id = "fullscreen-video" class = "btn btn-default" href = "#" >
< i class = "fa fa-arrows-alt fa-2x" aria-hidden = "true" > < / i >
< / a >
2017-07-14 18:13:15 +02:00
< / header >
2017-07-14 15:51:49 +02:00
< section class = "bg-primary" id = "about" >
2017-07-15 16:12:18 +02:00
< img class = "vecto1" src = "img/vecto1.svg" >
< img class = "vecto2" src = "img/vecto2.svg" >
2017-07-14 15:51:49 +02:00
< div class = "container" >
< div class = "row" >
< div class = "col-lg-8 offset-lg-2 text-center" >
2017-07-15 14:51:29 +02:00
< h1 class = "section-heading text-white" > Portfolio< / h1 >
2017-07-14 15:51:49 +02:00
< / div >
< / div >
< / div >
< / section >
2017-07-15 17:36:21 +02:00
< section id = "portfolio" >
2017-07-20 14:02:35 +02:00
< div class = "d-flex flex-wrap" >
2017-07-27 18:44:03 +02:00
< div class = "element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#iframeModal" data-youtubeid = "xy4rGshm9us" data-options = "autoplay=1&loop=1&playlist=xy4rGshm9us" >
2017-07-27 15:19:28 +02:00
< video loop muted poster = "img/portfolio/city.jpg" >
2017-07-27 17:35:42 +02:00
< source src = "video/portfolio/ci.webm" type = "video/webm" >
2017-07-21 18:35:19 +02:00
< / video >
< / div >
2017-07-27 18:44:03 +02:00
< div class = "element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#iframeModal" data-youtubeid = "RV0M18MpDtQ" data-comment = "Film de fin d'étude en licence Professionelle à L'ESAV Castres. La fin devait être différente mais suite à un cambriolage se déroulant une semaine avant mes soutenances, j'ai perdu la partie finale de mon projet et dû faire une fin alternative en trois jours." >
2017-07-27 18:04:06 +02:00
< video loop muted poster = "img/portfolio/roy.jpg" >
< source src = "video/portfolio/roy.webm" type = "video/webm" >
2017-07-20 14:02:35 +02:00
< / video >
2017-07-15 17:36:21 +02:00
< / div >
2017-07-27 18:44:03 +02:00
< div class = "element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#iframeModal" data-youtubeid = "32j58XJLHnE" data-options = "autoplay=1&loop=1&playlist=32j58XJLHnE" data-comment = "Début du court-métrage Mushroom Dreams." >
2017-07-21 19:14:49 +02:00
< video loop muted poster = "img/portfolio/champi.jpg" >
< source src = "video/portfolio/champi.webm" type = "video/webm" >
2017-07-20 14:02:35 +02:00
< / video >
2017-07-15 17:36:21 +02:00
< / div >
2017-07-27 18:44:03 +02:00
< div class = "element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#iframeModal" data-vimeoid = "194362062" data-comment = "Clip Vidéo réagissant au rythme de la musique." >
2017-07-27 17:35:42 +02:00
< video loop muted poster = "img/portfolio/vector.jpg" >
< source src = "video/portfolio/music.webm" type = "video/webm" >
2017-07-20 14:02:35 +02:00
< / video >
< / div >
2017-07-27 18:44:03 +02:00
< div class = "element-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#iframeModal" data-sketchfabid = "7507e61126754169937a24858981b185" >
2017-07-24 22:33:29 +02:00
< div class = "portfolio-container" >
2017-07-27 19:34:08 +02:00
< img class = "dynamic-zoom" src = "img/portfolio/Metal Carrot1.jpg" / >
2017-07-24 22:33:29 +02:00
< / div >
2017-07-20 14:02:35 +02:00
< / div >
2017-07-27 18:44:03 +02:00
< div class = "element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#iframeModal" data-vimeoid = "202941724" data-comment = "Tableau de Santiago Rusiñol y Prat que j'ai animé avec Clémentine Mériadec pour une diffusion au musée GOYA de Castres." >
2017-07-27 17:35:42 +02:00
< video loop muted poster = "img/portfolio/jar.jpg" >
< source src = "video/portfolio/jar.webm" type = "video/webm" >
< / video >
< / div >
2017-07-24 22:33:29 +02:00
< div class = "element-portfolio video-portfolio col-lg-4 col-sm-6" >
2017-07-20 14:02:35 +02:00
< video loop muted poster = "img/portfolio/1.jpg" >
< source src = "video/portfolio/1.webm" type = "video/webm" >
< / video >
< / div >
2017-07-27 18:44:03 +02:00
< div class = "element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#iframeModal" data-vimeoid = "195989917" data-comment = "Générique d'un film fantôme réalisé dans le cadre d'une rencontre avec les GOBELINS, j'ai également pu composer la musique." >
2017-07-27 18:04:06 +02:00
< video loop muted poster = "img/portfolio/pomp.jpg" >
< source src = "video/portfolio/pomp.webm" type = "video/webm" >
< / video >
< / div >
2017-07-27 18:56:53 +02:00
< div class = "element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle = "modal" data-target = "#iframeModal" data-vimeoid = "194361756" >
2017-07-27 18:39:46 +02:00
< video loop muted poster = "img/portfolio/or.jpg" >
< source src = "video/portfolio/or.webm" type = "video/webm" >
< / video >
< / div >
2017-07-27 17:35:42 +02:00
< div class = "element-portfolio video-portfolio col-lg-4 col-sm-6" >
< video loop muted poster = "img/portfolio/temple.jpg" >
< source src = "video/portfolio/temple.webm" type = "video/webm" >
< / video >
< / div >
< div class = "element-portfolio video-portfolio col-lg-4 col-sm-6" >
< video loop muted poster = "img/portfolio/def.jpg" >
< source src = "video/portfolio/def.webm" type = "video/webm" >
< / video >
< / div >
< div class = "element-portfolio video-portfolio col-lg-4 col-sm-6" >
< video loop muted poster = "img/portfolio/water.jpg" >
< source src = "video/portfolio/water.webm" type = "video/webm" >
2017-07-20 14:02:35 +02:00
< / video >
< / div >
2017-07-27 19:34:08 +02:00
< div class = "element-portfolio col-lg-4 col-sm-6" >
< div id = "carouselExample" class = "carousel slide" data-ride = "carousel" >
< div class = "carousel-inner" role = "listbox" >
< div class = "carousel-item active" >
< img class = "d-block img-fluid" src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15d8505d8c2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15d8505d8c2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285%22%20y%3D%22216.2%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt = "First slide" >
< / div >
< div class = "carousel-item" >
< img class = "d-block img-fluid" src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15d8505d8c4%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15d8505d8c4%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22245.5%22%20y%3D%22216.8%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt = "Second slide" >
< / div >
< div class = "carousel-item" >
< img class = "d-block img-fluid" src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15d8505d8c0%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15d8505d8c0%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22275.5%22%20y%3D%22216.2%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt = "Third slide" >
< / div >
< / div >
< a class = "carousel-control-prev" role = "button" data-slide = "prev" href = "#carouselExample" >
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
< span class = "sr-only" > Previous< / span >
< / a >
< a class = "carousel-control-next" role = "button" data-slide = "next" href = "#carouselExample" >
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
< span class = "sr-only" > Next< / span >
< / a >
< / div >
< / div >
2017-07-14 15:51:49 +02:00
< / div >
< / section >
< section id = "contact" >
< div class = "container" >
< div class = "row" >
< div class = "col-lg-8 offset-lg-2 text-center" >
2017-07-21 18:27:47 +02:00
< h2 class = "section-heading" > Contacts< / h2 >
2017-07-14 15:51:49 +02:00
< hr class = "primary" >
2017-07-21 18:27:47 +02:00
< p > Je suis disponible aux coordonées suivantes :< / p >
2017-07-14 15:51:49 +02:00
< / div >
< div class = "col-lg-4 offset-lg-2 text-center" >
< i class = "fa fa-phone fa-3x sr-contact" > < / i >
2017-07-19 14:44:24 +02:00
< p > 07 22 22 22 22< / p >
2017-07-14 15:51:49 +02:00
< / div >
< div class = "col-lg-4 text-center" >
< i class = "fa fa-envelope-o fa-3x sr-contact" > < / i >
2017-07-21 18:27:47 +02:00
< p > < a href = "mailto:your-email@your-domain.com" > max@gmail.com< / a > < / p >
2017-07-14 15:51:49 +02:00
< / div >
< / div >
< / div >
< / section >
2017-07-16 23:21:41 +02:00
2017-07-27 18:44:03 +02:00
< div class = "modal fade" id = "iframeModal" tabindex = "-1" role = "dialog" aria-hidden = "true" >
2017-07-19 13:53:32 +02:00
< div class = "modal-dialog modal-lg" role = "document" >
2017-07-17 00:56:35 +02:00
< div class = "modal-content" >
2017-07-19 20:10:00 +02:00
< div class = "modal-header" >
2017-07-17 00:56:35 +02:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
2017-07-19 13:31:10 +02:00
< span aria-hidden = "true" > × < / span >
2017-07-17 00:56:35 +02:00
< / button >
2017-07-19 20:10:00 +02:00
< / div >
< div class = "modal-body" >
2017-07-20 14:09:52 +02:00
< div class = "embed-responsive embed-responsive-16by9" >
2017-07-27 18:44:03 +02:00
< iframe class = "embed-responsive-item" src = "" > < / iframe >
2017-07-24 17:09:52 +02:00
< / div >
2017-07-24 22:52:08 +02:00
< div class = "modal-comment" >
< / div >
2017-07-24 17:09:52 +02:00
< / div >
< / div >
< / div >
< / div >
2017-07-14 15:51:49 +02:00
<!-- Bootstrap core JavaScript -->
< script src = "vendor/jquery/jquery.min.js" > < / script >
< script src = "vendor/tether/tether.min.js" > < / script >
< script src = "vendor/bootstrap/js/bootstrap.min.js" > < / script >
<!-- Plugin JavaScript -->
< script src = "vendor/jquery-easing/jquery.easing.min.js" > < / script >
< script src = "vendor/scrollreveal/scrollreveal.min.js" > < / script >
< script src = "vendor/magnific-popup/jquery.magnific-popup.min.js" > < / script >
<!-- Custom scripts for this template -->
< script src = "js/creative.min.js" > < / script >
2017-07-14 20:30:10 +02:00
2017-07-21 19:30:31 +02:00
< script src = "https://cdn.dashjs.org/latest/dash.all.min.js" > < / script >
2017-07-19 00:44:16 +02:00
2017-07-14 20:30:10 +02:00
< script >
2017-07-16 23:21:41 +02:00
var masthead_video = document.getElementById("masthead-video");
var video_button = document.getElementById("video-sound");
2017-07-20 13:37:09 +02:00
var fullscreen_button = document.getElementById("fullscreen-video");
2017-07-19 15:30:24 +02:00
2017-07-19 17:01:30 +02:00
function masthead_video_mute(mute) {
2017-07-19 17:59:37 +02:00
player.setMute(mute);
2017-07-19 15:30:24 +02:00
if (mute) {
video_button.children[0].children[0].setAttribute("xlink:href", "/vector/sprite.svg#sound-off");
}
else {
video_button.children[0].children[0].setAttribute("xlink:href", "/vector/sprite.svg#sound-on");
}
}
2017-07-14 20:30:10 +02:00
2017-07-16 23:21:41 +02:00
video_button.onclick = function () {
if (masthead_video.muted) {
2017-07-19 15:30:24 +02:00
masthead_video_mute(false);
2017-07-14 20:30:10 +02:00
} else {
2017-07-19 15:30:24 +02:00
masthead_video_mute(true);
2017-07-14 20:30:10 +02:00
}
2017-07-16 23:21:41 +02:00
};
2017-07-15 18:54:45 +02:00
2017-07-19 17:51:41 +02:00
function loopVideo(e)
{
console.log("EVENT RECEIVED: " + e.type);
player.seek(0);
2017-07-19 19:17:22 +02:00
player.play();
2017-07-19 17:51:41 +02:00
}
2017-07-20 13:37:09 +02:00
function fullscreen(video) {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
}
fullscreen_button.onclick = function () {
fullscreen(masthead_video);
};
2017-07-21 19:24:49 +02:00
var url = "video/dash/1_Compilation_Graphique/1_Compilation_Graphique.mpd";
2017-07-19 00:44:16 +02:00
var player = dashjs.MediaPlayer().create();
2017-07-19 17:51:41 +02:00
player.getDebug().setLogToBrowserConsole(false);
2017-07-19 00:44:16 +02:00
player.initialize(document.querySelector("#masthead-video"), url, true);
2017-07-19 17:51:41 +02:00
player.on(dashjs.MediaPlayer.events.PLAYBACK_ENDED,loopVideo);
2017-07-19 00:44:16 +02:00
player.setMute(true);
2017-07-16 23:59:15 +02:00
var portfolio_videos = document.getElementsByClassName('video-portfolio');
for (video_div of portfolio_videos) {
video_div.onmouseover = function() {this.children[0].play()};
video_div.onmouseout = function() {this.children[0].load()};
}
2017-07-17 00:56:35 +02:00
2017-07-24 22:54:25 +02:00
var comment_header = "< hr > < p > "
2017-07-27 19:01:23 +02:00
var prev_video_mute = true;
2017-07-27 18:44:03 +02:00
$('#iframeModal').on('show.bs.modal', function (event) {
var modal = $(this);
2017-07-19 13:20:15 +02:00
var button = $(event.relatedTarget);
2017-07-27 18:44:03 +02:00
var iframe = modal.find('.modal-body iframe')[0];
2017-07-19 13:20:15 +02:00
var youtube_id = button.data('youtubeid');
2017-07-27 18:44:03 +02:00
var vimeo_id = button.data('vimeoid');
var sketchfab_id = button.data('sketchfabid');
2017-07-19 19:40:51 +02:00
var comment = button.data('comment');
2017-07-20 20:13:40 +02:00
var options = button.data('options');
2017-07-27 18:44:03 +02:00
var url = "";
2017-07-20 20:13:40 +02:00
2017-07-27 18:44:03 +02:00
if (youtube_id) {
2017-07-27 19:01:23 +02:00
if (!masthead_video.muted) {
prev_video_mute = false;
masthead_video_mute(true);
}
2017-07-27 18:44:03 +02:00
url = 'https://www.youtube.com/embed/' + youtube_id + "?modestbranding=1&rel=0&html5=1";
if (options) {
url += '& ' + options;
}
iframe.setAttribute("allowfullscreen", "");
iframe.src = url;
} else if (vimeo_id) {
2017-07-20 20:13:40 +02:00
2017-07-27 19:01:23 +02:00
if (!masthead_video.muted) {
prev_video_mute = false;
masthead_video_mute(true);
}
2017-07-24 22:52:08 +02:00
2017-07-27 18:44:03 +02:00
url = 'https://player.vimeo.com/video/' + vimeo_id;
iframe.setAttribute("allowfullscreen", "");
iframe.src = url;
} else if (sketchfab_id) {
2017-07-24 22:52:08 +02:00
2017-07-27 18:44:03 +02:00
url = 'https://sketchfab.com/models/' + sketchfab_id + '/embed?autostart=1';
2017-07-24 17:09:52 +02:00
2017-07-27 18:44:03 +02:00
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("allowvr", "");
iframe.setAttribute("onmousewheel", "");
iframe.src = url;
2017-07-24 22:52:08 +02:00
2017-07-27 18:44:03 +02:00
}
2017-07-24 22:52:08 +02:00
if (comment) {
modal.find('.modal-body .modal-comment')[0].innerHTML = comment_header + comment + '< / p > ';
}
2017-07-24 17:09:52 +02:00
});
2017-07-27 18:44:03 +02:00
$('#iframeModal').on('hidden.bs.modal', function () {
2017-07-24 17:09:52 +02:00
$(this).find('.modal-body iframe')[0].src = "";
2017-07-27 18:44:03 +02:00
$(this).find('.modal-body .modal-comment')[0].innerHTML = "";
2017-07-27 19:01:23 +02:00
if (!prev_video_mute) {
masthead_video_mute(false);
}
2017-07-24 17:09:52 +02:00
});
2017-07-27 18:44:03 +02:00
2017-07-14 20:30:10 +02:00
< / script >
2017-07-14 15:51:49 +02:00
< / body >
< / html >
