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.

1251 lines
51 KiB

4 years ago
4 years ago
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta name="description" content="Portfolio website for Jeffery Russell a computer science student at RIT">
  7. <meta name="author" content="Jeffery Russell">
  8. <title>Jeffery Russell</title>
  9. <link href="css/bootstrap.css" rel="stylesheet">
  10. <!-- <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
  11. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  12. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  13. <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
  14. rel="stylesheet" type="text/css">
  15. <link href="css/freelancer.css" rel="stylesheet">
  16. <link rel="apple-touch-icon" sizes="180x180" href="./img/favicon/apple-touch-icon.png">
  17. <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon/favicon-32x32.png">
  18. <link rel="icon" type="image/png" sizes="16x16" href="./img/favicon/favicon-16x16.png">
  19. <link rel="manifest" href="./img/favicon/site.webmanifest">
  20. <link rel="mask-icon" href="./img/favicon/safari-pinned-tab.svg" color="#5bbad5">
  21. <meta name="msapplication-TileColor" content="#da532c">
  22. <meta name="theme-color" content="#498FBE">
  23. <!-- Plugin CSS -->
  24. <link href="css/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
  25. </head>
  26. <body id="page-top">
  27. <!-- Navigation -->
  28. <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
  29. <div class="container">
  30. <button class="navbar-toggler" type="button" data-toggle="collapse"
  31. data-target="#navbarResponsive" aria-controls="navbarResponsive"
  32. aria-expanded="false" aria-label="Toggle navigation">
  33. <i class="fa fa-bars"></i>
  34. </button>
  35. <div class="collapse navbar-collapse" id="navbarResponsive">
  36. <ul class="navbar-nav mr-auto">
  37. <li class="nav-item">
  38. <a class="nav-link js-scroll-trigger" href="#portfolio">Projects</a>
  39. </li>
  40. <li class="nav-item">
  41. <a class="nav-link js-scroll-trigger" href="#about">About</a>
  42. </li>
  43. <!-- <li class="nav-item">
  44. <a class="nav-link js-scroll-trigger" href="#contact">Work Experience</a>
  45. </li>
  46. <li class="nav-item">
  47. <a class="nav-link js-scroll-trigger" href="#contact">Recent Blog Posts</a>
  48. </li> -->
  49. <li class="nav-item">
  50. <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
  51. </li>
  52. </ul>
  53. <ul class="navbar-nav navbar-right">
  54. <li class="nav-item">
  55. <a class="nav-link js-scroll-trigger" href="https://jrtechs.net">Blog</a>
  56. </li>
  57. <li class="nav-item">
  58. <a class="nav-link js-scroll-trigger" href="https://github.com/jrtechs">Github</a>
  59. </li>
  60. <li class="nav-item">
  61. <a class="nav-link js-scroll-trigger" href="https://www.youtube.com/c/JrtechsNet">Youtube</a>
  62. </li>
  63. </ul>
  64. </div>
  65. </div>
  66. </nav>
  67. <!-- Header -->
  68. <header class="masthead banner">
  69. <div class="intro-text">
  70. <span class="name pt-md-5">Jeffery Russell</span>
  71. <hr class="star-light">
  72. <span class="skills">Software Engineer</span>
  73. <br>
  74. <div class="row h-50">
  75. <div class="col md-4">
  76. <a href="#portfolio" class="btn btn-lg btn-outline js-scroll-trigger p-4 center-text">
  77. <i class="fa fa-wrench"></i>
  78. Projects
  79. </a>
  80. </div>
  81. <!--<div class="col md-4">-->
  82. <!--<a href="#about" class="btn btn-lg btn-outline js-scroll-trigger p-4 center-text">-->
  83. <!--<i class="fa fa-briefcase"></i>-->
  84. <!--Work-->
  85. <!--</a>-->
  86. <!--</div>-->
  87. <div class="col md-4">
  88. <a href="#about" class="btn btn-lg btn-outline js-scroll-trigger p-4 center-text">
  89. <i class="fa fa-user-circle"></i>
  90. About
  91. </a>
  92. </div>
  93. </div>
  94. </div>
  95. </header>
  96. <!-- Portfolio Grid Section -->
  97. <section id="portfolio">
  98. <div class="container">
  99. <h2 class="text-center">Projects</h2>
  100. <hr class="star-primary">
  101. <h3 class="text-center">Click Picture to Show Project Details</h3>
  102. <div class="row">
  103. <!--Github Friends Graph-->
  104. <div class="col-sm-4 portfolio-item">
  105. <a class="portfolio-link" href="#portfolioGithub" data-toggle="modal">
  106. <div class="caption">
  107. <div class="caption-content">
  108. <i class="fa fa-search-plus fa-3x"></i>
  109. </div>
  110. </div>
  111. <img class="img-fluid" src="img/portfolio/jrtechsGithubGraph.png" alt="Steam graph">
  112. </a>
  113. </div>
  114. <!--Home Brew Plex Server-->
  115. <div class="col-sm-4 portfolio-item">
  116. <a class="portfolio-link" href="#portfolioPlex" data-toggle="modal">
  117. <div class="caption">
  118. <div class="caption-content">
  119. <i class="fa fa-search-plus fa-3x"></i>
  120. </div>
  121. </div>
  122. <img class="img-fluid" src="img/portfolio/videosPage.png" alt="Steam graph">
  123. </a>
  124. </div>
  125. <!--Steam Friends Graph-->
  126. <div class="col-sm-4 portfolio-item">
  127. <a class="portfolio-link" href="#portfolioSteamGraph" data-toggle="modal">
  128. <div class="caption">
  129. <div class="caption-content">
  130. <i class="fa fa-search-plus fa-3x"></i>
  131. </div>
  132. </div>
  133. <img class="img-fluid" src="img/portfolio/steamGraph.png" alt="Steam graph">
  134. </a>
  135. </div>
  136. <!--Pioneer web app-->
  137. <div class="col-sm-4 portfolio-item">
  138. <a class="portfolio-link" href="#portfolioPioneer" data-toggle="modal">
  139. <div class="caption">
  140. <div class="caption-content">
  141. <i class="fa fa-search-plus fa-3x"></i>
  142. </div>
  143. </div>
  144. <img class="img-fluid" src="img/portfolio/pioneer.png" alt="pioneer employee website">
  145. </a>
  146. </div>
  147. <!--Floppy drives-->
  148. <div class="col-sm-4 portfolio-item">
  149. <a class="portfolio-link" href="#portfolioFloppy" data-toggle="modal">
  150. <div class="caption">
  151. <div class="caption-content">
  152. <i class="fa fa-search-plus fa-3x"></i>
  153. </div>
  154. </div>
  155. <img class="img-fluid" src="img/portfolio/floppy.jpg" alt="image of floppy music drives">
  156. </a>
  157. </div>
  158. <!--Hoffends web app-->
  159. <div class="col-sm-4 portfolio-item">
  160. <a class="portfolio-link" href="#portfolioHoffends" data-toggle="modal">
  161. <div class="caption">
  162. <div class="caption-content">
  163. <i class="fa fa-search-plus fa-3x"></i>
  164. </div>
  165. </div>
  166. <img class="img-fluid" src="img/portfolio/hoffends.png" alt="img of hoffends employee app">
  167. </a>
  168. </div>
  169. <!--Word press Blog-->
  170. <div class="col-sm-4 portfolio-item">
  171. <a class="portfolio-link" href="#portfolioNodeBlog" data-toggle="modal">
  172. <div class="caption">
  173. <div class="caption-content">
  174. <i class="fa fa-search-plus fa-3x"></i>
  175. </div>
  176. </div>
  177. <img class="img-fluid" src="img/portfolio/nodeBlog.png" alt="Jrtechs Node Blog">
  178. </a>
  179. </div>
  180. <!--Bryce's Quotes website-->
  181. <div class="col-sm-4 portfolio-item">
  182. <a class="portfolio-link" href="#portfolioQuotes" data-toggle="modal">
  183. <div class="caption">
  184. <div class="caption-content">
  185. <i class="fa fa-search-plus fa-3x"></i>
  186. </div>
  187. </div>
  188. <img class="img-fluid" src="img/portfolio/quotes.png" alt="panda quotes screenshot">
  189. </a>
  190. </div>
  191. <!--Tanks Java Game-->
  192. <div class="col-sm-4 portfolio-item">
  193. <a class="portfolio-link" href="#portfolioTanks" data-toggle="modal">
  194. <div class="caption">
  195. <div class="caption-content">
  196. <i class="fa fa-search-plus fa-3x"></i>
  197. </div>
  198. </div>
  199. <img class="img-fluid" src="img/portfolio/tanks.png" alt="Tanks game screenshot">
  200. </a>
  201. </div>
  202. <!--Brick Hack 4 whats the trend-->
  203. <div class="col-sm-4 portfolio-item">
  204. <a class="portfolio-link" href="#brickHack4" data-toggle="modal">
  205. <div class="caption">
  206. <div class="caption-content">
  207. <i class="fa fa-search-plus fa-3x"></i>
  208. </div>
  209. </div>
  210. <img class="img-fluid" src="img/portfolio/trend.jpg" alt="Brick hack project">
  211. </a>
  212. </div>
  213. <!--Tiger-OS website-->
  214. <div class="col-sm-4 portfolio-item">
  215. <a class="portfolio-link" href="#tigerOSWebsite" data-toggle="modal">
  216. <div class="caption">
  217. <div class="caption-content">
  218. <i class="fa fa-search-plus fa-3x"></i>
  219. </div>
  220. </div>
  221. <img class="img-fluid" src="img/portfolio/tiger-os.png" alt="TigerOS website">
  222. </a>
  223. </div>
  224. <!--Panda Games-->
  225. <div class="col-sm-4 portfolio-item">
  226. <a class="portfolio-link" href="#pandaGames" data-toggle="modal">
  227. <div class="caption">
  228. <div class="caption-content">
  229. <i class="fa fa-search-plus fa-3x"></i>
  230. </div>
  231. </div>
  232. <img class="img-fluid" src="img/portfolio/clubpanda.png" alt="Club panda screenshot">
  233. </a>
  234. </div>
  235. <!--Bash Manager-->
  236. <div class="col-sm-4 portfolio-item">
  237. <a class="portfolio-link" href="#bashManager" data-toggle="modal">
  238. <div class="caption">
  239. <div class="caption-content">
  240. <i class="fa fa-search-plus fa-3x"></i>
  241. </div>
  242. </div>
  243. <img class="img-fluid" src="img/portfolio/bash_manager.png" alt="Bash Manager Screenshot">
  244. </a>
  245. </div>
  246. <!--Hoffends Public website-->
  247. <div class="col-sm-4 portfolio-item">
  248. <a class="portfolio-link" href="#portfolioHoffendsPublic" data-toggle="modal">
  249. <div class="caption">
  250. <div class="caption-content">
  251. <i class="fa fa-search-plus fa-3x"></i>
  252. </div>
  253. </div>
  254. <img class="img-fluid" src="img/portfolio/hoffendsPublicWebsite.png" alt="Hoffends Public Website">
  255. </a>
  256. </div>
  257. <!--Word press Blog-->
  258. <div class="col-sm-4 portfolio-item">
  259. <a class="portfolio-link" href="#portfolioJrtechs" data-toggle="modal">
  260. <div class="caption">
  261. <div class="caption-content">
  262. <i class="fa fa-search-plus fa-3x"></i>
  263. </div>
  264. </div>
  265. <img class="img-fluid" src="img/portfolio/jrtechs.net.png" alt="img of wordpress blog">
  266. </a>
  267. </div>
  268. </div>
  269. </div>
  270. </section>
  271. <!-- About Section -->
  272. <section class="success" id="about">
  273. <div class="container">
  274. <h2 class="text-center">About</h2>
  275. <hr class="star-light star-light2" style="background-color: #000;">
  276. <div class="row">
  277. <div class="col-lg-4 ml-auto">
  278. <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>
  279. </div>
  280. <div class="col-lg-4 mr-auto">
  281. <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>
  282. </div>
  283. <div class="col-lg-8 mx-auto text-center">
  284. <a href="https://jrtechs.me/Jeffery_Russell_Resume.pdf" class="btn btn-lg btn-outline">
  285. <i class="fa fa-download"></i>
  286. Download Resume
  287. </a>
  288. </div>
  289. </div>
  290. </div>
  291. </section>
  292. <!-- Contact Section -->
  293. <section id="contact">
  294. <div class="container">
  295. <h2 class="text-center">Contact Me</h2>
  296. <hr class="star-primary">
  297. <div class="row">
  298. <div class="contact-section w-100">
  299. <div class="container">
  300. <form action="https://alert.jrtechs.net/contact" method="post">
  301. <div class="row">
  302. <div class="col-md-6 form-line">
  303. <div class="form-group">
  304. <label>Your name</label>
  305. <input type="text" class="form-control" id="" placeholder="Enter Name" name="name">
  306. </div>
  307. <div class="form-group">
  308. <label for="exampleInputEmail">Email Address</label>
  309. <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter Email Address" name="email">
  310. </div>
  311. </div>
  312. <div class="col-md-6">
  313. <div class="form-group">
  314. <label for ="description"> Message</label>
  315. <textarea class="form-control" id="description" placeholder="Enter Your Message" name="message"></textarea>
  316. </div>
  317. <div>
  318. <input type="hidden" id="site" name="site" value="jrtechs.me">
  319. <div class="g-recaptcha" data-sitekey="6LceWF8UAAAAAIsd7F6iY_Pywt4fJsJlFNPtEgi9"></div>
  320. </div>
  321. </div>
  322. </div>
  323. <div class="align-content-center w-100">
  324. <div class="col w-100">
  325. <br>
  326. <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>
  327. </div>
  328. </div>
  329. </form>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. </section>
  335. <!-- Footer -->
  336. <footer class="text-center">
  337. <div class="footer-above">
  338. <div class="container">
  339. <div class="row">
  340. <div class="footer-col col-md-4">
  341. <h3>Location</h3>
  342. <p>Rochester Institute of Technology
  343. <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
  344. </div>
  345. <div class="footer-col col-md-4">
  346. <h3>Around the Web</h3>
  347. <ul class="list-inline">
  348. <li class="list-inline-item">
  349. <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
  350. <i class="fa fa-fw fa-youtube"></i>
  351. </a>
  352. </li>
  353. <li class="list-inline-item">
  354. <a class="btn-social btn-outline" href="https://github.com/jrtechs">
  355. <i class="fa fa-fw fa-github"></i>
  356. </a>
  357. </li>
  358. <li class="list-inline-item">
  359. <a class="btn-social btn-outline" href="https://git.jrtechs.net/jrtechs">
  360. <i class="fa fa-fw fa-git"></i>
  361. </a>
  362. </li>
  363. <li class="list-inline-item">
  364. <a class="btn-social btn-outline" href="https://git.jrtechs.net/jrtechs">
  365. <i class="fa fa-fw fa-linkedin"></i>
  366. </a>
  367. </li>
  368. <li class="list-inline-item">
  369. <a class="btn-social btn-outline" href="http://jrtechs.net">
  370. <i class="fa fa-fw fa-wordpress"></i>
  371. </a>
  372. </li>
  373. </ul>
  374. </div>
  375. <div class="footer-col col-md-4">
  376. <h3>About This Website</h3>
  377. <p>Check out the source code for this website on my
  378. <a href="https://github.com/jrtechs">github</a>.</p>
  379. </div>
  380. </div>
  381. </div>
  382. </div>
  383. <div class="footer-below">
  384. <div class="container">
  385. <div class="row">
  386. <div class="col-lg-12">
  387. <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>
  388. </div>
  389. </div>
  390. </div>
  391. </footer>
  392. <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
  393. <div class="scroll-top d-lg-none">
  394. <a class="btn btn-primary js-scroll-trigger" href="#page-top">
  395. <i class="fa fa-chevron-up"></i>
  396. </a>
  397. </div>
  398. <!-- Portfolio Modals -->
  399. <!-- Github graph-->
  400. <div class="portfolio-modal modal fade" id="portfolioGithub" tabindex="-1" role="dialog" aria-hidden="true">
  401. <div class="modal-dialog" role="document">
  402. <div class="modal-content">
  403. <div class="close-modal" data-dismiss="modal">
  404. <div class="lr">
  405. <div class="rl"></div>
  406. </div>
  407. </div>
  408. <div class="container">
  409. <div class="row">
  410. <div class="col-lg-8 mx-auto">
  411. <div class="modal-body">
  412. <h2>GitHub Graphs</h2>
  413. <hr class="star-primary">
  414. <img class="img-fluid img-centered" src="img/portfolio/jrtechsGithubGraph.png" alt="GitHub Friend Visualization">
  415. <p>
  416. This is an interactive website which allows you to make various graphs of information from the GitHub network.
  417. Currently the site generates three types of graphs-- the most popular and entertaining of which is the friends graph.
  418. The friends graph helps you visualize clusters of friends/collaborators on GitHub.
  419. This can be used to spot clusters within organizations and schools.
  420. Check out the website live <a href="https://github-graphs.com/">here</a>.
  421. </p>
  422. <img class="img-fluid img-centered" src="img/portfolio/RepositorieView.png" alt="Repositories GitHub View">
  423. <ul class="list-inline item-details">
  424. <li>Date:
  425. <strong>
  426. February 2019
  427. </strong>
  428. </li>
  429. <li>Skills:
  430. <strong>
  431. <a href="#">JavaScript</a>
  432. </strong>
  433. <strong>
  434. <a href="#">NodeJS</a>
  435. </strong>
  436. <strong>
  437. <a href="#">JQuery</a>
  438. </strong>
  439. <strong>
  440. <a href="#">GIT</a>
  441. </strong>
  442. </li>
  443. </ul>
  444. <button class="btn btn-success" type="button" data-dismiss="modal">
  445. <i class="fa fa-times"></i>
  446. Close</button>
  447. </div>
  448. </div>
  449. </div>
  450. </div>
  451. </div>
  452. </div>
  453. </div>
  454. <!-- Steam graph-->
  455. <div class="portfolio-modal modal fade" id="portfolioPlex" tabindex="-1" role="dialog" aria-hidden="true">
  456. <div class="modal-dialog" role="document">
  457. <div class="modal-content">
  458. <div class="close-modal" data-dismiss="modal">
  459. <div class="lr">
  460. <div class="rl"></div>
  461. </div>
  462. </div>
  463. <div class="container">
  464. <div class="row">
  465. <div class="col-lg-8 mx-auto">
  466. <div class="modal-body">
  467. <h2>Home Brew Plex Server</h2>
  468. <hr class="star-primary">
  469. <img class="img-fluid img-centered" src="img/portfolio/videosPage.png" alt="Video Server">
  470. <p>
  471. This is a lightweight node application which acts as a simple video sharing website.
  472. This website has a robust API and user system so that people can securely stream both public
  473. and private videos from a remote server. Check out the website live <a href="https://video.jrtechs.net/">here</a>.
  474. </p>
  475. <img class="img-fluid img-centered" src="img/portfolio/systemControlsView.png" alt="Video Server">
  476. <ul class="list-inline item-details">
  477. <li>Date:
  478. <strong>
  479. February 2019
  480. </strong>
  481. </li>
  482. <li>Skills:
  483. <strong>
  484. <a href="#">JavaScript</a>
  485. </strong>
  486. <strong>
  487. <a href="#">NodeJS</a>
  488. </strong>
  489. <strong>
  490. <a href="#">JQuery</a>
  491. </strong>
  492. </li>
  493. </ul>
  494. <button class="btn btn-success" type="button" data-dismiss="modal">
  495. <i class="fa fa-times"></i>
  496. Close</button>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. </div>
  502. </div>
  503. </div>
  504. <!-- Steam graph-->
  505. <div class="portfolio-modal modal fade" id="portfolioSteamGraph" tabindex="-1" role="dialog" aria-hidden="true">
  506. <div class="modal-dialog" role="document">
  507. <div class="modal-content">
  508. <div class="close-modal" data-dismiss="modal">
  509. <div class="lr">
  510. <div class="rl"></div>
  511. </div>
  512. </div>
  513. <div class="container">
  514. <div class="row">
  515. <div class="col-lg-8 mx-auto">
  516. <div class="modal-body">
  517. <h2>Steam Friends Graph</h2>
  518. <hr class="star-primary">
  519. <img class="img-fluid img-centered" src="img/portfolio/steamGraph.png" alt="Steam graph image">
  520. <p>Using the steam api, hbase graph database, java, web sockets, and javascript, I made a website
  521. which renders people's steam friend graphs in their web browser. I really enjoyed making this
  522. project and would encourage people to check out the code on my
  523. <a href="https://github.com/jrtechs/SteamFriendsGraph">github</a>.
  524. </p>
  525. <ul class="list-inline item-details">
  526. <li>Date:
  527. <strong>
  528. June 2018
  529. </strong>
  530. </li>
  531. <li>Skills:
  532. <strong>
  533. <a href="#">Java</a>
  534. </strong>
  535. <strong>
  536. <a href="#">Gremlin Query Language</a>
  537. </strong>
  538. <strong>
  539. <a href="#">Javascript</a>
  540. </strong>
  541. </li>
  542. </ul>
  543. <button class="btn btn-success" type="button" data-dismiss="modal">
  544. <i class="fa fa-times"></i>
  545. Close</button>
  546. </div>
  547. </div>
  548. </div>
  549. </div>
  550. </div>
  551. </div>
  552. </div>
  553. <!-- Pioneer Website -->
  554. <div class="portfolio-modal modal fade" id="portfolioPioneer" tabindex="-1" role="dialog" aria-hidden="true">
  555. <div class="modal-dialog" role="document">
  556. <div class="modal-content">
  557. <div class="close-modal" data-dismiss="modal">
  558. <div class="lr">
  559. <div class="rl"></div>
  560. </div>
  561. </div>
  562. <div class="container">
  563. <div class="row">
  564. <div class="col-lg-8 mx-auto">
  565. <div class="modal-body">
  566. <h2>Pioneer Malting</h2>
  567. <hr class="star-primary">
  568. <img class="img-fluid img-centered" src="img/portfolio/pioneer.png" alt="Pioneer Emoloyee Website">
  569. <p>Over several months I built a web application for Pioneer Malting which keeps track of
  570. inventory, clients, payroll,
  571. orders, batches, and shipments.
  572. I built this website using PHP, SQL and HTM.L
  573. With the source code being over ten thousand lines long, it has pushed me towards improving
  574. my coding style and version control. I host and maintain this website on my personal linux server.
  575. </p>
  576. <ul class="list-inline item-details">
  577. <li>Client:
  578. <strong>
  579. <a href="http://pioneermalting.com/">Pioneer Malting</a>
  580. </strong>
  581. </li>
  582. <li>Date:
  583. <strong>
  584. June 2017
  585. </strong>
  586. </li>
  587. <li>Skills:
  588. <strong>
  589. <a href="http://php.net">PHP</a>
  590. </strong>
  591. <strong>
  592. <a href="https://www.w3schools.com/html/">HTML</a>
  593. </strong>
  594. <strong>
  595. <a href="https://www.w3schools.com/sql/">SQL</a>
  596. </strong>
  597. </li>
  598. </ul>
  599. <button class="btn btn-success" type="button" data-dismiss="modal">
  600. <i class="fa fa-times"></i>
  601. Close</button>
  602. </div>
  603. </div>
  604. </div>
  605. </div>
  606. </div>
  607. </div>
  608. </div>
  609. <!-- Hoffends Website -->
  610. <div class="portfolio-modal modal fade" id="portfolioHoffends" tabindex="-1" role="dialog" aria-hidden="true">
  611. <div class="modal-dialog" role="document">
  612. <div class="modal-content">
  613. <div class="close-modal" data-dismiss="modal">
  614. <div class="lr">
  615. <div class="rl"></div>
  616. </div>
  617. </div>
  618. <div class="container">
  619. <div class="row">
  620. <div class="col-lg-8 mx-auto">
  621. <div class="modal-body">
  622. <h2>Hoffends Employee Website</h2>
  623. <hr class="star-primary">
  624. <img class="img-fluid img-centered" src="img/portfolio/hoffends.png" alt="Hoffends Employee Website">
  625. <p> This is a PHP website that keeps track of employee hours for payroll.
  626. </p>
  627. <ul class="list-inline item-details">
  628. <li>Client:
  629. <strong>
  630. <a href="http://www.hoffends.net/">Hoffends</a>
  631. </strong>
  632. </li>
  633. <li>Date:
  634. <strong>
  635. November 2016
  636. </strong>
  637. </li>
  638. <li>Skills:
  639. <strong>
  640. <a href="http://php.net">PHP</a>
  641. </strong>
  642. <strong>
  643. <a href="https://www.w3schools.com/html/">HTML</a>
  644. </strong>
  645. <strong>
  646. <a href="https://www.android.com">Android App Development</a>
  647. </strong>
  648. <strong>
  649. <a href="https://www.w3schools.com/html/">Java</a>
  650. </strong>
  651. <strong>
  652. <a href="https://www.w3schools.com/sql/">SQL</a>
  653. </strong>
  654. </li>
  655. </ul>
  656. <button class="btn btn-success" type="button" data-dismiss="modal">
  657. <i class="fa fa-times"></i>
  658. Close</button>
  659. </div>
  660. </div>
  661. </div>
  662. </div>
  663. </div>
  664. </div>
  665. </div>
  666. <!-- Jrtechs Website -->
  667. <div class="portfolio-modal modal fade" id="portfolioJrtechs" tabindex="-1" role="dialog" aria-hidden="true">
  668. <div class="modal-dialog" role="document">
  669. <div class="modal-content">
  670. <div class="close-modal" data-dismiss="modal">
  671. <div class="lr">
  672. <div class="rl"></div>
  673. </div>
  674. </div>
  675. <div class="container">
  676. <div class="row">
  677. <div class="col-lg-8 mx-auto">
  678. <div class="modal-body">
  679. <h2>Personal Blog</h2>
  680. <hr class="star-primary">
  681. <img class="img-fluid img-centered" src="img/portfolio/jrtechs.net.png" alt="Word Press Blog">
  682. <p>I initially created <a href="http://jrtechs.net">jrtechs</a> when I was in middle school.
  683. Jrtechs is a wordpress blog where I post stuff I think others would find useful or
  684. things I can use as reference.</p>
  685. <ul class="list-inline item-details">
  686. <li>Date:
  687. <strong>
  688. June 2014
  689. </strong>
  690. </li>
  691. <li>Skills:
  692. <strong>
  693. <a href="https://wordpress.org/">Wordpress</a>
  694. </strong>
  695. </li>
  696. </ul>
  697. <button class="btn btn-success" type="button" data-dismiss="modal">
  698. <i class="fa fa-times"></i>
  699. Close</button>
  700. </div>
  701. </div>
  702. </div>
  703. </div>
  704. </div>
  705. </div>
  706. </div>
  707. <!-- Java Tanks Game-->
  708. <div class="portfolio-modal modal fade" id="portfolioTanks" tabindex="-1" role="dialog" aria-hidden="true">
  709. <div class="modal-dialog" role="document">
  710. <div class="modal-content">
  711. <div class="close-modal" data-dismiss="modal">
  712. <div class="lr">
  713. <div class="rl"></div>
  714. </div>
  715. </div>
  716. <div class="container">
  717. <div class="row">
  718. <div class="col-lg-8 mx-auto">
  719. <div class="modal-body">
  720. <h2>Java Tanks Game</h2>
  721. <hr class="star-primary">
  722. <img class="img-fluid img-centered" src="img/portfolio/tanks.png" alt="Java source code">
  723. <p>After the AP finals in May, high school students who took AP classes have little to do.
  724. During my junior year of High School I took this time to teach my AP Computer Science class how
  725. to make Java GUIs. After teaching several lessons, we started making a 2D tanks game. Feel free to
  726. check out the <a href="https://github.com/jrtechs/Tanks">Github</a>.</p>
  727. <ul class="list-inline item-details">
  728. <li>Date:
  729. <strong>
  730. May 2016
  731. </strong>
  732. </li>
  733. <li>Skills:
  734. <strong>
  735. <a href="https://www.oracle.com/index.html">Java</a>
  736. </strong>
  737. </li>
  738. </ul>
  739. <button class="btn btn-success" type="button" data-dismiss="modal">
  740. <i class="fa fa-times"></i>
  741. Close</button>
  742. </div>
  743. </div>
  744. </div>
  745. </div>
  746. </div>
  747. </div>
  748. </div>
  749. <!-- Floppy Drive music -->
  750. <div class="portfolio-modal modal fade" id="portfolioFloppy" tabindex="-1" role="dialog" aria-hidden="true">
  751. <div class="modal-dialog" role="document">
  752. <div class="modal-content">
  753. <div class="close-modal" data-dismiss="modal">
  754. <div class="lr">
  755. <div class="rl"></div>
  756. </div>
  757. </div>
  758. <div class="container">
  759. <div class="row">
  760. <div class="col-lg-8 mx-auto">
  761. <div class="modal-body">
  762. <h2>Musical Floppy Drives</h2>
  763. <hr class="star-primary">
  764. <img class="img-fluid img-centered" src="img/portfolio/floppy.jpg" alt="Musical Floppy Drive Project">
  765. <p>Being the type of person who has dozens of floppy drives, I wired them up to a Arduino to play
  766. music.</p>
  767. <iframe width="560" height="315" src="https://www.youtube.com/embed/DBrR6sE-vaY" frameborder="0"
  768. allow="autoplay; encrypted-media" allowfullscreen></iframe>
  769. <iframe width="560" height="315" src="https://www.youtube.com/embed/Y5msiFa54Ug" frameborder="0"
  770. allow="autoplay; encrypted-media" allowfullscreen></iframe>
  771. <ul class="list-inline item-details">
  772. <li>Date:
  773. <strong>
  774. June 2017
  775. </strong>
  776. </li>
  777. <li>Skills:
  778. <strong>
  779. <a href="#">c++</a>
  780. </strong>
  781. <strong>
  782. <a href="#">Arduino</a>
  783. </strong>
  784. <strong>
  785. <a href="#">Electrical Wiring</a>
  786. </strong>
  787. </li>
  788. </ul>
  789. <button class="btn btn-success" type="button" data-dismiss="modal">
  790. <i class="fa fa-times"></i>
  791. Close</button>
  792. </div>
  793. </div>
  794. </div>
  795. </div>
  796. </div>
  797. </div>
  798. </div>
  799. <!-- Panda Quotes -->
  800. <div class="portfolio-modal modal fade" id="portfolioQuotes" tabindex="-1" role="dialog" aria-hidden="true">
  801. <div class="modal-dialog" role="document">
  802. <div class="modal-content">
  803. <div class="close-modal" data-dismiss="modal">
  804. <div class="lr">
  805. <div class="rl"></div>
  806. </div>
  807. </div>
  808. <div class="container">
  809. <div class="row">
  810. <div class="col-lg-8 mx-auto">
  811. <div class="modal-body">
  812. <h2>Quotes Website for a Friend</h2>
  813. <hr class="star-primary">
  814. <img class="img-fluid img-centered" src="img/portfolio/quotes.png" alt="Panda Quotes">
  815. <p>In high school my friend had a static web page where he posted quotes that people said. During
  816. winter break I decided amp up his project and
  817. create a dynamic website in PHP that would display the quotes on pictures of pandas. Along with
  818. displaying quotes, this website also has a web forum where
  819. registered users can submit new quotes.</p>
  820. <ul class="list-inline item-details">
  821. <li>Date:
  822. <strong>
  823. December 2016
  824. </strong>
  825. </li>
  826. <li>Skills:
  827. <strong>
  828. <a href="http://php.net">PHP</a>
  829. </strong>
  830. <strong>
  831. <a href="https://www.w3schools.com/html/">HTML</a>
  832. </strong>
  833. <strong>
  834. <a href="https://www.w3schools.com/sql/">SQL</a>
  835. </strong>
  836. </li>
  837. </ul>
  838. <button class="btn btn-success" type="button" data-dismiss="modal">
  839. <i class="fa fa-times"></i>
  840. Close</button>
  841. </div>
  842. </div>
  843. </div>
  844. </div>
  845. </div>
  846. </div>
  847. </div>
  848. <!-- Brick Hack 4 -->
  849. <div class="portfolio-modal modal fade" id="brickHack4" tabindex="-1" role="dialog" aria-hidden="true">
  850. <div class="modal-dialog" role="document">
  851. <div class="modal-content">
  852. <div class="close-modal" data-dismiss="modal">
  853. <div class="lr">
  854. <div class="rl"></div>
  855. </div>
  856. </div>
  857. <div class="container">
  858. <div class="row">
  859. <div class="col-lg-8 mx-auto">
  860. <div class="modal-body">
  861. <h2>What the Trend?</h2>
  862. <hr class="star-primary">
  863. <img class="img-fluid img-centered" src="img/portfolio/trend.jpg" alt="Brick Hack Project">
  864. <p>This app was built at <a href="https://brickhack.io/">BrickHack4</a> -- my first hackathon.
  865. What the Trend is a web game where players compete against each other to submit the most trending
  866. word- according to the Google Trends API. Players each log into a game on their own device, and are
  867. given a word. They each must append a word to the phrase to make it more trending on google.</p>
  868. <ul class="list-inline item-details">
  869. <li>Date:
  870. <strong>
  871. January 2018
  872. </strong>
  873. </li>
  874. <li>Skills:
  875. <strong>
  876. <a href="https://www.javascript.com/">JavaScript</a>
  877. </strong>
  878. <strong>
  879. <a href="#">NodeJs</a>
  880. </strong>
  881. <strong>
  882. <a href="https://www.w3schools.com/html/">HTML</a>
  883. </strong>
  884. <strong>
  885. <a href="https://www.w3schools.com/sql/">SQL</a>
  886. </strong>
  887. </li>
  888. </ul>
  889. <button class="btn btn-success" type="button" data-dismiss="modal">
  890. <i class="fa fa-times"></i>
  891. Close</button>
  892. </div>
  893. </div>
  894. </div>
  895. </div>
  896. </div>
  897. </div>
  898. </div>
  899. <!-- Tiger-OS website -->
  900. <div class="portfolio-modal modal fade" id="tigerOSWebsite" tabindex="-1" role="dialog" aria-hidden="true">
  901. <div class="modal-dialog" role="document">
  902. <div class="modal-content">
  903. <div class="close-modal" data-dismiss="modal">
  904. <div class="lr">
  905. <div class="rl"></div>
  906. </div>
  907. </div>
  908. <div class="container">
  909. <div class="row">
  910. <div class="col-lg-8 mx-auto">
  911. <div class="modal-body">
  912. <h2>Tiger-OS Website</h2>
  913. <hr class="star-primary">
  914. <img class="img-fluid img-centered" src="img/portfolio/tiger-os.png" alt="TigerOS">
  915. <p>This is a simple bootstrap website I made for RITLUG(RIT's Linux User Group). Check the website
  916. out live <a href="http://tigeros.ritlug.com/">here</a>.</p>
  917. <ul class="list-inline item-details">
  918. <li>Date:
  919. <strong>
  920. November 2017
  921. </strong>
  922. </li>
  923. <li>Skills:
  924. <strong>
  925. <a href="http://php.net">Bootstrap</a>
  926. </strong>
  927. <strong>
  928. <a href="https://www.w3schools.com/html/">HTML</a>
  929. </strong>
  930. </li>
  931. </ul>
  932. <button class="btn btn-success" type="button" data-dismiss="modal">
  933. <i class="fa fa-times"></i>
  934. Close</button>
  935. </div>
  936. </div>
  937. </div>
  938. </div>
  939. </div>
  940. </div>
  941. </div>
  942. <!-- Panda Games -->
  943. <div class="portfolio-modal modal fade" id="pandaGames" tabindex="-1" role="dialog" aria-hidden="true">
  944. <div class="modal-dialog" role="document">
  945. <div class="modal-content">
  946. <div class="close-modal" data-dismiss="modal">
  947. <div class="lr">
  948. <div class="rl"></div>
  949. </div>
  950. </div>
  951. <div class="container">
  952. <div class="row">
  953. <div class="col-lg-8 mx-auto">
  954. <div class="modal-body">
  955. <h2>Panda Games</h2>
  956. <hr class="star-primary">
  957. <img class="img-fluid img-centered" src="img/portfolio/clubpanda.png" alt="Club panda image">
  958. <p>In the journey of learning JavaScript I decided to compile a few of the games I made into a website
  959. that kept track of scores like an old arcade.</p>
  960. <iframe width="560" height="315" src="https://www.youtube.com/embed/QhJYKBj3K08" frameborder="0"
  961. allow="autoplay; encrypted-media" allowfullscreen></iframe>
  962. <p>Check out this project on <a href="https://github.com/jrtechs/Club-Panda">Github</a>.</p>
  963. <ul class="list-inline item-details">
  964. <li>Date:
  965. <strong>
  966. May 2017
  967. </strong>
  968. </li>
  969. <li>Skills:
  970. <strong>
  971. <a href="https://www.javascript.com/">JavaScript</a>
  972. </strong>
  973. <strong>
  974. <a href="http://php.net">PHP</a>
  975. </strong>
  976. <strong>
  977. <a href="https://www.w3schools.com/html/">HTML</a>
  978. </strong>
  979. <strong>
  980. <a href="https://www.w3schools.com/sql/">SQL</a>
  981. </strong>
  982. </li>
  983. </ul>
  984. <button class="btn btn-success" type="button" data-dismiss="modal">
  985. <i class="fa fa-times"></i>
  986. Close</button>
  987. </div>
  988. </div>
  989. </div>
  990. </div>
  991. </div>
  992. </div>
  993. </div>
  994. <!-- Hoffends Public Website -->
  995. <div class="portfolio-modal modal fade" id="portfolioHoffendsPublic" tabindex="-1" role="dialog" aria-hidden="true">
  996. <div class="modal-dialog" role="document">
  997. <div class="modal-content">
  998. <div class="close-modal" data-dismiss="modal">
  999. <div class="lr">
  1000. <div class="rl"></div>
  1001. </div>
  1002. </div>
  1003. <div class="container">
  1004. <div class="row">
  1005. <div class="col-lg-8 mx-auto">
  1006. <div class="modal-body">
  1007. <h2>Hoffends Website</h2>
  1008. <hr class="star-primary">
  1009. <img class="img-fluid img-centered" src="img/portfolio/hoffendsPublicWebsite.png" alt="">
  1010. <p>This website is aimed at getting people to
  1011. visit Hoffends. This website contains a PHP captcha contact form, live
  1012. hours table, embedded map, and other information about their
  1013. store like specials and tastings. Check out the website live <a href="https://hoffends.net">here</a>.
  1014. </p>
  1015. <ul class="list-inline item-details">
  1016. <li>Client:
  1017. <strong>
  1018. <a href="https://hoffends.net/">Hoffends</a>
  1019. </strong>
  1020. </li>
  1021. <li>Date:
  1022. <strong>
  1023. August 2018
  1024. </strong>
  1025. </li>
  1026. <li>Skills:
  1027. <strong>
  1028. <a href="http://php.net">PHP</a>
  1029. </strong>
  1030. <strong>
  1031. <a href="https://www.w3schools.com/html/">HTML</a>
  1032. </strong>
  1033. <strong>
  1034. <a href="#">jQuery</a>
  1035. </strong>
  1036. <strong>
  1037. <a href="#">Bootstrap</a>
  1038. </strong>
  1039. <strong>
  1040. <a href="#">Java Script</a>
  1041. </strong>
  1042. </li>
  1043. </ul>
  1044. <button class="btn btn-success" type="button" data-dismiss="modal">
  1045. <i class="fa fa-times"></i>
  1046. Close</button>
  1047. </div>
  1048. </div>
  1049. </div>
  1050. </div>
  1051. </div>
  1052. </div>
  1053. </div>
  1054. <!-- Custom Node Blog -->
  1055. <div class="portfolio-modal modal fade" id="portfolioNodeBlog" tabindex="-1" role="dialog" aria-hidden="true">
  1056. <div class="modal-dialog" role="document">
  1057. <div class="modal-content">
  1058. <div class="close-modal" data-dismiss="modal">
  1059. <div class="lr">
  1060. <div class="rl"></div>
  1061. </div>
  1062. </div>
  1063. <div class="container">
  1064. <div class="row">
  1065. <div class="col-lg-8 mx-auto">
  1066. <div class="modal-body">
  1067. <h2>Home Brew Blogging Platform</h2>
  1068. <hr class="star-primary">
  1069. <img class="img-fluid img-centered" src="img/portfolio/nodeBlog.png" alt="NodeJS blog">
  1070. <p>In an attempt to resurrect my WordPress blog which I started in middle
  1071. school, I started from scratch. Instead of using someone else's
  1072. blogging software, I created my own CMS platform using NodeJS. I used
  1073. Bootstrap on the front end and used express and SQL on the backend.
  1074. Check out the <a href="https://jrtechs.net">website</a> and the
  1075. <a href="https://github.com/jrtechs/NodeJSBlog">GitHub</a> for
  1076. this project.
  1077. </p>
  1078. <ul class="list-inline item-details">
  1079. <li>Date:
  1080. <strong>
  1081. February 2018
  1082. </strong>
  1083. </li>
  1084. <li>Skills:
  1085. <strong>
  1086. <a href="https://nodejs.org/en/">NodeJS</a>
  1087. </strong>
  1088. <strong>
  1089. <a href="https://en.wikipedia.org/wiki/SQL">SQL</a>
  1090. </strong>
  1091. <strong>
  1092. <a href="https://getbootstrap.com/">Bootstrap</a>
  1093. </strong>
  1094. <strong>
  1095. <a href="https://en.wikipedia.org/wiki/JavaScript">Java Script</a>
  1096. </strong>
  1097. </li>
  1098. </ul>
  1099. <button class="btn btn-success" type="button" data-dismiss="modal">
  1100. <i class="fa fa-times"></i>
  1101. Close</button>
  1102. </div>
  1103. </div>
  1104. </div>
  1105. </div>
  1106. </div>
  1107. </div>
  1108. </div>
  1109. <!-- Bash Manager -->
  1110. <div class="portfolio-modal modal fade" id="bashManager" tabindex="-1" role="dialog" aria-hidden="true">
  1111. <div class="modal-dialog" role="document">
  1112. <div class="modal-content">
  1113. <div class="close-modal" data-dismiss="modal">
  1114. <div class="lr">
  1115. <div class="rl"></div>
  1116. </div>
  1117. </div>
  1118. <div class="container">
  1119. <div class="row">
  1120. <div class="col-lg-8 mx-auto">
  1121. <div class="modal-body">
  1122. <h2>Bash Manager</h2>
  1123. <hr class="star-primary">
  1124. <img class="img-fluid img-centered" src="img/portfolio/bash_manager.png" alt="">
  1125. <p>This is a project that I used to push myself to learn more Python. Since I have nearly a dozen ssh
  1126. keys installed on numerous servers, I decided to make a application to make managing all the
  1127. connections easier. This application is now used by myself and a couple of friends on a daily basis.
  1128. Check it out on <a href="https://github.com/jrtechs/bash_manager">github</a>, I have been
  1129. consistently pushing updates.</p>
  1130. <ul class="list-inline item-details">
  1131. <li>Date:
  1132. <strong>
  1133. October 2017
  1134. </strong>
  1135. </li>
  1136. <li>Skills:
  1137. <strong>
  1138. <a href="https://www.python.org/">Python</a>
  1139. </strong>
  1140. </li>
  1141. </ul>
  1142. <button class="btn btn-success" type="button" data-dismiss="modal">
  1143. <i class="fa fa-times"></i>
  1144. Close</button>
  1145. </div>
  1146. </div>
  1147. </div>
  1148. </div>
  1149. </div>
  1150. </div>
  1151. </div>
  1152. <!-- Bootstrap core JavaScript -->
  1153. <script src="js/jquery.min.js"></script>
  1154. <script src="js/popper.min.js"></script>
  1155. <script src="js/bootstrap.min.js"></script>
  1156. <!-- Plugin JavaScript -->
  1157. <script src="js/jquery.easing.min.js"></script>
  1158. <script src="js/freelancer.js"></script>
  1159. <script>
  1160. $("form").submit(function(event) {
  1161. var recaptcha = $("#g-recaptcha-response").val();
  1162. if (recaptcha === "") {
  1163. event.preventDefault();
  1164. alert("Please check the recaptcha");
  1165. }
  1166. });
  1167. </script>
  1168. <!-- For contact form -->
  1169. <script src="https://www.google.com/recaptcha/api.js"></script>
  1170. <!--
  1171. __,,,,_
  1172. _ __..-;''`--/'/ /.',-`-.
  1173. (`/' ` | \ \ \\ / / / / .-'/`,_
  1174. /'`\ \ | \ | \| // // / -.,/_,'-,
  1175. /<7' ; \ \ | ; ||/ /| | \/ |`-/,/-.,_,/')
  1176. / _.-, `,-\,__| _-| / \ \/|_/ | '-/.;.\'
  1177. `-` f/ ; / __/ \__ `/ |__/ |
  1178. `-' | -| =|\_ \ |-' |
  1179. __/ /_..-' ` ),' //
  1180. ((__.-'((___..-'' \__.'
  1181. Check out more of my code at https://github.com/jrtechs
  1182. -->
  1183. </body>
  1184. </html>