Updated portfolio website with steam graph project.

index.html

@@ -74,17 +74,31 @@
         <hr class="star-primary">
         <h3 class="text-center">Click Picture to Show Project Details</h3>
         <div class="row">
-          <!--Hoffends web app-->
+
+          <!--Steam Friends Graph-->
           <div class="col-sm-4 portfolio-item">
-            <a class="portfolio-link" href="#portfolioHoffends" data-toggle="modal">
+            <a class="portfolio-link" href="#portfolioSteamGraph" 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/hoffends.png" alt="">
+              <img class="img-fluid" src="img/portfolio/steamGraph.png" alt="Steam graph">
             </a>
           </div>
+
+          <!--Pioneer web app-->
+          <div class="col-sm-4 portfolio-item">
+            <a class="portfolio-link" href="#portfolioPioneer" 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/pioneer.png" alt="">
+            </a>
+          </div>
+
           <!--Floppy drives-->
           <div class="col-sm-4 portfolio-item">
             <a class="portfolio-link" href="#portfolioFloppy" data-toggle="modal">
@@ -93,31 +107,34 @@
                   <i class="fa fa-search-plus fa-3x"></i>
                 </div>
               </div>
-              <img class="img-fluid" src="img/portfolio/floppy.jpg" alt="">
+              <img class="img-fluid" src="img/portfolio/floppy.jpg" alt="image of floppy music drives">
             </a>
           </div>
-          <!--Blog-->
+
+          <!--Hoffends web app-->
           <div class="col-sm-4 portfolio-item">
-            <a class="portfolio-link" href="#portfolioJrtechs" data-toggle="modal">
+            <a class="portfolio-link" href="#portfolioHoffends" 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/jrtechs.net.png" alt="">
+              <img class="img-fluid" src="img/portfolio/hoffends.png" alt="img of hoffends employee app">
             </a>
           </div>
-          <!--Pioneer web app-->
+
+          <!--Blog-->
           <div class="col-sm-4 portfolio-item">
-            <a class="portfolio-link" href="#portfolioPioneer" data-toggle="modal">
+            <a class="portfolio-link" href="#portfolioJrtechs" 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/pioneer.png" alt="">
+              <img class="img-fluid" src="img/portfolio/jrtechs.net.png" alt="img of wordpress blog">
             </a>
           </div>
+
           <!--Bryce's Quotes website-->
           <div class="col-sm-4 portfolio-item">
             <a class="portfolio-link" href="#portfolioQuotes" data-toggle="modal">
@@ -129,6 +146,7 @@
               <img class="img-fluid" src="img/portfolio/quotes.png" alt="">
             </a>
           </div>
+
           <!--Tanks Java Game-->
           <div class="col-sm-4 portfolio-item">
             <a class="portfolio-link" href="#portfolioTanks" data-toggle="modal">
@@ -140,6 +158,7 @@
               <img class="img-fluid" src="img/portfolio/tanks.png" alt="">
             </a>
           </div>
+
           <!--Brick Hack 4 whats the trend-->
           <div class="col-sm-4 portfolio-item">
             <a class="portfolio-link" href="#brickHack4" data-toggle="modal">
@@ -151,6 +170,7 @@
               <img class="img-fluid" src="img/portfolio/trend.jpg" alt="">
             </a>
           </div>
+
           <!--Tiger-OS website-->
           <div class="col-sm-4 portfolio-item">
             <a class="portfolio-link" href="#tigerOSWebsite" data-toggle="modal">
@@ -162,6 +182,8 @@
               <img class="img-fluid" src="img/portfolio/tiger-os.png" alt="">
             </a>
           </div>
+
+
           <!--Panda Games-->
           <div class="col-sm-4 portfolio-item">
             <a class="portfolio-link" href="#pandaGames" data-toggle="modal">
@@ -173,6 +195,7 @@
               <img class="img-fluid" src="img/portfolio/clubpanda.png" alt="">
             </a>
           </div>
+
           <!--Bash Manager-->
           <div class="col-sm-4 portfolio-item">
             <a class="portfolio-link" href="#bashManager" data-toggle="modal">
@@ -290,6 +313,57 @@
     </div>
 
     <!-- Portfolio Modals -->
+
+    <!-- Steam graph-->
+    <div class="portfolio-modal modal fade" id="portfolioSteamGraph" 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>Steam Friends Graph</h2>
+                  <hr class="star-primary">
+                  <img class="img-fluid img-centered" src="img/portfolio/steamGraph.png" alt="Steam graph image">
+                  <p>Using the steam api, hbase graph database, java, web sockets, and javascript, I made a website
+                    which renders people's steam friend graphs in their web browser. I really enjoyed making this
+                    project and would encourage people to check out the code on my
+                    <a href="https://github.com/jrtechs/SteamFriendsGraph">github</a>.
+                  </p>
+                  <ul class="list-inline item-details">
+                    <li>Date:
+                      <strong>
+                        June 2018
+                      </strong>
+                    </li>
+                    <li>Skills:
+                      <strong>
+                        <a href="#">Java</a>
+                      </strong>
+                      <strong>
+                        <a href="#">Gremlin Query Language</a>
+                      </strong>
+                      <strong>
+                        <a href="#">Javascript</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>
+
     <!-- Pioneer Website -->
     <div class="portfolio-modal modal fade" id="portfolioPioneer" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog" role="document">
@@ -788,6 +862,22 @@
     <script src="js/jquery.easing.min.js"></script>
 
 
+  <!--
+                        __,,,,_
+       _ __..-;''`--/'/ /.',-`-.
+   (`/' ` |  \ \ \\ / / / / .-'/`,_
+  /'`\ \   |  \ | \| // // / -.,/_,'-,
+ /<7' ;  \ \  | ; ||/ /| | \/    |`-/,/-.,_,/')
+/  _.-, `,-\,__|  _-| / \ \/|_/  |    '-/.;.\'
+`-`  f/ ;      / __/ \__ `/ |__/ |
+     `-'      |  -| =|\_  \  |-' |
+           __/   /_..-' `  ),'  //
+       fL ((__.-'((___..-'' \__.'
+  Wacha doing here?
+  Check out more of my code at https://github.com/jrtechs
+
+  -->
+
   </body>
 
 </html>