463 lines
23 KiB
HTML
463 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="Bonjour, je m'appelle Max SPIEGEL, je suis Graphiste Motion Designer à votre service. Animation 2D/3D, VFX, Authoring Blu-Ray, Sculpting 3D, Illustration.">
|
|
<meta name="author" content="Max SPIEGEL, Paul Trehiou">
|
|
|
|
<title>Max SPIEGEL - Motion Designer</title>
|
|
|
|
<link rel="icon" type="image/jpg" href="img/favicon.jpg" />
|
|
|
|
<!-- 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">
|
|
|
|
</head>
|
|
|
|
<body id="page-top">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar fixed-top navbar-expand-lg navbar-light" id="mainNav">
|
|
<a class="navbar-brand" href="#page-top">Max Spiegel<small> - Motion Designer</small></a>
|
|
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarMain">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#about">Portfolio</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#contact">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="masthead">
|
|
<video id="masthead-video"></video>
|
|
|
|
<a class="btn btn-default btn-xl" href="#about">
|
|
<i class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
|
|
</a>
|
|
|
|
<a id="video-sound" class="btn btn-default" href="#">
|
|
<svg class="icone icone-son" aria-hidden="true">
|
|
<use xlink:href="/vector/sprite.svg#sound-off"></use>
|
|
</svg>
|
|
</a>
|
|
|
|
<a id="youtube-link" class="btn btn-default" href="https://youtu.be/RX_VXNl1xvg">
|
|
<i class="fa fa-youtube fa-2x" aria-hidden="true"></i>
|
|
</a>
|
|
|
|
<a id="fullscreen-video" class="btn btn-default" href="#">
|
|
<i class="fa fa-arrows-alt fa-2x" aria-hidden="true"></i>
|
|
</a>
|
|
|
|
</header>
|
|
|
|
<section class="bg-primary" id="about">
|
|
<img class="vecto1" src="img/vecto1.svg">
|
|
<img class="vecto2" src="img/vecto2.svg">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<h1 class="section-heading text-white">Portfolio</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="portfolio">
|
|
<div class="d-flex flex-wrap">
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-youtubeid="gsdaZ-aeHaM" data-comment="Voici l'histoire d'un champignon pas comme les autres qui, pendant quelques aventures, va retrouver une vieille connaissance.">
|
|
<video loop muted poster="img/portfolio/mush.jpg">
|
|
<source src="video/portfolio/champi.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<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.">
|
|
<video loop muted poster="img/portfolio/roy.jpg">
|
|
<source src="video/portfolio/roy.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<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">
|
|
<video loop muted poster="img/portfolio/city.jpg">
|
|
<source src="video/portfolio/ci.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-youtubeid="FVdhdDV8rYY" data-options="autoplay=1&loop=1&playlist=FVdhdDV8rYY">
|
|
<video loop muted poster="img/portfolio/des.jpg">
|
|
<source src="video/portfolio/d1.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-sketchfabid="7507e61126754169937a24858981b185">
|
|
<div class="portfolio-container">
|
|
<img class="dynamic-zoom" src="img/portfolio/Metal Carrot1.jpg" />
|
|
</div>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="194361756">
|
|
<video loop muted poster="img/portfolio/or.jpg">
|
|
<source src="video/portfolio/or.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<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.">
|
|
<video loop muted poster="img/portfolio/jar.jpg">
|
|
<source src="video/portfolio/jar.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#carouselSculptingModal">
|
|
<video loop muted poster="img/portfolio/st.jpg">
|
|
<source src="video/portfolio/st.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-youtubeid="SL3AzzP0kaw" data-options="autoplay=1&loop=1&playlist=SL3AzzP0kaw">
|
|
<video loop muted poster="img/portfolio/box.jpg">
|
|
<source src="video/portfolio/box.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio col-lg-4 col-sm-6">
|
|
<video loop muted poster="img/portfolio/1.jpg">
|
|
<source src="video/portfolio/1.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<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.">
|
|
<video loop muted poster="img/portfolio/pomp.jpg">
|
|
<source src="video/portfolio/pomp.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<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.">
|
|
<video loop muted poster="img/portfolio/vector.jpg">
|
|
<source src="video/portfolio/music.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio col-lg-4 col-sm-6">
|
|
<video loop muted poster="img/portfolio/star.jpg">
|
|
<source src="video/portfolio/star.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio col-lg-4 col-sm-6">
|
|
<video loop muted poster="img/portfolio/all.jpg">
|
|
<source src="video/portfolio/all.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<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 clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-sketchfabid="867f16ceee8746dfb8fd428a77cf9b57">
|
|
<div class="portfolio-container">
|
|
<img class="dynamic-zoom" src="img/portfolio/her.jpg" />
|
|
</div>
|
|
</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">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-8 text-center">
|
|
<h2 class="section-heading">Contacts</h2>
|
|
<hr class="primary">
|
|
<p>Je suis disponible aux coordonées suivantes :</p>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-4 text-center">
|
|
<i class="fa fa-phone fa-3x sr-contact"></i>
|
|
<p>0033 (0) 6 44 26 78 84</p>
|
|
</div>
|
|
<div class="col-lg-4 text-center">
|
|
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
|
|
<p><a href="mailto:your-email@your-domain.com">spiegel.max1996@gmail.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade" id="iframeModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<iframe class="embed-responsive-item" src=""></iframe>
|
|
</div>
|
|
<div class="modal-comment">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="carouselSculptingModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="carouselSculpting" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselSculpting" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="1"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="2"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="3"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="4"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="5"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="6"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="7"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="8"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="9"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="10"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="11"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="12"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="carousel-item active">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/1.jpg" alt="1">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/2.jpg" alt="2">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/3.jpg" alt="3">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/4.jpg" alt="4">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/5.jpg" alt="5">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/6.jpg" alt="6">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/7.jpg" alt="7">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/8.jpg" alt="8">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/9.jpg" alt="9">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/10.jpg" alt="10">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/11.jpg" alt="11">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/12.jpg" alt="12">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/13.jpg" alt="13">
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" role="button" data-slide="prev" data-target="#carouselSculpting">
|
|
<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" data-target="#carouselSculpting">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
<div class="modal-comment">
|
|
<hr>
|
|
<p>Voici quelques images des projets 3D sur lesquels j'ai travaillé en vue de la création de bijoux pour 2 Saints de la fonderie Solyfonte.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript -->
|
|
<script src="vendor/jquery/jquery.min.js"></script>
|
|
<script src="vendor/tether/tether.min.js"></script>
|
|
<script src="vendor/popper/popper.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>
|
|
|
|
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
|
|
|
|
<script>
|
|
var masthead_video = document.getElementById("masthead-video");
|
|
var video_button = document.getElementById("video-sound");
|
|
var fullscreen_button = document.getElementById("fullscreen-video");
|
|
|
|
function masthead_video_mute(mute) {
|
|
player.setMute(mute);
|
|
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");
|
|
}
|
|
}
|
|
|
|
video_button.onclick = function () {
|
|
if (masthead_video.muted) {
|
|
masthead_video_mute(false);
|
|
} else {
|
|
masthead_video_mute(true);
|
|
}
|
|
};
|
|
|
|
function loopVideo(e)
|
|
{
|
|
console.log("EVENT RECEIVED: " + e.type);
|
|
player.seek(0);
|
|
player.play();
|
|
}
|
|
|
|
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);
|
|
};
|
|
|
|
var url = "video/dash/1_Compilation_Graphique/1_Compilation_Graphique.mpd";
|
|
var player = dashjs.MediaPlayer().create();
|
|
player.getDebug().setLogToBrowserConsole(false);
|
|
player.initialize(document.querySelector("#masthead-video"), url, true);
|
|
player.on(dashjs.MediaPlayer.events.PLAYBACK_ENDED,loopVideo);
|
|
player.setMute(true);
|
|
|
|
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()};
|
|
}
|
|
|
|
var comment_header = "<hr><p>"
|
|
|
|
var prev_video_mute = true;
|
|
|
|
$('#iframeModal').on('show.bs.modal', function (event) {
|
|
var modal = $(this);
|
|
var button = $(event.relatedTarget);
|
|
var iframe = modal.find('.modal-body iframe')[0];
|
|
|
|
var youtube_id = button.data('youtubeid');
|
|
var vimeo_id = button.data('vimeoid');
|
|
var sketchfab_id = button.data('sketchfabid');
|
|
|
|
var comment = button.data('comment');
|
|
var options = button.data('options');
|
|
|
|
var url = "";
|
|
|
|
if (youtube_id) {
|
|
|
|
if (!masthead_video.muted) {
|
|
prev_video_mute = false;
|
|
masthead_video_mute(true);
|
|
}
|
|
|
|
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) {
|
|
|
|
if (!masthead_video.muted) {
|
|
prev_video_mute = false;
|
|
masthead_video_mute(true);
|
|
}
|
|
|
|
url = 'https://player.vimeo.com/video/' + vimeo_id;
|
|
|
|
iframe.setAttribute("allowfullscreen", "");
|
|
iframe.src = url;
|
|
|
|
} else if (sketchfab_id) {
|
|
|
|
url = 'https://sketchfab.com/models/' + sketchfab_id + '/embed?autostart=1';
|
|
|
|
iframe.setAttribute("allowfullscreen", "");
|
|
iframe.setAttribute("allowvr", "");
|
|
iframe.setAttribute("onmousewheel", "");
|
|
iframe.src = url;
|
|
|
|
}
|
|
|
|
if (comment) {
|
|
modal.find('.modal-body .modal-comment')[0].innerHTML = comment_header + comment + '</p>';
|
|
}
|
|
});
|
|
|
|
$('#iframeModal').on('hidden.bs.modal', function () {
|
|
$(this).find('.modal-body iframe')[0].src = "";
|
|
$(this).find('.modal-body .modal-comment')[0].innerHTML = "";
|
|
|
|
if (!prev_video_mute) {
|
|
masthead_video_mute(false);
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<footer>
|
|
<small>Un GRAND merci à Paul TREHIOU, inspiré du thème <a href="https://startbootstrap.com/template-overviews/creative/">Creative</a> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png"></a></small>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html>
|