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.
1000 lines
40 KiB
1000 lines
40 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://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">
|
|
|
|
</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">Portfolio</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">Contact</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link js-scroll-trigger" href="Jeffery_Russell_Resume.pdf">Resume</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">
|
|
<div class="container">
|
|
|
|
<div class="intro-text">
|
|
<span class="name">Jeffery Russell</span>
|
|
<hr class="star-light">
|
|
<span class="skills">Computer Science Student at RIT</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Portfolio Grid Section -->
|
|
<section id="portfolio">
|
|
<div class="container">
|
|
<h2 class="text-center">Portfolio</h2>
|
|
<hr class="star-primary">
|
|
<h3 class="text-center">Click Picture to Show Project Details</h3>
|
|
<div class="row">
|
|
|
|
<!--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>
|
|
|
|
<!--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>
|
|
|
|
<!--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>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section class="success" id="about">
|
|
<div class="container">
|
|
<h2 class="text-center">About</h2>
|
|
<hr class="star-light">
|
|
<div class="row">
|
|
<div class="col-lg-4 ml-auto">
|
|
<p>I am currently a third year Computer Science student at 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
|
|
excising and riding my bike.</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 Portfolio
|
|
</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="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">
|
|
Copyright © Jrtechs.me 2018
|
|
</div>
|
|
</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 -->
|
|
|
|
<!-- 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>
|
|
|
|
|
|
<!-- 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>
|
|
$("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>
|