Simple portfolio written in AngularJS that you can use with Jekyll (GitHub Pages)

README.md

README

1. Copy portfolio.html into _includes folder.
2. Go to your portfolio page and add {% include portfolio.html %} where you want to show it.
3. Edit projectList into portfolio.html to show your projects.

portfolio.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>

<script>
angular.module('portfolio', [])
    .controller('portfolioCtrl', portfolioCtrl);
portfolioCtrl.$inject = ['$scope']
function portfolioCtrl($scope) {
    this.getProject = getProject;
    
    var projectList = 
    [
        {
            "name":"Proyecto 1",
            "desc":"Descripcion del proyecto 1.",
            "url":"repoURL"
        },
        {
            "name":"Proyecto 2",
            "desc":"Descripcion del proyecto 2.",
            "url":"repoURL"
        },
        {
            "name":"Proyecto 3",
            "desc":"Descripcion del proyecto 3.",
            "url":"repoURL"
        },
        {
            "name":"Proyecto 4",
            "desc":"Descripcion del proyecto 4.",
            "url":"repoURL"
        }
    ]
    
    function getProject(id) {
        $scope.show = true;
        
        var project = projectList[id];
        $scope.name  = project.name;
        $scope.desc  = project.desc;
        $scope.url   = project.url;
    }
}  
</script>

<style>
    #projects {
        display: inline;
    }
</style>

<div ng-app="portfolio">
  <div ng-controller="portfolioCtrl as ctrl">
      
      <!-- Project links. Use it to view accross projects -->
      <div id="projects">
          <a href="#" ng-click="ctrl.getProject(0)"><img src="img.png" width="200" height="200"></a>
          <a href="#" ng-click="ctrl.getProject(1)"><img src="img.png" width="200" height="200"></a>
          <a href="#" ng-click="ctrl.getProject(2)"><img src="img.png" width="200" height="200"></a>
          <a href="#" ng-click="ctrl.getProject(3)"><img src="img.png" width="200" height="200"></a>
      </div>
      
      <table ng-show="show">
          <tr>
              <!-- NAME -->
              <td><h3><span ng-bind="name"></span></h3></td>
          </tr>
          <tr>
              <!-- DESCRIPTION -->
              <td><span ng-bind="desc"></span></td>
          </tr>
          <tr>
              <!-- URL -->
              <td><span ng-bind="url"></span></td>
          </tr>
      </table>
  </div>
</div>