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.

518 lines
21 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="">
  7. <meta name="author" content="">
  8. <title>Jeffery Russell</title>
  9. <!-- Bootstrap core CSS -->
  10. <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  11. <!-- Custom fonts for this template -->
  12. <link href="vendor/font-awesome/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" rel="stylesheet" type="text/css">
  15. <!-- Custom styles for this template -->
  16. <link href="css/freelancer.min.css" rel="stylesheet">
  17. </head>
  18. <body id="page-top">
  19. <!-- Navigation -->
  20. <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
  21. <div class="container">
  22. <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
  23. <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  24. Menu
  25. <i class="fa fa-bars"></i>
  26. </button>
  27. <div class="collapse navbar-collapse" id="navbarResponsive">
  28. <ul class="navbar-nav ml-auto">
  29. <li class="nav-item">
  30. <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
  31. </li>
  32. <li class="nav-item">
  33. <a class="nav-link js-scroll-trigger" href="#about">About</a>
  34. </li>
  35. <li class="nav-item">
  36. <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
  37. </li>
  38. </ul>
  39. </div>
  40. </div>
  41. </nav>
  42. <!-- Header -->
  43. <header class="masthead">
  44. <div class="container">
  45. <img class="img-fluid" src="img/profile.png" alt="">
  46. <div class="intro-text">
  47. <span class="name">Start Bootstrap</span>
  48. <hr class="star-light">
  49. <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
  50. </div>
  51. </div>
  52. </header>
  53. <!-- Portfolio Grid Section -->
  54. <section id="portfolio">
  55. <div class="container">
  56. <h2 class="text-center">Portfolio</h2>
  57. <hr class="star-primary">
  58. <div class="row">
  59. <div class="col-sm-4 portfolio-item">
  60. <a class="portfolio-link" href="#portfolioModal1" data-toggle="modal">
  61. <div class="caption">
  62. <div class="caption-content">
  63. <i class="fa fa-search-plus fa-3x"></i>
  64. </div>
  65. </div>
  66. <img class="img-fluid" src="img/portfolio/cabin.png" alt="">
  67. </a>
  68. </div>
  69. <div class="col-sm-4 portfolio-item">
  70. <a class="portfolio-link" href="#portfolioModal2" data-toggle="modal">
  71. <div class="caption">
  72. <div class="caption-content">
  73. <i class="fa fa-search-plus fa-3x"></i>
  74. </div>
  75. </div>
  76. <img class="img-fluid" src="img/portfolio/cake.png" alt="">
  77. </a>
  78. </div>
  79. <div class="col-sm-4 portfolio-item">
  80. <a class="portfolio-link" href="#portfolioModal3" data-toggle="modal">
  81. <div class="caption">
  82. <div class="caption-content">
  83. <i class="fa fa-search-plus fa-3x"></i>
  84. </div>
  85. </div>
  86. <img class="img-fluid" src="img/portfolio/circus.png" alt="">
  87. </a>
  88. </div>
  89. <div class="col-sm-4 portfolio-item">
  90. <a class="portfolio-link" href="#portfolioModal4" data-toggle="modal">
  91. <div class="caption">
  92. <div class="caption-content">
  93. <i class="fa fa-search-plus fa-3x"></i>
  94. </div>
  95. </div>
  96. <img class="img-fluid" src="img/portfolio/game.png" alt="">
  97. </a>
  98. </div>
  99. <div class="col-sm-4 portfolio-item">
  100. <a class="portfolio-link" href="#portfolioModal5" 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/safe.png" alt="">
  107. </a>
  108. </div>
  109. <div class="col-sm-4 portfolio-item">
  110. <a class="portfolio-link" href="#portfolioModal6" data-toggle="modal">
  111. <div class="caption">
  112. <div class="caption-content">
  113. <i class="fa fa-search-plus fa-3x"></i>
  114. </div>
  115. </div>
  116. <img class="img-fluid" src="img/portfolio/submarine.png" alt="">
  117. </a>
  118. </div>
  119. </div>
  120. </div>
  121. </section>
  122. <!-- About Section -->
  123. <section class="success" id="about">
  124. <div class="container">
  125. <h2 class="text-center">About</h2>
  126. <hr class="star-light">
  127. <div class="row">
  128. <div class="col-lg-4 ml-auto">
  129. <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
  130. </div>
  131. <div class="col-lg-4 mr-auto">
  132. <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
  133. </div>
  134. <div class="col-lg-8 mx-auto text-center">
  135. <a href="#" class="btn btn-lg btn-outline">
  136. <i class="fa fa-download"></i>
  137. Download Theme
  138. </a>
  139. </div>
  140. </div>
  141. </div>
  142. </section>
  143. <!-- Contact Section -->
  144. <section id="contact">
  145. <div class="container">
  146. <h2 class="text-center">Contact Me</h2>
  147. <hr class="star-primary">
  148. <div class="row">
  149. <div class="col-lg-8 mx-auto">
  150. </div>
  151. </div>
  152. </div>
  153. </section>
  154. <!-- Footer -->
  155. <footer class="text-center">
  156. <div class="footer-above">
  157. <div class="container">
  158. <div class="row">
  159. <div class="footer-col col-md-4">
  160. <h3>Location</h3>
  161. <p>3481 Melrose Place
  162. <br>Beverly Hills, CA 90210</p>
  163. </div>
  164. <div class="footer-col col-md-4">
  165. <h3>Around the Web</h3>
  166. <ul class="list-inline">
  167. <li class="list-inline-item">
  168. <a class="btn-social btn-outline" href="#">
  169. <i class="fa fa-fw fa-facebook"></i>
  170. </a>
  171. </li>
  172. <li class="list-inline-item">
  173. <a class="btn-social btn-outline" href="#">
  174. <i class="fa fa-fw fa-google-plus"></i>
  175. </a>
  176. </li>
  177. <li class="list-inline-item">
  178. <a class="btn-social btn-outline" href="#">
  179. <i class="fa fa-fw fa-twitter"></i>
  180. </a>
  181. </li>
  182. <li class="list-inline-item">
  183. <a class="btn-social btn-outline" href="#">
  184. <i class="fa fa-fw fa-linkedin"></i>
  185. </a>
  186. </li>
  187. <li class="list-inline-item">
  188. <a class="btn-social btn-outline" href="#">
  189. <i class="fa fa-fw fa-dribbble"></i>
  190. </a>
  191. </li>
  192. </ul>
  193. </div>
  194. <div class="footer-col col-md-4">
  195. <h3>About Freelancer</h3>
  196. <p>Freelance is a free to use, open source Bootstrap theme created by
  197. <a href="http://startbootstrap.com">Start Bootstrap</a>.</p>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. <div class="footer-below">
  203. <div class="container">
  204. <div class="row">
  205. <div class="col-lg-12">
  206. Copyright &copy; Your Website 2017
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </footer>
  212. <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
  213. <div class="scroll-top d-lg-none">
  214. <a class="btn btn-primary js-scroll-trigger" href="#page-top">
  215. <i class="fa fa-chevron-up"></i>
  216. </a>
  217. </div>
  218. <!-- Portfolio Modals -->
  219. <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
  220. <div class="modal-dialog" role="document">
  221. <div class="modal-content">
  222. <div class="close-modal" data-dismiss="modal">
  223. <div class="lr">
  224. <div class="rl"></div>
  225. </div>
  226. </div>
  227. <div class="container">
  228. <div class="row">
  229. <div class="col-lg-8 mx-auto">
  230. <div class="modal-body">
  231. <h2>Project Title</h2>
  232. <hr class="star-primary">
  233. <img class="img-fluid img-centered" src="img/portfolio/cabin.png" alt="">
  234. <p>Use this area of the page to describe your project. The icon above is part of a free icon set by
  235. <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
  236. <ul class="list-inline item-details">
  237. <li>Client:
  238. <strong>
  239. <a href="http://startbootstrap.com">Start Bootstrap</a>
  240. </strong>
  241. </li>
  242. <li>Date:
  243. <strong>
  244. <a href="http://startbootstrap.com">April 2014</a>
  245. </strong>
  246. </li>
  247. <li>Service:
  248. <strong>
  249. <a href="http://startbootstrap.com">Web Development</a>
  250. </strong>
  251. </li>
  252. </ul>
  253. <button class="btn btn-success" type="button" data-dismiss="modal">
  254. <i class="fa fa-times"></i>
  255. Close</button>
  256. </div>
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
  264. <div class="modal-dialog" role="document">
  265. <div class="modal-content">
  266. <div class="close-modal" data-dismiss="modal">
  267. <div class="lr">
  268. <div class="rl"></div>
  269. </div>
  270. </div>
  271. <div class="container">
  272. <div class="row">
  273. <div class="col-lg-8 mx-auto">
  274. <div class="modal-body">
  275. <h2>Project Title</h2>
  276. <hr class="star-primary">
  277. <img class="img-fluid img-centered" src="img/portfolio/cake.png" alt="">
  278. <p>Use this area of the page to describe your project. The icon above is part of a free icon set by
  279. <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
  280. <ul class="list-inline item-details">
  281. <li>Client:
  282. <strong>
  283. <a href="http://startbootstrap.com">Start Bootstrap</a>
  284. </strong>
  285. </li>
  286. <li>Date:
  287. <strong>
  288. <a href="http://startbootstrap.com">April 2014</a>
  289. </strong>
  290. </li>
  291. <li>Service:
  292. <strong>
  293. <a href="http://startbootstrap.com">Web Development</a>
  294. </strong>
  295. </li>
  296. </ul>
  297. <button class="btn btn-success" type="button" data-dismiss="modal">
  298. <i class="fa fa-times"></i>
  299. Close</button>
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  307. <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
  308. <div class="modal-dialog" role="document">
  309. <div class="modal-content">
  310. <div class="close-modal" data-dismiss="modal">
  311. <div class="lr">
  312. <div class="rl"></div>
  313. </div>
  314. </div>
  315. <div class="container">
  316. <div class="row">
  317. <div class="col-lg-8 mx-auto">
  318. <div class="modal-body">
  319. <h2>Project Title</h2>
  320. <hr class="star-primary">
  321. <img class="img-fluid img-centered" src="img/portfolio/circus.png" alt="">
  322. <p>Use this area of the page to describe your project. The icon above is part of a free icon set by
  323. <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
  324. <ul class="list-inline item-details">
  325. <li>Client:
  326. <strong>
  327. <a href="http://startbootstrap.com">Start Bootstrap</a>
  328. </strong>
  329. </li>
  330. <li>Date:
  331. <strong>
  332. <a href="http://startbootstrap.com">April 2014</a>
  333. </strong>
  334. </li>
  335. <li>Service:
  336. <strong>
  337. <a href="http://startbootstrap.com">Web Development</a>
  338. </strong>
  339. </li>
  340. </ul>
  341. <button class="btn btn-success" type="button" data-dismiss="modal">
  342. <i class="fa fa-times"></i>
  343. Close</button>
  344. </div>
  345. </div>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. </div>
  351. <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
  352. <div class="modal-dialog" role="document">
  353. <div class="modal-content">
  354. <div class="close-modal" data-dismiss="modal">
  355. <div class="lr">
  356. <div class="rl"></div>
  357. </div>
  358. </div>
  359. <div class="container">
  360. <div class="row">
  361. <div class="col-lg-8 mx-auto">
  362. <div class="modal-body">
  363. <h2>Project Title</h2>
  364. <hr class="star-primary">
  365. <img class="img-fluid img-centered" src="img/portfolio/game.png" alt="">
  366. <p>Use this area of the page to describe your project. The icon above is part of a free icon set by
  367. <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
  368. <ul class="list-inline item-details">
  369. <li>Client:
  370. <strong>
  371. <a href="http://startbootstrap.com">Start Bootstrap</a>
  372. </strong>
  373. </li>
  374. <li>Date:
  375. <strong>
  376. <a href="http://startbootstrap.com">April 2014</a>
  377. </strong>
  378. </li>
  379. <li>Service:
  380. <strong>
  381. <a href="http://startbootstrap.com">Web Development</a>
  382. </strong>
  383. </li>
  384. </ul>
  385. <button class="btn btn-success" type="button" data-dismiss="modal">
  386. <i class="fa fa-times"></i>
  387. Close</button>
  388. </div>
  389. </div>
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. </div>
  395. <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
  396. <div class="modal-dialog" role="document">
  397. <div class="modal-content">
  398. <div class="close-modal" data-dismiss="modal">
  399. <div class="lr">
  400. <div class="rl"></div>
  401. </div>
  402. </div>
  403. <div class="container">
  404. <div class="row">
  405. <div class="col-lg-8 mx-auto">
  406. <div class="modal-body">
  407. <h2>Project Title</h2>
  408. <hr class="star-primary">
  409. <img class="img-fluid img-centered" src="img/portfolio/safe.png" alt="">
  410. <p>Use this area of the page to describe your project. The icon above is part of a free icon set by
  411. <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
  412. <ul class="list-inline item-details">
  413. <li>Client:
  414. <strong>
  415. <a href="http://startbootstrap.com">Start Bootstrap</a>
  416. </strong>
  417. </li>
  418. <li>Date:
  419. <strong>
  420. <a href="http://startbootstrap.com">April 2014</a>
  421. </strong>
  422. </li>
  423. <li>Service:
  424. <strong>
  425. <a href="http://startbootstrap.com">Web Development</a>
  426. </strong>
  427. </li>
  428. </ul>
  429. <button class="btn btn-success" type="button" data-dismiss="modal">
  430. <i class="fa fa-times"></i>
  431. Close</button>
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. </div>
  439. <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
  440. <div class="modal-dialog" role="document">
  441. <div class="modal-content">
  442. <div class="close-modal" data-dismiss="modal">
  443. <div class="lr">
  444. <div class="rl"></div>
  445. </div>
  446. </div>
  447. <div class="container">
  448. <div class="row">
  449. <div class="col-lg-8 mx-auto">
  450. <div class="modal-body">
  451. <h2>Project Title</h2>
  452. <hr class="star-primary">
  453. <img class="img-fluid img-centered" src="img/portfolio/submarine.png" alt="">
  454. <p>Use this area of the page to describe your project. The icon above is part of a free icon set by
  455. <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
  456. <ul class="list-inline item-details">
  457. <li>Client:
  458. <strong>
  459. <a href="http://startbootstrap.com">Start Bootstrap</a>
  460. </strong>
  461. </li>
  462. <li>Date:
  463. <strong>
  464. <a href="http://startbootstrap.com">April 2014</a>
  465. </strong>
  466. </li>
  467. <li>Service:
  468. <strong>
  469. <a href="http://startbootstrap.com">Web Development</a>
  470. </strong>
  471. </li>
  472. </ul>
  473. <button class="btn btn-success" type="button" data-dismiss="modal">
  474. <i class="fa fa-times"></i>
  475. Close</button>
  476. </div>
  477. </div>
  478. </div>
  479. </div>
  480. </div>
  481. </div>
  482. </div>
  483. <!-- Bootstrap core JavaScript -->
  484. <script src="vendor/jquery/jquery.min.js"></script>
  485. <script src="vendor/popper/popper.min.js"></script>
  486. <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  487. <!-- Plugin JavaScript -->
  488. <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
  489. <!-- Contact Form JavaScript -->
  490. <script src="js/jqBootstrapValidation.js"></script>
  491. <script src="js/contact_me.js"></script>
  492. <!-- Custom scripts for this template -->
  493. <script src="js/freelancer.min.js"></script>
  494. </body>
  495. </html>