-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 21.7 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head> <title>Will Trinh's Portfolio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Portfolio Website"/> <meta name="title" property="og:title" content="Portfolio Website"/> <meta property="og:type" content="_"/> <meta name="image" property="og:image" content="https://raw.githubusercontent.com/willtrinh/willtrinh.github.io/master/assets/images/portfolio.png"/> <meta name="description" property="og:description" content="Portfolio Website"/> <meta name="author" content="Will Trinh"/> <link rel="preload" href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"> </noscript> <link rel="preload" href="assets/css/open-iconic-bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="assets/css/open-iconic-bootstrap.min.css"> </noscript> <link rel="preload" href="assets/css/animate.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="assets/css/animate.css"> </noscript> <link rel="preload" href="assets/css/owl.carousel.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="assets/css/owl.carousel.min.css"> </noscript> <link rel="stylesheet" href="assets/css/owl.theme.default.min.css"> <link rel="preload" href="assets/css/magnific-popup.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="assets/css/magnific-popup.css"> </noscript> <link rel="preload" href="assets/css/aos.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="assets/css/aos.css"> </noscript> <link rel="preload" href="assets/css/ionicons.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="assets/css/ionicons.min.css"> </noscript> <link rel="stylesheet" href="assets/css/flaticon.css"> <link rel="preload" href="assets/css/icomoon.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="assets/css/icomoon.css"> </noscript> <link rel="preload" href="assets/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="assets/css/style.css"> </noscript> <link rel="icon" type="image/png" href="assets/images/favicon.ico"/></head><body data-spy="scroll" data-target=".site-navbar-target" data-offset="300"> <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar ftco-navbar-light site-navbar-target" id="ftco-navbar"> <div class="container"> <a class="navbar-brand text-danger background-danger" href="/"><span>W</span>ill Trinh</a> <button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation"> <span class="oi oi-menu"></span> Menu </button> <div class="collapse navbar-collapse" id="ftco-nav"> <ul class="navbar-nav nav ml-auto"> <li class="nav-item"><a href="#home-section" class="nav-link"><span>Home</span></a></li><li class="nav-item"><a href="#about-section" class="nav-link"><span>About</span></a></li><li class="nav-item"><a href="#projects-section" class="nav-link"><span>Projects</span></a></li><li class="nav-item"><a href="#resume-section" class="nav-link"><span>Resume</span></a></li><li class="nav-item"><a href="#contact-section" class="nav-link"><span>Contact</span></a></li></ul> </div></div></nav> <section class="hero-wrap js-fullheight"> <div class="overlay"></div><div class="container"> <div class="row no-gutters slider-text js-fullheight justify-content-center align-items-center"> <div class="col-lg-8 col-md-6 ftco-animate d-flex align-items-center"> <div class="text text-center"> <span class="subheading text-danger">Hi there, <span class="wave" style="font-size:40px">👋</span> My name is</span> <h1>Will Trinh</h1> <h2 class="text-secondary">I'm a <span class="txt-rotate" data-period="1000" data-rotate='[ "Software Engineer.", "Full Stack Developer.", "Tech Enthusiast.", "Finance & Investing Nerd."]'></span> </h2> </div></div></div></div></section> <section class="ftco-about img ftco-section ftco-no-pt ftco-no-pb" id="about-section"> <div class="container"> <div class="row d-flex no-gutters"> <div class="col-md-12 col-lg-12 pl-md-5 py-5 text-center"> <div class="row justify-content-start pb-3"> <div class="col-md-12 heading-section ftco-animate"> <h2 class="mb-4">About Me</h2> <p class="text-secondary">I am a full stack software engineer adept at designing and developing scalable, high-performance, and maintainable full stack JavaScript applications. Familiar with Agile workflow, test-driven development, MVC architecture, scaling, and load-balancing. Versatile problem solver with strong interpersonal, communication, and design skills. I have experience working with different teams to develop full stack applications with React, Node/Express, MongoDB, MySQL, AWS, Docker among other technologies. I am interested in new and exciting opportunities where I can learn new things and develop my skills in building impactful user-facing applications. I have expertise in MERN stack and a learning attitude to quickly pick up new technologies/skills and improve existing skills.</p></div></div></div></div></div></section> <section class="ftco-section ftco-project pb-5" id="projects-section"> <div class="container-fluid px-md-0"> <div class="row no-gutters justify-content-center pb-5"> <div class="col-md-12 heading-section text-center ftco-animate"> <div class="col-md-12 heading-section ftco-animate"> <h2 class="mb-4">Projects</h2> </div></div></div><div class="row no-gutters"> <div class="col-md-6"> <div id="spendi" class="project img ftco-animate d-flex justify-content-center align-items-center lazy"> <div class="overlay"></div><div class="text text-center p-4"> <h1><a class="text-white" href="https://spendi.netlify.app/" target="_blank" rel="noopener">Spendi</a> </h1> <span>Spendi is a budget tracker that allows users to input their budget with ease using their microphone. Trained and integrated Speechly API into React application to translate speech-to-text, automatically fill out the budget form, create a new transaction, and update new changes on budget charts with Chart.js.</span> <br><a class="btn btn-outline-warning mt-3 mb-3" href="https://spendi.netlify.app/" target="_blank" rel="noopener">Live App</a> <a class="btn btn-outline-danger mt-3 mb-3" href="https://www.youtube.com/watch?v=A0PVJAPZKF8" target="_blank" rel="noopener">Youtube Demo</a> <a class="btn btn-outline-light mt-3 mb-3" href="https://github.com/willtrinh/spendi" target="_blank" rel="noopener">Github</a> </div></div></div><div class="col-md-6"> <div id="reviews-api" class="project img ftco-animate d-flex justify-content-center align-items-center lazy"> <div class="overlay"></div><div class="text text-center p-4"> <h1><a class="text-white" href="https://github.com/willtrinh/ReviewsAPI" target="_blank" rel="noopener">Atelier Reviews API</a></h1> <span>Atelier Reviews API is the backend infrastructure designed and created from scratch for our client's ecommerce website with the primary goal of improving the website's performance to handle up to 10,000 requests per second and replace the currently outdated system that could not handle large amounts of user traffic to the website.</span> <br><a class="btn btn-outline-light mt-3 mb-3" href="https://github.com/willtrinh/ReviewsAPI" target="_blank" rel="noopener">Github</a> </div></div></div><div class="col-md-6"> <div id="superb" class="project img ftco-animate d-flex justify-content-center align-items-center lazy"> <div class="overlay"></div><div class="text text-center p-4"> <h1><a class="text-white" href="https://github.com/willtrinh/Superb" target="_blank" rel="noopener">Superb</a></h1> <span>An e-commerce web app that lets the users view a product details page. We were given an API that contained all the data that we need, but the product and structure of the web app are up to us to decide.</span> <br><a class="btn btn-outline-light mt-3 mb-3" href="https://github.com/willtrinh/Superb" target="_blank" rel="noopener">Github</a> </div></div></div><div class="col-md-6"> <div id="webflix" class="project img ftco-animate d-flex justify-content-center align-items-center lazy"> <div class="overlay"></div><div class="text text-center p-4"> <h1><a class="text-white" href="https://webflix-827b1.web.app/" target="_blank" rel="noopener">Webflix</a> </h1> <span>A Netflix-inspired movie app that allows users to browse and search for films and series. Deployed on Firebase, designed and developed using React, Node.js, Styled-Components, Firebase Authentication, Firestore, Fuse.js.</span> <br><a class="btn btn-outline-warning mt-3 mb-3" href="https://webflix-827b1.web.app/" target="_blank" rel="noopener">Live App</a> <a class="btn btn-outline-light mt-3 mb-3" href="https://github.com/willtrinh/webflix" target="_blank" rel="noopener">Github</a> </div></div></div><div class="col-md-6"> <div id="yelpcamp" class="project img ftco-animate d-flex justify-content-center align-items-center lazy"> <div class="overlay"></div><div class="text text-center p-4"> <h1><a class="text-white" href="http://ycamp-demo.herokuapp.com/" target="_blank" rel="noopener">YelpCamp</a></h1> <span>YelpCamp is a Node.js web application with RESTful routing that let users create, view, edit, and delete campground posts and comments.</span> <br><a class="btn btn-outline-warning mt-3 mb-3" href="http://ycamp-demo.herokuapp.com/" target="_blank" rel="noopener">Live App</a> <a class="btn btn-outline-light mt-3 mb-3" href="https://github.com/willtrinh/YelpCamp" target="_blank" rel="noopener">Github</a> </div></div></div><div class="col-md-6"> <div id="face-detection" class="project img ftco-animate d-flex justify-content-center align-items-center lazy"> <div class="overlay"></div><div class="text text-center p-4"> <h1><a class="text-white" href="https://www.willtrinh.com/face-recognition/face_recognition" target="_blank" rel="noopener">Face-Recognition</a></h1> <span>face-recognition is a web application that performs real-time webcam & video face tracking as well as detect and identify faces from images with the help of pre-trained models from face-api.js. Hosted directly on github.</span> <br><a class="btn btn-outline-warning mt-3 mb-3" href="https://www.willtrinh.com/face-recognition/face_recognition" target="_blank" rel="noopener">Live App</a> <a class="btn btn-outline-light mt-3 mb-3" href="https://github.com/willtrinh/face-recognition" target="_blank" rel="noopener">Github</a> </div></div></div><div class="col-md-6"> <div id="sudoku" class="project img ftco-animate d-flex justify-content-center align-items-center lazy"> <div class="overlay"></div><div class="text text-center p-4"> <h1><a class="text-white" href="https://github.com/willtrinh/Sudoku-Solver" target="_blank" rel="noopener">Sudoku Solver</a></h1> <span>Sudoku Solver is a Python GUI that uses backtracking algorithm to find a solution to any solvable sudoku board.</span> <br><a class="btn btn-outline-light mt-5" href="https://github.com/willtrinh/Sudoku-Solver" target="_blank" rel="noopener">Github</a> </div></div></div><div class="col-md-6"> <div id="portfolio" class="project img ftco-animate d-flex justify-content-center align-items-center lazy"> <div class="overlay"></div><div class="text text-center p-4"> <h1><a class="text-white" href="https://www.willtrinh.com" target="_blank" rel="noopener">Portfolio</a> </h1> <span>Portfolio is a single page web application that showcases my educational backgrounds, experiences, and projects. Hosted directly on github.</span> <br><a class="btn btn-outline-warning mt-3 mb-3" href="https://www.willtrinh.com" target="_blank" rel="noopener">Live App</a> <a class="btn btn-outline-light mt-3 mb-3" href="https://github.com/willtrinh/willtrinh.github.io" target="_blank" rel="noopener">Github</a> </div></div></div></div></div></section> <section class="ftco-section ftco-no-pb goto-here" id="resume-section"> <div class="container"> <div class="row d-flex no-gutters"> <div class="col-md-12 col-lg-12 pl-md-5 py-5 text-center"> <div class="col-md-12 heading-section ftco-animate"> <h1 class="big">Resume</h1> <h2 class="mb-4">Resume</h2> </div><div class="counter-wrap ftco-animate d-flex mt-md-3 justify-content-center"> <div class="text"> <p><a href="https://drive.google.com/file/d/19zoOIbtjMiAGm3dq1kFXIASCotjTGKob/view" target="_blank" rel="noopener" class="btn btn-outline-danger py-3 px-3">Download Resume</a></p></div></div></div><div class="col-md-3"> <nav id="navi"> <ul> <li><a href="#page-1">Education</a></li><li><a href="#page-2">Experience</a></li><li><a href="#page-3">Skills</a></li></ul> </nav> </div><div class="col-md-9"> <div id="page-1" class="page one"> <h2 class="heading">Education</h2> <div class="resume-wrap d-flex ftco-animate"> <div class="icon d-flex align-items-center justify-content-center"> <span class="icon-institution"></span> </div><div class="text pl-3"> <span class="date">Graduated June 2019</span> <h2>Bachelor of Science in Computer Science</h2> <span class="position text-danger">University of California, Irvine</span> <ul> <li>Bachelor of Science in Computer Science</li><li>Relevant coursework: Project in Database and Web Applications, Database Management, Information Retrieval, Design & Analysis of Algorithms, Concepts in Programming Languages, Operating Systems, Computer Network.</li></div></div><div id="page-2" class="page two"> <h2 class="heading">Professional Experience</h2> <div class="resume-wrap d-flex ftco-animate"> <div class="icon d-flex align-items-center justify-content-center"> <span class="icon-code"></span> </div><div class="text pl-3"> <span class="date">Mar 2020 - Oct 2020</span> <h2>Software Engineer</h2> <span class="position text-danger">Infosys @ Capital Group</span> <ul> <li>Increased performance and minimized human errors by automating the software delivery process with <strong>Jenkins</strong></li><li>Reduced company’s costs and time by containerizing monolithic applications into microservices using <strong>Docker</strong></li><li>Improved company security by creating, modifying, and documenting user access/privilege database schema </li></ul> </div></div><div class="resume-wrap d-flex ftco-animate"> <div class="icon d-flex align-items-center justify-content-center"> <span class="icon-code"></span> </div><div class="text pl-3"> <span class="date">Aug 2019 - Mar 2020</span> <h2>Software Engineer</h2> <span class="position text-danger">Infosys @ Charles Schwab</span> <ul> <li>Boosted employee productivity and workflow by migrating call records from legacy systems to the <Strong>Verint</Strong> platform </li><li>Enhanced operations and reduced financial losses with improved system reliability and connectivity</li><li>Achieved 100% customer satisfaction by resolving end-user problems with <Strong>ServiceNow</Strong> requests and <Strong>Jira</Strong> tickets </li></ul> </div></div><div id="page-3" class="page three"> <h2 class="heading">Technology Stack</h2> <div class="row progress-circle mb-5"> <div class="col-lg-12"> <h2 class="subheading text-lg-center text-dark">Front End</h2> <hr> <div class="text-center"> <h2 class="btn btn-outline-primary font-weight-bold text-center">JavaScript (ES5/ES6)</h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">React</h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">Redux</h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">React Router</h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">HTML5</h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">CSS3</h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">jQuery</h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">Styled Components</h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">Bootstrap </h2> <h2 class="btn btn-outline-primary font-weight-bold text-center">Figma</h2> <br><h2 class="subheading text-lg-center text-dark">Back End</h2> <hr> <h2 class="btn btn-outline-info font-weight-bold text-center">Node.js</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">Express</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">MySQL</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">MongoDB</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">Nginx</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">Docker</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">Postman</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">Java</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">Python</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">C++</h2> <h2 class="btn btn-outline-info font-weight-bold text-center">C</h2> <br><h2 class="subheading text-lg-center text-dark">Testing</h2> <hr> <h2 class="btn btn-outline-danger font-weight-bold text-center">Jest</h2> <h2 class="btn btn-outline-danger font-weight-bold text-center">Enzyme</h2> <h2 class="btn btn-outline-danger font-weight-bold text-center">React Testing Library</h2> <h2 class="btn btn-outline-danger font-weight-bold text-center">Mocha</h2> <h2 class="btn btn-outline-danger font-weight-bold text-center">Chai</h2> <h2 class="btn btn-outline-danger font-weight-bold text-center">K6</h2> <h2 class="btn btn-outline-danger font-weight-bold text-center">Loader.io </h2> <h2 class="btn btn-outline-danger font-weight-bold text-center">New Relic </h2> <br><h2 class="subheading text-lg-center text-dark">Other</h2> <hr> <h2 class="btn btn-outline-dark font-weight-bold text-center">AWS</h2> <h2 class="btn btn-outline-dark font-weight-bold text-center">Heroku</h2> <h2 class="btn btn-outline-dark font-weight-bold text-center">Firebase</h2> <h2 class="btn btn-outline-dark font-weight-bold text-center">NPM</h2> <h2 class="btn btn-outline-dark font-weight-bold text-center">Git</h2> <h2 class="btn btn-outline-dark font-weight-bold text-center">VSCode</h2> <h2 class="btn btn-outline-dark font-weight-bold text-center">Webpack</h2> <h2 class="btn btn-outline-dark font-weight-bold text-center">Babel</h2> <h2 class="btn btn-outline-dark font-weight-bold text-center">ESLint</h2> </div></div></div></div></div></div></div></section> <section class="ftco-section contact-section ftco-no-pb pt-5" id="contact-section"> <div class="container"> <div class="row justify-content-center mt-5 mb-5 pb-3"> <div class="col-md-7 heading-section text-center ftco-animate"> <h1 class="big big-2">Contact</h1> <h2 class="mb-4">Contact Me</h2> </div></div><div class="row d-flex contact-info mb-5"> <div class="col-md-6 col-lg-3 d-flex ftco-animate"> <div class="align-self-stretch box text-center p-4 services-1 shadow"> <div class="icon d-flex align-items-center justify-content-center"> <span class="icon-github"></span> </div><div> <h3 class="mb-4">Github</h3> <p><a href="https://github.com/willtrinh" target="_blank" rel="noopener">github.com/willtrinh</a></p></div></div></div><div class="col-md-6 col-lg-3 d-flex ftco-animate"> <div class="align-self-stretch box text-center p-4 services-1 shadow"> <div class="icon d-flex align-items-center justify-content-center"> <span class="icon-phone"></span> </div><div> <h3 class="mb-4">Contact Number</h3> <p><a href="tel://17147280796">714-728-0796</a></p></div></div></div><div class="col-md-6 col-lg-3 d-flex ftco-animate"> <div class="align-self-stretch box text-center p-4 services-1 shadow"> <div class="icon d-flex align-items-center justify-content-center"> <span class="icon-envelope"></span> </div><div> <h3 class="mb-4">Email Address</h3> <p><a href="mailto:[email protected]">[email protected]</a></p></div></div></div><div class="col-md-6 col-lg-3 d-flex ftco-animate"> <div class="align-self-stretch box text-center p-4 services-1 shadow"> <div class="icon d-flex align-items-center justify-content-center"> <span class="icon-linkedin"></span> </div><div> <h3 class="mb-4">Linkedin</h3> <p><a href="https://www.linkedin.com/in/williamtrinh/" target="_blank" rel="noopener">linkedin.com/in/williamtrinh</a> </p></div></div></div></div></div></section> <footer class="ftco-footer ftco-section"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <p>Made with <svg class="heart" viewBox="0 0 32 29.6"> <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/> </svg> by <a href="https://linkedin.com/in/williamtrinh" target="_blank" rel="noopener" class="text-primary">Will Trinh</a>.</p></div></div></div></footer> <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"> <circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/> <circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/> </svg></div><script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery-migrate-3.0.1.min.js"></script> <script src="assets/js/popper.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/jquery.easing.1.3.js"></script> <script src="assets/js/jquery.waypoints.min.js"></script> <script src="assets/js/jquery.stellar.min.js"></script> <script src="assets/js/owl.carousel.min.js"></script> <script src="assets/js/jquery.magnific-popup.min.js"></script> <script src="assets/js/aos.js"></script> <script src="assets/js/jquery.animateNumber.min.js"></script> <script src="assets/js/scrollax.min.js"></script> <script src="assets/js/main.js"></script></body></html>