Adding initial draft of resume section. Created new layout for pages with a secondary menu.
This commit is contained in:
JayWll
parent
cc791c8e20
commit
dbcd235ef4
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,6 +1,228 @@
|
|||
title = "Résumé"
|
||||
url = "/resume"
|
||||
layout = "default"
|
||||
layout = "sidesubmenu"
|
||||
is_hidden = 0
|
||||
==
|
||||
<p>Résumé</p>
|
||||
<?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">j@son-williams.ca</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 & 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 & 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 & 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 & 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 & 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>-->
|
||||
|
|
@ -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 & 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>
|
||||
|
|
@ -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 & 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>
|
||||
Loading…
Reference in New Issue