Add Project sections And keyword javascript

* Projects within the experience section
* Keywords and the ability to jump to them
* Change behabior of profile menu when window is to short

src/partials/experience.html

@@ -12,10 +12,16 @@
       {{#each r.employment.history}}
       <li class="card card-nested clearfix">
         <div class="content">
-          <p class="clear-margin relative"><strong>{{{position}}}</strong>,&nbsp;<a href="{{url}}" target="_blank">{{employer}}</a></p>
-          {{> date}}
-          {{{summary}}}
-          {{> highlights}}
+          <details class="employer" tags="{{#each keywords}}{{this}} {{/each}}{{#each technologies}}{{this}} {{/each}}">>
+            <summary>
+              <strong>{{{position}}}</strong>,&nbsp;<a href="{{url}}" target="_blank">{{employer}}</a>
+              </br>{{> date}}
+              {{{summary}}}
+              {{> highlights}}
+            </summary>
+            {{#if description}}<br><p class="clear-margin relative">{{{description}}}</p>{{/if}}
+            {{> work-projects}}
+          </details>
         </div>
       </li>
       {{/each}}

src/partials/head.html

@@ -5,3 +5,4 @@
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-aNUYGqSUL9wG/vP7+cWZ5QOM4gsQou3sBfWRr/8S3R1Lv0rysEmnwsRKMbhiQX/O" crossorigin="anonymous" />
 {{> style}}
+{{> top-script}}

src/partials/profile.html

@@ -32,5 +32,42 @@
               {{/each}}
             </div>
         </div>
+        <hr/>
+        {{#if r.settings.links}}
+        <div class="text-center">
+        <div class=info"><u>Other formats</u></div>
+          {{#each r.settings.links.main}}
+            <a href="{{url}}" target="_blank" >{{name}}</a>
+          {{/each}}
+          {{#if r.settings.links.extra}}
+          <details ontoggle="toggle_pin_menu()">
+            <summary>More</summary>
+            {{#each r.settings.links.extra}}
+              {{#group}}{{.}}:{{/group}}
+              {{#each links}}
+                {{#if name}}
+                  <a href="{{url}}" target="_blank" >{{name}}</a>
+                {{else}}
+                  <a href="{{.}}.html" target="_blank" >{{.}}</a>
+                {{/if}}
+              {{/each}}<br>
+            {{/each}}
+          </details>
+          {{/if}}
+        </div>
+        <hr/>
+        {{/if}}
+        <div id=tag-list class="tag-list text-center">
+          <p><a onclick="toggle_details(true)">Expand</a> / <a onclick="toggle_details(false)">Collapse</a></p>
+          {{#if r.tags}}
+          <details ontoggle="toggle_pin_menu()">
+            <summary>Keywords</summary>
+            {{#each r.tags}}
+            <span class="label label-keyword btn" skill="{{this}}" onclick="show_keyword('{{this}}')">{{this}}</span>
+            {{/each}}
+          </details>
+          {{/if}}
+        </div>
+        <hr/>
     </div>
 </section>

src/partials/style.html

@@ -722,6 +722,9 @@ details.detail > summary {
   list-style: none;
 }
 
+.tag-list {
+  overflow:auto;
+}
 
 img.logo {
   display: inline-block;
@@ -732,4 +735,16 @@ img.logo {
   text-align: center;
 }
 
+.label {
+    margin-bottom: 3px;
+}
+
+.highlight {
+    background: LightGoldenrodYellow;
+    font-weight: bolder;
+}
+
+.employer.highlight {
+    background: Cornsilk;
+}
 </style>

src/partials/top-script.html

@@ -0,0 +1,38 @@
+<script>
+  function clear_highlight(){
+    var elements = document.querySelectorAll(".highlight")
+    for (var i = 0; i < elements.length; i++) {
+        elements[i].classList.remove('highlight')
+    }
+  }
+  function show_keyword(tag){
+    clear_highlight()
+    var elements = document.querySelectorAll(`[tags*="${tag}"]`)
+    if(elements){
+        for (var i = 0; i < elements.length; i++) {
+          elements[i].open = true
+          elements[i].parentElement.closest('details').open = true
+          if(elements[i].parentElement.closest('details').parentElement.closest('details')){
+            elements[i].parentElement.closest('details').parentElement.closest('details').open = true
+          }
+          elements[i].classList.add('highlight')
+      }
+      elements[0].scrollIntoView()
+    }
+  }
+  function toggle_details(value){
+    var elements = document.getElementsByTagName('details')
+    for (var i = 0; i < elements.length; i++) {
+        elements[i].open = value
+    }
+  }
+  function toggle_pin_menu(){
+    var profile = document.getElementById('profile')
+    if(profile.clientHeight >= window.innerHeight){
+      profile.classList.remove('affix')
+    }else{
+      profile.classList.add('affix')
+    }
+  }
+window.addEventListener("resize", toggle_pin_menu)
+</script>

src/partials/work-projects.html

@@ -0,0 +1,27 @@
+{{#if projects}}
+<div id="work-projects" class="detail">
+  <div class="info">
+    <h5 class="title text-uppercase">Projects</h5>
+    <ul class="list-unstyled">
+      {{#each projects}}
+      <li class="card card-nested clearfix">
+        <div class="content">
+          <details tags="{{#each keywords}}{{this}} {{/each}}{{#each technologies}}{{this}} {{/each}}">
+            <summary {{^description}}class="empty"{{/description}}>
+              {{#if customer}}<strong>{{customer}}</strong>,&nbsp;{{/if}}{{{name}}}
+              {{#if url}}<p><a href="{{url}}" target="_blank">{{url}}</a></p>{{/if}}
+              {{#if summary}}{{{summary}}}{{/if}}
+              <small>
+              {{#if keywords}}Keywords: {{#each keywords}} {{this}},{{/each}}</br>{{/if}}
+              {{#if technologies}}Technologies: {{#each technologies}} {{this}},{{/each}}{{/if}}
+              </small>
+            </summary>
+            {{#if description}}<br><p class="clear-margin relative">{{{description}}}</p>{{/if}}
+          </details>
+        </div>
+      </li>
+      {{/each}}
+    </ul>
+  </div>
+</div>
+{{/if}}

src/template-html.html

@@ -3,7 +3,7 @@
 <head>
   {{> head}}
 </head>
-<body itemscope="itemscope" itemtype="http://schema.org/Person">
+<body itemscope="itemscope" itemtype="http://schema.org/Person" onload="toggle_pin_menu()">
   {{> body}}
 </body>
 </html>