From 3213a5e69b4a11a4f28815b592165ea91382e127 Mon Sep 17 00:00:00 2001 From: David Miller Date: Wed, 20 May 2020 15:26:24 -0400 Subject: [PATCH] v6 refactor with updated depednencies, Bootstrap 4.5, and more intuitive markup along with node scripts replacing gulp --- dist/css/styles.css | 570 +++++++++++++------------ dist/index.html | 112 +++-- dist/js/scripts.js | 57 +-- package-lock.json | 118 ++--- package.json | 16 +- src/js/scripts.js | 57 +-- src/pug/index.pug | 113 ++--- src/scss/_bootstrap-overrides.scss | 16 - src/scss/_global.scss | 71 +-- src/scss/_mixins.scss | 8 - src/scss/_nav.scss | 57 --- src/scss/_resume-item.scss | 27 -- src/scss/_variables.scss | 43 +- src/scss/components/_icons.scss | 27 ++ src/scss/components/_sidenav.scss | 57 +++ src/scss/sections/_resume-section.scss | 25 ++ src/scss/styles.scss | 16 +- src/scss/variables/_colors.scss | 15 + src/scss/variables/_grid.scss | 5 + src/scss/variables/_spacing.scss | 15 + src/scss/variables/_typography.scss | 17 + 21 files changed, 747 insertions(+), 695 deletions(-) delete mode 100644 src/scss/_bootstrap-overrides.scss delete mode 100644 src/scss/_mixins.scss delete mode 100644 src/scss/_nav.scss delete mode 100644 src/scss/_resume-item.scss create mode 100644 src/scss/components/_icons.scss create mode 100644 src/scss/components/_sidenav.scss create mode 100644 src/scss/sections/_resume-section.scss create mode 100644 src/scss/variables/_colors.scss create mode 100644 src/scss/variables/_grid.scss create mode 100644 src/scss/variables/_spacing.scss create mode 100644 src/scss/variables/_typography.scss diff --git a/dist/css/styles.css b/dist/css/styles.css index 27e6a86..6024351 100644 --- a/dist/css/styles.css +++ b/dist/css/styles.css @@ -5,9 +5,9 @@ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE) */ /*! - * Bootstrap v4.4.1 (https://getbootstrap.com/) - * Copyright 2011-2019 The Bootstrap Authors - * Copyright 2011-2019 Twitter, Inc. + * Bootstrap v4.5.0 (https://getbootstrap.com/) + * Copyright 2011-2020 The Bootstrap Authors + * Copyright 2011-2020 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ :root { @@ -16,16 +16,16 @@ --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; - --orange: #BD5D38; + --orange: #bd5d38; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; - --gray: #868e96; + --gray: #6c757d; --gray-dark: #343a40; - --primary: #BD5D38; - --secondary: #868e96; + --primary: #bd5d38; + --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; @@ -60,7 +60,7 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -159,7 +159,7 @@ sup { } a { - color: #BD5D38; + color: #bd5d38; text-decoration: none; background-color: transparent; } @@ -189,6 +189,7 @@ pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; + -ms-overflow-style: scrollbar; } figure { @@ -212,7 +213,7 @@ table { caption { padding-top: 0.75rem; padding-bottom: 0.75rem; - color: #868e96; + color: #6c757d; text-align: left; caption-side: bottom; } @@ -256,6 +257,10 @@ select { text-transform: none; } +[role=button] { + cursor: pointer; +} + select { word-wrap: normal; } @@ -288,13 +293,6 @@ input[type=checkbox] { padding: 0; } -input[type=date], -input[type=time], -input[type=datetime-local], -input[type=month] { - -webkit-appearance: listbox; -} - textarea { overflow: auto; resize: vertical; @@ -362,20 +360,22 @@ template { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0.5rem; - font-weight: 500; + font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-weight: 700; line-height: 1.2; + color: #343a40; } h1, .h1 { - font-size: 2.5rem; + font-size: 6rem; } h2, .h2 { - font-size: 2rem; + font-size: 3.5rem; } h3, .h3 { - font-size: 1.75rem; + font-size: 2rem; } h4, .h4 { @@ -468,7 +468,7 @@ mark, .blockquote-footer { display: block; font-size: 80%; - color: #868e96; + color: #6c757d; } .blockquote-footer::before { content: "— "; @@ -499,7 +499,7 @@ mark, .figure-caption { font-size: 90%; - color: #868e96; + color: #6c757d; } code { @@ -542,8 +542,8 @@ pre code { .container { width: 100%; - padding-right: 15px; - padding-left: 15px; + padding-right: 0.75rem; + padding-left: 0.75rem; margin-right: auto; margin-left: auto; } @@ -570,8 +570,8 @@ pre code { .container-fluid, .container-xl, .container-lg, .container-md, .container-sm { width: 100%; - padding-right: 15px; - padding-left: 15px; + padding-right: 0.75rem; + padding-left: 0.75rem; margin-right: auto; margin-left: auto; } @@ -599,8 +599,8 @@ pre code { .row { display: flex; flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px; + margin-right: -0.75rem; + margin-left: -0.75rem; } .no-gutters { @@ -621,13 +621,14 @@ pre code { .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { position: relative; width: 100%; - padding-right: 15px; - padding-left: 15px; + padding-right: 0.75rem; + padding-left: 0.75rem; } .col { flex-basis: 0; flex-grow: 1; + min-width: 0; max-width: 100%; } @@ -835,6 +836,7 @@ pre code { .col-sm { flex-basis: 0; flex-grow: 1; + min-width: 0; max-width: 100%; } @@ -1046,6 +1048,7 @@ pre code { .col-md { flex-basis: 0; flex-grow: 1; + min-width: 0; max-width: 100%; } @@ -1257,6 +1260,7 @@ pre code { .col-lg { flex-basis: 0; flex-grow: 1; + min-width: 0; max-width: 100%; } @@ -1468,6 +1472,7 @@ pre code { .col-xl { flex-basis: 0; flex-grow: 1; + min-width: 0; max-width: 100%; } @@ -1750,21 +1755,21 @@ pre code { .table-secondary, .table-secondary > th, .table-secondary > td { - background-color: #dddfe2; + background-color: #d6d8db; } .table-secondary th, .table-secondary td, .table-secondary thead th, .table-secondary tbody + tbody { - border-color: #c0c4c8; + border-color: #b3b7bb; } .table-hover .table-secondary:hover { - background-color: #cfd2d6; + background-color: #c8cbcf; } .table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { - background-color: #cfd2d6; + background-color: #c8cbcf; } .table-success, @@ -2022,23 +2027,23 @@ pre code { box-shadow: 0 0 0 0.2rem rgba(189, 93, 56, 0.25); } .form-control::-webkit-input-placeholder { - color: #868e96; + color: #6c757d; opacity: 1; } .form-control::-moz-placeholder { - color: #868e96; + color: #6c757d; opacity: 1; } .form-control:-ms-input-placeholder { - color: #868e96; + color: #6c757d; opacity: 1; } .form-control::-ms-input-placeholder { - color: #868e96; + color: #6c757d; opacity: 1; } .form-control::placeholder { - color: #868e96; + color: #6c757d; opacity: 1; } .form-control:disabled, .form-control[readonly] { @@ -2046,6 +2051,15 @@ pre code { opacity: 1; } +input[type=date].form-control, +input[type=time].form-control, +input[type=datetime-local].form-control, +input[type=month].form-control { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + select.form-control:focus::-ms-value { color: #495057; background-color: #fff; @@ -2153,7 +2167,7 @@ textarea.form-control { margin-left: -1.25rem; } .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { - color: #868e96; + color: #6c757d; } .form-check-label { @@ -2420,7 +2434,6 @@ textarea.form-control { color: #212529; text-align: center; vertical-align: middle; - cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -2449,6 +2462,9 @@ textarea.form-control { .btn.disabled, .btn:disabled { opacity: 0.65; } +.btn:not(:disabled):not(.disabled) { + cursor: pointer; +} a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; @@ -2456,8 +2472,8 @@ fieldset:disabled a.btn { .btn-primary { color: #fff; - background-color: #BD5D38; - border-color: #BD5D38; + background-color: #bd5d38; + border-color: #bd5d38; } .btn-primary:hover { color: #fff; @@ -2472,8 +2488,8 @@ fieldset:disabled a.btn { } .btn-primary.disabled, .btn-primary:disabled { color: #fff; - background-color: #BD5D38; - border-color: #BD5D38; + background-color: #bd5d38; + border-color: #bd5d38; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff; @@ -2486,32 +2502,32 @@ fieldset:disabled a.btn { .btn-secondary { color: #fff; - background-color: #868e96; - border-color: #868e96; + background-color: #6c757d; + border-color: #6c757d; } .btn-secondary:hover { color: #fff; - background-color: #727b84; - border-color: #6c757d; + background-color: #5a6268; + border-color: #545b62; } .btn-secondary:focus, .btn-secondary.focus { color: #fff; - background-color: #727b84; - border-color: #6c757d; - box-shadow: 0 0 0 0.2rem rgba(152, 159, 166, 0.5); + background-color: #5a6268; + border-color: #545b62; + box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { color: #fff; - background-color: #868e96; - border-color: #868e96; + background-color: #6c757d; + border-color: #6c757d; } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { color: #fff; - background-color: #6c757d; - border-color: #666e76; + background-color: #545b62; + border-color: #4e555b; } .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(152, 159, 166, 0.5); + box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } .btn-success { @@ -2575,33 +2591,33 @@ fieldset:disabled a.btn { } .btn-warning { - color: #212529; + color: #fff; background-color: #ffc107; border-color: #ffc107; } .btn-warning:hover { - color: #212529; + color: #fff; background-color: #e0a800; border-color: #d39e00; } .btn-warning:focus, .btn-warning.focus { - color: #212529; + color: #fff; background-color: #e0a800; border-color: #d39e00; - box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); + box-shadow: 0 0 0 0.2rem rgba(255, 202, 44, 0.5); } .btn-warning.disabled, .btn-warning:disabled { - color: #212529; + color: #fff; background-color: #ffc107; border-color: #ffc107; } .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { - color: #212529; + color: #fff; background-color: #d39e00; border-color: #c69500; } .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); + box-shadow: 0 0 0 0.2rem rgba(255, 202, 44, 0.5); } .btn-danger { @@ -2695,53 +2711,53 @@ fieldset:disabled a.btn { } .btn-outline-primary { - color: #BD5D38; - border-color: #BD5D38; + color: #bd5d38; + border-color: #bd5d38; } .btn-outline-primary:hover { color: #fff; - background-color: #BD5D38; - border-color: #BD5D38; + background-color: #bd5d38; + border-color: #bd5d38; } .btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(189, 93, 56, 0.5); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { - color: #BD5D38; + color: #bd5d38; background-color: transparent; } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #fff; - background-color: #BD5D38; - border-color: #BD5D38; + background-color: #bd5d38; + border-color: #bd5d38; } .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(189, 93, 56, 0.5); } .btn-outline-secondary { - color: #868e96; - border-color: #868e96; + color: #6c757d; + border-color: #6c757d; } .btn-outline-secondary:hover { color: #fff; - background-color: #868e96; - border-color: #868e96; + background-color: #6c757d; + border-color: #6c757d; } .btn-outline-secondary:focus, .btn-outline-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(134, 142, 150, 0.5); + box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { - color: #868e96; + color: #6c757d; background-color: transparent; } .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { color: #fff; - background-color: #868e96; - border-color: #868e96; + background-color: #6c757d; + border-color: #6c757d; } .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(134, 142, 150, 0.5); + box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } .btn-outline-success { @@ -2799,7 +2815,7 @@ fieldset:disabled a.btn { border-color: #ffc107; } .btn-outline-warning:hover { - color: #212529; + color: #fff; background-color: #ffc107; border-color: #ffc107; } @@ -2811,7 +2827,7 @@ fieldset:disabled a.btn { background-color: transparent; } .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { - color: #212529; + color: #fff; background-color: #ffc107; border-color: #ffc107; } @@ -2896,7 +2912,7 @@ fieldset:disabled a.btn { .btn-link { font-weight: 400; - color: #BD5D38; + color: #bd5d38; text-decoration: none; } .btn-link:hover { @@ -2905,10 +2921,9 @@ fieldset:disabled a.btn { } .btn-link:focus, .btn-link.focus { text-decoration: underline; - box-shadow: none; } .btn-link:disabled, .btn-link.disabled { - color: #868e96; + color: #6c757d; pointer-events: none; } @@ -3174,10 +3189,10 @@ input[type=button].btn-block { .dropdown-item.active, .dropdown-item:active { color: #fff; text-decoration: none; - background-color: #BD5D38; + background-color: #bd5d38; } .dropdown-item.disabled, .dropdown-item:disabled { - color: #868e96; + color: #6c757d; pointer-events: none; background-color: transparent; } @@ -3191,7 +3206,7 @@ input[type=button].btn-block { padding: 0.5rem 1.5rem; margin-bottom: 0; font-size: 0.875rem; - color: #868e96; + color: #6c757d; white-space: nowrap; } @@ -3317,7 +3332,8 @@ input[type=button].btn-block { .input-group > .custom-select, .input-group > .custom-file { position: relative; - flex: 1 1 0%; + flex: 1 1 auto; + width: 1%; min-width: 0; margin-bottom: 0; } @@ -3499,8 +3515,8 @@ input[type=button].btn-block { } .custom-control-input:checked ~ .custom-control-label::before { color: #fff; - border-color: #BD5D38; - background-color: #BD5D38; + border-color: #bd5d38; + background-color: #bd5d38; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(189, 93, 56, 0.25); @@ -3514,7 +3530,7 @@ input[type=button].btn-block { border-color: #ebc9bc; } .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label { - color: #868e96; + color: #6c757d; } .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before { background-color: #e9ecef; @@ -3555,8 +3571,8 @@ input[type=button].btn-block { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { - border-color: #BD5D38; - background-color: #BD5D38; + border-color: #bd5d38; + background-color: #bd5d38; } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); @@ -3641,7 +3657,7 @@ input[type=button].btn-block { background-image: none; } .custom-select:disabled { - color: #868e96; + color: #6c757d; background-color: #e9ecef; } .custom-select::-ms-expand { @@ -3758,7 +3774,7 @@ input[type=button].btn-block { width: 1rem; height: 1rem; margin-top: -0.25rem; - background-color: #BD5D38; + background-color: #bd5d38; border: 0; border-radius: 1rem; -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -3787,7 +3803,7 @@ input[type=button].btn-block { .custom-range::-moz-range-thumb { width: 1rem; height: 1rem; - background-color: #BD5D38; + background-color: #bd5d38; border: 0; border-radius: 1rem; -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -3819,7 +3835,7 @@ input[type=button].btn-block { margin-top: 0; margin-right: 0.2rem; margin-left: 0.2rem; - background-color: #BD5D38; + background-color: #bd5d38; border: 0; border-radius: 1rem; -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -3898,7 +3914,7 @@ input[type=button].btn-block { text-decoration: none; } .nav-link.disabled { - color: #868e96; + color: #6c757d; pointer-events: none; cursor: default; } @@ -3918,7 +3934,7 @@ input[type=button].btn-block { border-color: #e9ecef #e9ecef #dee2e6; } .nav-tabs .nav-link.disabled { - color: #868e96; + color: #6c757d; background-color: transparent; border-color: transparent; } @@ -3940,7 +3956,7 @@ input[type=button].btn-block { .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; - background-color: #BD5D38; + background-color: #bd5d38; } .nav-fill .nav-item { @@ -4276,7 +4292,7 @@ input[type=button].btn-block { border-color: rgba(0, 0, 0, 0.1); } .navbar-light .navbar-toggler-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-light .navbar-text { color: rgba(0, 0, 0, 0.5); @@ -4314,7 +4330,7 @@ input[type=button].btn-block { border-color: rgba(255, 255, 255, 0.1); } .navbar-dark .navbar-toggler-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.5); @@ -4341,13 +4357,19 @@ input[type=button].btn-block { margin-right: 0; margin-left: 0; } -.card > .list-group:first-child .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; +.card > .list-group { + border-top: inherit; + border-bottom: inherit; } -.card > .list-group:last-child .list-group-item:last-child { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; +.card > .list-group:first-child { + border-top-width: 0; + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.card > .list-group:last-child { + border-bottom-width: 0; + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); } .card-body { @@ -4439,25 +4461,25 @@ input[type=button].btn-block { } .card-deck .card { - margin-bottom: 15px; + margin-bottom: 0.75rem; } @media (min-width: 576px) { .card-deck { display: flex; flex-flow: row wrap; - margin-right: -15px; - margin-left: -15px; + margin-right: -0.75rem; + margin-left: -0.75rem; } .card-deck .card { flex: 1 0 0%; - margin-right: 15px; + margin-right: 0.75rem; margin-bottom: 0; - margin-left: 15px; + margin-left: 0.75rem; } } .card-group > .card { - margin-bottom: 15px; + margin-bottom: 0.75rem; } @media (min-width: 576px) { .card-group { @@ -4543,13 +4565,16 @@ input[type=button].btn-block { border-radius: 0.25rem; } +.breadcrumb-item { + display: flex; +} .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; - color: #868e96; + color: #6c757d; content: "/"; } .breadcrumb-item + .breadcrumb-item:hover::before { @@ -4559,7 +4584,7 @@ input[type=button].btn-block { text-decoration: none; } .breadcrumb-item.active { - color: #868e96; + color: #6c757d; } .pagination { @@ -4575,7 +4600,7 @@ input[type=button].btn-block { padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; - color: #BD5D38; + color: #bd5d38; background-color: #fff; border: 1px solid #dee2e6; } @@ -4604,11 +4629,11 @@ input[type=button].btn-block { .page-item.active .page-link { z-index: 3; color: #fff; - background-color: #BD5D38; - border-color: #BD5D38; + background-color: #bd5d38; + border-color: #bd5d38; } .page-item.disabled .page-link { - color: #868e96; + color: #6c757d; pointer-events: none; cursor: auto; background-color: #fff; @@ -4681,7 +4706,7 @@ a.badge:hover, a.badge:focus { .badge-primary { color: #fff; - background-color: #BD5D38; + background-color: #bd5d38; } a.badge-primary:hover, a.badge-primary:focus { color: #fff; @@ -4694,15 +4719,15 @@ a.badge-primary:focus, a.badge-primary.focus { .badge-secondary { color: #fff; - background-color: #868e96; + background-color: #6c757d; } a.badge-secondary:hover, a.badge-secondary:focus { color: #fff; - background-color: #6c757d; + background-color: #545b62; } a.badge-secondary:focus, a.badge-secondary.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(134, 142, 150, 0.5); + box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } .badge-success { @@ -4732,11 +4757,11 @@ a.badge-info:focus, a.badge-info.focus { } .badge-warning { - color: #212529; + color: #fff; background-color: #ffc107; } a.badge-warning:hover, a.badge-warning:focus { - color: #212529; + color: #fff; background-color: #d39e00; } a.badge-warning:focus, a.badge-warning.focus { @@ -4841,15 +4866,15 @@ a.badge-dark:focus, a.badge-dark.focus { } .alert-secondary { - color: #464a4e; - background-color: #e7e8ea; - border-color: #dddfe2; + color: #383d41; + background-color: #e2e3e5; + border-color: #d6d8db; } .alert-secondary hr { - border-top-color: #cfd2d6; + border-top-color: #c8cbcf; } .alert-secondary .alert-link { - color: #2e3133; + color: #202326; } .alert-success { @@ -4945,6 +4970,7 @@ a.badge-dark:focus, a.badge-dark.focus { display: flex; height: 1rem; overflow: hidden; + line-height: 0; font-size: 0.75rem; background-color: #e9ecef; border-radius: 0.25rem; @@ -4958,7 +4984,7 @@ a.badge-dark:focus, a.badge-dark.focus { color: #fff; text-align: center; white-space: nowrap; - background-color: #BD5D38; + background-color: #bd5d38; transition: width 0.6s ease; } @media (prefers-reduced-motion: reduce) { @@ -4997,6 +5023,7 @@ a.badge-dark:focus, a.badge-dark.focus { flex-direction: column; padding-left: 0; margin-bottom: 0; + border-radius: 0.25rem; } .list-group-item-action { @@ -5023,23 +5050,23 @@ a.badge-dark:focus, a.badge-dark.focus { border: 1px solid rgba(0, 0, 0, 0.125); } .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-top-left-radius: inherit; + border-top-right-radius: inherit; } .list-group-item:last-child { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; } .list-group-item.disabled, .list-group-item:disabled { - color: #868e96; + color: #6c757d; pointer-events: none; background-color: #fff; } .list-group-item.active { z-index: 2; color: #fff; - background-color: #BD5D38; - border-color: #BD5D38; + background-color: #bd5d38; + border-color: #bd5d38; } .list-group-item + .list-group-item { border-top-width: 0; @@ -5052,22 +5079,22 @@ a.badge-dark:focus, a.badge-dark.focus { .list-group-horizontal { flex-direction: row; } -.list-group-horizontal .list-group-item:first-child { +.list-group-horizontal > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } -.list-group-horizontal .list-group-item:last-child { +.list-group-horizontal > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } -.list-group-horizontal .list-group-item.active { +.list-group-horizontal > .list-group-item.active { margin-top: 0; } -.list-group-horizontal .list-group-item + .list-group-item { +.list-group-horizontal > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } -.list-group-horizontal .list-group-item + .list-group-item.active { +.list-group-horizontal > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } @@ -5076,22 +5103,22 @@ a.badge-dark:focus, a.badge-dark.focus { .list-group-horizontal-sm { flex-direction: row; } - .list-group-horizontal-sm .list-group-item:first-child { + .list-group-horizontal-sm > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal-sm .list-group-item:last-child { + .list-group-horizontal-sm > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal-sm .list-group-item.active { + .list-group-horizontal-sm > .list-group-item.active { margin-top: 0; } - .list-group-horizontal-sm .list-group-item + .list-group-item { + .list-group-horizontal-sm > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal-sm .list-group-item + .list-group-item.active { + .list-group-horizontal-sm > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } @@ -5100,22 +5127,22 @@ a.badge-dark:focus, a.badge-dark.focus { .list-group-horizontal-md { flex-direction: row; } - .list-group-horizontal-md .list-group-item:first-child { + .list-group-horizontal-md > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal-md .list-group-item:last-child { + .list-group-horizontal-md > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal-md .list-group-item.active { + .list-group-horizontal-md > .list-group-item.active { margin-top: 0; } - .list-group-horizontal-md .list-group-item + .list-group-item { + .list-group-horizontal-md > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal-md .list-group-item + .list-group-item.active { + .list-group-horizontal-md > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } @@ -5124,22 +5151,22 @@ a.badge-dark:focus, a.badge-dark.focus { .list-group-horizontal-lg { flex-direction: row; } - .list-group-horizontal-lg .list-group-item:first-child { + .list-group-horizontal-lg > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal-lg .list-group-item:last-child { + .list-group-horizontal-lg > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal-lg .list-group-item.active { + .list-group-horizontal-lg > .list-group-item.active { margin-top: 0; } - .list-group-horizontal-lg .list-group-item + .list-group-item { + .list-group-horizontal-lg > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal-lg .list-group-item + .list-group-item.active { + .list-group-horizontal-lg > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } @@ -5148,35 +5175,33 @@ a.badge-dark:focus, a.badge-dark.focus { .list-group-horizontal-xl { flex-direction: row; } - .list-group-horizontal-xl .list-group-item:first-child { + .list-group-horizontal-xl > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal-xl .list-group-item:last-child { + .list-group-horizontal-xl > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal-xl .list-group-item.active { + .list-group-horizontal-xl > .list-group-item.active { margin-top: 0; } - .list-group-horizontal-xl .list-group-item + .list-group-item { + .list-group-horizontal-xl > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal-xl .list-group-item + .list-group-item.active { + .list-group-horizontal-xl > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; } } -.list-group-flush .list-group-item { - border-right-width: 0; - border-left-width: 0; +.list-group-flush { border-radius: 0; } -.list-group-flush .list-group-item:first-child { - border-top-width: 0; +.list-group-flush > .list-group-item { + border-width: 0 0 1px; } -.list-group-flush:last-child .list-group-item:last-child { +.list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } @@ -5195,17 +5220,17 @@ a.badge-dark:focus, a.badge-dark.focus { } .list-group-item-secondary { - color: #464a4e; - background-color: #dddfe2; + color: #383d41; + background-color: #d6d8db; } .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { - color: #464a4e; - background-color: #cfd2d6; + color: #383d41; + background-color: #c8cbcf; } .list-group-item-secondary.list-group-item-action.active { color: #fff; - background-color: #464a4e; - border-color: #464a4e; + background-color: #383d41; + border-color: #383d41; } .list-group-item-success { @@ -5313,9 +5338,6 @@ button.close { padding: 0; background-color: transparent; border: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } a.close.disabled { @@ -5353,7 +5375,7 @@ a.close.disabled { display: flex; align-items: center; padding: 0.25rem 0.75rem; - color: #868e96; + color: #6c757d; background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, 0.05); @@ -5429,6 +5451,9 @@ a.close.disabled { .modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); + height: -webkit-min-content; + height: -moz-min-content; + height: min-content; content: ""; } .modal-dialog-centered.modal-dialog-scrollable { @@ -5537,6 +5562,9 @@ a.close.disabled { } .modal-dialog-centered::before { height: calc(100vh - 3.5rem); + height: -webkit-min-content; + height: -moz-min-content; + height: min-content; } .modal-sm { @@ -5559,7 +5587,7 @@ a.close.disabled { z-index: 1070; display: block; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-style: normal; font-weight: 400; line-height: 1.5; @@ -5661,7 +5689,7 @@ a.close.disabled { z-index: 1060; display: block; max-width: 276px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-style: normal; font-weight: 400; line-height: 1.5; @@ -5785,6 +5813,7 @@ a.close.disabled { padding: 0.5rem 0.75rem; margin-bottom: 0; font-size: 1rem; + color: #343a40; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-top-left-radius: calc(0.3rem - 1px); @@ -6013,6 +6042,7 @@ a.close.disabled { } 50% { opacity: 1; + transform: none; } } @@ -6022,6 +6052,7 @@ a.close.disabled { } 50% { opacity: 1; + transform: none; } } .spinner-grow { @@ -6066,7 +6097,7 @@ a.close.disabled { } .bg-primary { - background-color: #BD5D38 !important; + background-color: #bd5d38 !important; } a.bg-primary:hover, a.bg-primary:focus, @@ -6076,13 +6107,13 @@ button.bg-primary:focus { } .bg-secondary { - background-color: #868e96 !important; + background-color: #6c757d !important; } a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus { - background-color: #6c757d !important; + background-color: #545b62 !important; } .bg-success { @@ -6194,11 +6225,11 @@ button.bg-dark:focus { } .border-primary { - border-color: #BD5D38 !important; + border-color: #bd5d38 !important; } .border-secondary { - border-color: #868e96 !important; + border-color: #6c757d !important; } .border-success { @@ -7289,6 +7320,27 @@ button.bg-dark:focus { float: none !important; } } +.user-select-all { + -webkit-user-select: all !important; + -moz-user-select: all !important; + -ms-user-select: all !important; + user-select: all !important; +} + +.user-select-auto { + -webkit-user-select: auto !important; + -moz-user-select: auto !important; + -ms-user-select: auto !important; + user-select: auto !important; +} + +.user-select-none { + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; +} + .overflow-auto { overflow: auto !important; } @@ -7444,18 +7496,6 @@ button.bg-dark:focus { height: 100vh !important; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); -} - .m-0 { margin: 0 !important; } @@ -9620,6 +9660,18 @@ button.bg-dark:focus { margin-left: auto !important; } } +.stretched-link::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + pointer-events: auto; + content: ""; + background-color: rgba(0, 0, 0, 0); +} + .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } @@ -9747,7 +9799,7 @@ button.bg-dark:focus { } .text-primary { - color: #BD5D38 !important; + color: #bd5d38 !important; } a.text-primary:hover, a.text-primary:focus { @@ -9755,11 +9807,11 @@ a.text-primary:hover, a.text-primary:focus { } .text-secondary { - color: #868e96 !important; + color: #6c757d !important; } a.text-secondary:hover, a.text-secondary:focus { - color: #60686f !important; + color: #494f54 !important; } .text-success { @@ -9815,7 +9867,7 @@ a.text-dark:hover, a.text-dark:focus { } .text-muted { - color: #868e96 !important; + color: #6c757d !important; } .text-black-50 { @@ -9839,8 +9891,7 @@ a.text-dark:hover, a.text-dark:focus { } .text-break { - word-break: break-word !important; - overflow-wrap: break-word !important; + word-wrap: break-word !important; } .text-reset { @@ -9950,9 +10001,8 @@ h3 { } } body { - font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - padding-top: 54px; - color: #868e96; + padding-top: 3.375rem; + color: #6c757d; } @media (min-width: 992px) { @@ -9967,23 +10017,11 @@ h3, h4, h5, h6 { - font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-weight: 700; text-transform: uppercase; - color: #343a40; } h1 { - font-size: 6rem; - line-height: 5.5rem; -} - -h2 { - font-size: 3.5rem; -} - -h3 { - font-size: 2rem; + line-height: 1; } p.lead { @@ -9992,36 +10030,10 @@ p.lead { } .subheading { + font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; text-transform: uppercase; font-weight: 500; - font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1.5rem; -} - -.social-icons a { - display: inline-block; - height: 3.5rem; - width: 3.5rem; - background-color: #495057; - color: #fff !important; - border-radius: 100%; - text-align: center; font-size: 1.5rem; - line-height: 3.5rem; - margin-right: 1rem; -} -.social-icons a:last-child { - margin-right: 0; -} -.social-icons a:hover { - background-color: #BD5D38; -} - -.dev-icons { - font-size: 3rem; -} -.dev-icons .list-inline-item i:hover { - color: #BD5D38; } #sideNav .navbar-nav .nav-item .nav-link { @@ -10072,40 +10084,52 @@ p.lead { display: block; } } +.social-icons .social-icon { + display: inline-flex; + align-items: center; + justify-content: center; + height: 3.5rem; + width: 3.5rem; + background-color: #495057; + color: #fff; + border-radius: 100%; + font-size: 1.5rem; + margin-right: 1.5rem; +} +.social-icons .social-icon:last-child { + margin-right: 0; +} +.social-icons .social-icon:hover { + background-color: #bd5d38; +} + +.dev-icons { + font-size: 3rem; +} + section.resume-section { - padding-top: 5rem !important; - padding-bottom: 5rem !important; + display: flex; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 5rem; + padding-bottom: 5rem; max-width: 75rem; } -section.resume-section .resume-item .resume-date { - min-width: none; +section.resume-section .resume-section-content { + width: 100%; } @media (min-width: 768px) { section.resume-section { min-height: 100vh; } - section.resume-section .resume-item .resume-date { - min-width: 18rem; - } } @media (min-width: 992px) { section.resume-section { - padding-top: 3rem !important; - padding-bottom: 3rem !important; + padding-left: 3rem; + padding-right: 3rem; + padding-top: 5rem; + padding-bottom: 5rem; } -} -.bg-primary { - background-color: #BD5D38 !important; -} - -.text-primary { - color: #BD5D38 !important; -} - -a { - color: #BD5D38; -} -a:hover, a:focus, a:active { - color: #824027; } \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 1a07ad9..7f1a0fb 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,7 +8,7 @@ Resume - Start Bootstrap Theme - + @@ -35,83 +35,83 @@
-
-
+
+

Clarence Taylor

3542 Berry Street · Cheyenne Wells, CO 80810 · (317) 585-8468 · name@email.com

I am experienced in leveraging agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

-
-
+
+

Experience

-
-
+
+

Senior Web Developer

Intelitec Solutions

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.

-
March 2013 - Present
+
March 2013 - Present
-
-
+
+

Web Developer

Intelitec Solutions

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.

-
December 2011 - March 2013
+
December 2011 - March 2013
-
-
+
+

Junior Web Designer

Shout! Media Productions

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.

-
July 2010 - December 2011
+
July 2010 - December 2011
-
-
+
+

Web Design Intern

Shout! Media Productions

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.

-
September 2008 - June 2010
+
September 2008 - June 2010
-
-
+
+

Education

-
-
+
+

University of Colorado Boulder

Bachelor of Science
Computer Science - Web Development Track

GPA: 3.23

-
August 2006 - May 2010
+
August 2006 - May 2010
-
-
+
+

James Buchanan High School

Technology Magnet Program

GPA: 3.56

-
August 2002 - May 2006
+
August 2002 - May 2006
-
-
+
+

Skills

Programming Languages & Tools
    @@ -130,17 +130,25 @@

    Skills

Workflow
    -
  • Mobile-First, Responsive Design
    • -
  • Cross Browser Testing & Debugging
    • -
  • Cross Functional Teams
    • -
  • Agile Development & Scrum
    • +
  • + Mobile-First, Responsive Design +
    • +
  • + Cross Browser Testing & Debugging +
    • +
  • + Cross Functional Teams +
    • +
  • + Agile Development & Scrum +
-
-
+
+

Interests

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.

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.

@@ -148,24 +156,38 @@

Interests

-
-
+
+

Awards & Certifications

    -
  • Google Analytics Certified Developer
    • -
  • Mobile Web Specialist - Google Certification
    • -
  • 1st Place - University of Colorado Boulder - Emerging Tech Competition 2009
    • -
  • 1st Place - University of Colorado Boulder - Adobe Creative Jam 2008 (UI Design Category)
    • -
  • 2nd Place - University of Colorado Boulder - Emerging Tech Competition 2008
    • -
  • 1st Place - James Buchanan High School - Hackathon 2006
    • -
  • 3rd Place - James Buchanan High School - Hackathon 2005
    • +
  • + Google Analytics Certified Developer +
    • +
  • + Mobile Web Specialist - Google Certification +
    • +
  • + 1st Place - University of Colorado Boulder - Emerging Tech Competition 2009 +
    • +
  • + 1st Place - University of Colorado Boulder - Adobe Creative Jam 2008 (UI Design Category) +
    • +
  • + 2nd Place - University of Colorado Boulder - Emerging Tech Competition 2008 +
    • +
  • + 1st Place - James Buchanan High School - Hackathon 2006 +
    • +
  • + 3rd Place - James Buchanan High School - Hackathon 2005 +
- - + + diff --git a/dist/js/scripts.js b/dist/js/scripts.js index 02409eb..68ded84 100644 --- a/dist/js/scripts.js +++ b/dist/js/scripts.js @@ -3,31 +3,40 @@ * Copyright 2013-2020 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE) */ - (function($) { - "use strict"; // Start of use strict + (function ($) { + "use strict"; // Start of use strict - // 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; - } - } - }); + // 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: '#sideNav' - }); + // 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: "#sideNav", + }); })(jQuery); // End of use strict diff --git a/package-lock.json b/package-lock.json index 06dfdb2..49b55ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -189,18 +189,18 @@ "dev": true }, "autoprefixer": { - "version": "9.7.6", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz", - "integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==", + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.0.tgz", + "integrity": "sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==", "dev": true, "requires": { - "browserslist": "^4.11.1", - "caniuse-lite": "^1.0.30001039", + "browserslist": "^4.12.0", + "caniuse-lite": "^1.0.30001061", "chalk": "^2.4.2", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", - "postcss": "^7.0.27", - "postcss-value-parser": "^4.0.3" + "postcss": "^7.0.30", + "postcss-value-parser": "^4.1.0" } }, "axios": { @@ -366,9 +366,9 @@ "dev": true }, "bootstrap": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz", - "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==" + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz", + "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==" }, "brace-expansion": { "version": "1.1.11", @@ -496,13 +496,13 @@ } }, "browserslist": { - "version": "4.11.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.11.1.tgz", - "integrity": "sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz", + "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001038", - "electron-to-chromium": "^1.3.390", + "caniuse-lite": "^1.0.30001043", + "electron-to-chromium": "^1.3.413", "node-releases": "^1.1.53", "pkg-up": "^2.0.0" } @@ -555,9 +555,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001042", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001042.tgz", - "integrity": "sha512-igMQ4dlqnf4tWv0xjaaE02op9AJ2oQzXKjWf4EuAHFN694Uo9/EfPVIPJcmn2WkU9RqozCxx5e2KPcVClHDbDw==", + "version": "1.0.30001062", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz", + "integrity": "sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==", "dev": true }, "center-align": { @@ -591,9 +591,9 @@ } }, "chokidar": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz", - "integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz", + "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==", "dev": true, "requires": { "anymatch": "~3.1.1", @@ -603,7 +603,7 @@ "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", - "readdirp": "~3.3.0" + "readdirp": "~3.4.0" }, "dependencies": { "anymatch": { @@ -641,9 +641,9 @@ } }, "fsevents": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz", - "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", + "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", "dev": true, "optional": true }, @@ -672,12 +672,12 @@ "dev": true }, "readdirp": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz", - "integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz", + "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==", "dev": true, "requires": { - "picomatch": "^2.0.7" + "picomatch": "^2.2.1" } }, "to-regex-range": { @@ -796,9 +796,9 @@ "dev": true }, "concurrently": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-5.1.0.tgz", - "integrity": "sha512-9ViZMu3OOCID3rBgU31mjBftro2chOop0G2u1olq1OuwRBVRw/GxHTg80TVJBUTJfoswMmEUeuOg1g1yu1X2dA==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-5.2.0.tgz", + "integrity": "sha512-XxcDbQ4/43d6CxR7+iV8IZXhur4KbmEJk1CetVMUqCy34z9l0DkszbY+/9wvmSnToTej0SYomc2WSRH+L0zVJw==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -1086,9 +1086,9 @@ "dev": true }, "date-fns": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.12.0.tgz", - "integrity": "sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw==", + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.14.0.tgz", + "integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==", "dev": true }, "debug": { @@ -1202,9 +1202,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.408", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.408.tgz", - "integrity": "sha512-vn1zWIxIdyl0MR72lr81/7kHYTRlDRjJT4ocp8dtb85VhH46J3lNqDMEBljAKPKgguqjK0+WAbf3IL6ZKw72kQ==", + "version": "1.3.446", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.446.tgz", + "integrity": "sha512-CLQaFuvkKqR9FD2G3cJrr1fV7DRMXiAKWLP2F8cxtvvtzAS7Tubt0kF47/m+uE61kiT+I7ZEn7HqLnmWdOhmuA==", "dev": true }, "emoji-regex": { @@ -2860,9 +2860,9 @@ "dev": true }, "node-releases": { - "version": "1.1.53", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz", - "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==", + "version": "1.1.56", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.56.tgz", + "integrity": "sha512-EVo605FhWLygH8a64TjgpjyHYOihkxECwX1bHHr8tETJKWEiWS2YJjPbvsX2jFjnjTNEgBCmk9mLjKG1Mf11cw==", "dev": true }, "normalize-package-data": { @@ -3161,9 +3161,9 @@ "dev": true }, "postcss": { - "version": "7.0.27", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz", - "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==", + "version": "7.0.30", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.30.tgz", + "integrity": "sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -3183,15 +3183,15 @@ } }, "postcss-value-parser": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz", - "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", + "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", "dev": true }, "prettier": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.4.tgz", - "integrity": "sha512-SVJIQ51spzFDvh4fIbCLvciiDMCrRhlN3mbZvv/+ycjvmF5E73bKdGfU8QDLNmjYJf+lsGnDBC4UUnvTe5OO0w==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz", + "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==", "dev": true }, "process-nextick-args": { @@ -3590,9 +3590,9 @@ "dev": true }, "sass": { - "version": "1.26.3", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.3.tgz", - "integrity": "sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==", + "version": "1.26.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.5.tgz", + "integrity": "sha512-FG2swzaZUiX53YzZSjSakzvGtlds0lcbF+URuU9mxOv7WBh7NhXEVDa4kPKN4hN6fC2TkOTOKqiqp6d53N9X5Q==", "dev": true, "requires": { "chokidar": ">=2.0.0 <4.0.0" @@ -3788,9 +3788,9 @@ "dev": true }, "shelljs": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz", - "integrity": "sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz", + "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==", "dev": true, "requires": { "glob": "^7.0.0", @@ -4361,9 +4361,9 @@ "dev": true }, "tslib": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz", - "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==", + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", "dev": true }, "ua-parser-js": { diff --git a/package.json b/package.json index 212b28f..d970766 100644 --- a/package.json +++ b/package.json @@ -36,17 +36,17 @@ "url": "https://github.com/BlackrockDigital/startbootstrap-resume.git" }, "dependencies": { - "bootstrap": "4.4.1" + "bootstrap": "4.5.0" }, "devDependencies": { - "autoprefixer": "9.7.6", + "autoprefixer": "9.8.0", "browser-sync": "2.26.7", - "chokidar": "3.3.1", - "concurrently": "5.1.0", - "postcss": "7.0.27", - "prettier": "2.0.4", + "chokidar": "3.4.0", + "concurrently": "5.2.0", + "postcss": "7.0.30", + "prettier": "2.0.5", "pug": "2.0.4", - "sass": "1.26.3", - "shelljs": "0.8.3" + "sass": "1.26.5", + "shelljs": "0.8.4" } } diff --git a/src/js/scripts.js b/src/js/scripts.js index 78c850b..f8cfc6f 100644 --- a/src/js/scripts.js +++ b/src/js/scripts.js @@ -1,28 +1,37 @@ -(function($) { - "use strict"; // Start of use strict +(function ($) { + "use strict"; // Start of use strict - // 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; - } - } - }); + // 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: '#sideNav' - }); + // 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: "#sideNav", + }); })(jQuery); // End of use strict diff --git a/src/pug/index.pug b/src/pug/index.pug index 05ca116..4acb054 100644 --- a/src/pug/index.pug +++ b/src/pug/index.pug @@ -13,7 +13,7 @@ html(lang='en') link(rel='icon', type='image/x-icon', href='assets/img/favicon.ico') // Font Awesome icons (free version) - script(src='https://use.fontawesome.com/releases/v5.12.1/js/all.js', crossorigin='anonymous') + script(src='https://use.fontawesome.com/releases/v5.13.0/js/all.js', crossorigin='anonymous') // Google fonts link(href='https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700', rel='stylesheet', type='text/css') @@ -51,8 +51,8 @@ html(lang='en') .container-fluid.p-0 // About - section#about.resume-section.p-3.p-lg-5.d-flex.align-items-center - .w-100 + section#about.resume-section + .resume-section-content h1.mb-0 | Clarence span.text-primary Taylor @@ -62,81 +62,87 @@ html(lang='en') p.lead.mb-5 | I am experienced in leveraging agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. .social-icons - a(href='#') + a.social-icon(href='#') i.fab.fa-linkedin-in - a(href='#') + a.social-icon(href='#') i.fab.fa-github - a(href='#') + a.social-icon(href='#') i.fab.fa-twitter - a(href='#') + a.social-icon(href='#') i.fab.fa-facebook-f hr.m-0 // Experience - section#experience.resume-section.p-3.p-lg-5.d-flex.justify-content-center - .w-100 + section#experience.resume-section + .resume-section-content h2.mb-5 Experience - .resume-item.d-flex.flex-column.flex-md-row.justify-content-between.mb-5 - .resume-content + + .d-flex.flex-column.flex-md-row.justify-content-between.mb-5 + .flex-grow-1 h3.mb-0 Senior Web Developer .subheading.mb-3 Intelitec Solutions 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. - .resume-date.text-md-right + .flex-shrink-0 span.text-primary March 2013 - Present - .resume-item.d-flex.flex-column.flex-md-row.justify-content-between.mb-5 - .resume-content + + .d-flex.flex-column.flex-md-row.justify-content-between.mb-5 + .flex-grow-1 h3.mb-0 Web Developer .subheading.mb-3 Intelitec Solutions 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. - .resume-date.text-md-right + .flex-shrink-0 span.text-primary December 2011 - March 2013 - .resume-item.d-flex.flex-column.flex-md-row.justify-content-between.mb-5 - .resume-content + + .d-flex.flex-column.flex-md-row.justify-content-between.mb-5 + .flex-grow-1 h3.mb-0 Junior Web Designer .subheading.mb-3 Shout! Media Productions 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. - .resume-date.text-md-right + .flex-shrink-0 span.text-primary July 2010 - December 2011 - .resume-item.d-flex.flex-column.flex-md-row.justify-content-between - .resume-content + + .d-flex.flex-column.flex-md-row.justify-content-between + .flex-grow-1 h3.mb-0 Web Design Intern .subheading.mb-3 Shout! Media Productions 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. - .resume-date.text-md-right + .flex-shrink-0 span.text-primary September 2008 - June 2010 hr.m-0 // Education - section#education.resume-section.p-3.p-lg-5.d-flex.align-items-center - .w-100 + section#education.resume-section + .resume-section-content h2.mb-5 Education - .resume-item.d-flex.flex-column.flex-md-row.justify-content-between.mb-5 - .resume-content + + .d-flex.flex-column.flex-md-row.justify-content-between.mb-5 + .flex-grow-1 h3.mb-0 University of Colorado Boulder .subheading.mb-3 Bachelor of Science div Computer Science - Web Development Track p GPA: 3.23 - .resume-date.text-md-right + .flex-shrink-0 span.text-primary August 2006 - May 2010 - .resume-item.d-flex.flex-column.flex-md-row.justify-content-between - .resume-content + + .d-flex.flex-column.flex-md-row.justify-content-between + .flex-grow-1 h3.mb-0 James Buchanan High School .subheading.mb-3 Technology Magnet Program p GPA: 3.56 - .resume-date.text-md-right + .flex-shrink-0 span.text-primary August 2002 - May 2006 hr.m-0 // Skills - section#skills.resume-section.p-3.p-lg-5.d-flex.align-items-center - .w-100 + section#skills.resume-section + .resume-section-content h2.mb-5 Skills .subheading.mb-3 Programming Languages & Tools ul.list-inline.dev-icons @@ -167,23 +173,27 @@ html(lang='en') .subheading.mb-3 Workflow ul.fa-ul.mb-0 li - i.fa-li.fa.fa-check + span.fa-li + i.fas.fa-check | Mobile-First, Responsive Design li - i.fa-li.fa.fa-check + span.fa-li + i.fas.fa-check | Cross Browser Testing & Debugging li - i.fa-li.fa.fa-check + span.fa-li + i.fas.fa-check | Cross Functional Teams li - i.fa-li.fa.fa-check + span.fa-li + i.fas.fa-check | Agile Development & Scrum hr.m-0 // Interests - section#interests.resume-section.p-3.p-lg-5.d-flex.align-items-center - .w-100 + section#interests.resume-section + .resume-section-content h2.mb-5 Interests 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. @@ -193,45 +203,52 @@ html(lang='en') hr.m-0 // Awards - section#awards.resume-section.p-3.p-lg-5.d-flex.align-items-center - .w-100 + section#awards.resume-section + .resume-section-content h2.mb-5 Awards & Certifications ul.fa-ul.mb-0 li - i.fa-li.fa.fa-trophy.text-warning + span.fa-li + i.fas.fa-trophy.text-warning | Google Analytics Certified Developer li - i.fa-li.fa.fa-trophy.text-warning + span.fa-li + i.fas.fa-trophy.text-warning | Mobile Web Specialist - Google Certification li - i.fa-li.fa.fa-trophy.text-warning + span.fa-li + i.fas.fa-trophy.text-warning | 1 sup st | Place - University of Colorado Boulder - Emerging Tech Competition 2009 li - i.fa-li.fa.fa-trophy.text-warning + span.fa-li + i.fas.fa-trophy.text-warning | 1 sup st | Place - University of Colorado Boulder - Adobe Creative Jam 2008 (UI Design Category) li - i.fa-li.fa.fa-trophy.text-warning + span.fa-li + i.fas.fa-trophy.text-warning | 2 sup nd | Place - University of Colorado Boulder - Emerging Tech Competition 2008 li - i.fa-li.fa.fa-trophy.text-warning + span.fa-li + i.fas.fa-trophy.text-warning | 1 sup st | Place - James Buchanan High School - Hackathon 2006 li - i.fa-li.fa.fa-trophy.text-warning + span.fa-li + i.fas.fa-trophy.text-warning | 3 sup rd | Place - James Buchanan High School - Hackathon 2005 // Bootstrap core JS - script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js') - script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js') + script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js') + script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js') // Third party plugin JS script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js') diff --git a/src/scss/_bootstrap-overrides.scss b/src/scss/_bootstrap-overrides.scss deleted file mode 100644 index 30235f0..0000000 --- a/src/scss/_bootstrap-overrides.scss +++ /dev/null @@ -1,16 +0,0 @@ -.bg-primary { - background-color: $primary !important; -} - -.text-primary { - color: $primary !important; -} - -a { - color: $primary; - &:hover, - &:focus, - &:active { - color: darken($primary, 15%); - } -} diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 49a3003..1617c87 100644 --- a/src/scss/_global.scss +++ b/src/scss/_global.scss @@ -1,15 +1,14 @@ // Global styling for this template body { - @include body-font; - padding-top: 54px; - color: $gray-600; + padding-top: $navbar-base-height; + color: $gray-600; } -@media (min-width: 992px) { - body { - padding-top: 0; - padding-left: $sidebar-base-width; - } +@include media-breakpoint-up(lg) { + body { + padding-top: 0; + padding-left: $sidebar-base-width; + } } h1, @@ -18,63 +17,21 @@ h3, h4, h5, h6 { - @include heading-font; - font-weight: 700; - text-transform: uppercase; - color: $gray-800; + text-transform: uppercase; } h1 { - font-size: 6rem; - line-height: 5.5rem; -} - -h2 { - font-size: 3.5rem; -} - -h3 { - font-size: 2rem; + line-height: 1; } p.lead { - font-size: 1.15rem; - font-weight: 400; + font-size: 1.15rem; + font-weight: 400; } .subheading { - text-transform: uppercase; - font-weight: 500; - @include heading-font; - font-size: 1.5rem; -} - -.social-icons { - a { - display: inline-block; - height: 3.5rem; - width: 3.5rem; - background-color: $gray-700; - color: $white !important; - border-radius: 100%; - text-align: center; + font-family: $headings-font-family; + text-transform: uppercase; + font-weight: 500; font-size: 1.5rem; - line-height: 3.5rem; - margin-right: 1rem; - &:last-child { - margin-right: 0; - } - &:hover { - background-color: $primary; - } - } -} - -.dev-icons { - font-size: 3rem; - .list-inline-item i { - &:hover { - color: $primary; - } - } } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss deleted file mode 100644 index 964456d..0000000 --- a/src/scss/_mixins.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Mixins - -@mixin body-font { - font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -} -@mixin heading-font { - font-family: 'Saira Extra Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -} diff --git a/src/scss/_nav.scss b/src/scss/_nav.scss deleted file mode 100644 index 354e770..0000000 --- a/src/scss/_nav.scss +++ /dev/null @@ -1,57 +0,0 @@ -#sideNav { - .navbar-nav .nav-item .nav-link { - font-weight: 800; - letter-spacing: 0.05rem; - text-transform: uppercase; - } - .navbar-toggler { - &:focus { - outline-color: lighten($primary, 15%); - } - } -} - -@media (min-width: 992px) { - #sideNav { - text-align: center; - position: fixed; - top: 0; - left: 0; - - display: flex; - flex-direction: column; - - width: $sidebar-base-width; - height: 100vh; - .navbar-brand { - display: flex; - - margin: auto auto 0; - padding: 0.5rem; - .img-profile { - max-width: 10rem; - max-height: 10rem; - border: 0.5rem solid fade-out($white, 0.8); - } - } - .navbar-collapse { - display: flex; - align-items: flex-start; - flex-grow: 0; - - width: 100%; - margin-bottom: auto; - .navbar-nav { - flex-direction: column; - - width: 100%; - .nav-item { - display: block; - .nav-link { - display: block; - } - } - } - } - } -} diff --git a/src/scss/_resume-item.scss b/src/scss/_resume-item.scss deleted file mode 100644 index 79ee990..0000000 --- a/src/scss/_resume-item.scss +++ /dev/null @@ -1,27 +0,0 @@ -section.resume-section { - padding-top: 5rem !important; - padding-bottom: 5rem !important; - max-width: 75rem; - .resume-item { - .resume-content {} - .resume-date { - min-width: none; - } - } -} -@media (min-width: 768px) { - section.resume-section { - min-height: 100vh; - .resume-item { - .resume-date { - min-width: 18rem; - } - } - } -} -@media (min-width: 992px) { - section.resume-section { - padding-top: 3rem !important; - padding-bottom: 3rem !important; - } -} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 14144f1..5d965de 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,39 +1,4 @@ -// Variables - -// Restate Bootstrap Variables - -$white: #fff !default; -$gray-100: #f8f9fa !default; -$gray-200: #e9ecef !default; -$gray-300: #dee2e6 !default; -$gray-400: #ced4da !default; -$gray-500: #adb5bd !default; -$gray-600: #868e96 !default; -$gray-700: #495057 !default; -$gray-800: #343a40 !default; -$gray-900: #212529 !default; -$black: #000 !default; - -$blue: #007bff !default; -$indigo: #6610f2 !default; -$purple: #6f42c1 !default; -$pink: #e83e8c !default; -$red: #dc3545 !default; -$orange: #BD5D38 !default; -$yellow: #ffc107 !default; -$green: #28a745 !default; -$teal: #20c997 !default; -$cyan: #17a2b8 !default; - -$primary: $orange !default; -$secondary: $gray-600 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-800 !default; - -// Page Variables - -$sidebar-base-width: 17rem; +@import "./variables/colors.scss"; +@import "./variables/typography.scss"; +@import "./variables/spacing.scss"; +@import "./variables/grid.scss"; diff --git a/src/scss/components/_icons.scss b/src/scss/components/_icons.scss new file mode 100644 index 0000000..5939e05 --- /dev/null +++ b/src/scss/components/_icons.scss @@ -0,0 +1,27 @@ +// Styling for the rounded social media links + +.social-icons { + .social-icon { + display: inline-flex; + align-items: center; + justify-content: center; + height: 3.5rem; + width: 3.5rem; + background-color: $gray-700; + color: $white; + border-radius: 100%; + font-size: 1.5rem; + margin-right: 1.5rem; + &:last-child { + margin-right: 0; + } + &:hover { + background-color: $primary; + } + } +} + +// Styling for the development technology icons +.dev-icons { + font-size: 3rem; +} diff --git a/src/scss/components/_sidenav.scss b/src/scss/components/_sidenav.scss new file mode 100644 index 0000000..ac89fc4 --- /dev/null +++ b/src/scss/components/_sidenav.scss @@ -0,0 +1,57 @@ +#sideNav { + .navbar-nav .nav-item .nav-link { + font-weight: 800; + letter-spacing: 0.05rem; + text-transform: uppercase; + } + .navbar-toggler { + &:focus { + outline-color: lighten($primary, 15%); + } + } +} + +@include media-breakpoint-up(lg) { + #sideNav { + text-align: center; + position: fixed; + top: 0; + left: 0; + + display: flex; + flex-direction: column; + + width: $sidebar-base-width; + height: 100vh; + .navbar-brand { + display: flex; + + margin: auto auto 0; + padding: 0.5rem; + .img-profile { + max-width: 10rem; + max-height: 10rem; + border: 0.5rem solid fade-out($white, 0.8); + } + } + .navbar-collapse { + display: flex; + align-items: flex-start; + flex-grow: 0; + + width: 100%; + margin-bottom: auto; + .navbar-nav { + flex-direction: column; + + width: 100%; + .nav-item { + display: block; + .nav-link { + display: block; + } + } + } + } + } +} diff --git a/src/scss/sections/_resume-section.scss b/src/scss/sections/_resume-section.scss new file mode 100644 index 0000000..3ab5734 --- /dev/null +++ b/src/scss/sections/_resume-section.scss @@ -0,0 +1,25 @@ +section.resume-section { + display: flex; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 5rem; + padding-bottom: 5rem; + max-width: 75rem; + .resume-section-content { + width: 100%; + } +} +@include media-breakpoint-up(md) { + section.resume-section { + min-height: 100vh; + } +} +@include media-breakpoint-up(lg) { + section.resume-section { + padding-left: 3rem; + padding-right: 3rem; + padding-top: 5rem; + padding-bottom: 5rem; + } +} diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 36d7f9b..3b64384 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -1,19 +1,15 @@ // Import variables -@import "variables.scss"; +@import "./variables.scss"; // Import Bootstrap @import "bootstrap/scss/bootstrap.scss"; -// REMOVE MIXINS AND OVERRIDE BOOTSTRAP VARIABLES INSTEAD -@import "mixins.scss"; - // Global CSS -@import "global.scss"; +@import "./global.scss"; // Components -@import "nav.scss"; +@import "./components/sidenav.scss"; +@import "./components/icons.scss"; -// REMOVE / MOVE THESE -// -- Move these into global? Or figure out a different way to divide -@import "resume-item.scss"; -@import "bootstrap-overrides.scss"; +// Sections +@import "./sections/resume-section.scss"; diff --git a/src/scss/variables/_colors.scss b/src/scss/variables/_colors.scss new file mode 100644 index 0000000..f55100a --- /dev/null +++ b/src/scss/variables/_colors.scss @@ -0,0 +1,15 @@ +// Pre-state grayscale colors used in other variables + +$gray-800: #343a40; + +// Override Bootstrap color system + +$orange: #bd5d38; + +// Override Bootstrap default state colors + +$primary: $orange; + +// Override Bootstrap yiq lightness value + +$yiq-contrasted-threshold: 205; diff --git a/src/scss/variables/_grid.scss b/src/scss/variables/_grid.scss new file mode 100644 index 0000000..2c34cf9 --- /dev/null +++ b/src/scss/variables/_grid.scss @@ -0,0 +1,5 @@ +// Override Bootstrap grid column variables +// +// Override the spacing between columns to add symmetry to the layout + +$grid-gutter-width: $spacer * 1.5; diff --git a/src/scss/variables/_spacing.scss b/src/scss/variables/_spacing.scss new file mode 100644 index 0000000..413df66 --- /dev/null +++ b/src/scss/variables/_spacing.scss @@ -0,0 +1,15 @@ +// Restate and add to the Bootstrap default spacing variables +// +// The spacer is restated in order to add new entries to the $spacers map +// The 10 and n1 through n10 spacers are newly added allowing for larger +// spacing options and negative padding and margin utilities + +$spacer: 1rem; + +// Spacing variable to set the sidebar base width + +$sidebar-base-width: 17rem; + +// Spacing variable to add padding to the top of the body element that matches the height of the navbar + +$navbar-base-height: 3.375rem; diff --git a/src/scss/variables/_typography.scss b/src/scss/variables/_typography.scss new file mode 100644 index 0000000..384240e --- /dev/null +++ b/src/scss/variables/_typography.scss @@ -0,0 +1,17 @@ +// Override Bootstrap typography variables + +$font-family-base: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; + +$headings-font-family: "Saira Extra Condensed", -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + +$headings-font-weight: 700; + +$headings-color: $gray-800; + +$h1-font-size: 6rem; +$h2-font-size: 3.5rem; +$h3-font-size: 2rem;