Personal portfolio website created with bootstrap.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1250 lines
50 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Portfolio website for Jeffery Russell a computer science student at RIT">
<meta name="author" content="Jeffery Russell">
<title>Jeffery Russell</title>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
rel="stylesheet" type="text/css">
<link href="css/freelancer.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="./img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon/favicon-16x16.png">
<link rel="manifest" href="./img/favicon/site.webmanifest">
<link rel="mask-icon" href="./img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#498FBE">
<!-- Plugin CSS -->
<link href="css/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Work Experience</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Recent Blog Posts</a>
</li> -->
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="https://jrtechs.net">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="https://github.com/jrtechs">Github</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="https://www.youtube.com/c/JrtechsNet">Youtube</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead banner">
<div class="intro-text">
<span class="name pt-md-5">Jeffery Russell</span>
<hr class="star-light">
<span class="skills">Software Engineer</span>
<br>
<div class="row h-50">
<div class="col md-4">
<a href="#portfolio" class="btn btn-lg btn-outline js-scroll-trigger p-4 center-text">
<i class="fa fa-wrench"></i>
Projects
</a>
</div>
<!--<div class="col md-4">-->
<!--<a href="#about" class="btn btn-lg btn-outline js-scroll-trigger p-4 center-text">-->
<!--<i class="fa fa-briefcase"></i>-->
<!--Work-->
<!--</a>-->
<!--</div>-->
<div class="col md-4">
<a href="#about" class="btn btn-lg btn-outline js-scroll-trigger p-4 center-text">
<i class="fa fa-user-circle"></i>
About
</a>
</div>
</div>
</div>
</header>
<!-- Portfolio Grid Section -->
<section id="portfolio">
<div class="container">
<h2 class="text-center">Projects</h2>
<hr class="star-primary">
<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">
<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/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="pioneer employee website">
</a>
</div>
<!--Floppy drives-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#portfolioFloppy" 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/floppy.jpg" alt="image of floppy music drives">
</a>
</div>
<!--Hoffends web app-->
<div class="col-sm-4 portfolio-item">
<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/hoffends.png" alt="img of hoffends employee app">
</a>
</div>
<!--Word press Blog-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#portfolioNodeBlog" 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/nodeBlog.png" alt="Jrtechs Node Blog">
</a>
</div>
<!--Bryce's Quotes website-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#portfolioQuotes" 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/quotes.png" alt="panda quotes screenshot">
</a>
</div>
<!--Tanks Java Game-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#portfolioTanks" 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/tanks.png" alt="Tanks game screenshot">
</a>
</div>
<!--Brick Hack 4 whats the trend-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#brickHack4" 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/trend.jpg" alt="Brick hack project">
</a>
</div>
<!--Tiger-OS website-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#tigerOSWebsite" 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/tiger-os.png" alt="TigerOS website">
</a>
</div>
<!--Panda Games-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#pandaGames" 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/clubpanda.png" alt="Club panda screenshot">
</a>
</div>
<!--Bash Manager-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#bashManager" 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/bash_manager.png" alt="Bash Manager Screenshot">
</a>
</div>
<!--Hoffends Public website-->
<div class="col-sm-4 portfolio-item">
<a class="portfolio-link" href="#portfolioHoffendsPublic" 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/hoffendsPublicWebsite.png" alt="Hoffends Public Website">
</a>
</div>
<!--Word press Blog-->
<div class="col-sm-4 portfolio-item">
<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/jrtechs.net.png" alt="img of wordpress blog">
</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<h2 class="text-center">About</h2>
<hr class="star-light star-light2" style="background-color: #000;">
<div class="row">
<div class="col-lg-4 ml-auto">
<p>I am a recent computer science graduate from the Rochester Institute of Technology. I am a very outgoing person who enjoys collaborating and working with others. Feel free to check out my GitHub and other websites to see what I have been working on.</p>
</div>
<div class="col-lg-4 mr-auto">
<p>I am a self-proclaimed geek; I have been programming since I salvaged parts to build a computer when I was in 6th grade. Computers are my lifeblood. When I am not programming - or reading - I enjoy hiking, cooking, and photography.</p>
</div>
<div class="col-lg-8 mx-auto text-center">
<a href="https://jrtechs.me/Jeffery_Russell_Resume.pdf" class="btn btn-lg btn-outline">
<i class="fa fa-download"></i>
Download Resume
</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<h2 class="text-center">Contact Me</h2>
<hr class="star-primary">
<div class="row">
<div class="contact-section w-100">
<div class="container">
<form action="contactform.php" method="post">
<div class="row">
<div class="col-md-6 form-line">
<div class="form-group">
<label>Your name</label>
<input type="text" class="form-control" id="" placeholder=" Enter Name" name="name">
</div>
<div class="form-group">
<label for="exampleInputEmail">Email Address</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder=" Enter Email Address" name="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message" name="message"></textarea>
</div>
<div>
<div class="g-recaptcha" data-sitekey="6LceWF8UAAAAAIsd7F6iY_Pywt4fJsJlFNPtEgi9"></div>
</div>
</div>
</div>
<div class="align-content-center w-100">
<div class="col w-100">
<br>
<center><button type="submit" name="submit" class="btn btn-lg submit"><i class="fa fa-paper-plane" aria-hidden="true"></i>Send Message</button></center>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>Rochester Institute of Technology
<br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<li class="list-inline-item">
<a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
<i class="fa fa-fw fa-youtube"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-social btn-outline" href="https://github.com/jrtechs">
<i class="fa fa-fw fa-github"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-social btn-outline" href="https://git.jrtechs.net/jrtechs">
<i class="fa fa-fw fa-git"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-social btn-outline" href="https://git.jrtechs.net/jrtechs">
<i class="fa fa-fw fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-social btn-outline" href="http://jrtechs.net">
<i class="fa fa-fw fa-wordpress"></i>
</a>
</li>
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About This Website</h3>
<p>Check out the source code for this website on my
<a href="https://github.com/jrtechs">github</a>.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> Jrtechs</p>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top d-lg-none">
<a class="btn btn-primary js-scroll-trigger" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- 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">
<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">
<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>Pioneer Malting</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/pioneer.png" alt="Pioneer Emoloyee Website">
<p>Over several months I built a web application for Pioneer Malting which keeps track of
inventory, clients, payroll,
orders, batches, and shipments.
I built this website using PHP, SQL and HTM.L
With the source code being over ten thousand lines long, it has pushed me towards improving
my coding style and version control. I host and maintain this website on my personal linux server.
</p>
<ul class="list-inline item-details">
<li>Client:
<strong>
<a href="http://pioneermalting.com/">Pioneer Malting</a>
</strong>
</li>
<li>Date:
<strong>
June 2017
</strong>
</li>
<li>Skills:
<strong>
<a href="http://php.net">PHP</a>
</strong>
<strong>
<a href="https://www.w3schools.com/html/">HTML</a>
</strong>
<strong>
<a href="https://www.w3schools.com/sql/">SQL</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>
<!-- Hoffends Website -->
<div class="portfolio-modal modal fade" id="portfolioHoffends" 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>Hoffends Employee Website</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/hoffends.png" alt="Hoffends Employee Website">
<p> This is a PHP website that keeps track of employee hours for payroll.
</p>
<ul class="list-inline item-details">
<li>Client:
<strong>
<a href="http://www.hoffends.net/">Hoffends</a>
</strong>
</li>
<li>Date:
<strong>
November 2016
</strong>
</li>
<li>Skills:
<strong>
<a href="http://php.net">PHP</a>
</strong>
<strong>
<a href="https://www.w3schools.com/html/">HTML</a>
</strong>
<strong>
<a href="https://www.android.com">Android App Development</a>
</strong>
<strong>
<a href="https://www.w3schools.com/html/">Java</a>
</strong>
<strong>
<a href="https://www.w3schools.com/sql/">SQL</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>
<!-- Jrtechs Website -->
<div class="portfolio-modal modal fade" id="portfolioJrtechs" 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>Personal Blog</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/jrtechs.net.png" alt="Word Press Blog">
<p>I initially created <a href="http://jrtechs.net">jrtechs</a> when I was in middle school.
Jrtechs is a wordpress blog where I post stuff I think others would find useful or
things I can use as reference.</p>
<ul class="list-inline item-details">
<li>Date:
<strong>
June 2014
</strong>
</li>
<li>Skills:
<strong>
<a href="https://wordpress.org/">Wordpress</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>
<!-- Java Tanks Game-->
<div class="portfolio-modal modal fade" id="portfolioTanks" 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>Java Tanks Game</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/tanks.png" alt="Java source code">
<p>After the AP finals in May, high school students who took AP classes have little to do.
During my junior year of High School I took this time to teach my AP Computer Science class how
to make Java GUIs. After teaching several lessons, we started making a 2D tanks game. Feel free to
check out the <a href="https://github.com/jrtechs/Tanks">Github</a>.</p>
<ul class="list-inline item-details">
<li>Date:
<strong>
May 2016
</strong>
</li>
<li>Skills:
<strong>
<a href="https://www.oracle.com/index.html">Java</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>
<!-- Floppy Drive music -->
<div class="portfolio-modal modal fade" id="portfolioFloppy" 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>Musical Floppy Drives</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/floppy.jpg" alt="Musical Floppy Drive Project">
<p>Being the type of person who has dozens of floppy drives, I wired them up to a Arduino to play
music.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DBrR6sE-vaY" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Y5msiFa54Ug" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
<ul class="list-inline item-details">
<li>Date:
<strong>
June 2017
</strong>
</li>
<li>Skills:
<strong>
<a href="#">c++</a>
</strong>
<strong>
<a href="#">Arduino</a>
</strong>
<strong>
<a href="#">Electrical Wiring</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>
<!-- Panda Quotes -->
<div class="portfolio-modal modal fade" id="portfolioQuotes" 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>Quotes Website for a Friend</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/quotes.png" alt="Panda Quotes">
<p>In high school my friend had a static web page where he posted quotes that people said. During
winter break I decided amp up his project and
create a dynamic website in PHP that would display the quotes on pictures of pandas. Along with
displaying quotes, this website also has a web forum where
registered users can submit new quotes.</p>
<ul class="list-inline item-details">
<li>Date:
<strong>
December 2016
</strong>
</li>
<li>Skills:
<strong>
<a href="http://php.net">PHP</a>
</strong>
<strong>
<a href="https://www.w3schools.com/html/">HTML</a>
</strong>
<strong>
<a href="https://www.w3schools.com/sql/">SQL</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>
<!-- Brick Hack 4 -->
<div class="portfolio-modal modal fade" id="brickHack4" 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>What the Trend?</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/trend.jpg" alt="Brick Hack Project">
<p>This app was built at <a href="https://brickhack.io/">BrickHack4</a> -- my first hackathon.
What the Trend is a web game where players compete against each other to submit the most trending
word- according to the Google Trends API. Players each log into a game on their own device, and are
given a word. They each must append a word to the phrase to make it more trending on google.</p>
<ul class="list-inline item-details">
<li>Date:
<strong>
January 2018
</strong>
</li>
<li>Skills:
<strong>
<a href="https://www.javascript.com/">JavaScript</a>
</strong>
<strong>
<a href="#">NodeJs</a>
</strong>
<strong>
<a href="https://www.w3schools.com/html/">HTML</a>
</strong>
<strong>
<a href="https://www.w3schools.com/sql/">SQL</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>
<!-- Tiger-OS website -->
<div class="portfolio-modal modal fade" id="tigerOSWebsite" 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>Tiger-OS Website</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/tiger-os.png" alt="TigerOS">
<p>This is a simple bootstrap website I made for RITLUG(RIT's Linux User Group). Check the website
out live <a href="http://tigeros.ritlug.com/">here</a>.</p>
<ul class="list-inline item-details">
<li>Date:
<strong>
November 2017
</strong>
</li>
<li>Skills:
<strong>
<a href="http://php.net">Bootstrap</a>
</strong>
<strong>
<a href="https://www.w3schools.com/html/">HTML</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>
<!-- Panda Games -->
<div class="portfolio-modal modal fade" id="pandaGames" 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>Panda Games</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/clubpanda.png" alt="Club panda image">
<p>In the journey of learning JavaScript I decided to compile a few of the games I made into a website
that kept track of scores like an old arcade.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/QhJYKBj3K08" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Check out this project on <a href="https://github.com/jrtechs/Club-Panda">Github</a>.</p>
<ul class="list-inline item-details">
<li>Date:
<strong>
May 2017
</strong>
</li>
<li>Skills:
<strong>
<a href="https://www.javascript.com/">JavaScript</a>
</strong>
<strong>
<a href="http://php.net">PHP</a>
</strong>
<strong>
<a href="https://www.w3schools.com/html/">HTML</a>
</strong>
<strong>
<a href="https://www.w3schools.com/sql/">SQL</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>
<!-- Hoffends Public Website -->
<div class="portfolio-modal modal fade" id="portfolioHoffendsPublic" 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>Hoffends Website</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/hoffendsPublicWebsite.png" alt="">
<p>This website is aimed at getting people to
visit Hoffends. This website contains a PHP captcha contact form, live
hours table, embedded map, and other information about their
store like specials and tastings. Check out the website live <a href="https://hoffends.net">here</a>.
</p>
<ul class="list-inline item-details">
<li>Client:
<strong>
<a href="https://hoffends.net/">Hoffends</a>
</strong>
</li>
<li>Date:
<strong>
August 2018
</strong>
</li>
<li>Skills:
<strong>
<a href="http://php.net">PHP</a>
</strong>
<strong>
<a href="https://www.w3schools.com/html/">HTML</a>
</strong>
<strong>
<a href="#">jQuery</a>
</strong>
<strong>
<a href="#">Bootstrap</a>
</strong>
<strong>
<a href="#">Java Script</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>
<!-- Custom Node Blog -->
<div class="portfolio-modal modal fade" id="portfolioNodeBlog" 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 Blogging Platform</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/nodeBlog.png" alt="NodeJS blog">
<p>In an attempt to resurrect my WordPress blog which I started in middle
school, I started from scratch. Instead of using someone else's
blogging software, I created my own CMS platform using NodeJS. I used
Bootstrap on the front end and used express and SQL on the backend.
Check out the <a href="https://jrtechs.net">website</a> and the
<a href="https://github.com/jrtechs/NodeJSBlog">GitHub</a> for
this project.
</p>
<ul class="list-inline item-details">
<li>Date:
<strong>
February 2018
</strong>
</li>
<li>Skills:
<strong>
<a href="https://nodejs.org/en/">NodeJS</a>
</strong>
<strong>
<a href="https://en.wikipedia.org/wiki/SQL">SQL</a>
</strong>
<strong>
<a href="https://getbootstrap.com/">Bootstrap</a>
</strong>
<strong>
<a href="https://en.wikipedia.org/wiki/JavaScript">Java Script</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>
<!-- Bash Manager -->
<div class="portfolio-modal modal fade" id="bashManager" 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>Bash Manager</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/bash_manager.png" alt="">
<p>This is a project that I used to push myself to learn more Python. Since I have nearly a dozen ssh
keys installed on numerous servers, I decided to make a application to make managing all the
connections easier. This application is now used by myself and a couple of friends on a daily basis.
Check it out on <a href="https://github.com/jrtechs/bash_manager">github</a>, I have been
consistently pushing updates.</p>
<ul class="list-inline item-details">
<li>Date:
<strong>
October 2017
</strong>
</li>
<li>Skills:
<strong>
<a href="https://www.python.org/">Python</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>
<!-- Bootstrap core JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/freelancer.js"></script>
<script>
$("form").submit(function(event) {
var recaptcha = $("#g-recaptcha-response").val();
if (recaptcha === "") {
event.preventDefault();
alert("Please check the recaptcha");
}
});
</script>
<!-- For contact form -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<!--
__,,,,_
_ __..-;''`--/'/ /.',-`-.
(`/' ` | \ \ \\ / / / / .-'/`,_
/'`\ \ | \ | \| // // / -.,/_,'-,
/<7' ; \ \ | ; ||/ /| | \/ |`-/,/-.,_,/')
/ _.-, `,-\,__| _-| / \ \/|_/ | '-/.;.\'
`-` f/ ; / __/ \__ `/ |__/ |
`-' | -| =|\_ \ |-' |
__/ /_..-' ` ),' //
((__.-'((___..-'' \__.'
Check out more of my code at https://github.com/jrtechs
-->
</body>
</html>