Othneil Drew - Senior Software Engineer & Pilot

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Houston-Based Full Stack Web Developer focusing on creating bold, unique, and amazing experiences that help 10x your business' growth."> <meta name="keywords" content="Houston, Full Stack Developer, Front-End Web Developer, Aviation Developer, Back-End Developer, JavaScript, PHP, Laravel, React, Bootstrap 4, MySQL, WordPress, Othneil Drew"> <meta name="author" content="Othneil I Drew">  <link rel="shortcut icon" type="image/png" href="images/airplane.png"> <link rel="icon" type="image/png" href="images/airplane.png"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="stylesheet" href="js/plugins/fakeloader/fakeLoader.css"> <link rel="stylesheet" href="js/plugins/slick/slick.css"> <link rel="stylesheet" href="js/plugins/slick/slick-theme.css"> <link rel="stylesheet" href="js/plugins/animate/animate.min.css"> <link rel="stylesheet" href="style.css"> <title>Othneil Drew - Senior Software Engineer & Pilot</title> </head> <body> <div id="fakeloader"></div>  <div id="menu" class="overlay-menu"> <a href="javascript:void(0)" class="close-btn" id="close-menu-btn">×</a> <div class="menu-links"> <a class="menu-link" href="#latest-work">Previous Work</a> <a class="menu-link" href="#about">About</a> <a class="menu-link" href="#skills">Skills</a> <a class="menu-link" href="#testimonials">Testimonials</a> <a class="menu-link" href="#contact">Contact Me</a> <a class="menu-link" href="./assets/resumes/OthneilDrewWebDeveloperResume.pdf" target="_blank">Resume</a> </div> </div>   <main id="page"> <div class="section d-flex" id="home"> <nav class="navbar align-items-start navbar-dark mt-3 py-2 wow bounceInDown" id="top-navbar" data-wow-delay="1.2s"> <div class="container"> <a href="https://www.othneildrew.com" class="navbar-brand bad-script-font">Othneil Drew</a> <button class="navbar-toggler rounded-0" id="menu-btn" type="button"> <small>MENU</small> <i class="material-icons">clear_all</i> </button> </div> </nav> <div class="jumbotron bg-transparent rounded-0 justify-content-center align-self-center"> <div class="container wow bounceInLeft" data-wow-delay="1.2s"> <h1 class="title">Senior Software Engineer | UI/UX Pro</h1> <p class="subtitle">Focusing on creating <strong>bold</strong>, <i>unique</i>, and AmAzInG experiences<br /> that help 10x your business' growth</p> <div class="flex-with-gap"> <a class="btn custom-btn btn-CTA" href="#contact" role="button">Hire Me</a> <a class="btn custom-btn btn-CTA-secondary" href="./assets/resumes/OthneilDrewWebDeveloperResume.pdf" target="_blank" role="button">Resume</a> </div> </div> </div> <ul class="nav social-icons wow bounceInUp" data-wow-delay="1.2s"> <li class="nav-item"> <a class="nav-link text-white" href="https://github.com/othneildrew" target="_blank"><i class="fab fa-github"></i></a> </li> <li class="nav-item"> <a class="nav-link text-white" href="https://linkedin.com/in/othneildrew" target="_blank"><i class="fab fa-linkedin"></i></a> </li> </ul> </div>   <div class="section" id="latest-work"> <div class="container"> <h2 class="section-title text-dark-blue">Previous Work</h2> <div class="row my-5 py-5"> <div class="col-12 col-lg-7"> <img class="img-fluid border shadow" src="./images/projects/alphaspace-launch.gif" alt="Movie Flex Screenshot"> </div> <div class="col-12 col-lg-5"> <h3 class="project-title mt-3 mt-lg-0">Alpha Space Launch</h3> <p>An unreleased website where customers can send class rings and other paraphernalia to space and receive a certificate of flight, photos, plaque and other items. (Canceled by client for lack of market).</p> <ul> <li>Laravel</li> <li>HTML / CSS / JavaScript</li> <li>Stripe API</li> </ul> <ul class="list-inline"> <li class="list-inline-item mt-3 md-lg-0 not-allowed"> <p><i class="fas fa-eye-slash"></i> Source private</p> </li> </ul> </div> </div> <div class="row my-5 py-5"> <div class="col-12 col-lg-7 order-lg-2"> <img class="img-fluid border shadow" src="./images/projects/oso-candle.gif" alt="Phrase Hunter Screenshot"> </div> <div class="col-12 col-lg-5"> <h3 class="project-title mt-3 mt-lg-0">OSO Candle</h3> <p>Candle subscription website where users choose their favorite scent and candles get shipped to them. Basic machine learning algorithm used to classify and recommend scents based on a scent profile.</p> <ul> <li>Laravel</li> <li>HTML / CSS / Javascript</li> <li>Stripe Checkout API</li> <li>Machine Learning</li> </ul> <ul class="list-inline"> <li class="list-inline-item mt-3 md-lg-0 not-allowed"> <p><i class="fas fa-eye-slash"></i> Source private</p> </li> </ul> </div> </div> <div class="row my-5 py-5"> <div class="col-12 col-lg-7"> <img class="img-fluid border shadow" src="./images/projects/spp.gif" alt="Student Pilot Portal Screenshot"> </div> <div class="col-12 col-lg-5"> <h3 class="project-title mt-3 mt-lg-0">Student Pilot Portal</h3> <p>An e-learning platform where anyone can learn to fly airplanes.</p> <ul> <li>Laravel 10 Backend (API) / NextJS Frontend</li> <li>Material UI design guidelines</li> <li>Canvas rendering for interactive simulators and learning tools</li> <li>Webpack, ES6+, Object-oriented programming</li> <li>MySQL relational database architecture (using normalization)</li> </ul> <ul class="list-inline"> <li class="list-inline-item mt-3 md-lg-0 not-allowed"> <p><i class="fas fa-eye-slash"></i> Source private</p> </li> </ul> </div> </div> </div> </div>   <div class="section pb-5" id="about"> <div class="container"> <h2 class="section-title mb-4 text-center text-white">About Othneil</h2> <div class="row"> <div class="col-12 mb-4 mb-md-0 col-md-4"> <img class="img-fluid" id="portrait" src="./images/portrait.jpg" alt="Othneil Drew Portrait"> </div> <div class="col-12 col-md-8" id="bio-container"> <p class="lead"><strong>Othneil Drew</strong> is an extremely creative individual with a strong background in UI/UX design, product lifecycle management and strategic planning/marketing.</p> <small><i>Yes, I'm going to speak about myself in the third person :)</i></small> <p>He has successfully lead high-performing teams and improve frontend workflow as a team lead — allowing the team to release key updates to customers more frequently.</p> <p>He is the founder of Student Pilot Portal, an online platform that enables aspiring aviators to learn about aviation, share their passion for flight, and connect with others worldwide.</p> <p>With 900+ hours of volunteered service to the aviation community, he serves as an advocate for promoting youths education in the industry and is actively involved with many organizations like the Organization of Black Aerospace Professionals, Virgin Islands Chapter Tuskegee Airmen, Inc., U.S. Dream Academy, and the United States Coast Guard Auxiliary.</p>  <p>Drew currently works as a Software Engineer in Houston Texas. His other interests are flight simulation, photography, gaming, guitar, and the show NCIS: Los Angeles.</p> </div> <div class="col-8 offset-2"> <div class="video-wrapper my-5"> <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/wI_IxwJERPc?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> </div> <h3 class="section-title mt-0 mb-4 text-center text-white">Skills</h3> <div class="row mt-5" id="skills"> <div class="col-12 col-md-6 col-lg-4"> <div class="skill-card my-3"> <p class="text-center"><i class="fas fa-pencil-ruler"></i> Toolkit</p> <p class="mt-4 mb-0 text-light-green">Workflow Tools</p> <ul class="m-0"> <li>Jira</li> <li>Git (Git Flow)</li> <li>codemods (jscodeshift)</li> <li>Unit Testing </li> <li>AWS</li> <li>GitHub</li> <li>NPM</li> <li>Webpack</li> <li>Babel</li> <li>Gulp</li> <li>Bitbucket</li> <li>SCRUM / Agile Methodologies</li> <li>Chrome Developer Tools</li> <li>Asana</li> </ul> <p class="mt-4 mb-0 text-light-green">User research</p> <ul class="mt-0"> <li>UI/UX design</li> <li>Wireframing</li> <li>Prototyping</li> <li>Heatmaps & Web Analytics</li> <li>Lighthouse Analytics</li> <li>User Stories</li> <li>Datadog</li> <li>Hotjar</li> </ul> <p class="mt-4 mb-0 text-light-green">Design Tools</p> <ul class="m-0"> <li>Figma</li> <li>Affinity Designer</li> <li>GIMP</li> <li>Fusion 360</li> <li>Moqups</li> <li>Adobe Lightroom</li> <li>Blender (learning)</li> </ul> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="skill-card my-3"> <p class="text-center"><i class="fas fa-code"></i> Languages, Libraries & Frameworks</p> <p class="mt-2 mb-0 text-light-green">Front End</p> <ul class="m-0"> <li>React</li> <li>React Native</li> <li>Next.js</li> <li>Typescript</li> <li>Redux & RTK Query</li> <li>Javascript</li> <li>Pixi.js</li> <li>Cesium.js</li> <li>Electron</li> <li>Tauri</li> <li>Semantic UI</li> <li>Tailwind CSS</li> <li>Bulma CSS</li> <li>HTMX</li> <li>HTML5</li> <li>SASS/SCSS</li> <li>LESS</li> <li>CSS3</li> <li>JQuery</li> <li>Bootstrap</li> <li>WordPress</li> </ul> <p class="mt-4 mb-0 text-light-green">Back End</p> <ul class="m-0"> <li>REST / JSON</li> <li>MySQL</li> <li>PHP</li> <li>Apache</li> <li>Laravel</li> <li>Nginx</li> <li>Node.js</li> <li>Python</li> <li>Express</li> <li>Sequelize</li> <li>MongoDB</li> <li>Redis</li> <li>Linux</li> <li>Nginx</li> <li>Apache</li> </ul> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="skill-card my-3"> <p class="text-center"><i class="fas fa-plane-departure"></i> Other</p> <p class="mt-4 mb-0 text-light-green">Communication Protocols</p> <ul class="mt-2"> <li>HTTP/S</li> <li>UDP</li> <li>TCP/IP (Sockets)</li> <li>FTP</li> <li>WebRTC</li> <li>SSH</li> <li>Serial</li> <li>I2C</li> </ul> <p class="mt-4 mb-0 text-light-green">Other Tech & Skills</p> <ul class="mt-2"> <li>Embedded Systems</li> <li>Microservice Architecture</li> <li>Async/Await/Promises</li> <li>OpenGraph Tools</li> <li>Raspberry PI</li> <li>Arduino</li> <li>ESP32/8266</li> <li>MongoDB</li> <li>CI/CD & Code Automation</li> <li>ITAR & 508 Compliance</li> <li>Database Design & Normalization</li> <li>Data Scraping</li> <li>General Electronics (novice)</li> <li>Expert "Googler"</li> </ul> </div> </div> </div> </div> </div>   <div class="section" id="testimonials"> <div class="container"> <h2 class="section-title pb-5 text-dark-blue font-weight-bold text-center">Why Hire Me</h2> <div class="row my-5"> <div class="col-12 my-3 col-md-4 text-center"> <i class="why-work-icons wow pulse fas fa-heart" data-wow-delay="2s"></i> <p class="lead">Passionate</p> <p>I enjoy contributing to projects that make a difference. I enjoy helping others create success.</p> </div> <div class="col-12 my-3 col-md-4 text-center"> <i class="why-work-icons wow pulse fas fa-lightbulb" data-wow-delay="2s"></i> <p class="lead">Problem Solver</p> <p>At the heart of every successful business is a problem solver. I thrive under pressure and in fast-paced environments.</p> </div> <div class="col-12 my-3 col-md-4 text-center"> <i class="why-work-icons wow pulse fas fa-bolt" data-wow-delay="2s"></i> <p class="lead">Fast Learner</p> <p>I can learn anything, just give me 5 minutes ;) I'm valuable to your company because of my ability to be molded to your stack.</p> </div> </div> <div class="row my-5"> <div class="col-12"> <h2 class="section-title pb-5 text-dark-blue font-weight-bold text-center">Testimonials</h2> </div> <div class="col-12"> <div id="testimonial-slider"> <div class="testimonial-container"> <blockquote class="blockquote"> <p class="mb-0">Throughout my experience, I have met very few with such a vast array of knowledge and skills as Mr. Drew, [he] continues to astound me with how quickly he can learn and apply new skills.</p> <footer class="blockquote-footer">Captain Roscoe Edwards <cite title="Source Title">Captain, United Airlines (Ret.)</cite></footer> <p><a href="./assets/recommendations/12-05-2017-CaptainRoscoeEdwards.pdf" target="_blank">View Recommendation Letter <i class="fas fa-angle-double-right"></i></a></p> </blockquote> </div> <div class="testimonial-container"> <blockquote class="blockquote"> <p class="mb-0">His drive and passion keeps him continually searching for new information and opportunities... Othneil has earned hundreds of hours of community service throughout the years living on St. Croix... he gives that same compassion to his new community mentoring students.</p> <footer class="blockquote-footer">Cenita Heywood <cite title="Source Title">President, Virgin Islands Chapter Tuskegee Airmen, Inc.</cite></footer> <p><a href="./assets/recommendations/04-25-2018-CenitaHeywood.pdf" target="_blank">View Recommendation Letter <i class="fas fa-angle-double-right"></i></a></p> </blockquote> </div> <div class="testimonial-container"> <blockquote class="blockquote"> <p class="mb-0">He has demonstrated genuine curiosity of the content and authentic engagement in his assignments. Without question, he stands as on of the best and brightest members of his class.</p> <footer class="blockquote-footer">Michon Benson <cite title="Source Title">College Professor, Texas Southern University</cite></footer> <p><a href="./assets/recommendations/02-06-2018-MichonBenson.pdf" target="_blank">View Recommendation Letter <i class="fas fa-angle-double-right"></i></a></p> </blockquote> </div> </div> </div> </div> </div> </div>  <div class="section d-flex" id="contact"> <div class="container align-self-center"> <h2 class="section-title text-light-green font-weight-bold text-center">Interested in working together?</h2> <p class="lead text-white text-center">Let's talk about your next project or role!</p> <div class="row mt-3"> <div class="col-12 col-md-6 offset-md-3 mt-5"> <a href="https://linkedin.com/in/othneildrew" target="_blank" class="btn d-block custom-btn btn-contact" id="linkedin-btn"> <i class="fab fa-linkedin"></i> Connect on LinkedIn </a> <a href="mailto:codeguydrew@gmail.com" class="btn d-block custom-btn btn-contact" id="email-btn"> <i class="fas fa-envelope"></i> Send an Email </a> </div> </div> </div> <p class="copyright-text text-white">Copyright © <span class="dtYear"></span> Othneil Drew</p> <ul class="nav social-icons"> <li class="nav-item"> <a class="nav-link text-white" href="https://github.com/othneildrew" target="_blank"><i class="fab fa-github"></i></a> </li> <li class="nav-item"> <a class="nav-link text-white" href="https://linkedin.com/in/othneildrew" target="_blank"><i class="fab fa-linkedin"></i></a> </li> </ul> </div>  </main>  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="js/plugins/fakeloader/fakeLoader.min.js"></script> <script src="js/plugins/slick/slick.min.js"></script> <script src="js/plugins/wow/wow.min.js"></script> <script src="js/main.js"></script> </body> </html>

CINXE.COM

Othneil Drew - Senior Software Engineer & Pilot