# 9-Projects Style

## Key Objectives

* To start to stylize the **projects** section.
* To add basic animations and effects to our project.

## Video

**Part1**

{% embed url="<https://www.youtube.com/watch?v=cbKX0S6yqe8>" %}

\
&#x20;**Part2**

{% embed url="<https://www.youtube.com/watch?v=o9CY8N5a7FM>" %}

## Overview

In this module, we start to refactor or stub out code in the **projects** section. In our example project, we add some basic animation to the projects section. It is **not required** that you add animations to your portfolio, but it's **good to know** how to do it. In modern front end development, it's a skill that you will need to have. We also do some more additions to our `gulpfile.js` for **minification**. Minification allows us to streamline the **whitespace** out of our code, which makes the app **faster** in the end. When we run `gulp dev`, minification happens.

## Notes/Tips

* This is an **open-ended task**, and it gets hard to identify when you are done. We recommend timeboxing your work. Set a designated time and quit. Do a little animation and move on.
* Having good ideas is great, but it's also ok to just explore. Just like any other creative endeavor, ideas will often come after the first try and after you come back to it later.
* Don't be afraid to throw out entire ideas. If it's not working, sometimes you just chuck it.
* It can take many attempts to get animations and stylistic things looking nice and how you want them. Don't be discouraged if you don't get it the first time.

## Steps

1. This module has two parts for the videos.
2. Go to the `module-8-portfolio-styling-starter` branch.
3. Open your terminal window and do `git pull`. This will make sure that you have the most up-to-date version of our code from GitHub. If you started this project early on, we might have made updates to this module.&#x20;
4. While you have the terminal open, run `npm install`. This will update the **animation dependencies** that are needed. If you get the dreaded error that says **'run as root administrator'**, close down VS Code and reopen it. Run `npm install` again. That should fix it.
5. Add the ability to minify your code with a single gulp command, as explained in the video. You also want to be able to run `gulp dev` and have the code minify any new changes to your JavaScript files.
6. To add [wowjs](https://wowjs.uk/) or [animate.css](https://daneden.github.io/animate.css/) to your project, you'll need to do an `npm install` for both of those. Read the docs for each one to figure that out.
7. After looking at the example app, start to stylize your own **portfolio/projects** section. Play around with `animation.css` and `wowjs`. See what you think. These are great tools to know.
8. When you get your projects section to a satisfactory place and gulp is doing proper **minification**, go ahead and move on to the next module.
9. Here is the finished code.
   * `gulpfile.js`

     ```javascript
     var gulp = require('gulp');
     var browserSync = require('browser-sync').create();
     var sass = require('gulp-sass');
     var reload = browserSync.reload;
     var filter = require('gulp-filter');
     var uglify = require('gulp-uglify');
     var rename = require("gulp-rename");
     ```

     ```javascript
     /* Minifies js. */
     gulp.task('minify-js', function() {
           return gulp.src('js/main.js')
           .pipe(uglify())
           .pipe(rename({
               suffix: '.min'
       }))
           .pipe(gulp.dest('js'))
           .pipe(browserSync.reload({
               stream: true
       }))
     });

     /* Runs all appropriate tasks and watches for changes. */
     gulp.task('dev', ['serve', 'sass', 'minify-js'], function() {
           gulp.watch('scss/*.scss', ['sass']);
           gulp.watch('*.html');
           gulp.watch('js/*.js', ['minify-js']);
           gulp.watch('*.html', reload);
           gulp.watch('js/**/*.js', reload);
     });
     ```
   * `index.html`
     * `<head>`

       ```markup
             <!-- Custom styles for this template -->
             <link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
             <link href="css/main.css" rel="stylesheet" type="text/css">
       </head>
       ```
     * `<nav>`

       ```markup
       <!--==========================
       Navigation Section
       ============================-->
         <nav class="navbar navbar-default" id="main-nav" role="navigation">
             <div class="container">
                 <div class="navbar-header">
                     <button type="button" class="navbar-toggle bg-primary text-white rounded" data-toggle="collapse" data-target=".navbar-collapse"
                         aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
                     <a class="navbar-brand text-uppercase navbar-left" class="section-title" href="#">EFA Starter Template</a>
                 </div>
       ```
     * `<header>`

       ```markup
       <!--==========================
       Header Section
       ============================-->
       <header class="jumbotron text-center" id="main-header">
             <div class="container">
                 <h1 class="jumbotron-heading">Coder Portfolio</h1>
                 <div class="section-description wow fadeInUp" data-wow-duration="5s">
                     <p class="lead text-muted">Some text. A tag line. A lorem ipsum for now. More text that shows some sort of call to action.</p>

                 </div>
                 <p>
                     <a href="#" class="btn btn-primary" id="header-action">Press here for something.</a>
                 </p>
             </div>
       </header>
       ```
     * `Portfolio Section`

       ```markup
       <!--==========================
       Project Section
       ============================-->
       <section id="portfolio">
             <div class="container wow fadeInUp">
                 <div class="row">
                     <div class="col-md-12">
                         <h3 class="section-title">Portfolio</h3>
                         <div class="section-title-divider"></div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-md-3">
                         <a class="portfolio-item" style="background-image: url(assets/img/badge-blue.png);" href="">
                             <div class="details">
                                 <h4>Portfolio 1</h4>
                                 <span>CSS Creature</span>
                             </div>
                         </a>
                     </div>

                     <div class="col-md-3">
                         <a class="portfolio-item" style="background-image: url(assets/img/badge-red.png);" href="">
                             <div class="details">
                                 <h4>Portfolio 2</h4>
                                 <span>Store app</span>
                             </div>
                         </a>
                     </div>

                     <div class="col-md-3">
                         <a class="portfolio-item" style="background-image: url(assets/img/badge-yellow.png);" href="">
                             <div class="details">
                                 <h4>Portfolio 3</h4>
                                 <span>JavaScript Library</span>
                             </div>
                         </a>
                     </div>

                     <div class="col-md-3">
                         <a class="portfolio-item" style="background-image: url(assets/img/badge-blue.png);" href="">
                             <div class="details">
                                 <h4>Portfolio 4</h4>
                                 <span>Workout Log</span>
                             </div>
                         </a>
                     </div>

                     <div class="col-md-3">
                         <a class="portfolio-item" style="background-image: url(assets/img/badge-red.png);" href="">
                             <div class="details">
                                 <h4>Portfolio 5</h4>
                                 <span>Bucketlist App</span>
                             </div>
                         </a>
                     </div>

                     <div class="col-md-3">
                         <a class="portfolio-item" style="background-image: url(assets/img/badge-blue.png);" href="">
                             <div class="details">
                                 <h4>Portfolio 6</h4>
                                 <span>Firebase Starter</span>
                             </div>
                         </a>
                     </div>

                     <div class="col-md-3">
                         <a class="portfolio-item" style="background-image: url(assets/img/badge-yellow.png);" href="">
                             <div class="details">
                                 <h4>Portfolio 7</h4>
                                 <span>React Projects</span>
                             </div>
                         </a>
                     </div>

                     <div class="col-md-3">
                         <a class="portfolio-item img-responsive" style="background-image: url(assets/img/badge-red.png);" href="">
                             <div class="details">
                                 <h4>Portfolio 8</h4>
                                 <span>Node Projects</span>
                             </div>
                         </a>
                     </div>
                 </div>
             </div>
       </section>
       ```
     * Add Comment blocks for `About` `Contact` `Footer` and `Modals Sections`
     * `Scripts Section`

       ```markup
       <!--==========================
       Scripts Section
       ============================-->

       <!-- Bootstrap & jQuery Scripts - Note: jQuery must be first -->
       <script src="node_modules/jquery/dist/jquery.min.js"></script>
       <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

       <!-- jQuery 3rd Party Scripts-->
       <script src="node_modules/wowjs/dist/wow.min.js"></script>

       <!-- Custom scripts for this template -->
       <script src="js/main.min.js"></script>
       ```
     * `main.js`

       ```javascript
       /* General jQuery & JS stuff goes here. */
       jQuery(document).ready(function ($) {
       console.log("A starter template created by Eleven Fifty Academy under MIT Licensing.");
       /* Initialize wowjs */
       new WOW().init();
       });
       ```
     * `package.json`

       ```javascript
       "dependencies": {
         "animate.css": "^3.5.2",
         "bootstrap": "^3.3.7",
         "font-awesome": "^4.7.0",
         "jquery": "^3.2.1",
         "wowjs": "^1.1.3"
       }
       ```
     * `_body.scss`

       ```css
       /* Body section. */

       body {
             padding: 15px;
             background: url('http://eleven50.wpengine.com/wp-content/uploads/2017/03/Learning-to-Code5.png?id=21797') repeat center center;
       }

       header {
             text-align: center;
       }

       .section-title h2 {
             display: inline-block;
             font-size: 30px;
             font-weight: 300;
             line-height: 30px;
             margin-bottom: 40px;
             padding-bottom: 10px;
             position: relative;
             text-transform: uppercase;
       }
       ```
     * `_portfolio.scss`

       ```css
       /* CSS code for the Portfolio section. */
       /* Credit to: */

       /* ------------------------------
       Portfolio Section
       --------------------------------*/
       #portfolio {
         background: #fff;
         padding: 80px 0;
       }

       #portfolio .portfolio-item {
             background-position: center center;
             background-size: cover;
             background-repeat: no-repeat;
             position: relative;
             height: 260px;
             width: 100%;
             display: table;
             overflow: hidden;
             margin-bottom: 30px;
       }

       #portfolio .portfolio-item .details {
             height: 260px;
             background: #fff;
             display: table-cell;
             vertical-align: middle;
             opacity: 0;
             transition: 0.3s;
             text-align: center;
       }

       #portfolio .portfolio-item .details h4 {
             font-size: 25px;
             transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
             transform: translate3d(0, -15px, 0);
             font-weight: 700;
             color: #000;
       }

       #portfolio .portfolio-item .details span {
             display: block;
             color: $gray;
             font-size: 18px;
             transition: opacity 0.3s, -webkit-transform 0.3s;
             transition: transform 0.3s, opacity 0.3s;
             transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
             -webkit-transform: translate3d(0, 15px, 0);
             transform: translate3d(0, 15px, 0);
       }

       #portfolio .portfolio-item:hover .details {
             opacity: 0.6;
       }

       #portfolio .portfolio-item:hover .details h4 {
             -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0);
       }

       #portfolio .portfolio-item:hover .details span {
             -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0);
       }
       ```
