_template-bottom.php 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <div class="container-fluid brownContainer footer bottom-40">
  2. <div class="row">
  3. <div class="col-sm-4">
  4. <h4 class="brown">Responsive Design</h4>
  5. <p class="hidden-xs">
  6. This site uses responsive HTML5 technologies to work on most, if not all platforms. Try it; view this website on a
  7. phone!
  8. </p>
  9. <p class="visible-xs-block">
  10. This site uses responsive HTML5 technologies to work on most, if not all platforms. Try it; view this website with a
  11. laptop or a desktop computer.
  12. </p>
  13. </div>
  14. <div class="col-sm-3 col-sm-offset-1">
  15. <h4 class="brown">Connect with Me</a></h4>
  16. <div class="row">
  17. <div class="col-xs-1">
  18. <a href="https://github.com/jbranso" target="_blank">
  19. <img src="images/github.png" style="max-width:20px;max-height:20px;" />
  20. </a>
  21. </div>
  22. <div class="col-xs-1">
  23. <a href="https://www.linkedin.com/profile/public-profile-settings?trk=prof-edit-edit-public_profile" target="_blank">
  24. <img src="images/linked-in.png" style="max-width:20px;max-height:20px;" />
  25. </a>
  26. </div>
  27. <div class="col-xs-1">
  28. <a href="mailto:gnusites@fastmail.com" target="_blank">
  29. <img alt="email-icon" src="images/email-icon.png"/>
  30. </a>
  31. </div>
  32. </div>
  33. </div><!-- col-sm-6 -->
  34. <div class="col-sm-4">
  35. <h4 class="brown">What runs this site</h4>
  36. This site is powered by some pretty amazing web technologies including nginx, bootstrap, jQuery, PHP, HTML5, and
  37. javascript!
  38. </div>
  39. </div>
  40. <br/><br/><br/>
  41. </div><!-- .container -->
  42. <!-- Bootstrap core JavaScript
  43. ================================================== -->
  44. <!-- Placed at the end of the document so the pages load faster -->
  45. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  46. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
  47. integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  48. <script>
  49. window.onbeforeunload = function() {
  50. window.stop();
  51. }
  52. function load(html, php) {
  53. /* collapse the navbar when the user selects home */
  54. $("#navbar-collapse").collapse("hide");
  55. var height = $("#content").height();
  56. $("#content").children().fadeOut(400, function () {
  57. //make sure that the height of the content area, stays the same when the element is hidden
  58. $("#content").css("height", height);
  59. });
  60. var id = php.split(".")[0];
  61. removeBrownLinksInNavbarAndAddBrownLinks (id);
  62. var xmlhttp = new XMLHttpRequest();
  63. xmlhttp.open("GET", html, true);
  64. xmlhttp.send();
  65. xmlhttp.onreadystatechange=function()
  66. {
  67. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  68. {
  69. window.setTimeout(function () {
  70. $("#content").fadeOut(0);
  71. document.getElementById("content").innerHTML=xmlhttp.responseText;
  72. $("#content").css("height", "auto");
  73. $("#content").fadeIn();
  74. }, 400);
  75. }
  76. }
  77. history.pushState(null, null, php);
  78. }
  79. //at the moment, I'm not sure how to configure apache to NOT think index.html is the home page.
  80. //so index.html cannot be. Index.txt it is
  81. function loadHome () {
  82. load ("index.txt", "index.php");
  83. }
  84. function loadAbout () {
  85. load ("about.html", "about.php");
  86. }
  87. function loadSkills () {
  88. load ("skills.html", "skills.php");
  89. }
  90. function loadExperience () {
  91. load ("experience.html", "experience.php");
  92. }
  93. function loadPortfolio () {
  94. load ("portfolio.html", "portfolio.php");
  95. }
  96. function userPressesBackButton(href) {
  97. $("#navbar-collapse").collapse("hide");
  98. var height = $("#content").height();
  99. $("#content").children().fadeOut(400, function () {
  100. //make sure that the height of the content area, stays the same when the element is hidden
  101. $("#content").css("height", height);
  102. });
  103. var xmlhttp = new XMLHttpRequest();
  104. var http = location.pathname.toString().split("/").pop().split(".")[0];
  105. if (http == "index") {
  106. http = http + ".txt";
  107. } else {
  108. http = http + ".html";
  109. }
  110. xmlhttp.open("GET", http , true);
  111. xmlhttp.send();
  112. xmlhttp.onreadystatechange=function()
  113. {
  114. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  115. {
  116. window.setTimeout(function () {
  117. $("#content").fadeOut(0);
  118. document.getElementById("content").innerHTML=xmlhttp.responseText;
  119. $("#content").css("height", "auto");
  120. $("#content").fadeIn();
  121. }, 400);
  122. }
  123. }
  124. }
  125. window.addEventListener("popstate", function(e) {
  126. userPressesBackButton(location.pathname);
  127. });
  128. function removeBrownLinksInNavbarAndAddBrownLinks (id) {
  129. $(".navbar-brand").css("color","#9d9d9d");
  130. $(".nav.navbar-nav").children().children().css("color", "#9d9d9d");
  131. $("#" + id).css("color", "#E18A07");
  132. }
  133. </script>
  134. </body>
  135. </html>