-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 10.4 KB
/
index.html
1
<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"><meta name="theme-color" content="#511450"><title>Felipe Bernardes</title><meta name="description" content="Felipe Bernardes' Website"><meta property="og:image" content="http://felipebernardes.github.io/img/og-19.jpg"><meta property="og:image:type" content="image/jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta property="og:url" content="https://felipebernardes.github.io"><meta property="og:title" content="Felipe Bernardes"><meta property="og:site_name" content="Felipe Bernardes"><meta property="og:description" content="Hello! this is my site."><link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.64001a37.png"><link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.87af7f11.png"><link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.25525ffa.png"><link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.11b0cdf6.png"><link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.9da54a24.png"><link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.de54b054.png"><link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.bb088ee4.png"><link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.67b67671.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.31f85769.png"><link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.d5ec5ee6.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.2e53e426.png"><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.0a2c5311.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.5b943774.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/ms-icon-144x144.705dd756.png"><link defer href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Nunito+Sans:400,400i,700&display=swap" rel="stylesheet"><link type="text/css" rel="stylesheet" href="/index.5b120eaa.css"></head><body class="body index"> <div class="frame"></div> <header class="header"> <div class="header__hello"> <h1 class="header__title">Hi! I'm <span class="header__title__name">Felipe Bernardes</span></h1> <p class="header__subtitle"><em>... and I do a lot of stuff</em></p> </div> <section class="header__pictures"> <ul class="header__pictures__list"> <li class="header__pictures__item"> <img src="/brjs.0fe1dd0d.jpg" alt="Felipe speaking at BrazilJS conference"> </li> <li class="header__pictures__item"> <img src="/guitar.2b0ea449.jpg" alt="Felipe playing guitar"> </li> <li class="header__pictures__item"> <img src="/laptop.d8c58305.jpg" alt="Felipe in conference with himself"> </li> <li class="header__pictures__item"> <img src="/shadow.e48e00f4.jpg" alt="Felipe's experimental photography of it's own shadow"> </li> </ul> </section> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"> <a class="nav__link" href="#about">about</a> </li> <li class="nav__item"> <a class="nav__link" href="#work">work</a> </li> <li class="nav__item"> <a class="nav__link" href="#contact">contact</a> </li> </ul> </nav> </header> <section id="about" class="about"> <h2 class="section-title">about</h2> <section class="about__main"> <p class="about__text"> 👋 Hello! I'm Felipe Bernardes, a <strong>Front End Specialist</strong> with 10+ years of experience in Sofware Development and also a solid background of full-stack development. <a target="_blank" href="https://felipebernardes.github.io/felipe-bernardes-resume.pdf">(full resume.pdf)</a> </p> <p class="about__text"> I enjoy <a href="https://unsplash.com/@felipebernardes">photography</a>, creating music playlists, reading about architecture, helping people learn to code, designing user interfaces, and building apps. I also play guitar and drums (<em>even though I'm not so skilled</em>). </p> <p class="about__text"> What drives my work is to <strong>build a better web for people</strong> -- by sharing knowledge through <a href="https://speakerdeck.com/felipebernardes/">talks</a>, <a href="https://medium.com/sorocabacss">organizing tech communities</a>, and specially by building things that positively impact lives. </p> </section> <section class="about__passions"> <p class="about__passions__text about__passions__text--large">I'm passionate about...</p> <p class="about__passions__text about__passions__text--medium">Knowledge sharing</p> <p class="about__passions__text about__passions__text--large">JavaScript + CSS</p> <p class="about__passions__text about__passions__text--small">Composing Code/Music/Photography</p> <p class="about__passions__text about__passions__text--medium">remote work! :-)</p> <p class="about__passions__text about__passions__text--small">pixel-perfect implementations</p> </section> </section> <section id="work" class="work"> <h2 class="grid-title section-title">work</h2> <section class="grid-experience work__section"> <h3 class="work__section__title">experience</h3> <ul class="work__list"> <li class="work__item"> <h4 class="work__item__title"><a href="https://trychameleon.com/">Chameleon</a></h4> <p class="work__item__text">2021 - current</p> <p class="work__item__text">Sr Front End Developer</p> </li> <li class="work__item"> <h4 class="work__item__title"><a href="https://www.toptal.com/resume/felipe-bernardes">Toptal</a></h4> <p class="work__item__text">2018 - 2021</p> <p class="work__item__text">Sr Front End Developer</p> </li> <li class="work__item"> <h4 class="work__item__title"><a href="https://www.babycenter.com/">BabyCenter</a></h4> <p class="work__item__text">2018 - 2021</p> <p class="work__item__text">Sr Front End Developer</p> </li> <li class="work__item"> <h4 class="work__item__title"><a href="https://translucentcomputing.com/">Translucent Computing</a></h4> <p class="work__item__text">2017 - 2018</p> <p class="work__item__text">Sr Front End Developer</p> </li> <li class="work__item"> <h4 class="work__item__title"><a href="https://tegra.com.br/">Tegra</a></h4> <p class="work__item__text">2015 - 2017</p> <p class="work__item__text">Mid Full Stack Developer</p> </li> <li class="work__item"> <h4 class="work__item__title"><a href="https://www.going2.com.br/">Going2 Mobile</a></h4> <p class="work__item__text">2014 - 2015</p> <p class="work__item__text">Jr Front End Developer</p> </li> </ul> </section> <section class="grid-awards work__section"> <h3 class="work__section__title">awards & recognitions</h3> <ul class="work__list"> <li class="work__item"> <p class="work__item__text">- <a href="https://helpbar.ai/">HelpBar.ai</a> featured in top 5 Product of The Day @ <a href="https://www.linkedin.com/posts/bernardesflp_producthunt-makersgonnamake-startups-activity-7123735411192938496-F5s0">Product Hunt</a></p> </li> <li class="work__item"> <p class="work__item__text">- Top 3% best freelancers @ <a href="https://toptal.com/">Toptal network</a></p> </li> <li class="work__item"> <p class="work__item__text">- 1st Place @ <a href="https://www.gs1br.org/hackathon/">GS1 Brazil Hackathon</a> '16</p> </li> <li class="work__item"> <p class="work__item__text">- Awarded in <a href="https://cisco.com/">Cisco</a> challenge @ <a href="https://hackzurich.com/">HackZurich Hackathon</a> '16</p> </li> </ul> </section> <section class="grid-talks work__section"> <h3 class="work__section__title">talks</h3> <ul class="work__list"> <li class="work__item"> <p class="work__item__text"><a href="https://speakerdeck.com/felipebernardes/get-started-with-pwas">- Gardening for Communities (Toptal LATAM Summit '20)</a></p> </li> <li class="work__item"> <p class="work__item__text"><a href="https://speakerdeck.com/felipebernardes/an-animated-poem-built-with-css-drawings-and-animations">- An Animated Poem, Built with CSS (Codemotion Berlin '19)</a></p> </li> <li class="work__item"> <p class="work__item__text"><a href="https://speakerdeck.com/felipebernardes/vr">- Immersive Journalism (Google DevFest London '18)</a></p> </li> </ul> </section> <section class="grid-info work__section"> <h3 class="work__section__title">further info</h3> <ul class="work__list work__list--align-evenly"> <li class="work__item"> <p class="work__item__text"><a href="https://www.linkedin.com/in/bernardesflp">LinkedIn</a></p> </li> <li class="work__item"> <p class="work__item__text"><a href="https://felipebernardes.github.io/felipe-bernardes-resume.pdf">Resume (pdf)</a></p> </li> <li class="work__item"> <p class="work__item__text"><a href="https://codepen.io/felipebernardes/">CodePen</a></p> </li> <li class="work__item"> <p class="work__item__text"><a href="https://github.com/felipebernardes">GitHub</a></p> </li> <li class="work__item"> <p class="work__item__text"><a href="https://speakerdeck.com/felipebernardes/">SpeakerDeck</a></p> </li> <li class="work__item"> <p class="work__item__text"><a class="nav__link" href="https://unsplash.com/@felipebernardes">photography</a></p> </li> <li class="work__item"> <p class="work__item__text"><a class="nav__link" href="https://felipebernardes.substack.com/">tldr (blog)</a></p> </li> <li class="work__item"> <p class="work__item__text"><a href="https://www.toptal.com/resume/felipe-bernardes">Toptal</a></p> </li> </ul> </section> </section> <section id="contact" class="contact"> <h2 class="grid-title section-title">contact</h2> <div class="grid-subtitle section-reach-out"> <p>Feel free to reach out to talk about:</p> <ul> <li>- (free) career/technical mentorship;</li> <li>- music, photography, architeture;</li> <li>- tech meetups & conferences;</li> <li>- anything else!</li> </ul> </div> <ul class="contact__list grid-list"> <li class="contact__item"> <a class="contact__link" href="mailto:[email protected]">📩 [email protected]</a> </li> <li class="contact__item"> <a class="contact__link" href="https://www.linkedin.com/in/bernardesflp">🔗 LinkedIn</a> </li> </ul> <div class="contact__img-container grid-img"> <img src="/coffee.97c781d0.jpg" alt="Smiling Felipe picture"> </div> </section> <footer class="footer"> <p class="footer__credits">coded, designed & written by felipe bernardes.</p> <blockquote class="footer__quote" cite="https://www.huxley.net/bnw/four.html"> <p>“The logic of dreams is superior to the one we exercise while awake. In dreams the mind at last finds its courage: it dares what we do not dare.” — <a href="http://www.eteladnan.com/">Etel Adnan</a></p> </blockquote> </footer> </body></html>