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.

800 lines
32 KiB

  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. <!-- Bootstrap core CSS -->
  10. <link href="css/bootstrap.min.css" rel="stylesheet">
  11. <!-- Custom fonts for this template -->
  12. <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
  13. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  14. <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
  15. rel="stylesheet" type="text/css">
  16. <!-- Custom styles for this template -->
  17. <link href="css/freelancer.min.css" rel="stylesheet">
  18. </head>
  19. <body id="page-top">
  20. <!-- Navigation -->
  21. <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
  22. <div class="container">
  23. <a class="navbar-brand js-scroll-trigger" href="#page-top">Jeffery Russell</a>
  24. <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
  25. data-target="#navbarResponsive" aria-controls="navbarResponsive"
  26. aria-expanded="false" aria-label="Toggle navigation">
  27. Menu
  28. <i class="fa fa-bars"></i>
  29. </button>
  30. <div class="collapse navbar-collapse" id="navbarResponsive">
  31. <ul class="navbar-nav ml-auto">
  32. <li class="nav-item">
  33. <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
  34. </li>
  35. <li class="nav-item">
  36. <a class="nav-link js-scroll-trigger" href="#about">About</a>
  37. </li>
  38. <li class="nav-item">
  39. <a class="nav-link js-scroll-trigger" href="http://jrtechs.net">Blog</a>
  40. </li>
  41. <li class="nav-item">
  42. <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
  43. </li>
  44. </ul>
  45. </div>
  46. </div>
  47. </nav>
  48. <!-- Header -->
  49. <header class="masthead">
  50. <div class="container">
  51. <div class="intro-text">
  52. <span class="name">Jeffery Russell</span>
  53. <hr class="star-light">
  54. <span class="skills">Computer Science Student at RIT</span>
  55. </div>
  56. </div>
  57. </header>
  58. <!-- Portfolio Grid Section -->
  59. <section id="portfolio">
  60. <div class="container">
  61. <h2 class="text-center">Portfolio</h2>
  62. <hr class="star-primary">
  63. <h3 class="text-center">Click Picture to Show Project Details</h3>
  64. <div class="row">
  65. <!--Hoffends web app-->
  66. <div class="col-sm-4 portfolio-item">
  67. <a class="portfolio-link" href="#portfolioHoffends" data-toggle="modal">
  68. <div class="caption">
  69. <div class="caption-content">
  70. <i class="fa fa-search-plus fa-3x"></i>
  71. </div>
  72. </div>
  73. <img class="img-fluid" src="img/portfolio/hoffends.png" alt="">
  74. </a>
  75. </div>
  76. <!--Floppy drives-->
  77. <div class="col-sm-4 portfolio-item">
  78. <a class="portfolio-link" href="#portfolioFloppy" data-toggle="modal">
  79. <div class="caption">
  80. <div class="caption-content">
  81. <i class="fa fa-search-plus fa-3x"></i>
  82. </div>
  83. </div>
  84. <img class="img-fluid" src="img/portfolio/floppy.jpg" alt="">
  85. </a>
  86. </div>
  87. <!--Blog-->
  88. <div class="col-sm-4 portfolio-item">
  89. <a class="portfolio-link" href="#portfolioJrtechs" data-toggle="modal">
  90. <div class="caption">
  91. <div class="caption-content">
  92. <i class="fa fa-search-plus fa-3x"></i>
  93. </div>
  94. </div>
  95. <img class="img-fluid" src="img/portfolio/jrtechs.net.png" alt="">
  96. </a>
  97. </div>
  98. <!--Pioneer web app-->
  99. <div class="col-sm-4 portfolio-item">
  100. <a class="portfolio-link" href="#portfolioPioneer" data-toggle="modal">
  101. <div class="caption">
  102. <div class="caption-content">
  103. <i class="fa fa-search-plus fa-3x"></i>
  104. </div>
  105. </div>
  106. <img class="img-fluid" src="img/portfolio/pioneer.png" alt="">
  107. </a>
  108. </div>
  109. <!--Bryce's Quotes website-->
  110. <div class="col-sm-4 portfolio-item">
  111. <a class="portfolio-link" href="#portfolioQuotes" data-toggle="modal">
  112. <div class="caption">
  113. <div class="caption-content">
  114. <i class="fa fa-search-plus fa-3x"></i>
  115. </div>
  116. </div>
  117. <img class="img-fluid" src="img/portfolio/quotes.png" alt="">
  118. </a>
  119. </div>
  120. <!--Tanks Java Game-->
  121. <div class="col-sm-4 portfolio-item">
  122. <a class="portfolio-link" href="#portfolioTanks" data-toggle="modal">
  123. <div class="caption">
  124. <div class="caption-content">
  125. <i class="fa fa-search-plus fa-3x"></i>
  126. </div>
  127. </div>
  128. <img class="img-fluid" src="img/portfolio/tanks.png" alt="">
  129. </a>
  130. </div>
  131. <!--Brick Hack 4 whats the trend-->
  132. <div class="col-sm-4 portfolio-item">
  133. <a class="portfolio-link" href="#brickHack4" data-toggle="modal">
  134. <div class="caption">
  135. <div class="caption-content">
  136. <i class="fa fa-search-plus fa-3x"></i>
  137. </div>
  138. </div>
  139. <img class="img-fluid" src="img/portfolio/tanks.png" alt="">
  140. </a>
  141. </div>
  142. <!--Tiger-OS website-->
  143. <div class="col-sm-4 portfolio-item">
  144. <a class="portfolio-link" href="#tigerOSWebsite" data-toggle="modal">
  145. <div class="caption">
  146. <div class="caption-content">
  147. <i class="fa fa-search-plus fa-3x"></i>
  148. </div>
  149. </div>
  150. <img class="img-fluid" src="img/portfolio/tanks.png" alt="">
  151. </a>
  152. </div>
  153. <!--Panda Games-->
  154. <div class="col-sm-4 portfolio-item">
  155. <a class="portfolio-link" href="#pandaGames" data-toggle="modal">
  156. <div class="caption">
  157. <div class="caption-content">
  158. <i class="fa fa-search-plus fa-3x"></i>
  159. </div>
  160. </div>
  161. <img class="img-fluid" src="img/portfolio/tanks.png" alt="">
  162. </a>
  163. </div>
  164. <!--Bash Manager-->
  165. <div class="col-sm-4 portfolio-item">
  166. <a class="portfolio-link" href="#bashManager" data-toggle="modal">
  167. <div class="caption">
  168. <div class="caption-content">
  169. <i class="fa fa-search-plus fa-3x"></i>
  170. </div>
  171. </div>
  172. <img class="img-fluid" src="img/portfolio/tanks.png" alt="">
  173. </a>
  174. </div>
  175. </div>
  176. </div>
  177. </section>
  178. <!-- About Section -->
  179. <section class="success" id="about">
  180. <div class="container">
  181. <h2 class="text-center">About</h2>
  182. <hr class="star-light">
  183. <div class="row">
  184. <div class="col-lg-4 ml-auto">
  185. <p>I am currently a sophomore studying Computer Science Rochester Institute of Technology. I am a very
  186. outgoing person who enjoys collaborating and working with others. Feel free to check out my github and
  187. other websites to see what I have been working on.</p>
  188. </div>
  189. <div class="col-lg-4 mr-auto">
  190. <!--
  191. <p>I am very passionate about coding and the open source community. Over the course of my life I
  192. have strove to learn more. Currently I know 9 programming languages: PHP, Java, Python, SQL, HTML,
  193. Bash, Java Script, C and VB. </p>
  194. -->
  195. <p>I am a self proclaimed geek; I have been programming since I salvaged parts to build a computer when
  196. I was in 6th grade. Computers are my lifeblood. When I am not programming - or reading - I enjoy
  197. excising and riding my bike.</p>
  198. </div>
  199. <div class="col-lg-8 mx-auto text-center">
  200. <a href="https://jrtechs.me/Jeffery_Russell_Resume.pdf" class="btn btn-lg btn-outline">
  201. <i class="fa fa-download"></i>
  202. Download Portfolio
  203. </a>
  204. </div>
  205. </div>
  206. </div>
  207. </section>
  208. <!-- Contact Section -->
  209. <section id="contact">
  210. <div class="container">
  211. <h2 class="text-center">Contact Me</h2>
  212. <hr class="star-primary">
  213. <div class="row">
  214. <div class="col-lg-8 mx-auto">
  215. <center><p>Jeffery@jrtechs.net</p></center>
  216. </div>
  217. </div>
  218. </div>
  219. </section>
  220. <!-- Footer -->
  221. <footer class="text-center">
  222. <div class="footer-above">
  223. <div class="container">
  224. <div class="row">
  225. <div class="footer-col col-md-4">
  226. <h3>Location</h3>
  227. <p>Rochester Institute of Technology
  228. <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
  229. </div>
  230. <div class="footer-col col-md-4">
  231. <h3>Around the Web</h3>
  232. <ul class="list-inline">
  233. <li class="list-inline-item">
  234. <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
  235. <i class="fa fa-fw fa-youtube"></i>
  236. </a>
  237. </li>
  238. <li class="list-inline-item">
  239. <a class="btn-social btn-outline" href="https://github.com/jrtechs">
  240. <i class="fa fa-fw fa-github"></i>
  241. </a>
  242. </li>
  243. <li class="list-inline-item">
  244. <a class="btn-social btn-outline" href="http://jrtechs.net">
  245. <i class="fa fa-fw fa-wordpress"></i>
  246. </a>
  247. </li>
  248. </ul>
  249. </div>
  250. <div class="footer-col col-md-4">
  251. <h3>About This Website</h3>
  252. <p>Feel free to check out the source code for this website on my
  253. <a href="https://github.com/jrtechs">github</a>.</p>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. <div class="footer-below">
  259. <div class="container">
  260. <div class="row">
  261. <div class="col-lg-12">
  262. Copyright &copy; Jrtechs.me 2018
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. </footer>
  268. <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
  269. <div class="scroll-top d-lg-none">
  270. <a class="btn btn-primary js-scroll-trigger" href="#page-top">
  271. <i class="fa fa-chevron-up"></i>
  272. </a>
  273. </div>
  274. <!-- Portfolio Modals -->
  275. <!-- Pioneer Website -->
  276. <div class="portfolio-modal modal fade" id="portfolioPioneer" tabindex="-1" role="dialog" aria-hidden="true">
  277. <div class="modal-dialog" role="document">
  278. <div class="modal-content">
  279. <div class="close-modal" data-dismiss="modal">
  280. <div class="lr">
  281. <div class="rl"></div>
  282. </div>
  283. </div>
  284. <div class="container">
  285. <div class="row">
  286. <div class="col-lg-8 mx-auto">
  287. <div class="modal-body">
  288. <h2>Pioneer Malting Employee Website</h2>
  289. <hr class="star-primary">
  290. <img class="img-fluid img-centered" src="img/portfolio/pioneer.png" alt="">
  291. <p>Over several months I built a web application for pioneer malting which kept track of
  292. inventory, clients, payroll hours,
  293. orders, batches, and shipments.
  294. This website was built using PHP, SQL, HTML, and CSS.
  295. With the source code being well over ten thousand lines long, it has pushed me towards refining
  296. my coding conventions and version control
  297. to an art. I currently host and maintain this website on my personal linux server.
  298. </p>
  299. <ul class="list-inline item-details">
  300. <li>Client:
  301. <strong>
  302. <a href="http://pioneermalting.com/">Pioneer Malting</a>
  303. </strong>
  304. </li>
  305. <li>Date:
  306. <strong>
  307. June 2017
  308. </strong>
  309. </li>
  310. <li>Skills:
  311. <strong>
  312. <a href="http://php.net">PHP</a>
  313. </strong>
  314. <strong>
  315. <a href="https://www.w3schools.com/html/">HTML</a>
  316. </strong>
  317. <strong>
  318. <a href="https://www.w3schools.com/sql/">SQL</a>
  319. </strong>
  320. </li>
  321. </ul>
  322. <button class="btn btn-success" type="button" data-dismiss="modal">
  323. <i class="fa fa-times"></i>
  324. Close</button>
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. </div>
  330. </div>
  331. </div>
  332. <!-- Hoffends Website -->
  333. <div class="portfolio-modal modal fade" id="portfolioHoffends" tabindex="-1" role="dialog" aria-hidden="true">
  334. <div class="modal-dialog" role="document">
  335. <div class="modal-content">
  336. <div class="close-modal" data-dismiss="modal">
  337. <div class="lr">
  338. <div class="rl"></div>
  339. </div>
  340. </div>
  341. <div class="container">
  342. <div class="row">
  343. <div class="col-lg-8 mx-auto">
  344. <div class="modal-body">
  345. <h2>Hoffends Employee Website</h2>
  346. <hr class="star-primary">
  347. <img class="img-fluid img-centered" src="img/portfolio/hoffends.png" alt="">
  348. <p> This is a PHP website that keeps track of employee hours for payroll. I also built an
  349. android app which interfaces with this website so
  350. employees can conveniently clock in/out with an android tablet when they arrive at work.
  351. </p>
  352. <ul class="list-inline item-details">
  353. <li>Client:
  354. <strong>
  355. <a href="http://www.hoffends.net/">Hoffends</a>
  356. </strong>
  357. </li>
  358. <li>Date:
  359. <strong>
  360. November 2016
  361. </strong>
  362. </li>
  363. <li>Skills:
  364. <strong>
  365. <a href="http://php.net">PHP</a>
  366. </strong>
  367. <strong>
  368. <a href="https://www.w3schools.com/html/">HTML</a>
  369. </strong>
  370. <strong>
  371. <a href="https://www.w3schools.com/html/">Android App Development</a>
  372. </strong>
  373. <strong>
  374. <a href="https://www.w3schools.com/html/">Java</a>
  375. </strong>
  376. <strong>
  377. <a href="https://www.w3schools.com/sql/">SQL</a>
  378. </strong>
  379. </li>
  380. </ul>
  381. <button class="btn btn-success" type="button" data-dismiss="modal">
  382. <i class="fa fa-times"></i>
  383. Close</button>
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. </div>
  390. </div>
  391. <!-- Jrtechs Website -->
  392. <div class="portfolio-modal modal fade" id="portfolioJrtechs" tabindex="-1" role="dialog" aria-hidden="true">
  393. <div class="modal-dialog" role="document">
  394. <div class="modal-content">
  395. <div class="close-modal" data-dismiss="modal">
  396. <div class="lr">
  397. <div class="rl"></div>
  398. </div>
  399. </div>
  400. <div class="container">
  401. <div class="row">
  402. <div class="col-lg-8 mx-auto">
  403. <div class="modal-body">
  404. <h2>Personal Blog</h2>
  405. <hr class="star-primary">
  406. <img class="img-fluid img-centered" src="img/portfolio/jrtechs.net.png" alt="">
  407. <p>Initially started when I was in middle school, <a href="http://jrtechs.net">jrtechs</a>
  408. is a personal blog where I post projects that I have been working on.</p>
  409. <ul class="list-inline item-details">
  410. <li>Date:
  411. <strong>
  412. June 2014
  413. </strong>
  414. </li>
  415. <li>Skills:
  416. <strong>
  417. <a href="https://wordpress.org/">Wordpress</a>
  418. </strong>
  419. </li>
  420. </ul>
  421. <button class="btn btn-success" type="button" data-dismiss="modal">
  422. <i class="fa fa-times"></i>
  423. Close</button>
  424. </div>
  425. </div>
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. </div>
  431. <!-- Java Tanks Game-->
  432. <div class="portfolio-modal modal fade" id="portfolioTanks" tabindex="-1" role="dialog" aria-hidden="true">
  433. <div class="modal-dialog" role="document">
  434. <div class="modal-content">
  435. <div class="close-modal" data-dismiss="modal">
  436. <div class="lr">
  437. <div class="rl"></div>
  438. </div>
  439. </div>
  440. <div class="container">
  441. <div class="row">
  442. <div class="col-lg-8 mx-auto">
  443. <div class="modal-body">
  444. <h2>Java Tanks Game</h2>
  445. <hr class="star-primary">
  446. <img class="img-fluid img-centered" src="img/portfolio/tanks.png" alt="">
  447. <p>Usually in high school AP classes after the final exam in May you have nothing to do in June.
  448. However, during my junior year of high school
  449. I took it upon myself to teach my AP programming class java GUIs -
  450. something not covered in the curriculum. After personally teaching the class several lessons,
  451. we started making a tanks game - using git for version control.</p>
  452. <ul class="list-inline item-details">
  453. <li>Date:
  454. <strong>
  455. May 2016
  456. </strong>
  457. </li>
  458. <li>Skills:
  459. <strong>
  460. <a href="https://www.oracle.com/index.html">Java</a>
  461. </strong>
  462. </li>
  463. </ul>
  464. <button class="btn btn-success" type="button" data-dismiss="modal">
  465. <i class="fa fa-times"></i>
  466. Close</button>
  467. </div>
  468. </div>
  469. </div>
  470. </div>
  471. </div>
  472. </div>
  473. </div>
  474. <!-- Floppy Drive music -->
  475. <div class="portfolio-modal modal fade" id="portfolioFloppy" tabindex="-1" role="dialog" aria-hidden="true">
  476. <div class="modal-dialog" role="document">
  477. <div class="modal-content">
  478. <div class="close-modal" data-dismiss="modal">
  479. <div class="lr">
  480. <div class="rl"></div>
  481. </div>
  482. </div>
  483. <div class="container">
  484. <div class="row">
  485. <div class="col-lg-8 mx-auto">
  486. <div class="modal-body">
  487. <h2>Musical Floppy Drives</h2>
  488. <hr class="star-primary">
  489. <img class="img-fluid img-centered" src="img/portfolio/floppy.jpg" alt="">
  490. <p>Being somebody that happens to posses 10 floppy drives, I decided to make something with them.
  491. As the title suggests, I wired 8 floppy drives
  492. to a raspberry pi to play music off them.</p>
  493. <ul class="list-inline item-details">
  494. <li>Date:
  495. <strong>
  496. June 2017
  497. </strong>
  498. </li>
  499. <li>Skills:
  500. <strong>
  501. <a href="#">c++</a>
  502. </strong>
  503. <strong>
  504. <a href="#">Raspberry Pie</a>
  505. </strong>
  506. <strong>
  507. <a href="#">Electrical Wiring</a>
  508. </strong>
  509. </li>
  510. </ul>
  511. <button class="btn btn-success" type="button" data-dismiss="modal">
  512. <i class="fa fa-times"></i>
  513. Close</button>
  514. </div>
  515. </div>
  516. </div>
  517. </div>
  518. </div>
  519. </div>
  520. </div>
  521. <!-- Panda Quotes -->
  522. <div class="portfolio-modal modal fade" id="portfolioQuotes" tabindex="-1" role="dialog" aria-hidden="true">
  523. <div class="modal-dialog" role="document">
  524. <div class="modal-content">
  525. <div class="close-modal" data-dismiss="modal">
  526. <div class="lr">
  527. <div class="rl"></div>
  528. </div>
  529. </div>
  530. <div class="container">
  531. <div class="row">
  532. <div class="col-lg-8 mx-auto">
  533. <div class="modal-body">
  534. <h2>Quotes Website for a Friend</h2>
  535. <hr class="star-primary">
  536. <img class="img-fluid img-centered" src="img/portfolio/quotes.png" alt="">
  537. <p>In high school my friend had a static web page where he posted quotes that people said. During
  538. winter break I decided amp up his project and
  539. create a dynamic website in PHP that would display the quotes on pictures of pandas. Along with
  540. displaying quotes, this website also has a web forum where
  541. registered users can submit new quotes.</p>
  542. <ul class="list-inline item-details">
  543. <li>Date:
  544. <strong>
  545. December 2016
  546. </strong>
  547. </li>
  548. <li>Skills:
  549. <strong>
  550. <a href="http://php.net">PHP</a>
  551. </strong>
  552. <strong>
  553. <a href="https://www.w3schools.com/html/">HTML</a>
  554. </strong>
  555. <strong>
  556. <a href="https://www.w3schools.com/sql/">SQL</a>
  557. </strong>
  558. </li>
  559. </ul>
  560. <button class="btn btn-success" type="button" data-dismiss="modal">
  561. <i class="fa fa-times"></i>
  562. Close</button>
  563. </div>
  564. </div>
  565. </div>
  566. </div>
  567. </div>
  568. </div>
  569. </div>
  570. <!-- Brick Hack 4 -->
  571. <div class="portfolio-modal modal fade" id="brickHack4" tabindex="-1" role="dialog" aria-hidden="true">
  572. <div class="modal-dialog" role="document">
  573. <div class="modal-content">
  574. <div class="close-modal" data-dismiss="modal">
  575. <div class="lr">
  576. <div class="rl"></div>
  577. </div>
  578. </div>
  579. <div class="container">
  580. <div class="row">
  581. <div class="col-lg-8 mx-auto">
  582. <div class="modal-body">
  583. <h2>Quotes Website for a Friend</h2>
  584. <hr class="star-primary">
  585. <img class="img-fluid img-centered" src="img/portfolio/quotes.png" alt="">
  586. <p>In high school my friend had a static web page where he posted quotes that people said. During
  587. winter break I decided amp up his project and
  588. create a dynamic website in PHP that would display the quotes on pictures of pandas. Along with
  589. displaying quotes, this website also has a web forum where
  590. registered users can submit new quotes.</p>
  591. <ul class="list-inline item-details">
  592. <li>Date:
  593. <strong>
  594. December 2016
  595. </strong>
  596. </li>
  597. <li>Skills:
  598. <strong>
  599. <a href="http://php.net">PHP</a>
  600. </strong>
  601. <strong>
  602. <a href="https://www.w3schools.com/html/">HTML</a>
  603. </strong>
  604. <strong>
  605. <a href="https://www.w3schools.com/sql/">SQL</a>
  606. </strong>
  607. </li>
  608. </ul>
  609. <button class="btn btn-success" type="button" data-dismiss="modal">
  610. <i class="fa fa-times"></i>
  611. Close</button>
  612. </div>
  613. </div>
  614. </div>
  615. </div>
  616. </div>
  617. </div>
  618. </div>
  619. <!-- Tiger-OS website -->
  620. <div class="portfolio-modal modal fade" id="tigerOSWebsite" tabindex="-1" role="dialog" aria-hidden="true">
  621. <div class="modal-dialog" role="document">
  622. <div class="modal-content">
  623. <div class="close-modal" data-dismiss="modal">
  624. <div class="lr">
  625. <div class="rl"></div>
  626. </div>
  627. </div>
  628. <div class="container">
  629. <div class="row">
  630. <div class="col-lg-8 mx-auto">
  631. <div class="modal-body">
  632. <h2>Quotes Website for a Friend</h2>
  633. <hr class="star-primary">
  634. <img class="img-fluid img-centered" src="img/portfolio/quotes.png" alt="">
  635. <p>In high school my friend had a static web page where he posted quotes that people said. During
  636. winter break I decided amp up his project and
  637. create a dynamic website in PHP that would display the quotes on pictures of pandas. Along with
  638. displaying quotes, this website also has a web forum where
  639. registered users can submit new quotes.</p>
  640. <ul class="list-inline item-details">
  641. <li>Date:
  642. <strong>
  643. December 2016
  644. </strong>
  645. </li>
  646. <li>Skills:
  647. <strong>
  648. <a href="http://php.net">PHP</a>
  649. </strong>
  650. <strong>
  651. <a href="https://www.w3schools.com/html/">HTML</a>
  652. </strong>
  653. <strong>
  654. <a href="https://www.w3schools.com/sql/">SQL</a>
  655. </strong>
  656. </li>
  657. </ul>
  658. <button class="btn btn-success" type="button" data-dismiss="modal">
  659. <i class="fa fa-times"></i>
  660. Close</button>
  661. </div>
  662. </div>
  663. </div>
  664. </div>
  665. </div>
  666. </div>
  667. </div>
  668. <!-- Panda Games -->
  669. <div class="portfolio-modal modal fade" id="pandaGames" tabindex="-1" role="dialog" aria-hidden="true">
  670. <div class="modal-dialog" role="document">
  671. <div class="modal-content">
  672. <div class="close-modal" data-dismiss="modal">
  673. <div class="lr">
  674. <div class="rl"></div>
  675. </div>
  676. </div>
  677. <div class="container">
  678. <div class="row">
  679. <div class="col-lg-8 mx-auto">
  680. <div class="modal-body">
  681. <h2>Quotes Website for a Friend</h2>
  682. <hr class="star-primary">
  683. <img class="img-fluid img-centered" src="img/portfolio/quotes.png" alt="">
  684. <p>In high school my friend had a static web page where he posted quotes that people said. During
  685. winter break I decided amp up his project and
  686. create a dynamic website in PHP that would display the quotes on pictures of pandas. Along with
  687. displaying quotes, this website also has a web forum where
  688. registered users can submit new quotes.</p>
  689. <ul class="list-inline item-details">
  690. <li>Date:
  691. <strong>
  692. December 2016
  693. </strong>
  694. </li>
  695. <li>Skills:
  696. <strong>
  697. <a href="http://php.net">PHP</a>
  698. </strong>
  699. <strong>
  700. <a href="https://www.w3schools.com/html/">HTML</a>
  701. </strong>
  702. <strong>
  703. <a href="https://www.w3schools.com/sql/">SQL</a>
  704. </strong>
  705. </li>
  706. </ul>
  707. <button class="btn btn-success" type="button" data-dismiss="modal">
  708. <i class="fa fa-times"></i>
  709. Close</button>
  710. </div>
  711. </div>
  712. </div>
  713. </div>
  714. </div>
  715. </div>
  716. </div>
  717. <!-- Bash Manager -->
  718. <div class="portfolio-modal modal fade" id="bashManager" tabindex="-1" role="dialog" aria-hidden="true">
  719. <div class="modal-dialog" role="document">
  720. <div class="modal-content">
  721. <div class="close-modal" data-dismiss="modal">
  722. <div class="lr">
  723. <div class="rl"></div>
  724. </div>
  725. </div>
  726. <div class="container">
  727. <div class="row">
  728. <div class="col-lg-8 mx-auto">
  729. <div class="modal-body">
  730. <h2>Quotes Website for a Friend</h2>
  731. <hr class="star-primary">
  732. <img class="img-fluid img-centered" src="img/portfolio/quotes.png" alt="">
  733. <p>In high school my friend had a static web page where he posted quotes that people said. During
  734. winter break I decided amp up his project and
  735. create a dynamic website in PHP that would display the quotes on pictures of pandas. Along with
  736. displaying quotes, this website also has a web forum where
  737. registered users can submit new quotes.</p>
  738. <ul class="list-inline item-details">
  739. <li>Date:
  740. <strong>
  741. December 2016
  742. </strong>
  743. </li>
  744. <li>Skills:
  745. <strong>
  746. <a href="http://php.net">PHP</a>
  747. </strong>
  748. <strong>
  749. <a href="https://www.w3schools.com/html/">HTML</a>
  750. </strong>
  751. <strong>
  752. <a href="https://www.w3schools.com/sql/">SQL</a>
  753. </strong>
  754. </li>
  755. </ul>
  756. <button class="btn btn-success" type="button" data-dismiss="modal">
  757. <i class="fa fa-times"></i>
  758. Close</button>
  759. </div>
  760. </div>
  761. </div>
  762. </div>
  763. </div>
  764. </div>
  765. </div>
  766. <!-- Bootstrap core JavaScript -->
  767. <script src="js/jquery.min.js"></script>
  768. <script src="js/popper.min.js"></script>
  769. <script src="js/bootstrap.min.js"></script>
  770. <!-- Plugin JavaScript -->
  771. <script src="js/jquery.easing.min.js"></script>
  772. </body>
  773. </html>