<iframe></noscript> <main> <div id="intro-background" class="fixed top-0 left-0 z-negative w-full h-screen overflow-hidden"> <div class="fixed bottom-0 z-40 left-0 bg-yellow-500 xs:border-l-10 sm:border-l-10 md:border-l-14 lg:border-l-16 "> <img class="h-16 px-4 pt-2 pb-2" src="svg/arrow_down_black.svg" alt=""> </div> </div> <section id="opening" class="w-full z-negative h-screen border-yellow-500 flex xs:border-l-10 sm:border-l-10 md:border-l-14 lg:border-l-16 lg:items-center" id="intro"> <h1 class="text-gray-900 font-black leading-negative xs:py-16 xs:px-5 sm:py-5 sm:px-5 md:py-16 md:px-10 lg:p-10 xs:text-7-5xl sm:text-8xl md:text-11xl lg:text-12xl xl:text-14xl">Gabriel<br/>Pires</h1> <button id="btn-start" class="fixed bottom-0 w-20 h-16 outline-none" move-to="bytes"></button> </section> <section id="bytes" class="bg-gray-900 w-full flex flex-col justify-center"> <article id="bytesMosaic" class="bytesMosaic w-full flex flex-wrap font-thin text-yellow-200 text-2xl leading-7"> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-yellow-500 mosaic-item flex items-center"> <h2 class="mosaic-item-content p-5 text-gray-900 font-black text-4xl leading-9 p-10">Bytes<br/>about<br/>me</h2> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-900 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Senior Software<br/>Engineer</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6"> <img class="filter-grayscale hover:filter-sepia" src="images/gallery/technology.jpg" alt=""> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-700 mosaic-item flex items-center"> <p class="mosaic-item-content p-5"><b>35</b> years old</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-800 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Born and<br/>raised in <b>Brazil</b></p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-600 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Living in<br/><b>The Netherlands</b></p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-900 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">First line<br/>of code at<br/><b>12</b> years old</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6"> <img class="filter-grayscale hover:filter-sepia" src="images/gallery/bike.jpg" alt=""> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-700 mosaic-item flex items-center"> <p class="mosaic-item-content p-5"><b>17+</b> years<br/>of experience</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-800 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Working with<br/><b>digital ads</b>, games,<br/>health and <b>retail</b></p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-600 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Focus on<br/><b>Backend</b></p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-900 mosaic-item flex items-center"> <p class="mosaic-item-content p-5"><b>Graph Databases</b><br/>Enthusiast</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6"> <img class="filter-grayscale hover:filter-sepia" src="images/gallery/rocks.jpg" alt=""> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-700 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Passionate<br/>about <b>automation</b></p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-800 mosaic-item flex items-center"> <p class="mosaic-item-content p-5 ">Video games<br/>lover <span id="btnAlien" class="filter-sepia cursor-pointer">👾</span></p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6"> <img class="filter-grayscale hover:filter-sepia" src="images/gallery/family.jpg" alt=""> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-900 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Father</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-800 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Energetic</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-600 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Communicative</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6"> <img class="filter-grayscale hover:filter-sepia" src="images/gallery/games.jpg" alt=""> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-700 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Fast paced</p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-900 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Avid for<br/><b>Photography</b><br/>and <b>Design</b> </p> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6"> <img class="filter-grayscale hover:filter-sepia" src="images/gallery/grafitti.jpg" alt=""> </div> <div class="xs:w-1/2 sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/6 bg-gray-600 mosaic-item flex items-center"> <p class="mosaic-item-content p-5">Maker</p> </div> </article> </section> <section id="experience" class="bg-gray-800 flex justify-center xs:p-5 sm:p-5 md:p-10 lg:py-10 lg:px-0"> <article class="w-full max-w-5xl font-light text-gray-200 text-lg"> <h2 class="w-auto on inline-block element px-6 py-2 mb-10 font-sans font-black bg-yellow-500 text-gray-800 leading-none tracking-widest xs:text-3xl sm:text-3xl md:text-5xl lg:text-5xl">Experiences</h2> <div class="flex justify-between mb-5 xs:flex-col sm:flex-col md:flex-row lg:flex-row"> <div class="pr-10 xs:w-1/1 sm:w-1/1 md:w-4/12 lg:w-3/12"> <h3 class="font-bold text-3xl md:text-right lg:text-right">Helloprint</h3> <p class="hidden text-yellow-200 md:block lg:block lg:text-xs md:text-right lg:text-right">September 2018 - Current</p> </div> <div class="border-b border-yellow-200 pb-5 xs:w-1/1 xs:w-1/1 md:w-8/12 lg:w-9/12"> <h4 class="font-bold text-gray-100 text-3xl xs:text-2xl sm:text-2xl xs:pb-0 sm:pb-1 md:pb-2 lg:pb-2">Senior Backend Engineer</h4> <small class="block text-yellow-200 pb-2 md:hidden lg:hidden sm:text-3xl">September 2018 - Current</small> <p class="mb-2 text-lg">Member of the Platform Team, a high scable system for e-commerce, using micro services with CQRS. Responsible for the product catalog migration and product catalog management system, more than 10 millions of skus and 500gb of data.</p> <p class="my-2 text-lg"><b class="text-yellow-200">Stack:</b> PHP, Java, Postgres, NEO4J and Kafka.</p> <div class="text-yellow-500 flex justfy-start items-center"> <img class="w-4 inline" src="svg/location.svg" alt="City that I worked"> <small class="pl-3 xs:text-base sm:text-base md:text-base lg:text-sm ">Rotterdam, The Netherlads</small> </div> <div class="text-yellow-500 flex justfy-start items-center"> <a href="https://helloprint.com" target="_blank"> <img class="w-4 inline" src="svg/link.svg" alt="Link to the website"> <small class="pl-2 xs:text-base sm:text-base md:text-base lg:text-sm ">https://helloprint.com</small> </a> </div> </div> </div> <div class="flex justify-between mb-5 xs:flex-col sm:flex-col md:flex-row lg:flex-row"> <div class="pr-10 xs:w-1/1 sm:w-1/1 md:w-4/12 lg:w-3/12"> <h3 class="font-bold text-3xl md:text-right lg:text-right">FSB</h3> <p class="hidden text-yellow-200 md:block lg:block lg:text-xs md:text-right lg:text-right">May 2017 - August 2018</p> </div> <div class="border-b border-yellow-200 pb-5 xs:w-1/1 xs:w-1/1 md:w-8/12 lg:w-9/12"> <h4 class="font-bold text-gray-100 text-3xl xs:text-2xl sm:text-2xl xs:pb-0 sm:pb-1 md:pb-2 lg:pb-2">Technology and Digital Transformation Director</h4> <small class="block text-yellow-200 pb-2 md:hidden lg:hidden sm:text-3xl">MAY 2017 - AGO 2018</small> <p class="mb-2 text-lg">Responsible for the digital production department. Developing end-to-end solutions for all clients.</p> <p class="mb-2 text-lg">Restructure all the partnership with provider companies and created well-defined process from briefing to delivery</p> <p class="mb-2 text-lg">Using several different languages, frameworks and databases to accomplish the goals.</p> <p class="my-2 text-lg"><b class="text-yellow-200">Clients:</b> Ipiranga, Souza Cruz, Arteris, Intercement and others.</p> <p class="mb-2 text-lg"><b class="text-yellow-200">Stack:</b> ASP.NET C# 4.0, PHP, NodeJS, Python, MySQL, SQLServer, HTML, CSS and Javascript</p> <div class="text-yellow-500 flex justfy-start items-center"> <img class="w-4 inline" src="svg/location.svg" alt="City that I worked"> <small class="pl-3 xs:text-base sm:text-base md:text-base lg:text-sm">São Paulo, Brazil</small> </div> <div class="text-yellow-500 flex justfy-start items-center"> <a href="http://fsb.com.br" target="_blank"> <img class="w-4 inline" src="svg/link.svg" alt="Link to the website"> <small class="pl-2 xs:text-base sm:text-base md:text-base lg:text-sm">http://fsb.com.br</small> </a> </div> </div> </div> <div class="flex justify-between mb-5 xs:flex-col sm:flex-col md:flex-row lg:flex-row"> <div class="pr-10 xs:w-1/1 sm:w-1/1 md:w-4/12 lg:w-3/12"> <h3 class="font-bold text-3xl md:text-right lg:text-right">Isobar</h3> <p class="hidden text-yellow-200 md:block lg:block lg:text-xs md:text-right lg:text-right">May 2014 - May 2017</p> </div> <div class="border-b border-yellow-200 pb-5 xs:w-1/1 xs:w-1/1 md:w-8/12 lg:w-9/12"> <h4 class="font-bold text-gray-100 text-3xl xs:text-2xl sm:text-2xl xs:pb-0 sm:pb-1 md:pb-2 lg:pb-2">Technology Director</h4> <small class="block text-yellow-200 pb-2 md:hidden lg:hidden sm:text-3xl">May 2014 - May 2017</small> <p class="mb-2 text-lg">Responsible for bringing new technologies for a 10+ team, organizing financial budget, recruitment, deadlines and control thirdparty partners.</p> <p class="mb-2 text-lg">Delivered 30+ projects and was involved in more than 10 pitches for new accounts.</p> <p class="my-2 text-lg"><b class="text-yellow-200">Clients:</b> Samsung, Fiat, Jeep, Nivea, SKY, UnderArmor, Brasil Kirin and others.</p> <p class="mb-2 text-lg"><b class="text-yellow-200">Stack:</b> ASP.NET C# 4.0, PHP, NodeJS,Python, MySQL, SQLServer, HTML, CSS and Javascript</p> <div class="text-yellow-500 flex justfy-start items-center"> <img class="w-4 inline" src="svg/location.svg" alt="City that I worked"> <small class="pl-3 xs:text-base sm:text-base md:text-base lg:text-sm">São Paulo, Brazil</small> </div> <div class="text-yellow-500 flex justfy-start items-center"> <a href="http://isobar.com" target="_blank"> <img class="w-4 inline" src="svg/link.svg" alt="Link to the website"> <small class="pl-2 xs:text-base sm:text-base md:text-base lg:text-sm">http://isobar.com</small> </a> </div> </div> </div> <div class="flex justify-between mb-5 xs:flex-col sm:flex-col md:flex-row lg:flex-row"> <div class="pr-10 xs:w-1/1 sm:w-1/1 md:w-4/12 lg:w-3/12"> <h3 class="font-bold text-3xl md:text-right lg:text-right">CURTIX</h3> <small class="block text-base md:text-right lg:text-right">now Vurdere</small> <p class="hidden text-yellow-200 md:block lg:block lg:text-xs md:text-right lg:text-right">August 2011 - August 2013</p> </div> <div class="border-b border-yellow-200 pb-5 xs:w-1/1 xs:w-1/1 md:w-8/12 lg:w-9/12"> <h4 class="font-bold text-gray-100 text-3xl xs:text-2xl sm:text-2xl xs:pb-0 sm:pb-1 md:pb-2 lg:pb-2">Chief Technology Officer</h4> <small class="block text-yellow-200 pb-2 md:hidden lg:hidden sm:text-3xl">August 2011 - August 2013</small> <p class="mb-2 text-lg">From prototyping to release I was responsible for architecture and implementation of high scale systems/products. Working with big data and integrating Social Network APIs.</p> <p class="mb-2 text-lg"> <ul class="text-base list-disc pl-10 pb-2"> <li>Create highly scalable application with 2mm page view’s per day;</li> <li>Working directly with e-commerces to provide trend products and recommendations;</li> <li>Winner of Facebook Live Studio 2012 for best platform integration;</li> <li>A B tests to improve the conversion of trend products;</li> <li>Working with one of the biggest e-commerce’s in Brazil called <a class="text-yellow-500 hover:text-yellow-200 hover:underline" target="_blank" href="https://livrariasaraiva.com.br">Livraria Saraiva.</a></li> </ul> </p> <p class="my-2 text-lg"><b class="text-yellow-200">Stack:</b> Python, CouchDB, ElasticSearch, MySQL, Hadoop, PHP, Javascript, and Azure.</p> <div class="text-yellow-500 flex justfy-start items-center"> <img class="w-4 inline" src="svg/location.svg" alt="City that I worked"> <small class="pl-3 xs:text-base sm:text-base md:text-base lg:text-sm">São Paulo, Brazil</small> </div> <div class="text-yellow-500 flex justfy-start items-center"> <a href="https://www.vurdere.com" target="_blank"> <img class="w-4 inline" src="svg/link.svg" alt="Link to the website"> <small class="pl-2 xs:text-base sm:text-base md:text-base lg:text-sm">https://www.vurdere.com</small> </a> </div> </div> </div> <div class="w-full flex items-center justify-end mt-5"> <a class="transition duration-500 ease-in-out transform hover:scale-105 py-2 px-10 bg-yellow-500 text-gray-800 font-black text-1xl text-center rounded-sm hover:bg-yellow-200" href="https://linkedin.com/in/gabrielpires" target="_blank"> + Experiences </a> </div> </article> </section> <section id="skills" class="bg-gray-900 flex justify-center xs:p-5 sm:p-5 md:p-10 lg:py-10 lg:px-0"> <article class="w-full max-w-5xl font-light text-gray-200 text-lg"> <h2 class="w-auto on inline-block element px-6 py-2 mb-10 font-sans font-black bg-yellow-500 text-gray-900 leading-none tracking-widest xs:text-3xl sm:text-3xl md:text-5xl lg:text-5xl">Skills</h2> <div id="skills-container"> <ul class="flex flex-wrap text-lg mb-5"><li class="w-1/8 bg-yellow-300 text-gray-900 font-bold rounded-lg pl-2 pr-4 py-1 m-1">Technology: </li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">PHP</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">C# ASP.NET</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Python</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">NodeJS</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Javascript</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">HTML</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">CSS</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">MySQL</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Postgres</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">NEO4J</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">MsSQL</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">MongoDB</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Elastic Search</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Cypher Lang</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">GIT</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Docker</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Software Architecture</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Data Modeling</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">MVC</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">CQRS</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">Kafka</li><li class="w-1/8 bg-gray-600 rounded-md px-3 py-1 m-1">RabbitMQ</li></ul> </div> </article> </section> <section id="find-me" class="bg-gray-800 flex justify-center"> <article class="w-full font-light text-gray-200 text-lg"> <ul class="flex flex-wrap justify-center w-full text-gray-700 sm:text-4xl lg:text-2xl"> <li class="bg-gray-700 hover:opacity-75 xs:w-1/3 sm:w-1/3 md:w-1/6 lg:w-1/6 xl:w-1/6"> <a class="" href="https://linkedin.com/in/gabrielpires" target="_blank"> <img class="w-full xs:p-10 sm:p-10 md:p-10 lg:p-10 xl:p-20" src="svg/linkedin.svg" alt="Link to Linkedin"> </a> </li> <li class="bg-gray-600 hover:opacity-75 xs:w-1/3 sm:w-1/3 md:w-1/6 lg:w-1/6 xl:w-1/6"> <a class="flex justfy-center items-center" href="https://medium.com/@gabrielpires" target="_blank"> <img class="w-full xs:p-10 sm:p-10 md:p-10 lg:p-10 xl:p-20" src="svg/medium.svg" alt="Link to Medium"> </a> </li> <li class="bg-gray-700 hover:opacity-75 xs:w-1/3 sm:w-1/3 md:w-1/6 lg:w-1/6 xl:w-1/6"> <a class="flex justfy-start items-center" href="https://github.com/gabrielpires" target="_blank"> <img class="w-full xs:p-10 sm:p-10 md:p-10 lg:p-10 xl:p-20" src="svg/github.svg" alt="Link to Github"> </a> </li> <li class="bg-gray-600 hover:opacity-75 xs:w-1/3 sm:w-1/3 md:w-1/6 lg:w-1/6 xl:w-1/6"> <a class="flex justfy-start items-center" href="https://twitter.com/gabrielpires" target="_blank"> <img class="w-full xs:p-10 sm:p-10 md:p-10 lg:p-10 xl:p-20" src="svg/twitter.svg" alt="Link to Twitter"> </a> </li> <li class="bg-gray-700 hover:opacity-75 xs:w-1/3 sm:w-1/3 md:w-1/6 lg:w-1/6 xl:w-1/6"> <a class="flex justfy-start items-center" href="https://stackoverflow.com/users/1664681/gabriel-pires" target="_blank"> <img class="w-full xs:p-10 sm:p-10 md:p-10 lg:p-10 xl:p-20" src="svg/stackoverflow.svg" alt="Link to Stackoverflow"> </a> </li> <li class="bg-gray-600 hover:opacity-75 xs:w-1/3 sm:w-1/3 md:w-1/6 lg:w-1/6 xl:w-1/6"> <a class="flex justfy-start items-center" href="mailto:contact@gabrielpires.com.br"> <img class="w-full xs:p-10 sm:p-10 md:p-10 lg:p-10 xl:p-20" src="svg/email.svg" alt="Link to E-mail"> </a> </li> </ul> </article> </section> <section id="credits-love" class="bg-gray-800 flex justify-center py-10"> <article class="block max-w-3xl sm:text-4xl lg:text-base text-gray-200 font-thin bg-gray-700 p-10 m-10"> <h2 class="w-auto on element px-6 py-2 mb-4 font-sans font-black text-gray-900 bg-yellow-500 inline-block leading-none tracking-widest sm:text-6xl lg:text-lg">Credits and love</h2> <p class="pt-2 mb-2">Carlos Zinato, my friend, who helped me with thoughts about the design. Which I made by myself 😁</p> <p class="py-2 mb-2">Thanks for the <a class="text-yellow-500 hover:text-yellow-200 hover:underline" href="https://tailwindcss.com/" target="_blank">Tailwindcss</a> for the amazing CSS framework which I use to build the website. Also big shout for the Tailwindcss welcoming and supportive community at discord 📢</p> <p class="py-2 mb-2">Icons used from <a class="text-yellow-500 hover:text-yellow-200 hover:underline" href="https://www.flaticon.com/" title="Flaticon" target="_blank"> www.flaticon.com</a>, especially thanks to <a class="text-yellow-500 hover:text-yellow-200 hover:underline" href="https://www.flaticon.com/authors/freepik" title="Freepik" target="_blank">Freepik team</a>, <a class="text-yellow-500 hover:text-yellow-200 hover:underline" href="https://www.flaticon.com/authors/pixel-perfect " title="Pixel perfect team" target="_blank">Pixel perfect team</a> and <a class="text-yellow-500 hover:text-yellow-200 hover:underline" href="https://www.flaticon.com/authors/google" title="Google Teamoogle" target="_blank">Google team</a> 👍</p> </article> </section> </main> <footer class="bg-gray-200 flex justify-start font-thin text-sm p-5 flex flex-row justify-between items-center"> <p>Design, content and code by me. After all this is my website.</p> <button id="btn-go-up" class="hover:bg-gray-800 rounded-md" move-to="opening"><img class="h-5 p-1 m-1" src="svg/arrow_up_yellow.svg"/></button> </footer> <div id="modal" class="hidden fixed z-40 top-0 left-0 w-full h-screen modal-background flex flex-row justify-center items-center"> <button id="btn-close-modal" class="absolute top-0 right-0 m-4 rounded-md font-mono text-2xl text-gray-100 bg-gray-800 px-4 px-1">x</button> <iframe id="youtubePlayer" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>