boot-5 studio

functions.php

@@ -57,7 +57,7 @@ function dw_scripts() {
 	}
 
 	elseif ( is_page('studio') ) {
-		wp_enqueue_script( 'scriptmin', get_template_directory_uri() . '/js/v3-script.min.js', '', '', true );
+		wp_enqueue_script( 'scriptmin', get_template_directory_uri() . '/js/v4-script.min.js', '', '', true );
 		wp_enqueue_script( 'init', get_template_directory_uri() . '/js/studio.js', '', '', true );
 	}
 

js/about.js

@@ -1,5 +1,11 @@
 new WOW().init();
 
+const aboutCarouselElement = document.querySelector('#caro-lead')
+const carousel = new bootstrap.Carousel(aboutCarouselElement, {
+  interval: 5000,
+  wrap: false
+});
+
 jQuery(document).ready(function($) {
 
   $(window).bind('load', function() {
@@ -45,12 +51,6 @@ jQuery(document).ready(function($) {
     vidout.play();
 
 
-
-  $('#caro-lead').carousel({
-  	interval: 5000,
-  	wrap: true
-  });
-
   $(document).on('keyup', function(e) {
     if(e.which === 39){
   	$('#caro-lead').carousel('next');
@@ -78,7 +78,7 @@ jQuery(document).ready(function($) {
   });
 
 	$('#caro-lead').on('slid.bs.carousel', function() {
-		$('.active .animac').removeClass('hide-svg fade-svg');
+		$('.active #brain').delay(5000).removeClass('hide-svg fade-svg');
 		var animac = new DrawFillSVG({elementId: 'brain'});
 		animac.replay();
 	});

js/studio.js

@@ -1,3 +1,8 @@
+const studioCarouselElement = document.querySelector('#caro')
+const carousel = new bootstrap.Carousel(studioCarouselElement, {
+  interval: 5000,
+  wrap: true
+});
 
 jQuery(document).ready(function($) {
 
@@ -34,37 +39,21 @@ jQuery(document).ready(function($) {
     );
   });
 
-	$('#caro').carousel({
-		interval: false,
-		keyboard: false
-	});
-	$(document).bind('keyup', function(e) {
-    if (e.which === 39){
-		  $('#caro').carousel('next');
-    }
-    else if(e.which === 37){
-		  $('#caro').carousel('prev');
-    }
-	});
-	$('.studio-subnav a').click(function (e) {
-	  e.preventDefault()
-	  $(this).tab('show')
-	})
+
   $("#studio-caro").backstretch("../wp-content/themes/daw/img/studio.jpg");
-	$('#caro').on('slid.bs.carousel', function(event) {
-    var consta = $('#caro li.active');
-    //console.log('target: ' + consta.data('target') + ' value: ' + consta.data('value') + ' slide-to: ' + consta.data('slideTo'));
-		//var consta = $(event.target);
+	$('#caro').on('slid.bs.carousel', function(e) {
+    var consta = e.to;
+    console.log('target: ' + consta );
 		setTimeout(function() {
-			if (consta.data('slideTo') === 0) {
-				$('.studio-subnav a[href="#studio"]').tab('show')
+			if (consta === 0) {
+				$('a[href="#studio"]').tab('show')
 				$('#studio-caro').addClass('caro-grad5').removeClass('caro-grad caro-grad3 caro-grad2 caro-grad5');
 				$('.site-title a').addClass('light');
 				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
 				$("#studio-caro").backstretch({url:'../wp-content/themes/daw/img/studio.jpg', fade: 250 });
 			}
-			if (consta.data('slideTo') === 1) {
-				$('.studio-subnav a[href="#webdev"]').tab('show')
+			if (consta === 1) {
+				$('a[href="#webdev"]').tab('show')
 				$('.active #svg-imac.screen').delay(2500).queue(function(screenit){
 				    $(this).attr('class', 'bg');
 				    screenit();
@@ -74,29 +63,29 @@ jQuery(document).ready(function($) {
 				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
         $("#studio-caro").backstretch('destroy');
 			}
-			if (consta.data('slideTo') === 2) {
-				$('.studio-subnav a[href="#ux"]').tab('show')
+			if (consta === 2) {
+				$('a[href="#ux"]').tab('show')
 				$('#studio-caro').addClass('caro-grad2').removeClass('caro-grad caro-grad3 caro-grad5');
 				$('.site-title a').addClass('light');
 				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
         $("#studio-caro").backstretch('destroy');
 			}
-			if (consta.data('slideTo') === 3) {
-				$('.studio-subnav a[href="#graphic"]').tab('show')
+			if (consta === 3) {
+				$('a[href="#graphic"]').tab('show')
 				$( '#studio-caro' ).addClass('caro-grad3').removeClass('caro-grad2 caro-grad caro-grad5');
 				$('.site-title a').removeClass('light');
 				$('.carousel-indicators li').addClass('darken-carousel-indicators');
         $("#studio-caro").backstretch('destroy');
 			}
-			if (consta.data('slideTo') === 4) {
-				$('.studio-subnav a[href="#media"]').tab('show')
+			if (consta === 4) {
+				$('a[href="#media"]').tab('show')
 				$('#studio-caro').removeClass('caro-grad caro-grad3').addClass('caro-grad5');
 				$('.site-title a').addClass('light');
 				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
 				$("#studio-caro").backstretch({isVideo: true, url:'../wp-content/themes/daw/img/camera.mp4', poster:'../wp-content/themes/daw/img/camera.jpg'});
 			}
-			if (consta.data('slideTo') === 5) {
-				$('.studio-subnav a[href="#art"]').tab('show')
+			if (consta === 5) {
+				$('a[href="#art"]').tab('show')
 				$( '#studio-caro' ).addClass('caro-grad5').removeClass('caro-grad2 caro-grad caro-grad3');
 				$('.site-title a').addClass('light');
 				$('.carousel-indicators li').removeClass('darken-carousel-indicators');

page-studio.php

@@ -1,7 +1,7 @@
 <?php get_header('studio'); ?>
 	<div id="studio-caro" class="container-fluid leader">
-		<div id="caro" class="carousel slide">
-			<div class="container">
+		<div id="caro" class="carousel slide carousel-fade">
+
 				<ol class="carousel-indicators">
 					<li data-bs-target="#caro" data-bs-slide-to="0" class="active"></li>
 					<li data-bs-target="#caro" data-bs-slide-to="1"></li>
@@ -10,7 +10,7 @@
 					<li data-bs-target="#caro" data-bs-slide-to="4"></li>
 					<li data-bs-target="#caro" data-bs-slide-to="5"></li>
 				</ol>
-			</div>
+
 			<div class="carousel-inner">
 				<div class="carousel-item active" data-id="0">
 					<div class="container animac">
@@ -134,14 +134,14 @@
 	</div>
 	<div class="container">
 		<div class="row">
-			<div class="col-sm-2">
-				<ul class="nav-stacked studio-subnav">
-					<li data-target="#caro" data-slide-to="0"><a href="#studio" aria-controls="studio" role="tab" data-toggle="tab"><span class="fa fa-eye fa-fw"></span> <em>Studio</em></a></li>
-					<li data-target="#caro" data-slide-to="1"><a href="#webdev" aria-controls="webdev" role="tab" data-toggle="tab"><span class="fa fa-desktop fa-fw"></span> <em>Web</em></a></li>
-					<li data-target="#caro" data-slide-to="2"><a href="#ux" aria-controls="ux" role="tab" data-toggle="tab"><span class="fa fa-terminal fa-fw"></span> <em>UX/UI</em></a></li>
-					<li data-target="#caro" data-slide-to="3"><a href="#graphic" aria-controls="graphic" role="tab" data-toggle="tab"><span class="fa fa-pencil fa-fw"></span> <em>Graphic</em></a></li>
-					<li data-target="#caro" data-slide-to="4"><a href="#media" aria-controls="media" role="tab" data-toggle="tab"><span class="fa fa-film fa-fw"></span> <em>Media</em></a></li>
-					<li data-target="#caro" data-slide-to="5"><a href="#art" aria-controls="art" role="tab" data-toggle="tab"><span class="fa fa-paint-brush fa-fw"></span> <em>Art</em></a></li>
+			<div class="col-sm-2 bg-dark">
+				<ul class="nav nav-stacked list-group studio-subnav">
+					<li class="list-group-item" data-bs-target="#caro" data-bs-slide-to="0"><a id="studio-tab" class="nav-item active" href="#studio" aria-controls="studio" role="tab" data-bs-toggle="tab" data-bs-target="#studio"><span class="fa fa-eye fa-fw"></span> <em>Studio</em></a></li>
+					<li class="list-group-item" data-bs-target="#caro" data-bs-slide-to="1"><a id="webdev-tab" class="nav-item" href="#webdev" aria-controls="webdev" role="tab" data-bs-toggle="tab" data-bs-target="#webdev"><span class="fa fa-desktop fa-fw"></span> <em>Web</em></a></li>
+					<li class="list-group-item" data-bs-target="#caro" data-bs-slide-to="2"><a id="ux-tab" class="nav-item" href="#ux" aria-controls="ux" role="tab" data-bs-toggle="tab" data-bs-target="#ux"><span class="fa fa-terminal fa-fw"></span> <em>UX/UI</em></a></li>
+					<li class="list-group-item" data-bs-target="#caro" data-bs-slide-to="3"><a id="graphic-tab" class="nav-item" href="#graphic" aria-controls="graphic" role="tab" data-bs-toggle="tab" data-bs-target="#graphic"><span class="fa fa-pencil fa-fw"></span> <em>Graphic</em></a></li>
+					<li class="list-group-item" data-bs-target="#caro" data-bs-slide-to="4"><a id="media-tab" class="nav-item" href="#media" aria-controls="media" role="tab" data-bs-toggle="tab" data-bs-target="#media"><span class="fa fa-film fa-fw"></span> <em>Media</em></a></li>
+					<li class="list-group-item" data-bs-target="#caro" data-bs-slide-to="5"><a id="art-tab" class="nav-item" href="#art" aria-controls="art" role="tab" data-bs-toggle="tab" data-bs-target="#art"><span class="fa fa-paint-brush fa-fw"></span> <em>Art</em></a></li>
 				</ul>
 			</div>
 			<div class="col-sm-10">
@@ -149,9 +149,7 @@
 					<div role="tabpanel" class="tab-pane wow fadeIn active" id="studio">
             <div class="row">
   						<div class="col-sm-9 mt-4">
-							<h2 class="fs-5">Note: It's been some time since I've updated this page, so I'm working on it... I started by replacing the photo above from a stock image I was using.  </h2>
-  							<div class="entry-content">
-
+							  <div class="entry-content">
   								<h4 class="georgia"><em><span class="firstcharacter">A</span>lthough it seems that in the shower or sleeping is where my best work occurs,</em> the studio is the place where the shoe leather hits the pavement. I mostly work with web and application development, but I also do a good deal of graphic, print, and multimedia design. On my off hours, I like to turn off the computers to paint with camel hair, canvas, and minerals.</h4>
   							</div>
   						</div>

style.css

@@ -1104,7 +1104,7 @@ ul.social a.facebook span:hover {
 }
 
 #caro-lead {
-	min-height: 400px;
+	min-height: 420px;
 }
 #caro-lead h2 {
 	font-size: 27px;