Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body data-spy="scroll" data-target="#main-nav" data-offset="60">
  <!-- Fixed Navbar -->
  <nav id="main-nav" class="navbar navbar-default ">
    <div class="container-fluid">
      <div class="navbar-header">
        <!-- Menu Toggle -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="glyphicon glyphicon-menu-hamburger"></span>
        </button>
        <a class="navbar-brand scroll" href="#top"><img class="pull-left logo" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/imgs/td-logo.png?raw=true" alt="TD Logo"><span>Tiffany Du</span></a>
      </div>
      <!-- Collapsible Menu -->
      <div class="collapse navbar-collapse" id="menu">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a class="scroll" href="#top">Home <span class="sr-only">(current)</span></a></li>
          <li><a class="scroll" href="#about">About Me</a></li>
          <li><a class="scroll" href="#portfolio">Portfolio</a></li>
          <li><button class="btn td-btn small outline pink" data-toggle="modal" data-target="#contactModal">Contact</button></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <!-- Jumbotron -->
  <header id="top" class="jumbotron">
    <div class="container text-center">
      <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
          <img class="img-responsive center-block logo" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/imgs/td-logo.png?raw=true" alt="TD Logo">
        </div>
        <div class="col-xs-12">
          <h1 class="title">Hi! My name is Tiffany.</h1>
          <p>I like to design and code user-friendly websites.</p>
          <p>Nice to meet you.</p>
          <a class="btn td-btn outline green scroll mt-30" href="#content" title="Learn more about me!"><span class="glyphicon glyphicon-triangle-bottom"></span> Learn more</a>
        </div>
      </div>
    </div>
  </header>
  <!-- Main Content Begins -->
  <div id="content" class="container-fluid text-center">
    <!-- About Me Section -->
    <section id="about" class="row bg-white bg-shadow">
      <div class="row">
        <div class="col-xs-12">
          <h1 class="mb-30">About Me</h1>
        </div>
      </div>
      <div class="row mb-30">
        <div class="col-xs-12 col-md-3 col-md-offset-1 col-lg-2 col-lg-offset-2">
          <img class="img-responsive center-block profile mb-30" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/imgs/profile-hex.png?raw=true" alt="Tiffany Du's Profile Photo">
        </div>
        <div class="col-sm-8 col-sm-offset-2 col-md-7 col-md-offset-0 col-lg-6 text-left">
          <h4>Hello there! I'm a front-end developer and aspiring UX designer based in Chicago.</h4>
          <p>Having spent a large chunk of my life in art school, I've finally found my passion at the crossroads of design and technology. I started off as an undergrad in industrial design, then worked some graphic design gigs, and later went back to school for web design and new media. The one lesson that stood out throughout this journey was the importance of the end user. Whether a physical or digital product, its purpose needs to be obvious, and the product itself has to be easy to use. So no matter what I'm working on, I always have the user in mind and try my hardest to create an enjoyable experience for them.</p>
          <p>Currently, I spend most of my time designing websites and marketing material for small businesses and participating in the <a href="https://goo.gl/jhil8F" target="_blank">#100DaysOfCode</a> challenge to keep my skills sharp. When I'm not busy, you can find me obsessing over food, cats, skincare, and video games, or working on one of my many hobbies like playing the ukulele or crocheting. I tend to switch things up every few months, so if you want to know what I'm up to, just <a class="scroll" href="#follow-me">follow me!</a> :)</p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        <hr class="dashed">
          <h2 class="mb-60">What I Do</h2>
        </div>
        <div class="col-sm-3 col-lg-2 col-lg-offset-2">
          <img class="img-responsive center-block icon" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/work/rwd-icon.png?raw=true" alt="Responsive Web Design Icon">
          <p>Responsive Web Design</p>
        </div>
        <div class="col-sm-3 col-lg-2">
          <img class="img-responsive center-block icon" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/work/ui-ux-icon.png?raw=true" alt="UI/UX Design Icon">
          <p>UI/UX Design</p>
        </div>
        <div class="col-sm-3 col-lg-2">
          <img class="img-responsive center-block icon" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/work/dev-icon.png?raw=true" alt="Development Icon">
          <p>Development</p>
        </div>
        <div class="col-sm-3 col-lg-2 mb-30">
          <img class="img-responsive center-block icon" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/work/star-icon.png?raw=true" alt="Identity and Branding Icon">
          <p>Identity &amp; Branding</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <button class="btn td-btn outline green mt-30" data-toggle="modal" data-target="#resumeModal">View my Resume</button>
        </div>
      </div>
    </section>
    <!-- Portfolio Section -->
    <section id="portfolio" class="row bg-star-y">
      <div class="row">
        <div class="col-xs-12">
          <h1 class="mb-60">Portfolio</h1>
        </div>
      </div>
      <div class="row">
        <div id="projects" class="carousel slide col-xs-12" data-ride="carousel" data-interval="false">
          <div class="row">
            <!-- Carousel Prev Button -->
            <div class="col-xs-1">
              <a class="left carousel-control" href="#projects" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
            </div>
            <div class="col-xs-10">
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <div class="col-sm-7">
                    <img class="img-responsive center-block mb-30" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/portfolio/tribute/tribute-teaser.png?raw=true" alt="Twenty One Pilots Tribute Page">
                  </div>
                  <div class="col-sm-5">
                    <div class="carousel-caption card">
                      <h3>Twenty One Pilots Tribute</h3>
                      <h4>Responsive Web Design</h4>
                      <button class="btn td-btn small outline green" data-toggle="modal" data-target="#tributeModal">View Details</button>
                    </div>
                  </div>
                </div><!-- /.item -->
                <div class="item">
                  <div class="col-sm-7">
                    <img class="img-responsive center-block mb-30" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/portfolio/tms/tms-teaser.png?raw=true" alt="Too Much Sauce">
                  </div>
                  <div class="col-sm-5">
                    <div class="carousel-caption card">
                      <h3>Too Much Sauce</h3>
                      <h4>Responsive Web Design</h4>
                      <button class="btn td-btn small outline green" data-toggle="modal" data-target="#tmsModal">View Details</button>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="col-sm-7">
                    <img class="img-responsive center-block mb-30" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/portfolio/rb/rb-teaser.png?raw=true" alt="Ryan Bechtel">
                  </div>
                  <div class="col-sm-5">
                    <div class="carousel-caption card">
                      <h3>Ryan Bechtel</h3>
                      <h4>Responsive Web Design</h4>
                      <button class="btn td-btn small outline green" data-toggle="modal" data-target="#rbModal">View Details</button>
                    </div>
                  </div>
                </div><!-- /.item -->
              </div><!-- /.carousel-inner -->
            </div>
            <div class="col-xs-1">
              <!-- Carousel Next Button -->
              <a class="right carousel-control" href="#projects" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div><!-- / Next Btn -->
            <div class="col-xs-12">
              <!-- Indicators -->
              <ol class="carousel-indicators mt-30">
                <li data-target="#projects" data-slide-to="0" class="active"></li>
                <li data-target="#projects" data-slide-to="1"></li>
                <li data-target="#projects" data-slide-to="2"></li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /#projects -->
      </div><!-- /.row -->
    </section>
    <!-- Contact Me Section -->
    <section class="row bg-pink bg-shadow">
      <div class="col-xs-12">
        <h1 class="mb-30">Like what you see?</h1>
        <button class="btn btn-default td-btn outline white" data-toggle="modal" data-target="#contactModal">Send me a message!</button>
      </div>
    </section>
    <!-- Footer -->
    <footer class="row text-left bg-honeycomb">
      <div class="col-xs-12 col-sm-6">
        <h3>Latest Tweet</h3>
        <div class="card mb-30">
          <a class="twitter-timeline"  href="https://twitter.com/dusign/" data-widget-id="329035628920573952" data-chrome="noheader nofooter noborders transparent" data-tweet-limit="1" data-width="100%">Tweets by @dusign</a>
          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </div>
      </div>
      <div id="follow-me" class="col-xs-12 col-sm-5 col-sm-offset-1 mb-30">
        <h3>Follow me!</h3>
        <a class="social" href="https://www.linkedin.com/in/tiffanyadu/" target="_blank" title="LinkedIn">
          <img src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/social/LinkedIn-black.png?raw=true" alt="LinkedIn Icon">
        </a>
        <a class="social" href="https://twitter.com/dusign/" target="_blank" title="Twitter">
          <img src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/social/Twitter-black.png?raw=true" alt="Twitter Icon">
        </a>
        <a class="social" href="https://www.instagram.com/dusign/" target="_blank" title="Instagram">
          <img src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/social/Instagram-black.png?raw=true" alt="Instagram Icon">
        </a>
        <a class="social" href="https://github.com/tiffanyadu/" target="_blank" title="Github">
          <img src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/social/Github-black.png?raw=true" alt="Github Icon">
        </a>
        <a class="social" href="https://codepen.io/tiffanyadu/" target="_blank" title="Codepen">
          <img src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/social/Codepen-black.png?raw=true" alt="Codepen Icon">
        </a>
      </div>
      <div class="col-xs-12 text-center">
        <hr class="dashed">
        <h2>&ndash; Thanks for visiting! &ndash;</h2>
        <small class="gray">Copyright &copy; <script type="text/javascript">document.write(new Date().getFullYear());</script> Tiffany Du &mdash; All Rights Reserved &mdash; Made with <span class="glyphicon glyphicon-heart" aria-hidden="true"></span></small>
      </div>
    </footer>
  </div>

  <!-- Resume Modal -->
  <div class="modal fade" id="resumeModal" tabindex="-1" role="dialog" aria-labelledby="resumeTitle">
    <div class="modal-dialog wide" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h3 class="modal-title text-center" id="resumeTitle">Resume</h3>
        </div><!-- /.modal-header -->
        <div class="modal-body">
          <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
              <h2>Experience</h2>
            </div>
          </div>
          <div class="row mb-15">
            <div class="col-md-3 col-lg-2 col-lg-offset-1">
              <p class="year">2012 - Present</p>
            </div>
            <div class="col-md-9 col-lg-8">
              <h4>Freelancer</h4>
              <p class="mb-0"><strong>Too Much Sauce - Web Design and Development</strong></p>
              <p>Designed and developed a website using Bootstrap to help show off a series of animated GIFs. Currently working on converting into a Wordpress theme.</p>
              <p class="mb-0"><strong>Ryan Bechtel - Web Design and Development</strong></p>
              <p>Redesigned and developed a responsive website that better highlights the client’s work reel.</p>
              <p class="mb-0"><strong>Kaelyn Benham - Web Consultation</strong></p>
              <p>Automated process of capturing new subscribers’ email addresses by integrating Eventbrite and MailChimp using Zapier. Coded temporary “Coming Soon” page with MailChimp signup form. Helped set up hosting service with domain transfers and FTP accounts.</p>
              <p class="mb-0"><strong>MK Education - Web and Graphic Design</strong></p>
              <p>Designed a set of header banners for website. Helped customize and complete website using Wix.</p>
              <p class="mb-0"><strong>Chef Arun - Graphic Design</strong></p>
              <p>Developed a logo for the upcoming line of Thai packaged foods. Created artwork for rice bag packaging.</p>
              <p class="mb-0"><strong>East China Inn - Graphic Design</strong></p>
              <p>Designed punch card coupons to increase customer loyalty.</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3 col-lg-2 col-lg-offset-1">
              <p class="year">2016</p>
            </div>
            <div class="col-md-9 col-lg-8">
              <h4>Inside Sales / Customer Service Representative</h4>
              <p><strong>D&amp;H Granite and Marble Supply</strong></p>
              <ul>
                <li>Standardized the order fulfillment workflow to establish consistency between team members.</li>
                <li>Responsible for assisting customers with project inquiries and estimates, coordinating fabrication and installation schedules, and conflict resolution.</li>
                <li>Other duties included managing inventory and training new employees.</li>
              </ul>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-lg-5 col-lg-offset-1">
              <div class="row">
                <div class="col-xs-12">
                  <h2>Education</h2>
                </div>
              </div>
              <div class="row mb-15">
                <div class="col-sm-3 col-md-4">
                  <p class="year">2012 - 2015</p>
                </div>
                <div class="col-sm-9 col-md-8">
                  <p class="mb-0"><strong>MFA in Web Design &amp; New Media</strong></p>
                  <p>Academy of Art University</p>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-3 col-md-4">
                  <p class="year">2007 - 2010</p>
                </div>
                <div class="col-sm-9 col-md-8">
                  <p class="mb-0"><strong>BFA in Industrial Design</strong></p>
                  <p>Columbia College Chicago</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-5">
              <div class="row">
                <div class="col-xs-12">
                  <h2>Skills</h2>
                </div>
              </div>
              <div class="row">
                <ul>
                  <li><strong>Web:</strong> HTML, CSS, JavaScript, jQuery, PHP (limited)</li>
                  <li><strong>UX/UI Tools:</strong> Sketch, Balsamiq, Axure, InVision</li>
                  <li><strong>Adobe CC:</strong> Illustrator, InDesign, Photoshop</li>
                  <li><strong>Other:</strong> Positive, adaptable, attentive, resourceful</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="row text-center">
            <a class="btn td-btn outline green mb-30" href="https://github.com/tiffanyadu/portfolio/blob/master/assets/docs/Tiffany_Du_Resume.pdf" target="_blank" download><span class="glyphicon glyphicon-download-alt"></span> Download PDF</a>
            <a class="btn td-btn outline green iconBtn mb-30" href="https://www.linkedin.com/in/tiffanyadu/" target="_blank"><span class="glyphicon glyphicon-user"></span> View LinkedIn Profile</a>
          </div>
          <div class="modal-footer center">
            <button type="button" class="btn td-btn outline small" data-dismiss="modal">Close Resume</button>
          </div><!-- /.modal-footer -->
        </div><!-- /.modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- Tribute Page Project Modal -->
  <div class="modal fade" id="tributeModal" tabindex="-1" role="dialog" aria-labelledby="tributeTitle">
    <div class="modal-dialog wide" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h3 class="modal-title text-center" id="tributeTitle">Project Details</h3>
        </div><!-- /.modal-header -->
        <div class="modal-body">
          <div class="row">
            <div class="col-xs-12 bg-star-g">
              <img class="img-responsive center-block hero" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/portfolio/tribute/tribute-hero.png?raw=true" alt="Tribute Page Hero Image">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 text-center">
              <h2>Twenty One Pilots Tribute</h2>
              <h4>Responsive Web Design</h4>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-lg-6 col-lg-offset-0">
              <p>This tribute page was created for a <a href="https://www.freecodecamp.com/" target="_blank" title="Link to FreeCodeCamp">FreeCodeCamp</a> project. The goal was very simple: make a one-page site with images, text, and external links. I took this chance to practice using the Bootstrap 3 framework to create a tribute to one of my favorite bands at the moment, Twenty One Pilots (TOP). Lucky for me, they have such strong branding that the page nearly designed itself!</p>
              <p class="mb-30">I kept the color palette simple with black, white, and the signature TOP shade of red for the accent color. To add some visual interest, I used a subtle twill texture for the red backgrounds and styled the headings with a black background to give it a label maker tape effect. I also wrote some code that replaces the letter "O" with the scandinavian letter "&Oslash;" in the headings and navigation links to match the TOP logo.</p>
            </div>
            <div class="col-sm-10 col-sm-offset-1 col-lg-6 col-lg-offset-0 md-center">
              <p><strong>Technologies Used:</strong></p>
              <p class="mb-30">
                <span class="label tag">Bootstrap 3</span>
                <span class="label tag">Responsive Design</span>
                <span class="label tag">HTML5</span>
                <span class="label tag">CSS3</span>
                <span class="label tag">JavaScript</span>
                <span class="label tag">jQuery</span>
              </p>
              <a class="btn td-btn outline green mb-30" href="http://projects.tiffanydu.com/tribute/" target="_blank" title="Link to Tribute Page"><span class="glyphicon glyphicon-link"></span> Visit Live Site</a>
              <a class="btn td-btn outline green mb-30 iconBtn" href="https://codepen.io/tiffanyadu/full/RKMavV/" target="_blank" title="Link to Tribute Page on CodePen"><img src="https://github.com/tiffanyadu/portfolio/blob/master/assets/icons/social/Codepen-green.png?raw=true" alt="Codepen Icon">View on CodePen</a>
            </div>
          </div><!-- /.row -->
          <div class="modal-footer center">
            <button type="button" class="btn td-btn outline small" data-dismiss="modal">Close Project</button>
          </div><!-- /.modal-footer -->
        </div><!-- /.modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- Too Much Sauce Project Modal -->
  <div class="modal fade" id="tmsModal" tabindex="-1" role="dialog" aria-labelledby="tmsTitle">
    <div class="modal-dialog wide" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h3 class="modal-title text-center" id="tmsTitle">Project Details</h3>
        </div><!-- /.modal-header -->
        <div class="modal-body">
          <div class="row">
            <div class="col-xs-12 bg-star-g">
              <img class="img-responsive center-block hero" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/portfolio/tms/tms-hero.png?raw=true" alt="Too Much Sauce Hero Image">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 text-center">
              <h2>Too Much Sauce</h2>
              <h4>Responsive Web Design</h4>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-lg-6 col-lg-offset-0">
              <p>Too Much Sauce (TMS) is a side project of motion graphic designer Ryan Bechtel, where he challenges himself to create brutalist designs. The purpose of the TMS website is to host his collection of animated GIFs, which were originally shared as Instagram stories.</p>
              <p class="mb-30">Ryan really liked the bold, high-contrast look of <a href="http://www.complex.com/" target="_blank" title="Complex.com">Complex.com</a>, a music and pop culture media/news website, so that's what inspired the design of this project. The color palette is mainly black and white with splashes of magenta and neon green from the TMS brand. It was built with the latest version of Bootstrap 4 and uses a small JavaScript library, <a href="https://github.com/krasimir/gifffer" target="_blank" title="Gifffer.js Github repo">Gifffer.js</a>, to prevent the animated GIFs from autoplaying when the page loads.</p>
            </div>
            <div class="col-sm-10 col-sm-offset-1 col-lg-6 col-lg-offset-0 md-center">
              <p><strong>Technologies Used:</strong></p>
              <p class="mb-30">
                <span class="label tag">Bootstrap 4</span>
                <span class="label tag">Responsive Design</span>
                <span class="label tag">HTML5</span>
                <span class="label tag">CSS3</span>
                <span class="label tag">jQuery</span>
                <span class="label tag">Gifffer.js</span>
              </p>
              <a class="btn td-btn outline green mb-30" href="http://tms.ryanbechtel.com/" target="_blank" title="Link to Too Much Sauce"><span class="glyphicon glyphicon-link"></span> Visit Live Site</a>
            </div>
          </div><!-- /.row -->
          <div class="modal-footer center">
            <button type="button" class="btn td-btn outline small" data-dismiss="modal">Close Project</button>
          </div><!-- /.modal-footer -->
        </div><!-- /.modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- Ryan Bechtel Project Modal -->
  <div class="modal fade" id="rbModal" tabindex="-1" role="dialog" aria-labelledby="rbTitle">
    <div class="modal-dialog wide" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h3 class="modal-title text-center" id="rbTitle">Project Details</h3>
        </div><!-- /.modal-header -->
        <div class="modal-body">
          <div class="row">
            <div class="col-xs-12 bg-star-g">
              <img class="img-responsive center-block hero" src="https://github.com/tiffanyadu/portfolio/blob/master/assets/portfolio/rb/rb-hero.png?raw=true" alt="Ryan Bechtel Hero Image">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 text-center">
              <h2>Ryan Bechtel</h2>
              <h4>Responsive Web Design</h4>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-lg-6 col-lg-offset-0">
              <p>This project was for Ryan Bechtel, a motion graphic designer in Chicago, IL. His main goal was to attract prospective clients for freelance jobs, so he wanted a website that showcases some of his best work.</p>
              <p class="mb-30">I kept the design of this website simple to help Ryan's work stand out. His reel (AKA a video portfolio) is the most important piece of content, probably the first thing his future clients would look for, so it is placed front and center on the landing page. To make the embedded videos responsive and looking good on all devices, I used a jQuery plugin called <a href="http://fitvidsjs.com/" target="_blank" title="Fitvids.js library">FitVids.js</a>, which gives the videos a fluid width. For the contact form, I used <a href="https://github.com/PHPMailer/PHPMailer" target="_blank" title="PHPMailer Plugin">PHPMailer</a>, an email sending library for PHP, to make it functional and also coded in a "honeypot" to help prevent spam. Other than the two plugins I just mentioned, the rest of this website was completely hand-coded.</p>
            </div>
            <div class="col-sm-10 col-sm-offset-1 col-lg-6 col-lg-offset-0 md-center">
              <p><strong>Technologies Used:</strong></p>
              <p class="mb-30">
                <span class="label tag">Responsive Design</span>
                <span class="label tag">HTML5</span>
                <span class="label tag">CSS3</span>
                <span class="label tag">PHP</span>
                <span class="label tag">PHPMailer</span>
                <span class="label tag">FitVids.js</span>
              </p>
              <a class="btn td-btn outline green mb-30" href="http://ryanbechtel.com/" target="_blank" title="Link to ryanbechtel.com"><span class="glyphicon glyphicon-link"></span> Visit Live Site</a>
            </div>
          </div><!-- /.row -->
          <div class="modal-footer center">
            <button type="button" class="btn td-btn outline small" data-dismiss="modal">Close Project</button>
          </div><!-- /.modal-footer -->
        </div><!-- /.modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- Contact Modal -->
  <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactTitle">
    <div class="modal-dialog" role="document">
      <div class="modal-content bg-pink">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h3 class="modal-title" id="contactTitle">Contact Me</h3>
        </div><!-- /.modal-header -->
        <div class="modal-body">
          <form class="mb-15">
            <div class="form-group">
              <label class="sr-only" for="name">Name</label>
              <input type="text" class="form-control" id="name" placeholder="Your Name" required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="email">Email</label>
              <input type="email" class="form-control" id="email" placeholder="Your Email" required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="subject">Subject</label>
              <input type="text" class="form-control" id="subject" placeholder="Subject" required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="message">Message</label>
              <textarea class="form-control" id="message" rows="6" placeholder="Your message here..." required></textarea>
            </div>
            <small>*All fields are required</small>
            <div class="checkbox">
              <label>
                <input type="checkbox"> I'm a robot!
              </label>
            </div>
          </form>
          <div class="modal-footer">
            <button type="button" class="btn td-btn outline small white" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn td-btn outline small white">Send Message</button>
          </div><!-- /.modal-footer -->
        </div><!-- /.modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</body>
              
            
!

CSS

              
                /* =====================
  General Styles
===================== */
html { font-size: 110%; }
html, body {
  height: 100%; /* Fullscreen BG */
  width: 100%;
}
body {
  color: #394c4a;
  font-family: 'Work Sans', helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
}
h1 {
  font-family: 'Unica One', cursive;
  font-size: 3rem;
}
h2 {
  font-family: 'Unica One', cursive;
  font-size: 2.3rem;
}
h3 {
  font-family: 'Unica One', cursive;
  font-size: 1.8rem;
}
h4 {
  color: #9da7a6;
  font-size: 1.1rem;
  letter-spacing: 1px;
  line-height: 1.5;
  text-transform: uppercase;
}
small {
  line-height: 1;
}
a {
  color: #29a598;
  transition: background-color 0.2s ease-in-out,
              color 0.2s ease-in-out;
}
a:focus,
a:hover {
  background-color: #29a598;
  color: #fffefd;
}
hr {
  border-color: #cdd1cf;
  margin: 30px 0 60px;
}

/* =====================
  Navbar Styles
===================== */
.navbar-default {
  background-color: transparent;
  border: none;
  height: 80px;
  left: 0;
  margin-bottom: 0;
  padding: 0 30px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
}
.navbar-header {
  height: 80px;
}
.navbar-nav {
  margin-bottom: 0;
  margin-top: 0;
}
.navbar-brand,
.navbar-nav > li > a {
  font-family: 'Unica One', cursive;
  padding-bottom: 0;
  padding-top: 0;
}
.navbar-brand {
  font-size: 1.5rem;
  height: 60px;
  line-height: 60px;
  margin-top: 10px;
  opacity: 0;
  overflow: hidden;
  text-transform: uppercase;
  transition: opacity 0.5s ease-in-out;
}
.navbar-brand .logo {
  margin-right: 15px;
  margin-top: -12px;
  max-height: 90px;
}
.navbar-brand span {
  color: #29a598;
}
.navbar-nav > li > a,
.navbar-nav > li > button {
  color: #6b7a78;
  height: 36px;
  line-height: 36px;
  margin-top: 22px;
}
.navbar-default .navbar-nav > .active > a {
  background-color: transparent;
  color: #29a598;
  text-decoration: underline;
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: transparent;
  color: #208479;
  text-decoration: underline;
}
/* Fixed Menu */
.menu-fixed {
  background-color: #fffefd;
  background-color: rgba(255,254,253,0.97);
  border-radius: 0;
  box-shadow: 0 3px 9px rgba(8,33,30,0.15);
  height: 60px;
  padding-top: 0;
  position: fixed;
  transition: background-color 0.5s ease-in-out,
              box-shadow 0.5s ease-in-out;
}
.menu-fixed .navbar-header {
  height: 60px;
}
.menu-fixed .navbar-toggle,
.menu-fixed .navbar-nav > li > a {
  margin-top: 13px;
}
.menu-fixed .navbar-brand {
  display: block;
  margin-top: 0;
  opacity: 1;
}

/* =====================
  Jumbotron Styles
===================== */
.jumbotron {
  background: linear-gradient(rgba(255,254,253,0.9), rgba(255,254,253,0.9)), url("https://github.com/tiffanyadu/portfolio/blob/master/assets/imgs/jumbotron.jpg?raw=true") center center fixed;
  background-size: cover;
  height: 100%;
  margin: 0;
  min-height: 510px;
  position: relative;
  width: 100%;
}
.jumbotron .container {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.jumbotron .row {
  padding-bottom: 45px;
}
.jumbotron .logo {
  max-width: 150px;
  width: 80%;
}
.jumbotron .title {
  color: #29a598;
}
.jumbotron p {
  margin: 0;
}

/* =====================
  Containers
===================== */
section.row,
footer.row {
  padding: 30px 30px 60px;
}
/*** Modal ***/
.modal-dialog.wide {
  width: 90%;
}
.modal-dialog.wide .row {
  margin: 0 0 30px;
}
.modal-dialog.wide .row .row {
  margin-left: -15px;
  margin-right: -15px;
}
.modal-header {
  border: none;
  padding: 30px 30px 0;
}
.modal-header .close {
  font-size: 2rem;
}
.modal-content {
  background-color: #fffefd;
  border: none;
  box-shadow: 0 3px 6px rgba(8,33,30,0.2);
}
.modal-body {
  padding: 30px;
}
.modal-body li {
  margin-bottom: 9px;
}
.modal-footer {
  padding: 30px 0 15px;
}
/* Fade Up Animation */
.modal.fade .modal-dialog {
  -webkit-transform: translate3d(0, 100vh, 0);
  -ms-transform: translate3d(0, 100vh, 0);
  transform: translate3d(0, 100vh, 0);
}
.modal.in .modal-dialog {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.modal-backdrop {
  background-color: #fffefd;
  z-index: 1025;
}
.modal-backdrop.in {
    opacity: 0.9;
}

/* =====================
  Buttons
===================== */
.td-btn {
  padding: 12px 36px;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out;
}
.td-btn + .td-btn {
  margin-left: 6px;
}
.td-btn.small {
  font-family: 'Work Sans', helvetica, sans-serif;
  font-size: 0.7rem;
  padding: 9px 15px 8px;
}
.outline {
  background-color: transparent;
  border: 1px solid #9da6a4;
  color: #9da6a4;
}
.outline:focus,
.outline:hover {
  background-color: #9da6a4;;
  color: #fffefd;
}
.outline.green {
  border-color: #29a598;
  color: #29a598;
}
.outline.green:focus,
.outline.green:hover {
  background-color: #29a598;
  color: #fffefd;
}
.outline.white {
  border-color: #fffefd;
  color: #fffefd;
}
.outline.white:focus,
.outline.white:hover {
  background-color: #fffefd;
  color: #df3778;
}
/* Navbar Contact Button */
.navbar-nav .outline.pink {
  border-color: #df3778;
  color: #df3778;
  margin: 20px 15px 0;
  padding-top: 0;
}
.navbar-nav .outline.pink:focus,
.navbar-nav .outline.pink:hover {
  background-color: #df3778;
  color: #fffefd;
  text-decoration: none;
}
.menu-fixed .outline.pink {
  margin-top: 11px;
}
/* Codepen and Github SVG Buttons */
.iconBtn > img {
  margin-right: 6px;
  margin-top: -3px;
  width: 18px;
}
.iconBtn:focus > img,
.iconBtn:hover > img {
  -webkit-filter: brightness(10);
  filter: brightness(10);
}

/* Social Icons */
.social {
  display: inline-block;
  transition: box-shadow 0.2s ease-in-out,
              transform 0.2s ease-in-out;
  height: 36px;
  margin-left: 3px;
  width: 36px;
}
.social:focus,
.social:hover {
  background-color: transparent;
}
.social + .social {
  margin-left: 9px;
}
.social img {
  max-width: 100%;
}

/* =====================
  Icons and Images
===================== */
.icon {
  max-height: 90px;
}
.icon + p { 
  margin-top: 15px;
}
/* Profile Pic */
.profile {
  max-width: 180px;
  padding: 0 15px 0 0;
}
/* Glyphicons */
.glyphicon-heart {
  color: #df3778;
}

/* =====================
  Resume Modal
===================== */
#resumeModal h4 {
  margin-top: 0;
}
.year {
  text-align: right;
}

/* =====================
  Portfolio Projects
===================== */
#projects .carousel-control {
  background: none;
  color: #fffefd;
  font-size: 2rem;
  margin-top: 150%;
  opacity: 1;
  width: 100%;
  transition: all 0.2s ease-in-out;
  text-shadow: none;
}
#projects .carousel-control:focus,
#projects .carousel-control:hover {
  color: #29a598;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#projects .carousel-inner {
  overflow: inherit;
}
#projects .carousel-inner img {
  width: 100%;
}
#projects .carousel-caption {
  bottom: inherit;
  left: inherit;
  position: relative;
  right: inherit;
  text-align: left;
  text-shadow: none;
}
.card {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(8,33,30,0.5);
  color: #394c4a;
  padding: 30px;
}
.card h3 {
  margin-top: 0;
}
.card h4 {
  font-size: 0.8rem;
}
#portfolio .carousel-indicators {
  bottom: 0;
  position: relative;
}
#portfolio .carousel-indicators li {
  border-radius: 20px;
  height: 15px;
  width: 15px;
}
#portfolio .carousel-indicators li.active {
  height: 17px;
  width: 17px;
}
/*** Project Modals ***/
.hero {
  margin: 30px auto;
  max-width: 900px;
  width: 100%;
}
.label.tag {
    background-color: #ffce3f;
    border-radius: 0;
    font-weight: normal;
}
/* To override button alignment in modals */
.center {
  text-align: center;
}

/* =====================
  Other Styles
===================== */
.mb-0 {
  margin-bottom: 0;
}
.mb-15 {
  margin-bottom: 15px!important;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-60 {
  margin-bottom: 60px;
}
.mt-30 {
  margin-top: 30px;
}
.bg-shadow {
  box-shadow: 0 1px 3px rgba(8,33,30,0.5);
}
.bg-white {
  background-color: #fffefd;
  position: relative;
}
.bg-pink {
  background-color: #df3778;
  color: #fffefd;
  position: relative;
}
.bg-star-y {
  background: #ffce3f url(https://github.com/tiffanyadu/portfolio/blob/master/assets/imgs/yellow-star.png?raw=true) fixed;
  background-size: 60px;
  color: #fffefd;
}
.bg-star-g {
  background: #29a598 url(https://github.com/tiffanyadu/portfolio/blob/master/assets/imgs/green-star.png?raw=true) fixed;
  background-size: 60px;
  color: #fffefd;
}
.bg-honeycomb {
  background: #fffefd url(https://github.com/tiffanyadu/portfolio/blob/master/assets/imgs/honeycomb.png?raw=true) fixed;
  background-size: 24px;
}
.gray {
  color: #9da6a4;
}
.dashed {
  border-top: 2px dashed #ffce3f;
}
/*** Contact Form ***/
.checkbox {
  display: none;
}

/* =====================
  Media Queries
===================== */
@media (max-width: 1199px) {
  /* Center class for medium screens */
  .md-center { text-align: center; }
}
@media (max-width: 991px) {
  /*** Resume ***/
  .year {
    text-align: left;
  }
  /*** Portfolio ***/
  #projects .carousel-control {
    margin-top: 300%;
  }
  #projects .carousel-inner img {
    max-width: 480px;
    width: 100%;
  }
}
@media (max-width: 767px) {
  /*** Page Elements ***/
  section .row [class^="col-sm-"] + [class^="col-sm-"],
  section .row [class*=" col-sm-"] + [class*=" col-sm-"] {
    margin-top: 30px;
  }
  /*** Jumbotron ***/
  .jumbotron .logo {
    max-width: 120px;
  }
  /*** Mobile Nav ***/
  .navbar-toggle {
    height: 36px;
    margin-bottom: 22px;
    margin-top: 22px;
  }
  .navbar-toggle .glyphicon {
    color: #6b7a78;
    top: -2px;
  }
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background-color: transparent;
    border-color: #29a598;
  }
  .navbar-default .navbar-toggle .active {
    color: #29a598;
  }
  .navbar-collapse {
    background-color: #fffefd;
    background-color: rgba(255,254,253,0.97);
    border: none;
    box-shadow: 0 2px 8px rgba(8,33,30,0.2);
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
  }
  .navbar-collapse .outline.pink {
    margin: 15px auto 30px;
    max-width: 150px;
  }
  /*** Portfolio ***/
  #projects .carousel-control {
    margin-top: 300%;
  }
  #projects .card {
    text-align: center;
  }
}
              
            
!

JS

              
                /*jslint browser:true */
$(document).ready(function () {
	var $body = $('body');
	var $navbar = $('.navbar-default');
	var $offsetY = $navbar.offset().top + 10;
	var $menuButton = $('button.navbar-toggle');
	var $menuIcon = $('.navbar-toggle .glyphicon');
	var $collapsedMenuItem = $('.navbar-collapse.collapse li');
	var $modalBackdropDiv = $('<div class="modal-backdrop fade in"></div>');
	var $scrollButton = $('.scroll');
	var $socialIcon = $('.social');

	// Fixed Nav after scroll
	function scroll() {
		if ($(window).scrollTop() >= $offsetY) {
			$navbar.addClass('menu-fixed').css('background-color', 'rgba(255,254,253,0.97)');
		} else {
			$navbar.removeClass('menu-fixed').css('background-color', 'transparent');
		}
	}
	document.onscroll = scroll;

	// Mobile Menu functions
	function openMenu() {
		$menuIcon.removeClass('glyphicon-menu-hamburger').addClass('glyphicon-remove active');
		$modalBackdropDiv.css('z-index', 900);
		$body.append($modalBackdropDiv);
		if (!$navbar.hasClass('menu-fixed')) {
			$navbar.css('background-color', 'rgba(255,254,253,0.97)');
		}
		// Close menu after clicking modal-backdrop
		$modalBackdropDiv.on('click', function () {
			$('.navbar-toggle').click();
			closeMenu();
		});
	}
	function closeMenu() {
		$menuIcon.removeClass('glyphicon-remove active').addClass('glyphicon-menu-hamburger');
		$modalBackdropDiv.css('z-index', 1025).remove();
		if (!$navbar.hasClass('menu-fixed')) {
			$navbar.css('background-color', 'transparent');
		}
	}
	// Mobile Menu Icon Toggle
	$menuButton.on('click', function () {
		if ($menuIcon.hasClass('glyphicon-menu-hamburger')) {
			openMenu();
			// Close menu after clicking a link
			$collapsedMenuItem.on('click', function () {
				$('.navbar-toggle').click(); // Trigger collapse animation
				closeMenu();
			});
		} else {
			closeMenu();
		}
	});
	// Collapse menu on resize
	$(window).resize(closeMenu());

	// Smooth scroll to content
	$scrollButton.on('click', function (e) {
		e.preventDefault();
		var $link = $(this).attr('href');
		$('html, body').animate({
			scrollTop: $($link).offset().top - 60
		}, 900);
	});

	// Social icons hover effect
	$socialIcon.on({
		'focus mouseenter': function () {
			var $iconImg = $(this).children();
			var $href = $iconImg.attr('src').slice(0, -18) + 'color.png?raw=true'; // Remove 'black.svg' from end and add 'color.svg'
			$iconImg.attr('src', $href);
		},
		'blur mouseleave': function () {
			var $iconImg = $(this).children();
			var $href = $iconImg.attr('src').slice(0, -18) + 'black.png?raw=true';
			$iconImg.attr('src', $href);
		}
	});

	// Center modals vertically
	function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find('.modal-dialog');
    var $offset = ($(window).height() - $dialog.height()) / 2;
    var $bottomMargin = parseInt($dialog.css('margin-bottom'), 10);

    // If modal is taller than screen height, top margin = bottom margin
    if ($offset < $bottomMargin) {
    	$offset = $bottomMargin;
    }
    $dialog.css('margin-top', $offset);
  }

  $(document).on('show.bs.modal', '.modal', centerModal);
  $(window).on('resize', function () {
    $('.modal:visible').each(centerModal);
  });
});
              
            
!
999px

Console