added heading anchors and updated responsiveness

index.html

@@ -43,7 +43,7 @@ <h2 id="main-title" class="title">Seth Clydesdale</h2>
       <div class="content-block">
         <div class="column-row">
           <div class="column">
-            <h2 class="section-title">Experience</h2>
+            <h2 class="section-title" id="main-experience">Experience</h2>
             <ul>
               <li>HTML, CSS, JavaScript (5+ years, self-taught)</li>
               <li>Lua</li>
@@ -54,7 +54,7 @@ <h2 class="section-title">Experience</h2>
           </div>
 
           <div class="column">
-            <h2 class="section-title">Languages</h2>
+            <h2 class="section-title" id="main-languages">Languages</h2>
             <ul>
               <li>English, US (Native)</li>
               <li>Japanese (N5, Currently studying)</li>
@@ -63,7 +63,7 @@ <h2 class="section-title">Languages</h2>
           </div>
 
           <div class="column">
-            <h2 class="section-title">Hobbies</h2>
+            <h2 class="section-title" id="main-hobbies">Hobbies</h2>
             <ul>
               <li>Programming</li>
               <li>Languages</li>
@@ -75,7 +75,7 @@ <h2 class="section-title">Hobbies</h2>
 
         <div class="column-row">
           <div class="column">
-            <h2 class="section-title">Contact Info</h2>
+            <h2 class="section-title" id="main-contact">Contact Info</h2>
             <ul>
               <li>Twitter: <a href="https://twitter.com/SethC1995">@SethC1995</a></li>
               <li>Github: <a href="https://github.com/SethClydesdale">SethClydesdale</a></li>
@@ -92,7 +92,7 @@ <h2 id="featured-projects" class="title center">Featured Projects</h2>
       <div class="content-block">
         <div class="column-row">
           <div class="column">
-            <h2 class="section-title">Websites</h2>
+            <h2 class="section-title" id="projects-websites">Websites</h2>
             <ul>
               <li><a href="https://sethclydesdale.github.io/genki-study-resources/">Genki Study Resources</a><br>Created to help aid with my Japanese studies.</li>
               <li><a href="https://sethclydesdale.github.io/ps4-cover-generator/">PS4 Cover Generator</a><br>Tool that helps one create a Cover image for their PSN profile, directly on their PS4.</li>
@@ -101,7 +101,7 @@ <h2 class="section-title">Websites</h2>
           </div>
 
           <div class="column">
-            <h2 class="section-title">Forumotion Plugins</h2>
+            <h2 class="section-title" id="projects-forumotion">Forumotion Plugins</h2>
             <ul>
               <li><a href="https://sethclydesdale.github.io/forumactif-edge/">Forumactif Edge</a><br>A free modern and responsive forum theme for Forumotion forums.</li>
               <li><a href="https://github.com/SethClydesdale/forumactif-messenger">Forumactif Messenger</a><br>Instant message application for Forumotion.</li>
@@ -111,7 +111,7 @@ <h2 class="section-title">Forumotion Plugins</h2>
           </div>
 
           <div class="column">
-            <h2 class="section-title">Games</h2>
+            <h2 class="section-title" id="projects-games">Games</h2>
             <ul>
               <li><a href="http://sethclydesdale.github.io/tic-tac-toe/">Tic-Tac-Toe</a><br>A simple game of Tic-Tac-Toe in the browser.</li>
               <li><a href="http://sethclydesdale.github.io/rock-paper-scissors/">Rock Paper Scissors</a><br>A fun little game of rock-paper-scissors.</li>
@@ -124,7 +124,7 @@ <h2 class="section-title">Games</h2>
 
         <div class="column-row">
           <div class="column">
-            <h2 class="section-title">PSOBB Addons</h2>
+            <h2 class="section-title" id="projects-psobb">PSOBB Addons</h2>
             <ul>
               <li><a href="https://github.com/SethClydesdale/psobb-meseta-count">Meseta Count</a><br>This addon displays the Meseta you're currently carrying along with an option to set a goal amount.</li>
               <li><a href="https://github.com/SethClydesdale/psobb-drop-charts">Drop Charts</a><br>This addon provides you with a reference for items that drop from enemies on certain difficulties and for specific Section IDs.</li>
@@ -135,7 +135,7 @@ <h2 class="section-title">PSOBB Addons</h2>
           </div>
 
           <div class="column">
-            <h2 class="section-title">Tools</h2>
+            <h2 class="section-title" id="projects-tools">Tools</h2>
             <ul>
               <li><a href="https://github.com/SethClydesdale/slidemenu-js">SlideMenu-JS</a><br>SlideMenu-JS is a constructor for creating side menus in JavaScript with ease.</li>
               <li><a href="https://github.com/SethClydesdale/Element.prototype.scrollPercent">Element.prototype.scrollPercent</a><br>This method is used to calculate the percentage an element has been scrolled vertically and horizontally.</li>
@@ -146,7 +146,7 @@ <h2 class="section-title">Tools</h2>
           </div>
 
           <div class="column">
-            <h2 class="section-title">Miscellaneous</h2>
+            <h2 class="section-title" id="projects-misc">Miscellaneous</h2>
             <ul>
               <li><a href="https://sethclydesdale.github.io/scroll-spider/">Scroll Spider</a><br>Scare the people on your website by having a spider scroll down the page for Halloween.</li>
               <li><a href="https://sethclydesdale.github.io/rainstorm/">Rainstorm</a><br>Rain in your browser to set your CPU on fire!</li>

privacy/index.html

@@ -34,7 +34,7 @@ <h1 id="site-title"><a href="../" id="home-link">Seth's Github Pages</a></h1>
 
     <div id="content">
       <div class="content-block">
-        <h2 class="title center">Privacy Policy</h2>
+        <h2 class="title center" id="privacy-policy">Privacy Policy</h2>
       </div>
 
 
@@ -43,14 +43,14 @@ <h4 class="title-med">Last Updated March 30, 2018</h4>
       </div>
 
       <div class="content-block">
-        <h2 class="section-title">Our use of Cookies and Tracking on our Website</h2>
+        <h2 class="section-title" id="privacy-cookies-and-tracking">Our use of Cookies and Tracking on our Website</h2>
 
-        <h3 class="sub-title">Cookies</h3>
+        <h3 class="sub-title" id="privacy-cookies">Cookies</h3>
         <p>This website uses cookies to make interactions with our service easy and meaningful. We use cookies (and similar technologies, like HTML5 localStorage) to remember your preferences.</p>
 
         <p>A cookie is a small piece of text that our web server stores on your computer or mobile device, which your browser sends to us when you return to our site. Cookies do not necessarily identify you if you are merely visiting. The cookies set are essential for the operation of the website, or are used for performance or functionality. By using our website, you agree that we can place these types of cookies on your computer or device. If you disable your browser or device’s ability to accept cookies, you may not be able to use portions of this website correctly.</p>
 
-        <h3 class="sub-title">Google Analytics</h3>
+        <h3 class="sub-title" id="privacy-google">Google Analytics</h3>
         <p>We use Google Analytics as a third party tracking service, but we don’t use it to track you individually or collect your User Personal Information. We use Google Analytics to collect information about how our website performs and how our users, in general, navigate through and use this website. This helps us evaluate our users' usage ; compile statistical reports on activity ; and improve our content and website performance.</p>
 
         <p>Google Analytics gathers certain simple, non-personally identifying information over time, such as your IP address, browser type, internet service provider, referring and exit pages, time stamp, and similar data about your use of this website. We do not link this information to any of your personal information such as your user name.</p>
@@ -59,26 +59,26 @@ <h3 class="sub-title">Google Analytics</h3>
 
         <p>Certain pages on our site may set other third party cookies. For example, we may embed content, such as videos, from another site that sets a cookie. While we try to minimize these third party cookies, we can’t always control what cookies this third party content sets.</p>
 
-        <h3 class="sub-title">Tracking</h3>
+        <h3 class="sub-title" id="privacy-tracking">Tracking</h3>
         <p>"<a href="http://donottrack.us/">Do Not Track</a>" is a privacy preference you can set in your browser if you do not want online services to collect and share certain kinds of information about your online activity from third party tracking services. We do not track your online browsing activity on other online services over time and we do not permit third-party services to track your activity on our site beyond our basic Google Analytics tracking, which you may opt out of <a href="https://tools.google.com/dlpage/gaoptout">here</a>. Because we do not share this kind of data with third party services or permit this kind of third party data collection for any of our users, and we do not track our users on third-party websites ourselves, we do not need to respond differently to an individual browser's Do Not Track setting.</p>
 
         <p>If you are interested in turning on your browser’s privacy and Do Not Track settings, the <a href="http://donottrack.us/">Do Not Track</a> website has browser-specific instructions.</p>
       </div>
 
 
       <div class="content-block">
-        <h2 class="section-title">Changes to our Privacy Policy</h2>
+        <h2 class="section-title" id="privacy-changes">Changes to our Privacy Policy</h2>
         <p>Although most changes are likely to be minor, we may change our Privacy Policy from time to time. We will provide notification to Users of material changes to this Privacy Policy through twitter and other social media platforms at least 30 days prior to the change taking effect by posting a notice. For changes to this Privacy Policy that do not affect your rights, we encourage visitors to check this page frequently.</p>
       </div>
 
 
       <div class="content-block">
-        <h2 class="section-title">License</h2>
+        <h2 class="section-title" id="privacy-license">License</h2>
         <p>This Privacy Policy is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution license</a>. You may use it freely under the terms of the Creative Commons license.</p>
       </div>
 
       <div class="content-block">
-        <h2 class="section-title">Contacting Us</h2>
+        <h2 class="section-title" id="privacy-contact">Contacting Us</h2>
         <p>Questions regarding our Privacy Policy or information practices should be sent via the <a href="https://github.com/SethClydesdale/sethclydesdale.github.io/issues">issues</a> section of this repository.</p>
       </div>
     </div>

resources/javascript.js

@@ -1,12 +1,24 @@
+// # MODIFICATIONS FOR ALL PAGES #
 (function () {
 
-  // append index.html to local links, if the website is being viewed on a local file system
+  // # LINK MODIFICATIONS #
   if (window.location.protocol == 'file:') {
+    // append index.html to links if this project is hosted on the local file system
+    // it makes browsing easier offline, since otherwise links will just open the directory and not the file
     for (var a = document.querySelectorAll('a[href$="/"]'), i = 0, j = a.length; i < j; i++) {
       if (!/http/.test(a[i].href)) {
         a[i].href += 'index.html';
       }
     }
   }
+
+
+  // # SECTION ANCHORS #
+  // adds an anchor link to headings
+  for (var h = document.getElementById('content').querySelectorAll('h1, h2, h3, h4, h5, h6'), i = 0, j = h.length; i < j; i++) {
+    if (h[i].id) {
+      h[i].insertAdjacentHTML('afterbegin', '<a href="#' + h[i].id + '" class="anchor"><span class="anchor-icon">&#xf0c1;</span></a>');
+    }
+  }
 
 }());

resources/stylesheet.css

@@ -109,6 +109,31 @@ a#fork-me:hover {
   padding:30px;
 }
 
+/* section anchors */
+a.anchor {
+  color:#666;
+  font-family:FontAwesome;
+  font-size:16px;
+  font-weight:normal;
+  text-decoration:none;
+  text-align:center;
+  vertical-align:middle;
+  display:inline-block;
+  width:25px;
+  margin:0 0 0 -25px;
+}
+
+.anchor-icon {
+  display:inline-block;
+  transform:rotate(-45deg);
+  visibility:hidden;
+}
+
+h1:hover .anchor-icon, h2:hover .anchor-icon, h3:hover .anchor-icon, h4:hover .anchor-icon, h5:hover .anchor-icon, h6:hover .anchor-icon {
+  visibility:visible;
+}
+
+/* titles */
 .title {
   color:#333;
   font-size:28px;
@@ -199,7 +224,22 @@ footer li:first-child:before { display:none; }
 
 
 /* RESPONSIVENESS */
+@media (max-width:1000px) {
+  /* wrapper's max-width is 1000px, so remove padding so the page takes up the whole screen */
+  .content-block { padding:30px 0; }
+
+  /* add a bit of padding to other elements */
+  p, ul, h2, h3, h4, h5, h6 {
+    padding:0 6px;
+  }
+
+  /* adjust anchor position */
+  a.anchor { margin:0 0 0 -5px; }
+  .center a.anchor { margin:0 0 0 -25px; }
+}
+
 @media (max-width:820px) {
+  /* header adjustments */
   header {
     padding:100px 0px 0px 0px;
     text-align:center;
@@ -218,6 +258,7 @@ footer li:first-child:before { display:none; }
     margin-left:-50px;
   }
 
+  /* display columns on a single line */
   .column, .column:last-child {
     width:100%;
     margin:0 0 30px 0;