Portfolio.js

Tiny JavaScript carousel library with horizontal scrolling and all the goodness.

• Lazy-load images on scroll
• Scroll animation on item click
• Responsiveness
• Very fast & easy to setup
• Vanilla JavaScript (No jQuery dependency)

Demo: https://portfoliojs.com

Install

Directly refer it in your HTML

<!-- Styles for Portfolio library -->
<link rel="stylesheet" href="https://unpkg.com/portfolio-js@latest/dist/portfolio.css" />

<!-- Include Portfolio library -->
<script src="https://unpkg.com/portfolio-js@latest/dist/portfolio.umd.js"></script>

If you're using bundlers like Webpack, Rollup.js or Parcel.js

npm install --save portfolio-js

Usage

HTML

<div class="pf-carousel my-image-gallery">
  <div class="pf-slider">
    <div class="pf-item">
      <img class="pf-item-image" data-src="https://example.com/thor.png" />
      <div class="pf-item-description">
        Photo by Jane Foster
      </div>
    </div>
    <div class="pf-item">
      <img class="pf-item-image" data-src="https://example.com/hulk_12.png" />
      <div class="pf-item-description">
        Photo by Betty Ross on Unsplash
      </div>
    </div>  
    <!-- Add more images -->
  </div>
</div>

JavaScript

Once the assets are included as mentioned in install section you can activate Portfolio like this:

new Portfolio('.my-image-gallery');

JavaScript (w/ Bundler)

import 'portfolio-js/dist/portfolio.css';
import Portfolio from 'portfolio-js';

new Portfolio('.my-image-gallery');

Publish

Publishing package to npm repository.

npm install
npm version patch # patch|minor|major
npm publish

Deploy (Homepage)

Instructions to deploy homepage - portfoliojs.com.

• Required only for first time

  git branch gh-pages
  echo "portfoliojs.com" > CNAME
  

• Updating existing page

  git checkout gh-pages
  git merge master
  npm install && npm run build-demo
  

• Add Google Analytics tracking code and push to remote

  git add . && git commit -am "Releasing updated demo page."
  git push origin gh-pages
  

Author

Abhinay Omkar