From dbcd235ef412aa52ef3c8c4b0d8fa9a508a2e4b8 Mon Sep 17 00:00:00 2001
From: JayWll <jaywll@outlook.com>
Date: Mon, 18 May 2020 16:58:54 -0600
Subject: [PATCH] Adding initial draft of resume section. Created new layout
 for pages with a secondary menu.

---
 .../jason-williamsca/assets/css/resume.css    |  17 ++
 .../jason-williamsca/assets/css/sidemenu.css  |  60 +++++
 .../jason-williamsca/assets/css/theme.css     |  12 +-
 .../jason-williamsca/layouts/default.htm      |   3 +-
 .../jason-williamsca/layouts/sidesubmenu.htm  |  48 ++++
 www/themes/jason-williamsca/pages/resume.htm  | 226 +++++++++++++++++-
 .../jason-williamsca/partials/mainmenu.htm    |  27 +--
 .../jason-williamsca/partials/resumemenu.htm  |  30 +++
 8 files changed, 396 insertions(+), 27 deletions(-)
 create mode 100644 www/themes/jason-williamsca/assets/css/resume.css
 create mode 100644 www/themes/jason-williamsca/assets/css/sidemenu.css
 create mode 100644 www/themes/jason-williamsca/layouts/sidesubmenu.htm
 create mode 100644 www/themes/jason-williamsca/partials/resumemenu.htm

diff --git a/www/themes/jason-williamsca/assets/css/resume.css b/www/themes/jason-williamsca/assets/css/resume.css
new file mode 100644
index 0000000..9118e4f
--- /dev/null
+++ b/www/themes/jason-williamsca/assets/css/resume.css
@@ -0,0 +1,17 @@
+h1 {
+    font-family: var(--title-font);
+    font-size: 5rem;
+    font-weight: 500;
+    word-spacing: -0.8rem;
+}
+
+.altaccent {
+    color: var(--alt-accent-color);
+}
+
+/* lg Breakpoint */
+@media (min-width: 992px) {
+    section.resume-section {
+        min-height: 100vh;
+    }
+}
\ No newline at end of file
diff --git a/www/themes/jason-williamsca/assets/css/sidemenu.css b/www/themes/jason-williamsca/assets/css/sidemenu.css
new file mode 100644
index 0000000..a1be65a
--- /dev/null
+++ b/www/themes/jason-williamsca/assets/css/sidemenu.css
@@ -0,0 +1,60 @@
+/* lg Breakpoint */
+@media (min-width: 992px) {
+    body {
+        padding-left: 17rem;
+    }
+
+    #sideNav {
+        text-align: center;
+        position: fixed;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        width: 17rem;
+        height: 100vh;
+        padding: 0;
+        background-color: var(--main-accent-color);
+    }
+
+    #sideNav .navbar-brand {
+        display: flex;
+        margin: auto auto 0;
+        padding: 0.5rem;
+    }
+    
+    #sideNav .navbar-brand .img-profile {
+        max-width: 10rem;
+        max-height: 10rem;
+        border: 0.5rem solid rgba(255, 255, 255, 0.2);
+    }
+
+    #sideNav .navbar-collapse {
+        display: flex;
+        align-items: flex-start;
+        flex-grow: 0;
+        width: 100%;
+        margin-bottom: auto;
+    }
+
+    #sideNav .navbar-collapse .navbar-nav {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    #sideNav .navbar-collapse .navbar-nav .nav-item {
+        display: block;
+    }
+
+    #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
+        display: block;
+    }
+    /*section.resume-section {
+        max-width: 75rem;
+    }*/
+    
+    /* Possibly a different breakpoint on this one */
+    main {
+        margin-top: -121px;
+    }
+}
\ No newline at end of file
diff --git a/www/themes/jason-williamsca/assets/css/theme.css b/www/themes/jason-williamsca/assets/css/theme.css
index ec55023..c5db325 100644
--- a/www/themes/jason-williamsca/assets/css/theme.css
+++ b/www/themes/jason-williamsca/assets/css/theme.css
@@ -2,7 +2,7 @@
     --main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/
     --main-accent-color: #302b44;
     --light-accent-color: #686283;
-    --alt-accent-color: #B05C71; /*#990F3D;*/
+    --alt-accent-color: #B05C71;
     --dark-alt-accent-color: #913A50;
     --title-font: 'Cinzel', serif;
     --body-font: 'Raleway', sans-serif;
@@ -17,6 +17,14 @@ body {
     color: var(--main-accent-color);
 }
 
+header {
+    margin-bottom: 30px;                    /* Is there a better way to do this? */
+}
+
+header, header nav {
+    min-height: 91px;                        /* 75px for the logo, plus 16px padding */
+}
+
 #page-content {
     flex: 1 0 auto;
 }
@@ -50,7 +58,7 @@ h1, h2, h3, h4 {
     padding-right: 5%;
 }
 
-.navbar-brand {
+#mainNav .navbar-brand {
     height: 75px;
     padding-left: 100px;
     font-family: var(--title-font);
diff --git a/www/themes/jason-williamsca/layouts/default.htm b/www/themes/jason-williamsca/layouts/default.htm
index 1d10005..15cd656 100644
--- a/www/themes/jason-williamsca/layouts/default.htm
+++ b/www/themes/jason-williamsca/layouts/default.htm
@@ -14,6 +14,7 @@ description = "Default Layout"
 
         <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Raleway:wght@500;600&display=swap" rel="stylesheet">
         <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
+        {% styles %}
         <link rel="icon" type="image/png" sizes="32x32" href="{{ 'assets/images/favicon-32x32.png'|theme }}">
         <link rel="icon" type="image/png" sizes="16x16" href="{{ 'assets/images/favicon-16x16.png'|theme }}">
         <title>{{ this.page.title }} - Ja.son-Williams.ca</title>
@@ -21,7 +22,7 @@ description = "Default Layout"
     <body class="d-flex flex-column">
         <div id="page-content">
             <header>
-                <nav class="navbar navbar-expand-lg navbar-light">
+                <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
                     <a class="navbar-brand" href="/"><span class="d-none d-sm-inline-block">Jason Williams</span></a></a>
                     {% partial 'mainmenu' %}
                 </nav>
diff --git a/www/themes/jason-williamsca/layouts/sidesubmenu.htm b/www/themes/jason-williamsca/layouts/sidesubmenu.htm
new file mode 100644
index 0000000..0a8bf03
--- /dev/null
+++ b/www/themes/jason-williamsca/layouts/sidesubmenu.htm
@@ -0,0 +1,48 @@
+description = "Page with a Submenu"
+==
+<!doctype html>
+<html lang="en">
+    <head>
+        <!-- Required meta tags -->
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <!-- Bootstrap CSS -->
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+
+        <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Raleway:wght@500;600&display=swap" rel="stylesheet">
+        <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
+        <link href="{{ 'assets/css/sidemenu.css'|theme }}" rel="stylesheet">
+        {% styles %}
+        <link rel="icon" type="image/png" sizes="32x32" href="{{ 'assets/images/favicon-32x32.png'|theme }}">
+        <link rel="icon" type="image/png" sizes="16x16" href="{{ 'assets/images/favicon-16x16.png'|theme }}">
+        <title>{{ this.page.title }} - Ja.son-Williams.ca</title>
+    </head>
+    <body class="d-flex flex-column">
+        <div id="page-content">
+            <header>
+                <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
+                    <a class="navbar-brand d-inline-block d-lg-none" href="/"></a>
+                    {% partial 'mainmenu' %}
+                </nav>
+            </header>
+        
+            <nav class="navbar navbar-expand-lg navbar-dark" id="sideNav">
+                {% partial sideMenu %}
+            </nav>
+        
+            <main>
+                <div class="container-fluid">
+                    {% page %}
+                </div>
+            </main>
+        </div>
+
+        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+        <script src="https://kit.fontawesome.com/e0459f3cc9.js" crossorigin="anonymous"></script>
+        {% framework extras %}
+        {% scripts %}
+    </body>
+</html>
\ No newline at end of file
diff --git a/www/themes/jason-williamsca/pages/resume.htm b/www/themes/jason-williamsca/pages/resume.htm
index dac9d25..e44f09b 100644
--- a/www/themes/jason-williamsca/pages/resume.htm
+++ b/www/themes/jason-williamsca/pages/resume.htm
@@ -1,6 +1,228 @@
 title = "Résumé"
 url = "/resume"
-layout = "default"
+layout = "sidesubmenu"
 is_hidden = 0
 ==
-<p>Résumé</p>
\ No newline at end of file
+<?php
+function onStart()
+{
+    $this['sideMenu'] = 'resumemenu';
+    $this->addCss('assets/css/resume.css');
+}
+?>
+==
+<section class="resume-section p-lg-5 d-flex align-items-center" id="summary">
+      <div class="w-100">
+        <h1>Jason <span class="altaccent">Williams</span></h1>
+        <div class="subheading mb-5">4th Floor, 1207 11 Ave SW · Calgary, AB, T3C 0M5 · <a href="tel:+15872888242">(587) 288-8242</a> · <a href="/contact">&#106;&#64;&#115;&#111;&#110;&#45;&#119;&#105;&#108;&#108;&#105;&#97;&#109;&#115;&#46;&#99;&#97;</a>
+        </div>
+        
+        <p>I've built my career around my expertise in finding efficiencies and bringing the benefits of process improvement initiatives to a wise variety of business areas within the organizations I've worked with. My current role as a project manager expands upon my experience in end-to-end project leadership and oversight by affording me the opportunity to work on initiatives that include a more significant IT component than I had previously taken on.</p>
+
+        <p>During the earlier stages of my career my focus was on bringing the benefits of lean six-sigma based initiatives to the contact centre environment, but during my tenure with ATB Financial I've had an opportunity to broaden my scope of work. My current responsibilities allow me to affect improvement and innovation at an organizational level by championing, overseeing and leading projects that bring benefits to customers, staff and the organization alike.</p>
+
+        <p>Along the way I've developed an expertise in banking and personal finance and gained experience in recruitment, coaching and people development, process management, data visualization and even a little web development.</p>
+        
+        {% partial 'social' %}
+      </div>
+    </section>
+    
+    <section class="resume-section p-lg-5 d-flex justify-content-center" id="skills">
+        <h2>Skills &amp; Expertise</h2>
+    </section>
+
+    <!--<hr class="m-0">-->
+
+    <!--<section class="resume-section p-3 p-lg-5 d-flex justify-content-center" id="experience">
+      <div class="w-100">
+        <h2 class="mb-5">Experience</h2>
+
+        <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
+          <div class="resume-content">
+            <h3 class="mb-0">Senior Web Developer</h3>
+            <div class="subheading mb-3">Intelitec Solutions</div>
+            <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
+          </div>
+          <div class="resume-date text-md-right">
+            <span class="text-primary">March 2013 - Present</span>
+          </div>
+        </div>
+
+        <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
+          <div class="resume-content">
+            <h3 class="mb-0">Web Developer</h3>
+            <div class="subheading mb-3">Intelitec Solutions</div>
+            <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
+          </div>
+          <div class="resume-date text-md-right">
+            <span class="text-primary">December 2011 - March 2013</span>
+          </div>
+        </div>
+
+        <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
+          <div class="resume-content">
+            <h3 class="mb-0">Junior Web Designer</h3>
+            <div class="subheading mb-3">Shout! Media Productions</div>
+            <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
+          </div>
+          <div class="resume-date text-md-right">
+            <span class="text-primary">July 2010 - December 2011</span>
+          </div>
+        </div>
+
+        <div class="resume-item d-flex flex-column flex-md-row justify-content-between">
+          <div class="resume-content">
+            <h3 class="mb-0">Web Design Intern</h3>
+            <div class="subheading mb-3">Shout! Media Productions</div>
+            <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
+          </div>
+          <div class="resume-date text-md-right">
+            <span class="text-primary">September 2008 - June 2010</span>
+          </div>
+        </div>
+
+      </div>
+
+    </section>
+
+    <hr class="m-0">
+
+    <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="education">
+      <div class="w-100">
+        <h2 class="mb-5">Education</h2>
+
+        <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
+          <div class="resume-content">
+            <h3 class="mb-0">University of Colorado Boulder</h3>
+            <div class="subheading mb-3">Bachelor of Science</div>
+            <div>Computer Science - Web Development Track</div>
+            <p>GPA: 3.23</p>
+          </div>
+          <div class="resume-date text-md-right">
+            <span class="text-primary">August 2006 - May 2010</span>
+          </div>
+        </div>
+
+        <div class="resume-item d-flex flex-column flex-md-row justify-content-between">
+          <div class="resume-content">
+            <h3 class="mb-0">James Buchanan High School</h3>
+            <div class="subheading mb-3">Technology Magnet Program</div>
+            <p>GPA: 3.56</p>
+          </div>
+          <div class="resume-date text-md-right">
+            <span class="text-primary">August 2002 - May 2006</span>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <hr class="m-0">
+
+    <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="skills">
+      <div class="w-100">
+        <h2 class="mb-5">Skills</h2>
+
+        <div class="subheading mb-3">Programming Languages &amp; Tools</div>
+        <ul class="list-inline dev-icons">
+          <li class="list-inline-item">
+            <i class="fab fa-html5"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-css3-alt"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-js-square"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-angular"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-react"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-node-js"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-sass"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-less"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-wordpress"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-gulp"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-grunt"></i>
+          </li>
+          <li class="list-inline-item">
+            <i class="fab fa-npm"></i>
+          </li>
+        </ul>
+
+        <div class="subheading mb-3">Workflow</div>
+        <ul class="fa-ul mb-0">
+          <li>
+            <i class="fa-li fa fa-check"></i>
+            Mobile-First, Responsive Design</li>
+          <li>
+            <i class="fa-li fa fa-check"></i>
+            Cross Browser Testing &amp; Debugging</li>
+          <li>
+            <i class="fa-li fa fa-check"></i>
+            Cross Functional Teams</li>
+          <li>
+            <i class="fa-li fa fa-check"></i>
+            Agile Development &amp; Scrum</li>
+        </ul>
+      </div>
+    </section>
+
+    <hr class="m-0">
+
+    <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="interests">
+      <div class="w-100">
+        <h2 class="mb-5">Interests</h2>
+        <p>Apart from being a web developer, I enjoy most of my time being outdoors. In the winter, I am an avid skier and novice ice climber. During the warmer months here in Colorado, I enjoy mountain biking, free climbing, and kayaking.</p>
+        <p class="mb-0">When forced indoors, I follow a number of sci-fi and fantasy genre movies and television shows, I am an aspiring chef, and I spend a large amount of my free time exploring the latest technology advancements in the front-end web development world.</p>
+      </div>
+    </section>
+
+    <hr class="m-0">
+
+    <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="awards">
+      <div class="w-100">
+        <h2 class="mb-5">Awards &amp; Certifications</h2>
+        <ul class="fa-ul mb-0">
+          <li>
+            <i class="fa-li fa fa-trophy text-warning"></i>
+            Google Analytics Certified Developer</li>
+          <li>
+            <i class="fa-li fa fa-trophy text-warning"></i>
+            Mobile Web Specialist - Google Certification</li>
+          <li>
+            <i class="fa-li fa fa-trophy text-warning"></i>
+            1<sup>st</sup>
+            Place - University of Colorado Boulder - Emerging Tech Competition 2009</li>
+          <li>
+            <i class="fa-li fa fa-trophy text-warning"></i>
+            1<sup>st</sup>
+            Place - University of Colorado Boulder - Adobe Creative Jam 2008 (UI Design Category)</li>
+          <li>
+            <i class="fa-li fa fa-trophy text-warning"></i>
+            2<sup>nd</sup>
+            Place - University of Colorado Boulder - Emerging Tech Competition 2008</li>
+          <li>
+            <i class="fa-li fa fa-trophy text-warning"></i>
+            1<sup>st</sup>
+            Place - James Buchanan High School - Hackathon 2006</li>
+          <li>
+            <i class="fa-li fa fa-trophy text-warning"></i>
+            3<sup>rd</sup>
+            Place - James Buchanan High School - Hackathon 2005</li>
+        </ul>
+      </div>
+    </section>-->
\ No newline at end of file
diff --git a/www/themes/jason-williamsca/partials/mainmenu.htm b/www/themes/jason-williamsca/partials/mainmenu.htm
index 457dd17..d912583 100644
--- a/www/themes/jason-williamsca/partials/mainmenu.htm
+++ b/www/themes/jason-williamsca/partials/mainmenu.htm
@@ -8,12 +8,11 @@ function onStart()
 }
 ?>
 ==
-<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbars" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
 </button>
 
-
-<div class="collapse navbar-collapse" id="navbarResponsive">
+<div class="collapse navbar-collapse navbars" id="brrp">
     <ul class="navbar-nav ml-auto">
         <li class="nav-item {% if activeSection == '' %}active{% endif %}">
             <a class="nav-link" href="/">Home {% if activeSection == '' %}<span class="sr-only">(current)</span>{% endif %}</a>
@@ -21,24 +20,8 @@ function onStart()
         <li class="nav-item {% if activeSection == 'feed' %}active{% endif %}">
             <a class="nav-link" href="/feed">Feed {% if activeSection == 'feed' %}<span class="sr-only">(current)</span>{% endif %}</a>
         </li>
-        {% if activeSection != 'resume' %}
-            <li class="nav-item">
-                <a class="nav-link" href="/resume">Résumé</a>
-            </li>
-        {% else %}
-            <li class="nav-item active d-none d-lg-inline-block">
-                <a class="nav-link" href="/resume">Résumé</a>
-            </li>
-            <li class="nav-item dropdown active d-lg-none show">
-                <a class="nav-link dropdown-toggle" href="/resume" id="resumeDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Résumé</a>
-                <ul class="navbar-nav" aria-labelledby="resumeDropdown">
-                    <li class="nav-item"><a class="dropdown-item" href="#">Summary</a></li>
-                    <li class="nav-item"><a class="dropdown-item" href="#">Skills &amp; Expertise</a></li>
-                    <li class="nav-item"><a class="dropdown-item" href="#">Experience</a></li>
-                    <li class="nav-item"><a class="dropdown-item" href="#">Education</a></li>
-                    <li class="nav-item"><a class="dropdown-item" href="#">Certifications</a></li>
-                </ul>
-            </li>
-        {% endif %}
+        <li class="nav-item {% if activeSection == 'resume' %}active{% endif %}">
+            <a class="nav-link" href="/resume">Résumé</a>
+        </li>
     </ul>
 </div>
\ No newline at end of file
diff --git a/www/themes/jason-williamsca/partials/resumemenu.htm b/www/themes/jason-williamsca/partials/resumemenu.htm
new file mode 100644
index 0000000..9867d14
--- /dev/null
+++ b/www/themes/jason-williamsca/partials/resumemenu.htm
@@ -0,0 +1,30 @@
+description = "Side Menu for Resume"
+==
+<a class="navbar-brand js-scroll-trigger d-none d-lg-inline-block" href="#page-top">
+    <span>
+        <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="https://via.placeholder.com/500x500" alt="">
+    </span>
+</a>
+
+<div class="collapse navbar-collapse navbars">
+    <ul class="navbar-nav">
+        <li class="nav-item">
+            <a class="nav-link js-scroll-trigger" href="#summary">Summary</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link js-scroll-trigger" href="#skills">Skills &amp; Expertise</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link js-scroll-trigger" href="#education">Education</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link js-scroll-trigger" href="#certifications">Certifications</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link js-scroll-trigger" href="#awards">Awards</a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file