CINXE.COM

<!DOCTYPE html><html lang="en_US"> <head>    <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /><title>Jean-Christophe Suzanne • Creative Developer • Index Studio</title><meta name="description" content="Portfolio of Jean-Christophe Suzanne, full-stack developer of tailored experiences — Lead Developer at Index Studio." /><link rel="canonical" href="https://jcsuzanne.com/" /><meta property="og:locale" content="en_US" /><meta property="og:type" content="website" /><meta property="og:title" content="Jean-Christophe Suzanne • Creative Developer • Index Studio" /><meta property="og:description" content="Portfolio of Jean-Christophe Suzanne, full-stack developer of tailored experiences — Lead Developer at Index Studio." /><meta property="og:url" content="https://jcsuzanne.com/" /><meta property="og:site_name" content="Jean-Christophe Suzanne" /><meta property="article:modified_time" content="2024-03-19T06:29:44+00:00" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:site" content="@jcsuzanne" /><script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://jcsuzanne.com/","url":"https://jcsuzanne.com/","name":"Jean-Christophe Suzanne • Creative Developer • Index Studio","isPartOf":{"@id":"https://jcsuzanne.com/#website"},"about":{"@id":"https://jcsuzanne.com/#/schema/person/c58288d981d8caac59deb20087158f87"},"datePublished":"2022-01-17T14:31:01+00:00","dateModified":"2024-03-19T06:29:44+00:00","description":"Portfolio of Jean-Christophe Suzanne, full-stack developer of tailored experiences — Lead Developer at Index Studio.","breadcrumb":{"@id":"https://jcsuzanne.com/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://jcsuzanne.com/"]}]},{"@type":"BreadcrumbList","@id":"https://jcsuzanne.com/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home"}]},{"@type":"WebSite","@id":"https://jcsuzanne.com/#website","url":"https://jcsuzanne.com/","name":"JCS – Creative Developer","description":"Creative Developer – Index Studio","publisher":{"@id":"https://jcsuzanne.com/#/schema/person/c58288d981d8caac59deb20087158f87"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://jcsuzanne.com/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https://jcsuzanne.com/#/schema/person/c58288d981d8caac59deb20087158f87","name":"jcsuzanne","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://jcsuzanne.com/#/schema/person/image/","url":"http://jcs23.wpengine.com/wp-content/uploads/2023/04/302.jpg","contentUrl":"http://jcs23.wpengine.com/wp-content/uploads/2023/04/302.jpg","width":1680,"height":1034,"caption":"jcsuzanne"},"logo":{"@id":"https://jcsuzanne.com/#/schema/person/image/"},"sameAs":["https://jcs23.wpengine.com","https://twitter.com/jcsuzanne"]}]}</script><style id='global-styles-inline-css' type='text/css'>:root{--wp--preset--aspect-ratio--square:1;--wp--preset--aspect-ratio--4-3:4/3;--wp--preset--aspect-ratio--3-4:3/4;--wp--preset--aspect-ratio--3-2:3/2;--wp--preset--aspect-ratio--2-3:2/3;--wp--preset--aspect-ratio--16-9:16/9;--wp--preset--aspect-ratio--9-16:9/16;--wp--preset--color--black:#000000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#ffffff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small:13px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:36px;--wp--preset--font-size--x-large:42px;--wp--preset--spacing--20:0.44rem;--wp--preset--spacing--30:0.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;--wp--preset--shadow--natural:6px 6px 9px rgba(0,0,0,0.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,0.4);--wp--preset--shadow--sharp:6px 6px 0px rgba(0,0,0,0.2);--wp--preset--shadow--outlined:6px 6px 0px -3px rgba(255,255,255,1),6px 6px rgba(0,0,0,1);--wp--preset--shadow--crisp:6px 6px 0px rgba(0,0,0,1)}:where(.is-layout-flex){gap:0.5em}:where(.is-layout-grid){gap:0.5em}body .is-layout-flex{display:flex}.is-layout-flex{flex-wrap:wrap;align-items:center}.is-layout-flex >:is(*,div){margin:0}body .is-layout-grid{display:grid}.is-layout-grid >:is(*,div){margin:0}:where(.wp-block-columns.is-layout-flex){gap:2em}:where(.wp-block-columns.is-layout-grid){gap:2em}:where(.wp-block-post-template.is-layout-flex){gap:1.25em}:where(.wp-block-post-template.is-layout-grid){gap:1.25em}.has-black-color{color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-color{color:var(--wp--preset--color--white) !important}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important}.has-black-background-color{background-color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-background-color{background-color:var(--wp--preset--color--white) !important}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important}.has-black-border-color{border-color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-border-color{border-color:var(--wp--preset--color--white) !important}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important}:where(.wp-block-post-template.is-layout-flex){gap:1.25em}:where(.wp-block-post-template.is-layout-grid){gap:1.25em}:where(.wp-block-columns.is-layout-flex){gap:2em}:where(.wp-block-columns.is-layout-grid){gap:2em}:root:where(.wp-block-pullquote){font-size:1.5em;line-height:1.6}</style><link rel='stylesheet' id='main-css' href='https://jcsuzanne.com/wp-content/themes/blueprint/theme/public/build/styles.css?id=276030a35bfc4c9cbf7bd97a7b96877d' defer='defer' type='text/css' media='' /><link rel='shortlink' href='https://jcsuzanne.com/' /><link rel="apple-touch-icon" sizes="180x180" href="/wp-content/uploads/fbrfg/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/wp-content/uploads/fbrfg/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/wp-content/uploads/fbrfg/favicon-16x16.png"><link rel="manifest" href="/wp-content/uploads/fbrfg/site.webmanifest"><link rel="mask-icon" href="/wp-content/uploads/fbrfg/safari-pinned-tab.svg" color="#000000"><link rel="shortcut icon" href="/wp-content/uploads/fbrfg/favicon.ico"><meta name="msapplication-TileColor" content="#000000"><meta name="msapplication-config" content="/wp-content/uploads/fbrfg/browserconfig.xml"><meta name="theme-color" content="#000000"> <script> // <![CDATA[ var config = { env: "", lang: "en_US", pathAssets: "https://jcsuzanne.com/wp-content/themes/blueprint/theme/public", pathRoot: "https://jcsuzanne.com/wp-content/themes/blueprint/theme", pathWpContent:"https://jcsuzanne.com/wp-content", XHR_URL: 'https://jcsuzanne.com/wp-admin/admin-ajax.php' } var trans = { } // ]]> </script> <meta name="msapplication-TileColor" content="#ffffff" /><meta name="theme-color" content="#192240" /><script async src="https://www.googletagmanager.com/gtag/js?id=G-2GXPDFYJEK"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-2GXPDFYJEK'); window.GTAG_ID = 'G-2GXPDFYJEK' </script></head> <body class="currentView--home"> <div id="master" role="document"> <div id="setupUI" class="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-50 tw-bg-black"></div> <div class="main-transition" id="jsView--transition"></div><div class="main-progress jsProgress" id="jsView--progress"></div> <section class="ui tw-fixed tw-inset-x-ui-x-mobile tw-z-50 tw-pb-[22px] tw-pt-ui-x-mobile lg:tw-inset-x-ui-x lg:tw-pb-[20px] lg:tw-pt-[48px]"> <div class="tw-absolute tw-inset-x-[-200px] tw-inset-y-0 tw-bg-black tw-bg-opacity-50 tw-backdrop-blur-[7px]"></div> <div class="tw-h-[1px] tw-w-full tw-origin-top-left tw-scale-x-0 tw-bg-white tw-transition-transform tw-duration-700 tw-ease-in-out-quint ui-ready:tw-scale-x-100"></div> <div class="tw-absolute tw-bottom-0 tw-left-0 tw-h-[1px] tw-w-full tw-bg-white tw-opacity-0 list-above:tw-opacity-100"></div> <div class="util-grid-layout tw-pt-[22px]"> <div class="util-headline-sm tw-col-span-3 tw-overflow-hidden tw-text-white"> <span class="tw-inline-block tw-translate-y-[15px] tw-transition-transform tw-duration-700 tw-ease-in-out-quint ui-ready:tw-translate-y-[0px]"> JC<span class="tw-inline lg:tw-hidden">S</span> </span> </div> <div class="util-headline-sm util-nomobile tw-col-span-3 tw-overflow-hidden tw-text-white"> <span class="tw-inline-block tw-translate-y-[15px] tw-transition-transform tw-duration-700 tw-ease-in-out-quint ui-ready:tw-translate-y-[0px] tw-delay-100">S</span> </div> <div class="util-headline-sm util-nomobile tw-col-span-3 tw-overflow-hidden tw-text-white tw-text-opacity-50"> <p class="tw-inline-block tw-translate-y-[15px] tw-transition-transform tw-duration-700 tw-ease-in-out-quint ui-ready:tw-translate-y-[0px] tw-delay-200"> <a href="#work" class="hover:tw-text-jcs tw-duration-500 tw-transition-colors tw-ease-out-cubic hover:tw-text-opacity-100">Discover</a> </p> </div> <div class="tw-col-span-3 tw-overflow-hidden"> <nav class="util-block-layout"> <ul class="tw-grid tw-grid-cols-3 lg:tw-gap-[48px]"> <li data-slug="bio" class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-111 tw-col-span-1 tw-relative tw-translate-y-[15px] tw-overflow-hidden tw-transition-transform tw-duration-700 tw-ease-in-out-quint ui-ready:tw-translate-y-[0px] tw-delay-300"><a href="#bio" class="util-headline-sm tw-text-white hover:tw-text-jcs tw-transition-colors tw-duration-500 tw-ease-out-cubic ">Bio</a></li> <li data-slug="contact" class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-112 tw-col-span-1 tw-col-span-2 tw-text-right tw-relative tw-translate-y-[15px] tw-overflow-hidden tw-transition-transform tw-duration-700 tw-ease-in-out-quint ui-ready:tw-translate-y-[0px] tw-delay-[350ms]"><a rel="nofollow" data-href="jc[DOT]suzanne[AT]gmail[DOT]com" class="util-headline-sm tw-text-white hover:tw-text-jcs tw-transition-colors tw-duration-500 tw-ease-out-cubic js-mailmorph">Contact</a></li> </ul></nav> </div> </div></section> <div class="tw-relative tw-z-20"> <main class="main-content apply-page-container jsSmoothWrapper" id="swup" role="main"> <div class="jsSmoothContent view-container tw-relative" g-component="HomeView" data-namespace="home"> <div class="util-h-screen tw-relative tw-inset-y-0 tw-mx-ui-x-mobile lg:tw-mx-ui-x"> <div class="util-block-layout tw-h-full tw-w-full tw-overflow-hidden" g-component="Launcher"> <div class="tw-absolute tw-bottom-[135px] lg:tw-bottom-0 tw-inset-x-0 tw-font-swiss-bk tw-text-[60px] lg:tw-text-[450px] xl:tw-text-[510px] tw-text-white tw-leading-[1]">JC <span class="tw-absolute tw-right-0 lg:tw-right-[-18px] lg:tw-translate-y-full tw-bottom-0" g-ref="leS">S</span></div> <div class="util-grid-layout tw-absolute tw-inset-x-0 tw-bottom-ui-x-mobile lg:tw-bottom-[75px] tw-h-[250px] lg:tw-h-[332px] xl:tw-h-[385px]" g-ref="sticky"> <div class="tw-relative tw-col-span-6 lg:tw-col-span-3 lg:tw-col-start-7"> <div class="tw-absolute tw-inset-0 tw-z-[1] tw-bg-black" g-ref="cache"></div> <h2 class="util-headline-sm tw-absolute tw-left-0 tw-top-0 tw-text-white" g-ref="textA"> <p>Creative<br />Developer<br /><span class="darken">Lead developer – index.studio</span></p> </h2> <div class="tw-absolute tw-top-[46%] lg:tw-top-1/2 tw-z-10 tw-h-[10px] lg:tw-h-[19px] tw-w-1/2 lg:tw-w-full -tw-translate-y-1/2 tw-left-[100px] lg:tw-left-auto"> <div class="tw-absolute tw-inset-0 tw-scale-x-0 tw-bg-white" g-ref="progress"></div> <div class="tw-absolute tw-inset-0 tw-bg-white tw-bg-opacity-10"></div> </div> <h2 class="util-headline-sm tw-absolute tw-bottom-0 tw-left-0 tw-text-white" g-ref="textB"> <p>Selected <br>Works</p><p><span class="darken">2008 – 2024</span></p> </h2> </div> </div> </div> </div> <div id="work" class="util-block-layout tw-bg-black tw-pb-[20px] lg:tw-pb-[140px] tw-pt-[50px] lg:tw-pt-[120px]" g-component="List"> <div class="tw-absolute tw-inset-x-ui-x-mobile lg:tw-inset-x-ui-x tw-top-0 tw-border-t tw-border-solid tw-border-white" g-ref="separator"></div> <div class="util-grid-layout util-px-layout"> <ul class="tw-col-span-6 lg:tw-col-start-7"> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2024/09/AFLF_Social_Landscape-1.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://decathlon-aflf.index.studio/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2024 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Decathlon AFLF </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Sportswear — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2024/06/1G4tLjsFHyjtusev.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://decathlon-wlkr76.index.studio" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2024 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Decathlon WLKR 76 </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Sportswear — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2024/03/twittervid.com_indexstd_ec7984.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://hopaal.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2024 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Hopaal </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Superactive outdoor garments — Ecommerce </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <picture class="tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all tw-overflow-hidden"> <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <source srcset="" type="image/jpeg"> <img itemprop="image" src="https://jcsuzanne.com/wp-content/uploads/2024/01/ezgif.com-animated-gif-maker.gif" alt="" class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 tw-object-cover" > </picture> <a href="https://bdkparfums.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2023 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> BDK Paris </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Perfume house — Ecommerce </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2024/01/TDA_social_Square_v3.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://tourdargent.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2023 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> La Tour d’Argent </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Gastronomic Excellence — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/10/7FaTWY-vcMtCB6NB.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.dsdesignstudio.paris/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2023 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> DS Automobiles Design Studio </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Automotive & Innovation — Showcase </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/07/gunboat-v3-1.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.gunboat.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2023 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Gunboat </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Leisure Boats — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/landa.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.landa.as/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2022 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Landa </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Hotel & Restaurant — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/celimene.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://celimenepartners.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2022 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Celimene Partners </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Entrepreneur-centric M&A — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/JWHPNcv6jtqrGSB.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.bizupagency.com" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2022 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Bizup Agency </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Business Development Agency — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/enygma-2.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.enygma.tech" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2022 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Enygma </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Financial crime prevention software — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/Hesqzrl0nseKizmy.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://wanderfullife.fr" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2022 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Chalet Wanderful Life </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Luxury tourist co-living — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/mutt.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://muttagency.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2018 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Mutt Agency </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Marketing content agency — Showcase </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <picture class="tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all tw-overflow-hidden"> <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <source srcset="https://jcsuzanne.com/wp-content/uploads/2023/04/goodmoods-1.jpg 2560w, https://jcsuzanne.com/wp-content/uploads/2023/04/goodmoods-1-1024x576.jpg 1024w, https://jcsuzanne.com/wp-content/uploads/2023/04/goodmoods-1-1920x1080.jpg 1920w, https://jcsuzanne.com/wp-content/uploads/2023/04/goodmoods-1-768x432.jpg 768w, https://jcsuzanne.com/wp-content/uploads/2023/04/goodmoods-1-1536x864.jpg 1536w, https://jcsuzanne.com/wp-content/uploads/2023/04/goodmoods-1-2048x1152.jpg 2048w" type="image/jpeg"> <img itemprop="image" src="https://jcsuzanne.com/wp-content/uploads/2023/04/goodmoods-1.jpg" alt="" class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 tw-object-cover" > </picture> <a href="http://goodmoods.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2015 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Goodmoods </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Lifestyle magazine and agency — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/gedeon.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.gedeon.com" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2017 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Gédeon </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> French leading TV design agency — Showcase </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/tomas-than.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://tomasthan.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2021 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Tomas Than </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Italian luxury handbags brand — Ecommerce </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/pichon.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.pichon-comtesse.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2021 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Chateau Pichon Comtesse de Lalande </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Winemaker — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/ntd.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.naguissatajan.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2021 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> NTD </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Interior architect & designer — Portfolio </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/minds.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://weareminds.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2021 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> We Are Minds </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Speakers agency — Portfolio </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/auguri.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="http://auguri.studio/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2022 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Auguri Studio </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Interior Design </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <picture class="tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all tw-overflow-hidden"> <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <source srcset="https://jcsuzanne.com/wp-content/uploads/2023/04/vc.jpeg 2560w, https://jcsuzanne.com/wp-content/uploads/2023/04/vc-1024x573.jpeg 1024w, https://jcsuzanne.com/wp-content/uploads/2023/04/vc-1920x1074.jpeg 1920w, https://jcsuzanne.com/wp-content/uploads/2023/04/vc-768x430.jpeg 768w, https://jcsuzanne.com/wp-content/uploads/2023/04/vc-1536x859.jpeg 1536w, https://jcsuzanne.com/wp-content/uploads/2023/04/vc-2048x1146.jpeg 2048w" type="image/jpeg"> <img itemprop="image" src="https://jcsuzanne.com/wp-content/uploads/2023/04/vc.jpeg" alt="" class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 tw-object-cover" > </picture> <a href="https://victory-capital.com/fr/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2021 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Victory Capital </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Financial — Corporate </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/bm.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.bigmammagroup.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2016 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Big Mamma Group </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Italian restaurants group — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/bernstein.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.olivierbernstein.com/fr/accueil" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2016 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Olivier Bernstein </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Winemaker — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/cellier.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="http://cellierdeschartreux.fr/fr/accueil" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2017 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Cellier des Chartreux </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Winemaker — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/millemann.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.millemannconsulting.fr" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2018 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Millemann Consulting </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Oenology & Viticulture expertise — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/amy.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="http://amy.jcsuzanne.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2015 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Amy </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Promotional for Amy documentary — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/jony.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="http://www.jonyguedj.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2017 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Jony Guedj </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Filmmaker — Portfolio </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/hello.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="https://www.hellothierry.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2015 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Hello Thierry </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Art director & photographer — Portfolio </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <div class="video-container tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all" > <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <video src="https://jcsuzanne.com/wp-content/uploads/2023/04/thoraval.mp4" preload="metadata" loop playsinline muted class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 video-desktop"></video> </div> <a href="http://www.atelier-serge-thoraval.com/fr/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2014 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> Atelier Serge Thoraval </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Engraved silver jewelry maker — Editorial </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> <li class="list-item tw-group tw-relative" g-component="WorkItem" g-ref="item"> <picture class="tw-hidden lg:tw-block tw-h-full tw-absolute tw-left-[-100%] tw-top-0 tw-pointer-events-none tw-scale-[1.1] group-hover:tw-scale-100 tw-duration-[1.2s] tw-ease-out-quint tw-transitions-all tw-overflow-hidden"> <div class="tw-absolute tw-left-[-5px] tw-top-[-5px] tw-bg-black tw-opacity-0 group-hover:tw-opacity-100" g-ref="cache"></div> <source srcset="https://jcsuzanne.com/wp-content/uploads/2023/04/skavocats.jpeg 1152w, https://jcsuzanne.com/wp-content/uploads/2023/04/skavocats-1024x634.jpeg 1024w, https://jcsuzanne.com/wp-content/uploads/2023/04/skavocats-768x475.jpeg 768w" type="image/jpeg"> <img itemprop="image" src="https://jcsuzanne.com/wp-content/uploads/2023/04/skavocats.jpeg" alt="" class="tw-h-auto tw-w-[400px] xl:tw-w-[500px] 2xl:tw-w-[600px] tw-opacity-0 group-hover:tw-opacity-100 tw-object-cover" > </picture> <a href="https://skavocats.com/" target="_blank" class="tw-relative tw-grid tw-grid-cols-6 tw-gap-6 tw-py-[23px] first:tw-pt-0 lg:tw-gap-[48px]"> <div class="tw-absolute tw-inset-0 tw-bottom-[1px] tw-z-10 tw-bg-black" g-ref="hover"></div> <p class="tw-col-span-2 tw-font-swiss-rg tw-text-sm tw-text-white lg:tw-col-span-1 lg:tw-text-lg" g-ref="date"> 2021 </p> <div class="tw-col-span-4 tw-font-swiss-rg tw-text-base tw-text-white lg:tw-col-start-3 lg:tw-text-lg"> <h2 class="" g-ref="projectName"> SK Avocats </h2> <h3 class="tw-text-sm tw-opacity-40 tw-transition-opacity tw-duration-500 tw-ease-out-cubic group-hover:tw-opacity-100" g-ref="projectDesc"> Institute — Corporate </h3> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-border-t tw-border-solid tw-border-white tw-border-opacity-20" g-ref="line"></div> <div class="tw-absolute tw-inset-x-0 tw-bottom-0 tw-z-10 tw-origin-top-left tw-scale-x-0 tw-border-t tw-border-solid tw-border-white tw-transition-transform tw-duration-[600ms] tw-ease-out-cubic group-hover:tw-scale-x-100"></div> </div> </a> </li> </ul> </div> </div> <div id="bio" class="util-block-layout tw-bg-transparent tw-pt-[120px] lg:tw-pt-[160px]"></div> <section class="util-block-layout util-px-layout tw-pb-[110px] lg:tw-pb-[150px]"> <h1 g-component="RevealByLines" data-selector='p' data-start="top 60%" class="tw-w-full lg:tw-w-[75%] tw-max-w-[1200px] tw-font-swiss-md tw-text-white tw-text-[20px] lg:tw-text-[60px] lg:tw-leading-[60px] xl:tw-text-[88px] xl:tw-leading-[80px] util-bio"> <p>JCS<sup>®</sup> is the showcase of<br /> Jean-Christophe Suzanne,<br /><span class="tw-underline tw-decoration-[4px] tw-underline-offset-[8px]">full-stack developer</span> of<br /><span class="tw-underline tw-decoration-[4px] tw-underline-offset-[8px]">tailored experiences.</span></p> </h1> </section> <section class="util-block-layout"> <div class="util-px-layout util-grid-layout tw-relative lg:tw-pb-[150px] tw-pt-[40px] lg:tw-pt-[90px]"> <div class="tw-bg-white tw-absolute tw-h-[1px] tw-inset-x-ui-x-mobile lg:tw-inset-x-ui-x tw-top-0"></div> <div class="tw-bg-white tw-absolute tw-h-[1px] tw-inset-x-ui-x-mobile lg:tw-inset-x-ui-x tw-bottom-0"></div> <h3 class="tw-font-swiss-md tw-leading-[1.1] lg:tw-leading-[1] tw-text-white tw-col-span-6 lg:tw-col-span-5 tw-text-base lg:tw-text-[32px] tw-mb-[60px] lg:tw-mb-0" data-selector="p" data-start="top 70%" g-component="RevealFadeY"> <p>Hi there! Welcome! I am Jean-Christophe. </p><div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div><p>Lead full-stack developer at INDEX, design+development creative studio.<br>My work finds its ground in providing technical expertise for creative digital platforms.</p><div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div><p>What always matters to me as a developer is to push the design further and create a smoothness feeling in an immersive experience.</p><div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div><p>Within 18 years of experience, from developer at Ultranoir to independant, I am now providing my expertise from a beautiful and inspirational place for my family, Reunion Island.</p><p></p><br><a href="https://www.linkedin.com/in/jean-christophe-suzanne-43593577" target="_blank" rel="noopener"><img src="https://jcsuzanne.com/wp-content/uploads/2024/04/icons8-linkedin-1.svg" width="24"></a><p></p> </h3> <div data-start="top 70%" data-delay="0.1" g-component="RevealFadeY" class="tw-col-span-6 lg:tw-col-span-2 tw-mb-6 lg:tw-mb-0 tw-text-right lg:tw-text-left lg:tw-col-start-7"> <p class="tw-font-swiss-md tw-text-base tw-text-white"> Stack </p> <div class="tw-prose tw-mt-[30px] lg:tw-mt-[60px] tw-font-swiss-rg tw-text-[13px] tw-text-white prose-a:tw-text-white prose-ul:tw-list-none prose-ul:tw-pl-0"> <ul><li>WordPress</li><li>Shopify / Woocommerce</li><li>HTML5</li><li>Javascript ES6 / Vue</li><li>Tailwind CSS / PostCSS / SCSS</li><li>ESBuild / Laravel Mix</li><li>Timber Framework ❤</li><li>Laravel</li><li>Headless CMS</li></ul> </div> </div> <div data-start="top 70%" data-delay="0.2" g-component="RevealFadeY" class="tw-col-span-6 lg:tw-col-span-2 tw-mb-6 lg:tw-mb-0 "> <p class="tw-font-swiss-md tw-text-base tw-text-white"> Capabilities </p> <div class="tw-prose tw-mt-[30px] lg:tw-mt-[60px] tw-font-swiss-rg tw-text-[13px] tw-text-white prose-a:tw-text-white prose-ul:tw-list-none prose-ul:tw-pl-0"> <ul><li>Editorial</li><li>Ecommerce</li><li>Portfolio</li><li>Showcase</li><li>App UI</li></ul> </div> </div> <div data-start="top 70%" data-delay="0.3" g-component="RevealFadeY" class="tw-col-span-6 lg:tw-col-span-2 tw-mb-6 lg:tw-mb-0 tw-text-right lg:tw-text-left "> <p class="tw-font-swiss-md tw-text-base tw-text-white"> Accolades </p> <div class="tw-prose tw-mt-[30px] lg:tw-mt-[60px] tw-font-swiss-rg tw-text-[13px] tw-text-white prose-a:tw-text-white prose-ul:tw-list-none prose-ul:tw-pl-0"> <ul><li>Site Inspire x34</li><li>Awwwards SOTM x2</li><li>Awwwards SOTD x25</li><li>FWA x7</li></ul> </div> </div> </div> </section> <section class="util-block-layout tw-pt-[100px] lg:tw-pt-[200px]" g-component="LoopText"> <div data-from='{"y":"80%","x":"3%"}' data-to='{"y":"0%","ease":"quint.out","x":"0%","duration":1.2}' data-start="top bottom" g-component="Embrace" class="util-block-layout"> <a g-component="MailMorph" rel="nofollow" data-href="jc[DOT]suzanne[AT]gmail[DOT]com" class="js-marquee tw-font-swiss-rg tw-text-white tw-text-[60px] lg:tw-text-[272px] hover:tw-text-jcs tw-duration-300 tw-ease-out-cubic tw-transition-colors" data-speed=".5"><p>Contact me!</p></a> </div> </section> </div> </main> </div> </div> <script type="text/javascript" id="rocket-browser-checker-js-after"> /* <![CDATA[ */"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); /* ]]> */</script><script type="text/javascript" id="rocket-preload-links-js-extra"> /* <![CDATA[ */var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index.php\/)?(.*)wp-json(\/.*|$)|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/jcsuzanne.com","onHoverDelay":"100","rateThrottle":"3"}; /* ]]> */</script><script type="text/javascript" id="rocket-preload-links-js-after"> /* <![CDATA[ */(function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); /* ]]> */</script><script type="text/javascript" defer="defer" src="https://jcsuzanne.com/wp-content/themes/blueprint/theme/public/build/front.js?id=8c81beeb5f56e807c6c64278bef62c6d" id="main-js"></script> </body></html>