BS5 update

This commit is contained in:
David Miller
2021-05-19 12:10:11 -04:00
parent cab88d67a6
commit 78eee04706
18 changed files with 7213 additions and 9048 deletions
-13
View File
@@ -1,13 +0,0 @@
language: node_js
git:
depth: 3
node_js:
- "node"
install: npm install
script:
- npm test
cache:
directories:
- node_modules
notifications:
email: false
+6703 -5865
View File
File diff suppressed because it is too large Load Diff
+7 -10
View File
@@ -22,8 +22,8 @@
<span class="d-block d-lg-none">Clarence Taylor</span>
<span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/profile.jpg" alt="..." /></span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">Experience</a></li>
@@ -49,10 +49,10 @@
</div>
<p class="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.</p>
<div class="social-icons">
<a class="social-icon" href="#"><i class="fab fa-linkedin-in"></i></a>
<a class="social-icon" href="#"><i class="fab fa-github"></i></a>
<a class="social-icon" href="#"><i class="fab fa-twitter"></i></a>
<a class="social-icon" href="#"><i class="fab fa-facebook-f"></i></a>
<a class="social-icon" href="#!"><i class="fab fa-linkedin-in"></i></a>
<a class="social-icon" href="#!"><i class="fab fa-github"></i></a>
<a class="social-icon" href="#!"><i class="fab fa-twitter"></i></a>
<a class="social-icon" href="#!"><i class="fab fa-facebook-f"></i></a>
</div>
</div>
</section>
@@ -218,10 +218,7 @@
</section>
</div>
<!-- Bootstrap core JS-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
+26 -34
View File
@@ -1,42 +1,34 @@
/*!
* Start Bootstrap - Resume v6.0.3 (https://startbootstrap.com/theme/resume)
* Start Bootstrap - Resume v7.0.0 (https://startbootstrap.com/theme/resume)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-resume/blob/master/LICENSE)
*/
(function ($) {
"use strict"; // Start of use strict
//
// Scripts
//
// Smooth scrolling using anime.js
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('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) {
anime({
targets: 'html, body',
scrollTop: target.offset().top,
duration: 1000,
easing: 'easeInOutExpo'
});
return false;
window.addEventListener('DOMContentLoaded', event => {
// Activate Bootstrap scrollspy on the main nav element
const sideNav = document.body.querySelector('#sideNav');
if (sideNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#sideNav',
offset: 74,
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
}
});
});
// Closes responsive menu when a scroll trigger link is clicked
$(".js-scroll-trigger").on('click', function () {
$(".navbar-collapse").collapse("hide");
});
// Activate scrollspy to add active class to navbar items on scroll
$("body").scrollspy({
target: "#mainNav"
});
})(jQuery); // End of use strict
});
+386 -3057
View File
File diff suppressed because it is too large Load Diff
+6 -6
View File
@@ -1,7 +1,7 @@
{
"title": "Resume",
"name": "startbootstrap-resume",
"version": "6.0.3",
"version": "7.0.0",
"scripts": {
"build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets",
"build:assets": "node scripts/build-assets.js",
@@ -36,17 +36,17 @@
"url": "https://github.com/StartBootstrap/startbootstrap-resume.git"
},
"dependencies": {
"bootstrap": "4.6.0"
"bootstrap": "5.0.1"
},
"devDependencies": {
"autoprefixer": "10.2.5",
"browser-sync": "2.26.14",
"chokidar": "3.5.1",
"concurrently": "6.0.2",
"postcss": "8.2.13",
"prettier": "2.2.1",
"concurrently": "6.1.0",
"postcss": "8.2.15",
"prettier": "2.3.0",
"pug": "3.0.2",
"sass": "1.32.11",
"sass": "1.32.13",
"shelljs": "0.8.4",
"upath": "2.0.1"
}
+25 -33
View File
@@ -1,37 +1,29 @@
(function ($) {
"use strict"; // Start of use strict
//
// Scripts
//
// Smooth scrolling using anime.js
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('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) {
anime({
targets: 'html, body',
scrollTop: target.offset().top,
duration: 1000,
easing: 'easeInOutExpo'
});
return false;
window.addEventListener('DOMContentLoaded', event => {
// Activate Bootstrap scrollspy on the main nav element
const sideNav = document.body.querySelector('#sideNav');
if (sideNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#sideNav',
offset: 74,
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
}
});
});
// Closes responsive menu when a scroll trigger link is clicked
$(".js-scroll-trigger").on('click', function () {
$(".navbar-collapse").collapse("hide");
});
// Activate scrollspy to add active class to navbar items on scroll
$("body").scrollspy({
target: "#mainNav"
});
})(jQuery); // End of use strict
});
+8 -12
View File
@@ -30,9 +30,9 @@ html(lang='en')
span.d-block.d-lg-none Clarence Taylor
span.d-none.d-lg-block
img.img-fluid.img-profile.rounded-circle.mx-auto.mb-2(src='assets/img/profile.jpg', alt='...')
button.navbar-toggler(type='button', data-toggle='collapse', data-target='#navbarSupportedContent', aria-controls='navbarSupportedContent', aria-expanded='false', aria-label='Toggle navigation')
button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
span.navbar-toggler-icon
#navbarSupportedContent.collapse.navbar-collapse
#navbarResponsive.collapse.navbar-collapse
ul.navbar-nav
li.nav-item
a.nav-link.js-scroll-trigger(href='#about') About
@@ -62,13 +62,13 @@ 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.social-icon(href='#')
a.social-icon(href='#!')
i.fab.fa-linkedin-in
a.social-icon(href='#')
a.social-icon(href='#!')
i.fab.fa-github
a.social-icon(href='#')
a.social-icon(href='#!')
i.fab.fa-twitter
a.social-icon(href='#')
a.social-icon(href='#!')
i.fab.fa-facebook-f
hr.m-0
@@ -247,11 +247,7 @@ html(lang='en')
| Place - James Buchanan High School - Hackathon 2005
// Bootstrap core JS
script(src='https://code.jquery.com/jquery-3.5.1.min.js')
script(src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js')
// Third party plugin JS
script(src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js')
script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js')
// Core theme JS
script(src='js/scripts.js')
script(src='js/scripts.js')
+4 -1
View File
@@ -1,9 +1,12 @@
// Global styling for this template
//
// Global
//
body {
padding-top: $navbar-base-height;
color: $gray-600;
}
@include media-breakpoint-up(lg) {
body {
padding-top: 0;
+4 -1
View File
@@ -1,4 +1,7 @@
//
// Variables
//
@import "./variables/colors.scss";
@import "./variables/typography.scss";
@import "./variables/spacing.scss";
@import "./variables/grid.scss";
+6
View File
@@ -1,3 +1,7 @@
//
// Icons
//
// Styling for the rounded social media links
.social-icons {
@@ -12,9 +16,11 @@
border-radius: 100%;
font-size: 1.5rem;
margin-right: 1.5rem;
&:last-child {
margin-right: 0;
}
&:hover {
background-color: $primary;
}
+16
View File
@@ -1,9 +1,17 @@
//
// Sidenav
//
#sideNav {
padding-left: 1rem;
padding-right: 1rem;
.navbar-nav .nav-item .nav-link {
font-weight: 800;
letter-spacing: 0.05rem;
text-transform: uppercase;
}
.navbar-toggler {
&:focus {
outline-color: lighten($primary, 15%);
@@ -13,6 +21,8 @@
@include media-breakpoint-up(lg) {
#sideNav {
padding-left: 0;
padding-right: 0;
text-align: center;
position: fixed;
top: 0;
@@ -23,17 +33,20 @@
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;
@@ -41,12 +54,15 @@
width: 100%;
margin-bottom: auto;
.navbar-nav {
flex-direction: column;
width: 100%;
.nav-item {
display: block;
.nav-link {
display: block;
}
+7
View File
@@ -1,3 +1,7 @@
//
// Sections
//
section.resume-section {
display: flex;
align-items: center;
@@ -6,15 +10,18 @@ section.resume-section {
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;
+4
View File
@@ -1,3 +1,7 @@
//
// Styles
//
// Import variables
@import "./variables.scss";
+4 -4
View File
@@ -1,3 +1,7 @@
//
// Colors
//
// Pre-state grayscale colors used in other variables
$gray-800: #343a40;
@@ -9,7 +13,3 @@ $orange: #bd5d38;
// Override Bootstrap default state colors
$primary: $orange;
// Override Bootstrap yiq lightness value
$yiq-contrasted-threshold: 205;
-5
View File
@@ -1,5 +0,0 @@
// Override Bootstrap grid column variables
//
// Override the spacing between columns to add symmetry to the layout
$grid-gutter-width: $spacer * 1.5;
+3 -7
View File
@@ -1,10 +1,6 @@
// 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
//
// Spacing variable to set the sidebar base width
+4
View File
@@ -1,3 +1,7 @@
//
// Variables
//
// Override Bootstrap typography variables
$font-family-base: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,