9-Projects Style

Key Objectives

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

Video

Part1

Part2

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

This module has two parts for the videos.
Go to the module-8-portfolio-styling-starter branch.
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.
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.
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.
To add wowjs or 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.
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.
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.

Here is the finished code.

gulpfile.js

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");

/* 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>

      <!-- 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>

<!--==========================
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>

<!--==========================
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

<!--==========================
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

<!--==========================
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

/* 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

"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

/* 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 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);
}

Previous8-Header Style Next10-About Style

Last updated 7 years ago