|
|
- <!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="https://alert.jrtechs.net/contact" 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>
- <input type="hidden" id="site" name="site" value="jrtechs.me">
- <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>
|
