Outiref

Code source de l'URL : http://maximeridou.fr

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Maxime Ridou | UX design | Portfolio</title>
	<meta name="description"
		content="Maxime Ridou. Web Design. Étudiant en UI & UX design à Montbéliard, vous retrouverez mes créations personnelles et professionnelles dans mon portfolio" />
	<meta name="keywords"
		content="UX Design, UI Design, maxime, ridou, maxime ridou, web design, esd paris, mmi montbéliard, lpw montbéliard, esd" />
	<meta name="author" content="Maxime Ridou /w codrop" />
	<link rel="shortcut icon" href="fav.png">
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-core.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
	<script>
		document.documentElement.className = "js";
		var supportsCssVars = function () {
			var e, t = document.createElement("style");
			return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window
				.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e
		};
		supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
	</script>
</head>

<body class="loading">
	<svg class="hidden">
		<symbol id="icon-arrow" viewbox="0 0 24 24">
			<title>arrow</title>
			<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " />
		</symbol>
		<symbol id="icon-drop" viewbox="0 0 24 24">
			<title>drop</title>
			<path
				d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" />
			<path
				d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" />
		</symbol>
		<svg id="icon-nav" viewbox="0 0 152 63">
			<title>navarrow</title>
			<path
				d="M115.737 29L92.77 6.283c-.932-.92-1.21-2.84-.617-4.281.594-1.443 1.837-1.862 2.765-.953l28.429 28.116c.574.57.925 1.557.925 2.619 0 1.06-.351 2.046-.925 2.616l-28.43 28.114c-.336.327-.707.486-1.074.486-.659 0-1.307-.509-1.69-1.437-.593-1.442-.315-3.362.617-4.284L115.299 35H3.442C2.032 35 .89 33.656.89 32c0-1.658 1.143-3 2.552-3H115.737z" />
		</svg>
	</svg>
	<main>
		<p class="message">Please view on desktop to see the full layout</p>
		<div class="slideshow">
			<header class="codrops-header">
				<h1 class="codrops-header__title">Maxime Ridou</h1>
				<div class="codrops-header__links">
					<a href="https://www.linkedin.com/in/maxime-ridou-17317a153/" target="_blank" title="in">in</a>
					<a href="https://www.instagram.com/vysokoskorostno/" target="_blank" title="ig">ig</a>
					<a href="MAXIME_RIDOU_CV.pdf" target="_blank"
						title="about">about</a>
					<a href="mailto:maximeridou2@gmail.com" title="contact">contact</a>

				</div>
			</header>

			<div class="slide slide--layout-1 slide--current">
				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img slide__border-black" style="background-image: url(img/ux/MAQUETTE_AMAZON.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">Amazon's website prototype - Item's page</h3>
						<a href="https://www.instagram.com/p/CB22Vsphhvi/" target="_blank"><p class="slide__figure-description">ESD's Admission Test</p></a>
					</figcaption>
				</figure>
				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img slide__border-black" style="background-image: url(img/ux/MAQUETTE_AMAZON2.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">Amazon's website prototype - Card page</h3>
						<a href="https://www.instagram.com/p/CB22Vsphhvi/" target="_blank"><p class="slide__figure-description">ESD's Admission Test</p></a>
					</figcaption>
				</figure>
				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img slide__border-black" style="background-image: url(img/ux/MAQUETTE_AESOP.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">Aesop's website prototype - Homepage</h3>
						<a href="https://www.instagram.com/p/CB0VzuxB7zn/" target="_blank"><p class="slide__figure-description">Individual project, rebrand of Aesop's website</p></a>
					</figcaption>
				</figure>
				<figure class="slide__figure">
					<div class="slide__figure-inner">
							<div class="slide__figure-img slide__border-black" style="background-image: url(img/ux/MAQUETTE_AESOP2.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">Aesop's website prototype - Product page</h3>
						<a href="https://www.instagram.com/p/CB0VzuxB7zn/" target="_blank"><p class="slide__figure-description">Individual project, rebrand of Aesop's website</p></a>
					</figcaption>
				</figure>
				<span class="slide__number slide__number--left">01</span>
				<span class="slide__number slide__number--right">02</span>

			</div>

			<div class="slide slide--layout-2">


					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/ui/BACKGROUND_STRECH.png)">
							</div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Strech background</h3>
							<p class="slide__figure-description">Personal wallpaper</p>
						</figcaption>
					</figure>
	
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/ui/STORY_RUSSE.png)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Russian poster</h3>
							<p class="slide__figure-description">Instagram story</p>
						</figcaption>
					</figure>
	
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/ui/BACKGROUND_WAVES.png)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Waves background</h3>
							<p class="slide__figure-description">Instagram story</p>
						</figcaption>
					</figure>
	
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/ui/STORY_DIT.png)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Covid19 Poster</h3>
							<a href="https://www.instagram.com/p/CB0VrxXhX2b/" target="_blank"><p class="slide__figure-description">Instagram story</p></a>
						</figcaption>
					</figure>
	
	
					<span class="slide__number slide__number--left">03</span>
					<span class="slide__number slide__number--right">04</span>
			</div>

			<div class="slide slide--layout-3">
				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img" style="background-image: url(img/entreprenariat/BUSINESS_CARD_MAXIME.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">Business card - Maxime Ridou</h3>
						<p class="slide__figure-description">Testing my own Business card</p>
					</figcaption>
				</figure>

				<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img slide__border-black" style="background-image: url(img/entreprenariat/PORTFOLIO_MAXIME.png)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Portfolio - Maxime Ridou</h3>
							<p class="slide__figure-description" target="_blank">Old portfolio for my works</p>
						</figcaption>
				</figure>

				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img slide__border-black" style="background-image: url(img/entreprenariat/SITE_INTERSTICE.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">Showcase website - Interstice</h3>
						<a href="https://www.interstice-design.com/" target="_blank"><p class="slide__figure-description">Decoration and design furniture made in Franche-Comté</p></a>
					</figcaption>
				</figure>
				
			
				<span class="slide__number slide__number--left">05</span>
				<span class="slide__number slide__number--right">06</span>
			</div>

			<div class="slide slide--layout-4">

				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img slide__border-black" style="background-image: url(img/school/MAQUETTE_MMI.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">MMI Montbeliard's website prototype - Homepage</h3>
						<a href="https://www.instagram.com/p/CB22rGHhtJ4/" target="_blank"><p class="slide__figure-description">Collective project, rebrand of MMI’s website</p></a>
					</figcaption>
				</figure>

				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img slide__border-black" style="background-image: url(img/school/MAQUETTE_MMI2.png)"></div>
						<div class="slide__figure-reveal" target="_blank"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">MMI Montbeliard's website prototype - Homepage</h3>
						<a href="https://www.instagram.com/p/CB22rGHhtJ4/" target="_blank"><p class="slide__figure-description">Collective project, rebrand of MMI’s website</p></a>
					</figcaption>
				</figure>

				<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/school/ILLUSTRATION_FLAK.png)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">"Flack" brand mock-up </h3>
							<p class="slide__figure-description">Collective project, creation of a brand</p>
						</figcaption>
				</figure>

				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img" style="background-image: url(img/school/POSTER_FLAK.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">"Flack" poster</h3>
						<p class="slide__figure-description">Collective project, creation of a brand</p>
					</figcaption>
				</figure>

				<span class="slide__number slide__number--left">07</span>
				<span class="slide__number slide__number--right">08</span>

			</div>

			<div class="slide slide--layout-5">

				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img" style="background-image: url(img/extra/freelance.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">Freelance background</h3>
						<a href="mailto:maximeridou2@gmail.com?subject=Freelance | Questions"><p class="slide__figure-description">For any informations, contact me</p></a>
					</figcaption>
				</figure>

				<figure class="slide__figure">
					<div class="slide__figure-inner">
						<div class="slide__figure-img" style="background-image: url(img/extra/alternance_esd.png)"></div>
						<div class="slide__figure-reveal"></div>
					</div>
					<figcaption>
						<h3 class="slide__figure-title">Looking for an intership at ESD background</h3>
						<a href="mailto:maximeridou2@gmail.com?subject=Alternance | Questions"><p class="slide__figure-description">For any informations, contact me</p></a>
					</figcaption>
				</figure>

				<span class="slide__number slide__number--left">09</span>
				<span class="slide__number slide__number--right">10</span>
			</div>



			<!-- revealer -->
			<div class="revealer">
				<div class="revealer__item revealer__item--left"></div>
				<div class="revealer__item revealer__item--right"></div>
			</div>
			<nav class="arrow-nav">
				<button class="arrow-nav__item arrow-nav__item--prev">
					<svg class="icon icon--nav">
						<use xlink:href="#icon-nav"></use>
					</svg>
				</button>
				<button class="arrow-nav__item arrow-nav__item--next">
					<svg class="icon icon--nav">
						<use xlink:href="#icon-nav"></use>
					</svg>
				</button>
			</nav>
			<!-- navigation -->
			<nav class="nav">
				<button class="nav__button">
					<span class="nav__button-text">index</span>
				</button>
				<h2 class="nav__chapter">UX Design</h2>
				<div class="toc">
					<a class="toc__item" href="#entry-1">
						<span class="toc__item-page">01.</span>
						<span class="toc__item-title">UX Design</span>
					</a>
					<a class="toc__item" href="#entry-2">
						<span class="toc__item-page">03.</span>
						<span class="toc__item-title">UI Design</span>
					</a>
					<a class="toc__item" href="#entry-3">
						<span class="toc__item-page">05.</span>
						<span class="toc__item-title">Entrepreneurship</span>
					</a>
					<a class="toc__item" href="#entry-4">
						<span class="toc__item-page">07.</span>
						<span class="toc__item-title">School projects</span>
					</a>
					<a class="toc__item" href="#entry-5">
						<span class="toc__item-page">09.</span>
						<span class="toc__item-title">Extra</span>
					</a>
				</div>
			</nav>
			<!-- little sides -->
			<div class="slideshow__indicator"></div>
			<div class="slideshow__indicator"></div>
		</div>


		<!-- <div class="cursor-container">
			<div class="rond"></div>
			<div class="cursor"></div>
		</div> -->

		      <!-- The cursor elements --> 
			  <div class="cursor cursor--small"></div>
			  <canvas class="cursor cursor--canvas" resize></canvas>

	</main>
	<script src="js/imagesloaded.pkgd.min.js"></script>
	<script src="js/TweenMax.min.js"></script>
	<script src="js/demo.js"></script>
</body>

</html>

A propos d'Outiref

Contact / Signaler un bug

FAQ

Crédits et Mentions Légales

Suivez nous sur...

Un site du Réseau Abondance

Abondance
Boutique Abondance
Googlefight
Formaseo
Mozbot
Livre Référencement
Définitions SEO