https://marvinx.com/en/

1<!doctype html><html class="animation-scroll" lang="en"><head><title>Marlène Bruhat | Creative Developer - Homepage</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="description" content="Hello I am Marlène alias @marvin_x_! Creative developer frontend, I’ve been producing intuitive and accessible interfaces with a serious passion for effects and animations."><meta name="color-scheme" content="dark light"><meta property="og:locale" content="fr_FR"><meta property="og:locale:alternate" content="en_US"><meta property="og:url" content="https://marvinx.com"><meta property="og:type" content="website"><meta property="og:title" content="Marlène Bruhat | Creative Developer - Homepage"><meta property="og:description" content="Hello I am Marlène alias @marvin_x_! Creative developer frontend, I’ve been producing intuitive and accessible interfaces with a serious passion for effects and animations."><meta property="og:image" content="https://marvinx.com/assets/images/og/og-facebook.jpg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:domain" content="marvinx.com"><meta name="twitter:url" content="https://marvinx.com"><meta name="twitter:title" content="Marlène Bruhat | Creative Developer - Homepage"><meta name="twitter:description" content="Hello I am Marlène alias @marvin_x_! Creative developer frontend, I’ve been producing intuitive and accessible interfaces with a serious passion for effects and animations."><meta name="twitter:site" content="@marvin_x_"><meta name="twitter:image" content="https://marvinx.com/assets/images/og/og-twitter.jpg"><link rel="icon" href="/assets/favicon/favicon.png"><link rel="canonical" href="https://marvinx.com"><link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" as="font"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"><link defer="defer" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><noscript>Your browser does not support JavaScript!</noscript>

1<script async src="https://www.googletagmanager.com/gtag/js?id=

1G-X0NJDZ2B1F

1"></script>

1<script>

1window.dataLayer = window.dataLayer || [];
2      function gtag(){dataLayer.push(arguments);}
3      gtag('js', new Date());
4      gtag('config', '

4G-X0NJDZ2B1F

4');

4</script>

4<link href="/main.194353cfc55a81de1dea.css" rel="stylesheet"></head><body data-barba="wrapper"><div id="app" style="font-family:Inter, sans-serif;"><section data-scroll-container data-scroll-section><div id="fixed-header-footer"></div><header role="banner" data-scroll data-scroll-sticky data-scroll-target="#fixed-header-footer"><h1><div class="logo" cursor-class="none"><div class="logo-wrap"><svg aria-hidden="true" viewBox="0 0 48 48" preserveAspectRatio="xMidYMid meet" xml:space="preserve"><g aria-hidden="true"><path aria-hidden="true" d="M27.2893 20.7107H48V48H20.467V41.1777H41.1777V37.7665H20.467V30.9442H41.1777V27.533H20.467V6.82233H17.0558V27.533H10.2335V6.82233H6.82233V27.533H0V0H27.2893V20.7107Z"></path></g></svg></div><div class="logo-wrap"><svg aria-hidden="true" viewBox="0 0 48 48" preserveAspectRatio="xMidYMid meet" xml:space="preserve"><g aria-hidden="true"><path aria-hidden="true" d="M27.2893 20.7107H48V48H20.467V41.1777H41.1777V37.7665H20.467V30.9442H41.1777V27.533H20.467V6.82233H17.0558V27.533H10.2335V6.82233H6.82233V27.533H0V0H27.2893V20.7107Z"></path></g></svg></div></div><p class="title"><span>Marlène</span><span>Bruhat</span></p></h1><p class="description"><span>Creative Developer</span></p><a class="btn outlined borderless" href="#about" title="" cursor-class="magnetic"><span>&#x2501;&nbsp;</span><strong>About</strong></a></header><div class="params"><ul class="languages"><li cursor-class="blend-mode"><a href="/fr/" title="" data-barba-prevent>fr</a></li><li cursor-class="blend-mode"><a href="/en/" title="" data-barba-prevent>en</a></li></ul><ul class="dark-mode"><li><a class="sun" cursor-class="blend-mode"><svg class="custom-icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" shape-rendering="geometricPrecision"><use xlink:href="../assets/icons/custom/sprite.svg#sprite-sun" aria-hidden="true"></use></svg></a></li><li><a class="moon" cursor-class="blend-mode"><svg class="custom-icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" shape-rendering="geometricPrecision"><use xlink:href="../assets/icons/custom/sprite.svg#sprite-moon" aria-hidden="true"></use></svg></a></li></ul></div><a href="#main-nav" id="btn-cursor"><span><i class="material-icons" aria-hidden="true">call_received</i></span></a><nav role="navigation" aria-label="Main navigation" id="stick-spray"><ul class="Menu-list" id="main-nav"><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project1"><h2><a class="barba-trigger" href="picture.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">picture</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project2"><h2><a class="barba-trigger" href="aubrilam.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">aubrilam</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project3"><h2><a class="barba-trigger" href="wethinkelastic.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">we think elastic</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project4"><h2><a class="barba-trigger" href="heclivereport.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">hec live report</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project5"><h2><a class="barba-trigger" href="cursorsemitter.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">cursors emitter</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project6"><h2><a class="barba-trigger" href="marvinstarter.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">marvin starter</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project7"><h2><a class="barba-trigger" href="ifcinema.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">if cinema</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project8"><h2><a class="barba-trigger" href="artesales.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">arte sales</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project9"><h2><a class="barba-trigger" href="tset.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">tset</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project10"><h2><a class="barba-trigger" href="arteboutique.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">arte boutique</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project11"><h2><a class="barba-trigger" href="arteradio.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">arte radio</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project12"><h2><a class="barba-trigger" href="ersilia.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">ersilia</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project13"><h2><a class="barba-trigger" href="educarte.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">educarte</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project14"><h2><a class="barba-trigger" href="veehairparis.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">vee hair paris</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project15"><h2><a class="barba-trigger" href="wanted18.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">wanted 18</span></a></h2></li><li data-scroll data-scroll-repeat data-scroll-offset="7%,-50%" data-scroll-position="bottom" data-scroll-id="project16"><h2><a class="barba-trigger" href="overgraph.html" cursor-class="arrow"><span data-scroll data-scroll-position="top" data-scroll-speed="0">overgraph</span></a></h2></li><li id="spray" data-scroll data-scroll-sticky data-scroll-target="#stick-spray"></li></ul></nav><main role="main" data-barba="container" data-barba-namespace="home"><section id="about"><p class="big-txt"><span>Hello I am Marlène<br>

4alias&nbsp;<a href="https://www.twitter.com/Marvin_X_" target="_blank" title="" cursor-class="arrow">@marvin_x_!</a></span><span>Creative developer frontend, I’ve been producing intuitive and accessible interfaces with a serious passion for effects and animations.</span><span>Let's make something special!</span></p><section class="section" id="skills"><h3 data-scroll data-scroll-repeat data-scroll-class="title-scroll" data-scroll-offset="0" data-scroll-position="bottom"><span>expertise</span></h3><ul><li>Next JS</li><li>React</li><li>typescript</li><li>Vanilla Javascript</li><li>HTML/CSS</li><li>PUG/TWIG</li><li>svg</li><li>responsive design</li><li>git</li><li>Graphql</li></ul></section><section class="section" id="librairies"><h3 data-scroll data-scroll-repeat data-scroll-class="title-scroll" data-scroll-offset="0" data-scroll-position="bottom"><span>librairies</span></h3><ul><li><a href="https://barba.js.org/" cursor-class="arrow" title="" target="_blank">barba</a></li><li><a href="https://greensock.com/" cursor-class="arrow" title="" target="_blank">greensock</a></li><li><a href="https://locomotivemtl.github.io/locomotive-scroll/" cursor-class="arrow" title="" target="_blank">locomotive-scroll</a></li><li><a href="http://snapsvg.io/" cursor-class="arrow" title="" target="_blank">snapsvg</a></li><li><a href="https://p5js.org/" cursor-class="arrow" title="" target="_blank">p5</a></li><li><a href="https://www.khronos.org/webgl/" cursor-class="arrow" title="" target="_blank">webgl</a></li></ul></section><section class="section" id="awards"><h3 data-scroll data-scroll-repeat data-scroll-class="title-scroll" data-scroll-offset="0" data-scroll-position="bottom"><span>awards</span></h3><ul data-scroll data-scroll-repeat data-scroll-call="odometer"><li><span class="counter-award big-txt">0</span><p class="big-txt">CSSDA</p><ul><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/we-think-elastic/43073">2023 - Website of the day - wethinkelastic.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/hec-paris-innovation-live-report/42013/">2022 - Special kudos award - makeithappenmakeitbig.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/hec-paris-innovation-live-report/42013/">2022 - Best UX - makeithappenmakeitbig.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/hec-paris-innovation-live-report/42013/">2022 - Best UI - makeithappenmakeitbig.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/hec-paris-innovation-live-report/42013/">2022 - Best Innovation - makeithappenmakeitbig.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/marvinx/41352/">2022 - Special kudos award - marvinx.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/marvinx/41352/">2022 - Best UX - marvinx.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/marvinx/41352/">2022 - Best UI - marvinx.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.cssdesignawards.com/sites/marvinx/41352/">2022 - Best Innovation - marvinx.com</a></li><li><p>2011 - marvinx.com</p></li></ul></li><li><span class="counter-award big-txt">0</span><p class="big-txt">awwwards</p><ul><li><a target="_blank" cursor-class="blend-mode" href="https://www.awwwards.com/sites/we-think-elastic-2">2023 - Site of the day - wethinkelastic.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.awwwards.com/sites/we-think-elastic-2">2023 - Developer Award - wethinkelastic.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://www.awwwards.com/sites/marvinx">2022 - Honorable mention - marvinx.com</a></li></ul></li><li><span class="counter-award big-txt">0</span><p class="big-txt">csswinner</p><ul><li><a target="_blank" cursor-class="blend-mode" href="https://www.csswinner.com/detail

4s/marvinx/16284">2022 - Site of the day - marvinx.com</a></li></ul></li><li><span class="counter-award big-txt">0</span><p class="big-txt">CSS Awards</p><ul><li><p>2011 - marvinx.com</p></li></ul></li><li><span class="counter-award big-txt">0</span><p class="big-txt">orpetron</p><ul><li><a target="_blank" cursor-class="blend-mode" href="https://orpetron.com/sites/marlene-bruhat-portfolio-creative-developer/">2022 - Site of the day - marvinx.com</a></li><li><a target="_blank" cursor-class="blend-mode" href="https://orpetron.com/sites/marlene-bruhat-portfolio-creative-developer/">2022 - Web Design Appreciation - marvinx.com</a></li></ul></li></ul></section><section class="section" id="articles"><h3 data-scroll data-scroll-repeat data-scroll-class="title-scroll" data-scroll-offset="0" data-scroll-position="bottom"><span>Articles</span></h3><ul><li><a href="https://tympanus.net/codrops/2022/08/24/custom-svg-cursors-with-an-interactive-emitter-effect/" target="_blank" cursor-class="blend-mode"><span class="title">Custom SVG Cursors with an Interactive Emitter Effect</span><span class="who">: Codrops</span></a></li><li><a href="https://www.designrush.com/best-designs/websites/trends/best-engaging-interactive-website-designs" target="_blank" cursor-class="blend-mode"><span class="title">Best Engaging and Interactive Website Designs with Exciting UIs</span><span class="who">: Design Rush</span></a></li></ul></section><section class="section" id="bloc-contact"><p class="words-scroll big-txt" data-scroll data-scroll-call="show-words" data-scroll-repeat>A question ?\n\nA project ?</p><div id="contact"><div><div data-scroll data-scroll-call="show-arrow" data-scroll-repeat data-scroll-position="bottom" data-scroll-offset="-10%"><svg id="arrow" x="0px" y="0px" viewbox="0 0 190 125" style="enable-background:new 0 0 190 125;" xml:space="preserve"><g stroke-width="2" stroke-linecap="round"><line x1="0" y1="62.5" x2="190" y2="62.5"></line><line x1="127.5" y1="0" x2="190" y2="62.5"></line><line x1="127.5" y1="125" x2="190" y2="62.5"></line></g></svg><div class="phone-mail"><a id="phone" href="tel:+33634581392" cursor-class="arrow" title="">+336 34 58 13 92</a><a href="mailto:[email protected]" cursor-class="arrow" title="">[email protected]</a></div></div><ul><li><a href="https://www.instagram.com/marvinx.creative.dev/" target="_blank" title="" cursor-class="blend-mode">instagram</a></li><li><a href="https://www.twitter.com/Marvin_X_" target="_blank" title="" cursor-class="blend-mode">twitter</a></li><li><a href="https://www.linkedin.com/in/marlenebruhat/" target="_blank" title="" cursor-class="blend-mode">linkedin</a></li><li><a href="https://www.github.com/marvinx-x" target="_blank" title="" cursor-class="blend-mode">github</a></li></ul></div></div></section><div id="credits"><p>Design</p><a href="https://www.ghislainauzillon.com/" target="_blank" cursor-class="blend-mode" title="">Ghislain Auzillon</a><p>code by myself</p></div></section></main><footer role="contentinfo" data-scroll data-scroll-sticky data-scroll-target="#fixed-header-footer"><a href="https://www.instagram.com/marvinx.creative.dev/" target="_blank" title="" cursor-class="blend-mode" data-barba-prevent>ig</a><a href="https://www.twitter.com/Marvin_X_" target="_blank" title="" cursor-class="blend-mode" data-barba-prevent>tw</a><a href="https://www.linkedin.com/in/marlenebruhat/" target="_blank" title="" cursor-class="blend-mode" data-barba-prevent>in</a><a href="https://www.github.com/marvinx-x" target="_blank" title="" cursor-class="blend-mode" data-barba-prevent>gt</a></footer></section><div id="preload"><p>0</p><div id="spray-preload"></div></div><div class="hide" id="noise"></div><div id="particles"></div><div id="cursor"><span id="cursor-inner"></span></div><div id="cursor-arrow"><i class="material-icons" aria-hidden="true">call_received</i></div></div>

4<script defer="defer" src="/main.bundle.d138c61be7ee4bbec54d.js"></script>

4</body></html>