"Portfolio 2"
Bootstrap 4.1.1 Snippet by moloy559

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand js-scroll-trigger" href="#page-top"> <span class="d-block d-lg-none">Clarence Taylor</span> <span class="d-none d-lg-block"> <!-- Shoud out to the lunatic demon who made this url!--> <!--img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="" alt=""--> </span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#experience">Experience</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#education">Education</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#skills">Skills</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#interests">Interests</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#awards">Awards</a> </li> </ul> </div> </nav> <div class="container-fluid p-0"> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about"> <div class="w-100"> <h1 class="mb-0">Wolfgang <span class="text-primary">Amadeus Mozart</span> </h1> <div class="subheading mb-5">3542 Berry Street · Cheyenne Wells, CO 80810 · (317) 585-8468 · <a href="mailto:name@email.com">WolfgangMozart@EmusicLegends.com</a> </div> <p class="lead mb-5">I am Wolfgang Amadus Mozart, or just Mozart for short. I am a prolific and influential composer of the classical era.</p> <div class="social-icons"> <a href="#"> <i class="fab fa-linkedin-in"></i> </a> <a href="#"> <i class="fab fa-github"></i> </a> <a href="#"> <i class="fab fa-twitter"></i> </a> <a href="#"> <i class="fab fa-facebook-f"></i> </a> </div> </div> </section> <hr class="m-0"> <section class="resume-section p-3 p-lg-5 d-flex justify-content-center" id="experience"> <div class="w-100"> <h2 class="mb-5">Experience</h2> <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5"> <div class="resume-content"> <h3 class="mb-0">Senior Music Developer</h3> <div class="subheading mb-3">Music Solutions</div> <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. Mozart is ready</p> </div> <div class="resume-date text-md-right"> <span class="text-primary">March 1781 - Present</span> </div> </div> <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5"> <div class="resume-content"> <h3 class="mb-0">Music Developer</h3> <div class="subheading mb-3">Music Solutions</div> <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Which is Mozart.</p> </div> <div class="resume-date text-md-right"> <span class="text-primary">December 1789 - March 2013</span> </div> </div> <div class="resume-item d-flex flex-column flex-md-row justify-content-between"> <div class="resume-content"> <h3 class="mb-0">Music Design Intern</h3> <div class="subheading mb-3">Mozart Media Productions</div> <p>Used to work for my dad.</p> </div> <div class="resume-date text-md-right"> <span class="text-primary">January 1756 - June 1791</span> </div> </div> </div> </section> <hr class="m-0"> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="education"> <div class="w-100"> <h2 class="mb-5">Education</h2> <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5"> <div class="resume-content"> <h3 class="mb-0">University of Colorado Boulder</h3> <div class="subheading mb-3">Bachelor of Science</div> <div>Computer Science - Web Development Track</div> <p>GPA: 3.23</p> </div> <div class="resume-date text-md-right"> <span class="text-primary">August 2006 - May 2010</span> </div> </div> <div class="resume-item d-flex flex-column flex-md-row justify-content-between"> <div class="resume-content"> <h3 class="mb-0">James Buchanan High School</h3> <div class="subheading mb-3">Technology Magnet Program</div> <p>GPA: 3.56</p> </div> <div class="resume-date text-md-right"> <span class="text-primary">August 2002 - May 2006</span> </div> </div> </div> </section> <hr class="m-0"> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="skills"> <div class="w-100"> <h2 class="mb-5">Skills</h2> <div class="subheading mb-3">Programming Languages & Tools</div> <ul class="list-inline dev-icons"> <li class="list-inline-item"> <i class="fab fa-html5"></i> </li> <li class="list-inline-item"> <i class="fab fa-css3-alt"></i> </li> <li class="list-inline-item"> <i class="fab fa-js-square"></i> </li> <li class="list-inline-item"> <i class="fab fa-angular"></i> </li> <li class="list-inline-item"> <i class="fab fa-react"></i> </li> <li class="list-inline-item"> <i class="fab fa-node-js"></i> </li> <li class="list-inline-item"> <i class="fab fa-sass"></i> </li> <li class="list-inline-item"> <i class="fab fa-less"></i> </li> <li class="list-inline-item"> <i class="fab fa-wordpress"></i> </li> <li class="list-inline-item"> <i class="fab fa-gulp"></i> </li> <li class="list-inline-item"> <i class="fab fa-grunt"></i> </li> <li class="list-inline-item"> <i class="fab fa-npm"></i> </li> </ul> <div class="subheading mb-3">Workflow</div> <ul class="fa-ul mb-0"> <li> <i class="fa-li fa fa-check"></i> Mobile-First, Responsive Design</li> <li> <i class="fa-li fa fa-check"></i> Cross Browser Testing & Debugging</li> <li> <i class="fa-li fa fa-check"></i> Cross Functional Teams</li> <li> <i class="fa-li fa fa-check"></i> Agile Development & Scrum</li> </ul> </div> </section> <hr class="m-0"> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="interests"> <div class="w-100"> <h2 class="mb-5">Interests</h2> <p>Apart from being a web developer, I enjoy most of my time being outdoors. In the winter, I am an avid skier and novice ice climber. During the warmer months here in Colorado, I enjoy mountain biking, free climbing, and kayaking.</p> <p class="mb-0">When forced indoors, I follow a number of sci-fi and fantasy genre movies and television shows, I am an aspiring chef, and I spend a large amount of my free time exploring the latest technology advancements in the front-end web development world.</p> </div> </section> <hr class="m-0"> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="awards"> <div class="w-100"> <h2 class="mb-5">Awards & Certifications</h2> <ul class="fa-ul mb-0"> <li> <i class="fa-li fa fa-trophy text-warning"></i> Google Analytics Certified Developer</li> <li> <i class="fa-li fa fa-trophy text-warning"></i> Mobile Web Specialist - Google Certification</li> <li> <i class="fa-li fa fa-trophy text-warning"></i> 1<sup>st</sup> Place - University of Colorado Boulder - Emerging Tech Competition 2009</li> <li> <i class="fa-li fa fa-trophy text-warning"></i> 1<sup>st</sup> Place - University of Colorado Boulder - Adobe Creative Jam 2008 (UI Design Category)</li> <li> <i class="fa-li fa fa-trophy text-warning"></i> 2<sup>nd</sup> Place - University of Colorado Boulder - Emerging Tech Competition 2008</li> <li> <i class="fa-li fa fa-trophy text-warning"></i> 1<sup>st</sup> Place - James Buchanan High School - Hackathon 2006</li> <li> <i class="fa-li fa fa-trophy text-warning"></i> 3<sup>rd</sup> Place - James Buchanan High School - Hackathon 2005</li> </ul> </div> </section> </div> <!-- Plugin JavaScript --> <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
/*! * Start Bootstrap - Resume v5.0.4 (https://startbootstrap.com/template-overviews/resume) * Copyright 2013-2019 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE) */ body { font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; padding-top: 54px; color: #868e96; } @media (min-width: 992px) { body { padding-top: 0; padding-left: 17rem; } } h1, h2, h3, h4, h5, h6 { font-family: 'Saira Extra Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-weight: 700; text-transform: uppercase; color: #343a40; } h1 { font-size: 6rem; line-height: 5.5rem; } h2 { font-size: 3.5rem; } h3 { font-size: 2rem; } p.lead { font-size: 1.15rem; font-weight: 400; } .subheading { text-transform: uppercase; font-weight: 500; font-family: 'Saira Extra Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 1.5rem; } .social-icons a { display: inline-block; height: 3.5rem; width: 3.5rem; background-color: #495057; color: #fff !important; border-radius: 100%; text-align: center; font-size: 1.5rem; line-height: 3.5rem; margin-right: 1rem; } .social-icons a:last-child { margin-right: 0; } .social-icons a:hover { background-color: #BD5D38; } .dev-icons { font-size: 3rem; } .dev-icons .list-inline-item i:hover { color: #BD5D38; } #sideNav .navbar-nav .nav-item .nav-link { font-weight: 800; letter-spacing: 0.05rem; text-transform: uppercase; } #sideNav .navbar-toggler:focus { outline-color: #d48a6e; } @media (min-width: 992px) { #sideNav { text-align: center; position: fixed; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 17rem; height: 100vh; } #sideNav .navbar-brand { display: -webkit-box; display: -ms-flexbox; display: flex; margin: auto auto 0; padding: 0.5rem; } #sideNav .navbar-brand .img-profile { max-width: 10rem; max-height: 10rem; border: 0.5rem solid rgba(255, 255, 255, 0.2); } #sideNav .navbar-collapse { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; width: 100%; margin-bottom: auto; } #sideNav .navbar-collapse .navbar-nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } #sideNav .navbar-collapse .navbar-nav .nav-item { display: block; } #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link { display: block; } } section.resume-section { padding-top: 5rem !important; padding-bottom: 5rem !important; max-width: 75rem; } section.resume-section .resume-item .resume-date { min-width: none; } @media (min-width: 768px) { section.resume-section { min-height: 100vh; } section.resume-section .resume-item .resume-date { min-width: 18rem; } } @media (min-width: 992px) { section.resume-section { padding-top: 3rem !important; padding-bottom: 3rem !important; } } .bg-primary { background-color: #98A5A5 !important; } .text-primary { color: #BD5D38 !important; } a { color: #BD5D38; } a:hover, a:focus, a:active { color: #824027; }
(function($) { "use strict"; // Start of use strict // Smooth scrolling using jQuery easing $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: (target.offset().top) }, 1000, "easeInOutExpo"); return false; } } }); // Closes responsive menu when a scroll trigger link is clicked $('.js-scroll-trigger').click(function() { $('.navbar-collapse').collapse('hide'); }); // Activate scrollspy to add active class to navbar items on scroll $('body').scrollspy({ target: '#sideNav' }); })(jQuery); // End of use strict

Related: See More


Questions / Comments: