|
|
|
@ -118,6 +118,30 @@ |
|
|
|
<h3 class="text-center">Click Picture to Show Project Details</h3> |
|
|
|
<div class="row"> |
|
|
|
|
|
|
|
<!--Github Friends Graph--> |
|
|
|
<div class="col-sm-4 portfolio-item"> |
|
|
|
<a class="portfolio-link" href="#portfolioGithub" data-toggle="modal"> |
|
|
|
<div class="caption"> |
|
|
|
<div class="caption-content"> |
|
|
|
<i class="fa fa-search-plus fa-3x"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img class="img-fluid" src="img/portfolio/jrtechsGithubGraph.png" alt="Steam graph"> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--Home Brew Plex Server--> |
|
|
|
<div class="col-sm-4 portfolio-item"> |
|
|
|
<a class="portfolio-link" href="#portfolioPlex" data-toggle="modal"> |
|
|
|
<div class="caption"> |
|
|
|
<div class="caption-content"> |
|
|
|
<i class="fa fa-search-plus fa-3x"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img class="img-fluid" src="img/portfolio/videosPage.png" alt="Steam graph"> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--Steam Friends Graph--> |
|
|
|
<div class="col-sm-4 portfolio-item"> |
|
|
|
<a class="portfolio-link" href="#portfolioSteamGraph" data-toggle="modal"> |
|
|
|
@ -410,6 +434,114 @@ |
|
|
|
|
|
|
|
<!-- Portfolio Modals --> |
|
|
|
|
|
|
|
<!-- Github graph--> |
|
|
|
<div class="portfolio-modal modal fade" id="portfolioGithub" tabindex="-1" role="dialog" aria-hidden="true"> |
|
|
|
<div class="modal-dialog" role="document"> |
|
|
|
<div class="modal-content"> |
|
|
|
<div class="close-modal" data-dismiss="modal"> |
|
|
|
<div class="lr"> |
|
|
|
<div class="rl"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="container"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-8 mx-auto"> |
|
|
|
<div class="modal-body"> |
|
|
|
<h2>GitHub Graphs</h2> |
|
|
|
<hr class="star-primary"> |
|
|
|
<img class="img-fluid img-centered" src="img/portfolio/jrtechsGithubGraph.png" alt="GitHub Friend Visualization"> |
|
|
|
<p> |
|
|
|
This is an interactive website which allows you to make various graphs of information from the GitHub network. |
|
|
|
Currently the site generates three types of graphs-- the most popular and entertaining of which is the friends graph. |
|
|
|
The friends graph helps you visualize clusters of friends/collaborators on GitHub. |
|
|
|
This can be used to spot clusters within organizations and schools. |
|
|
|
Check out the website live <a href="https://github-graphs.com/">here</a>. |
|
|
|
</p> |
|
|
|
<img class="img-fluid img-centered" src="img/portfolio/RepositorieView.png" alt="Repositories GitHub View"> |
|
|
|
<ul class="list-inline item-details"> |
|
|
|
<li>Date: |
|
|
|
<strong> |
|
|
|
February 2019 |
|
|
|
</strong> |
|
|
|
</li> |
|
|
|
<li>Skills: |
|
|
|
<strong> |
|
|
|
<a href="#">JavaScript</a> |
|
|
|
</strong> |
|
|
|
<strong> |
|
|
|
<a href="#">NodeJS</a> |
|
|
|
</strong> |
|
|
|
<strong> |
|
|
|
<a href="#">JQuery</a> |
|
|
|
</strong> |
|
|
|
<strong> |
|
|
|
<a href="#">GIT</a> |
|
|
|
</strong> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<button class="btn btn-success" type="button" data-dismiss="modal"> |
|
|
|
<i class="fa fa-times"></i> |
|
|
|
Close</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Steam graph--> |
|
|
|
<div class="portfolio-modal modal fade" id="portfolioPlex" tabindex="-1" role="dialog" aria-hidden="true"> |
|
|
|
<div class="modal-dialog" role="document"> |
|
|
|
<div class="modal-content"> |
|
|
|
<div class="close-modal" data-dismiss="modal"> |
|
|
|
<div class="lr"> |
|
|
|
<div class="rl"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="container"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-8 mx-auto"> |
|
|
|
<div class="modal-body"> |
|
|
|
<h2>Home Brew Plex Server</h2> |
|
|
|
<hr class="star-primary"> |
|
|
|
<img class="img-fluid img-centered" src="img/portfolio/videosPage.png" alt="Video Server"> |
|
|
|
<p> |
|
|
|
This is a lightweight node application which acts as a simple video sharing website. |
|
|
|
This website has a robust API and user system so that people can securely stream both public |
|
|
|
and private videos from a remote server. Check out the website live <a href="https://video.jrtechs.net/">here</a>. |
|
|
|
</p> |
|
|
|
<img class="img-fluid img-centered" src="img/portfolio/systemControlsView.png" alt="Video Server"> |
|
|
|
<ul class="list-inline item-details"> |
|
|
|
<li>Date: |
|
|
|
<strong> |
|
|
|
February 2019 |
|
|
|
</strong> |
|
|
|
</li> |
|
|
|
<li>Skills: |
|
|
|
<strong> |
|
|
|
<a href="#">JavaScript</a> |
|
|
|
</strong> |
|
|
|
<strong> |
|
|
|
<a href="#">NodeJS</a> |
|
|
|
</strong> |
|
|
|
<strong> |
|
|
|
<a href="#">JQuery</a> |
|
|
|
</strong> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<button class="btn btn-success" type="button" data-dismiss="modal"> |
|
|
|
<i class="fa fa-times"></i> |
|
|
|
Close</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Steam graph--> |
|
|
|
<div class="portfolio-modal modal fade" id="portfolioSteamGraph" tabindex="-1" role="dialog" aria-hidden="true"> |
|
|
|
<div class="modal-dialog" role="document"> |
|
|
|
|
