Continuing work on Resume section

This commit is contained in:
JayWll 2020-05-20 13:53:39 -06:00
parent 02aceb106e
commit 3a8029345c
11 changed files with 196 additions and 245 deletions

View File

@ -1,12 +1,25 @@
h1 {
h1.master {
margin: 0;
font-family: var(--title-font);
font-size: 5rem;
font-weight: 500;
word-spacing: -0.8rem;
font-size: 3.5rem;
word-spacing: -0.15em;
}
.altaccent {
color: var(--alt-accent-color);
h2 {
font-size: 1.5rem;
}
h1 + h2 {
margin-top: 0;
}
.card {
/*width: 25rem;*/
margin-bottom: 1rem;
}
#card-gutter {
width: 0;
}
/* lg Breakpoint */

View File

@ -2,34 +2,39 @@
@media (min-width: 992px) {
body {
/*padding-left: 17rem;*/
padding-left: 25%;
}
#main-nav {
min-height: 8rem;
}
#sideNav {
#side-nav {
text-align: center;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
/*width: 17rem;*/
width: 25%;
height: 100vh;
padding: 0;
background-color: var(--main-accent-color);
}
#sideNav .navbar-brand {
#side-nav .navbar-brand {
display: flex;
margin: auto auto 0;
/*padding: 0.5rem;*/
}
#sideNav .navbar-brand .img-profile {
#side-nav .navbar-brand .img-profile {
max-width: 10rem;
max-height: 10rem;
border: 0.5rem solid rgba(255, 255, 255, 0.2);
/*border: 0.5rem solid rgba(255, 255, 255, 0.2);*/
}
#sideNav .navbar-collapse {
#side-nav .navbar-collapse {
display: flex;
align-items: flex-start;
flex-grow: 0;
@ -37,16 +42,16 @@
margin-bottom: auto;
}
#sideNav .navbar-collapse .navbar-nav {
#side-nav .navbar-collapse .navbar-nav {
flex-direction: column;
width: 100%;
}
#sideNav .navbar-collapse .navbar-nav .nav-item {
#side-nav .navbar-collapse .navbar-nav .nav-item {
display: block;
}
#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
#side-nav .navbar-collapse .navbar-nav .nav-item .nav-link {
display: block;
}
/*section.resume-section {
@ -55,6 +60,6 @@
/* Possibly a different breakpoint on this one */
main {
margin-top: -121px;
margin-top: -8rem;
}
}

View File

@ -9,13 +9,12 @@
--body-font: 'Raleway', sans-serif;
}
/* Structural elements */
/* Structural elements (including style for them) */
html, body { height: 100%; }
body {
background-color: var(--main-bg-color);
font-family: var(--body-font);
font-weight: 500;
color: var(--main-accent-color);
}
@ -32,6 +31,7 @@ body {
background-repeat: no-repeat;
background-size: 4.5rem;
color: var(--main-accent-color);
word-spacing: -0.15em;
}
footer {
@ -61,11 +61,11 @@ footer ul {
}
footer, h1, h2 {
margin-top: 1rem;
margin-top: 2rem;
}
footer {
margin-top: 1rem;
margin-top: 2rem;
}
/* Responsive element spacing - lg breakpoint */
@ -96,6 +96,35 @@ a:hover {
}
/* Custom styles */
html { overflow-y: scroll; }
html::-webkit-scrollbar-track {
background-color: rgba(48, 43, 68, 0.2);
}
html::-webkit-scrollbar {
width: 0.5rem;
background-color: rgba(48, 43, 68, 0.2);
}
html::-webkit-scrollbar-thumb {
border-radius: 0.5rem;
background-color: rgba(48, 43, 68, 0.5);
}
#main-nav .nav-item .nav-link {
color: rgba(48, 43, 68, 0.5);
text-decoration: none;
}
#main-nav .nav-item.active .nav-link {
color: var(--main-accent-color);
}
#main-nav .nav-item .nav-link:hover {
color: var(--alt-accent-color);
}
.social-icons {
font-size: 0;
}
@ -118,15 +147,14 @@ a:hover {
color: white;
}
#main-nav .nav-item .nav-link {
color: rgba(48, 43, 68, 0.5);
text-decoration: none;
.card h1, .card h2, .card h3 {
margin-top: 0;
}
#main-nav .nav-item.active .nav-link {
color: var(--main-accent-color);
.card p {
font-size: 0.9rem;
}
#main-nav .nav-item .nav-link:hover {
.altaccent {
color: var(--alt-accent-color);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@ -0,0 +1,32 @@
(function($) {
"use strict"; // Start of use strict
// Apply masonry layout to cards
$('.masonry').masonry({
itemSelector: '.masonry-wrapper'
});
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#side-nav'
});
})(jQuery); // End of use strict

View File

@ -23,7 +23,7 @@ description = "Default Layout"
<div id="page-content">
<header>
<nav class="navbar navbar-expand-lg navbar-light" id="main-nav">
<a class="navbar-brand" href="/"><span class="d-none d-sm-inline-block">Jason Williams</span></a></a>
<a class="navbar-brand" href="/"><span class="d-none d-sm-inline-block">Jason <span class="altaccent">Williams</span></span></a></a>
{% partial 'mainmenu' %}
</nav>
</header>

View File

@ -21,13 +21,13 @@ description = "Page with a Submenu"
<body class="d-flex flex-column">
<div id="page-content">
<header>
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<nav class="navbar navbar-expand-lg navbar-light" id="main-nav">
<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">
<nav class="navbar navbar-expand-lg navbar-dark" id="side-nav">
{% partial sideMenu %}
</nav>

View File

@ -14,6 +14,7 @@ mail_enabled = 1
mail_subject = "Contact Me"
mail_recipients[] = "j@son-williams.ca"
mail_replyto = "email"
reset_form = 1
inline_errors = "disabled"
sanitize_data = "disabled"
anonymize_ip = "disabled"

View File

@ -8,221 +8,94 @@ function onStart()
{
$this['sideMenu'] = 'resumemenu';
$this->addCss('assets/css/resume.css');
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js');
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js');
$this->addJs('assets/javascript/resume.js');
}
?>
==
<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>
<a id="page-top"></a>
<section class="resume-section d-flex align-items-center" id="summary">
<div class="w-100">
<h1 class="master">Jason <span class="altaccent">Williams</span></h1>
<div class="subheading mt-n1 mb-5">4<sup>th</sup> 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>
<p class="main">I've built my career on the notion that <em>how</em> work gets done is as impactful to results as <em>what</em> that work is. Most recently I've been leading intelligent process automation work: I build robots for a living. <i class="fas fa-robot"></i></p>
{% partial 'social' %}
</div>
</section>
<p class="mb-5">Along the way I've developed an expertise in product management, lean six sigma, design thinking, agile software development, process management and gained experience in recruitment, coaching and people development, data visualization and even a little web development.</p>
{% partial 'social' noinfrequent = true nocode = true %}
</div>
</section>
<section class="resume-section p-lg-5 d-flex justify-content-center" id="skills">
<h2>Skills &amp; Expertise</h2>
</section>
<section class="resume-section d-flex align-items-center" id="skills">
<div class="w-100">
<h1>Skills &amp; Expertise</h1>
<div class="masonry">
<div class="masonry-wrapper col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Product Management</h2>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="masonry-wrapper col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Project Management</h2>
<p class="card-text">Business case development; Stakeholder identification and management; Quality metric definition and control; Work breakdown and scheduling; Budgeting (including estimation, budget management and reporting); Project charter development; Change management; Risk management; Communication planning; Transition out planning</p>
</div>
</div>
</div>
<!--<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="masonry-wrapper col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Lean Six-Sigma</h2>
<p class="card-text">6σ project management (DMAIC and DMADV); Value-add analysis and waste (muda) reduction; Value stream mapping; Kaizen facilitation</p>
</div>
</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">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 class="masonry-wrapper col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Business Analysis</h2>
<p class="card-text">Opportunity evaluation; Business case development; Requirement elicitation and documentation; Process and workflow modelling; Risk assessment, tracking and management; Solution analysis; Solution validation and assessment</p>
</div>
</div>
</div>
<div class="masonry-wrapper col-4">
<div class="card">
<div class="card-body">
<h2 class="card-title">Business Technology</h2>
<p class="card-text">Microsoft Office suite, including Visio, Project; VBA scripting and development; Microsoft SharePoint; Custom SharePoint application development (including SharePoint workflow scripting, HTML, javascript); SAP (including CRM and transactional banking modules, SAP personas for user interface development); MiniTab (6σ statistical analysis tool); ARIS (business process modelling and management tool)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
<section class="resume-section d-flex align-items-center" id="experience">
<h1>Experience</h1>
</section>
<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>
<section class="resume-section d-flex align-items-center" id="education">
<h1>Education</h1>
</section>
<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>
<section class="resume-section d-flex align-items-center" id="certifications">
<h1>Certifications</h1>
</section>
</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>-->
<section class="resume-section d-flex align-items-center" id="awards">
<h1>Awards</h1>
</section>

View File

@ -2,7 +2,7 @@ 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="">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="{{ 'assets/images/resume-photo.png'|theme }}" alt="">
</span>
</a>

View File

@ -18,25 +18,24 @@ function onStart()
<a href="https://www.instagram.com/jaywll/" data-toggle="tooltip" title="Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.facebook.com/jaywll/" data-toggle="tooltip" title="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://jaywll.wordpress.com/category/blog/" data-toggle="tooltip" title="Wordpress">
<i class="fab fa-wordpress-simple"></i>
</a>
<a href="https://foursquare.com/jaywll" data-toggle="tooltip" title="Foursquare">
<i class="fab fa-foursquare"></i>
</a>
{% if not noinfrequent %}
<a href="https://www.facebook.com/jaywll/" data-toggle="tooltip" title="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://foursquare.com/jaywll" data-toggle="tooltip" title="Foursquare">
<i class="fab fa-foursquare"></i>
</a>
{% endif %}
{% endif %}
{% if not nocode %}
<a href="https://glitch.com/@JayWll" data-toggle="tooltip" title="Glitch">
<i class="fab fa-node-js"></i>
</a>
<a href="https://github.com/JayWll" data-toggle="tooltip" title="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="https://gitlab.com/jaywll" data-toggle="tooltip" title="GitLab">
<i class="fab fa-gitlab"></i>
<a href="https://code.jnf.me/explore/repos" data-toggle="tooltip" title="Code Repository">
<i class="fab fa-git-alt"></i>
</a>
{% endif %}
{% if not nocontact %}