terminal

js/init.js

@@ -33,17 +33,18 @@ $(function dw_set_cookie() {
 	else {
 		$('.intro').collapse('hide');
 		$('.terminal').modal('show');
-		$('.welcome-back').typed({
-			strings: ['Hey...', 'Welcome back...'],
-			typeSpeed: -40,
-			backSpeed: -70,
+		$('.welcome-back-text').typed({
+			strings: ['Hello...', 'Welcome back'],
+			typeSpeed: 10,
+			backSpeed: 70,
 			startDelay: 0,
 			backDelay: 0,
 			loop: false,
 			loopCount: false,
 			attr: null,
-			callback: function(){
-			 	dw_collapse();
+			callback: function(){	
+				dw_terminal();
+				dw_collapse();
 			 }
 		});	
 	}
@@ -66,8 +67,82 @@ function dw_shift() {
 }
 
 function dw_collapse() {
+	$('.welcome-back-text').addClass('.welcome-back-text:after');
 	//$('.intro').collapse('hide');
-	$('.terminal').modal('hide');
+	//$('.terminal').modal('hide');
+}
+
+/*============================================
+		      Terminal
+==============================================*/
+(function ($){
+	$.fn.cli = function(handler, prompt, effect){
+		if (!prompt) prompt = '<span class="u">you</span><span class="at">@</span><span class="mee">david</span>&nbsp;&gt;&nbsp;';
+		if (!effect) effect = $.fn.text;
+		return this.each(function(){
+			var self = $(this);
+			function newline(){
+				self.
+				 append('<p class=input><span class=prompt>'+prompt+'</span><span  style=outline:none contenteditable></span></p>');
+				try {
+					$('[contenteditable]', self)[0].focus();
+				}catch(e){
+				}
+			}
+			newline();
+			self.on('keydown', '[contenteditable]', function(evt){
+				if (evt.keyCode == 13){
+					$(this).removeAttr('contenteditable'); // IE needs special handling which jQuery provides
+					effect.call($('<p class=response>').appendTo(self),handler(this.textContent || this.innerText));
+					newline();
+					return false;
+				}
+			});
+		});
+	};
+})(jQuery);
+
+function dw_terminal(){
+	function type(text){
+		var span = $('<span>').appendTo(this).after('<span id="blinker" style="background: green">&nbsp;&nbsp;</span>');
+		var style = $('<style>p.input {visibility: hidden} p.input.old {visibility: visible}</style>').appendTo('head');
+		$('p.input').addClass('old');
+		var progress = 0;
+		var timer = setInterval (function(){
+			span.text(text.substr(0, progress++));
+			if (progress > text.length){
+				$('#blinker').remove();
+				style.remove();
+				$('[contenteditable]')[0].focus();
+				clearInterval(timer);
+			}
+		},100);
+	}
+	$('.thermo').cli(function(text){
+		if (/good/i.test(text)) {
+			return "Very" +text;
+			$('.terminal').modal('hide');
+		};
+		if (/exit/i.test(text)) {
+			$('.terminal').modal('hide');
+		};
+		if (/help/i.test(text)) return "I need somebody. Type 'exit' to close";
+		if (/hello/i.test(text)) return "Hello to you!";
+		if (/what/i.test(text)) return "This is a website silly human";
+		if (/and/i.test(text)) return "and what?";
+		if (/who/i.test(text)) return "David A. Windham";
+		if (/how/i.test(text)) return "JavaScript is a dynamic computer programming language";
+		if (/why/i.test(text)) return "For fun";
+		if (/you/i.test(text)) return "your mama";
+		if (/cd ../i.test(text)) return "Oh, I see";
+		if (/thermonuclear/i.test(text)) return "Wouldn't you prefer a nice game of chess?";
+		if (text.length < 3) return "type 'exit' to close";
+		return 'command not found: '+text;
+		}, null, type);
+	$('p.input').on('touchstart click', function(e) {
+		e.preventDefault();
+		$('[contenteditable]')[0].focus();
+	});
 }
 
 
@@ -111,7 +186,8 @@ $(function dw_hidenav() {
 ==============================================*/
 
 $('.carousel').carousel({
-	interval: 4200
+	interval: 4200,
+	interval: false
 });
 
 $('.carousel').on('slide.bs.carousel', function() {
@@ -124,6 +200,31 @@ $('.carousel').on('slid.bs.carousel', function() {
 	//$('#tv').addClass('invert');
 });
 
+$('.caro').carousel({
+	interval: 9000
+});
+
+/*============================================
+		      SVG Animate
+==============================================*/
+
+$('#caro').on('slid.bs.carousel', function() {
+	$('.active .animac').removeClass('hide-svg fade-svg');
+	var animac = new DrawFillSVG({elementId: 'svg-mac'});
+	var animac1 = new DrawFillSVG({elementId: 'svg-imac'});
+	var animac2 = new DrawFillSVG({elementId: 'svg'});
+	animac.replay();
+	animac1.replay();
+	animac2.replay();
+});
+
+$('#caro').on('slide.bs.carousel', function() {
+	$('.active .animac').addClass('fade-svg').delay(1000).queue(function(hideit){
+	    $(this).addClass('hide-svg');
+	    hideit();
+	});
+});
+
 
 /*============================================
 		      Comments
@@ -156,16 +257,17 @@ $('#commentform').validate({
 		}
 	},
 	messages: {
-		author: "Please enter in your name.",
-		email: "Please enter a valid email address.",
-		comment: "Message box can't be empty!"
+		author: 'Please enter in your name.',
+		email: 'Please enter a valid email address.',
+		comment: 'Nothing to Say?'
 	},
-	errorElement: "div",
+	errorElement: 'div',
 	errorPlacement: function(error, element) {
 		element.before(error);
 	} 
 });
 
+
 /*============================================
 		      SmoothState 
 ==============================================*/

js/scripts.js

@@ -1,3 +1,153 @@
+// ------------- DRAW FILL SVG ---------------------------------------------- //
+// ============ https://github.com/callmenick/Draw-Fill-SVG ================= //
+// -------------------------------------------------------------------------- //
+
+(function( window ){
+
+  'use strict';
+
+  /**
+   * Cross browser transition end events
+   *
+   * Use modernizr to detect cross browser transition end events. Make sure
+   * to include Modernizr in your doc and have "Modernizr.prefixed()" checked
+   * off in the extensibility section.
+   */
+
+  var transEndEventNames = {
+    "WebkitTransition" : "webkitTransitionEnd",
+    "MozTransition"    : "transitionend",
+    "OTransition"      : "oTransitionEnd",
+    "msTransition"     : "MSTransitionEnd",
+    "transition"       : "transitionend"
+  },
+  transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
+
+  /**
+   * Extend obj function
+   *
+   */
+
+  function extend( a, b ) {
+    for( var key in b ) { 
+      if( b.hasOwnProperty( key ) ) {
+        a[key] = b[key];
+      }
+    }
+    return a;
+  }
+
+  /**
+   * DrawFillSVG constructor
+   *
+   */
+
+  function DrawFillSVG( options ) {
+    this.options = extend( {}, this.options );
+    extend( this.options, options );
+    this._init();
+  }
+
+  /**
+   * DrawFillSVG options
+   *
+   * Available options:
+   * elementId - the ID of the element to draw
+   */
+
+  DrawFillSVG.prototype.options = {
+    elementId : "svg"
+  }
+
+  /**
+   * DrawFillSVG _init
+   *
+   * Initialise DrawFillSVG
+   */
+
+  DrawFillSVG.prototype._init = function() {
+    this.svg = document.getElementById(this.options.elementId);
+    this.paths = this.svg.querySelectorAll("path");
+    this._initAnimation();
+  }
+
+  /**
+   * DrawFillSVG _initAnimation()
+   *
+   * Reset some style properties on our paths, add some transitions, set the
+   * stroke-dasharray to the length of the path, and the stroke-dashoffset to
+   * the length of the path pushing it out of view initially. Then, set the 
+   * stroke-dashoffset to 0, animating the strokes in a drawing manner. Then,
+   * run the path filler sequence.
+   */
+
+  DrawFillSVG.prototype._initAnimation = function() {
+    for ( var i = 0; i < this.paths.length; i++ ) {
+      var path = this.paths[i];
+      var length = path.getTotalLength();
+
+      // reset opacities
+      path.style.fillOpacity = 0;
+      path.style.strokeOpacity = 1;
+
+      // reset transitions
+      path.style.transition = path.style.WebkitTransition = "none";
+
+      // reset stroke dash array and stroke dash offset
+      path.style.strokeDasharray = length + " " + length;
+      path.style.strokeDashoffset = length;
+      path.getBoundingClientRect();
+
+      // apply new transitions
+      path.style.transition = path.style.WebkitTransition = "stroke-dashoffset 2s ease-in-out";
+
+      // go baby go
+      path.style.strokeDashoffset = 0;
+
+      // fill the path
+      this._fillPath( path );
+    }
+  }
+
+  /**
+   * DrawFillSVG _fillPath()
+   *
+   * Resets the transition props, then fills the path and fades out the stroke
+   * by updating the styles.
+   */
+
+  DrawFillSVG.prototype._fillPath = function( path ) {
+    path.addEventListener( transEndEventName, function() {
+      // reset transitions
+      path.style.transition = path.style.WebkitTransition = "none";
+      path.style.transition = path.style.WebkitTransition = "fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out";
+
+      // edit props
+      path.style.fillOpacity = 1;
+      path.style.strokeOpacity = 0;
+    } );
+  }
+
+  /**
+   * DrawFillSVG replay
+   *
+   * A public function that allows you to replay the animation if you want. For
+   * example, click a button, and replay the animation.
+   */
+
+  DrawFillSVG.prototype.replay = function() {
+    this._initAnimation();
+  }
+
+  /**
+   * Add to global namespace
+   */
+
+  window.DrawFillSVG = DrawFillSVG;
+
+})( window );
+
+
 // ------------- JQUERY TYPED.JS -------------------------------------------- //
 // ============ https://github.com/mattboldt/typed.js/ ====================== //
 // -------------------------------------------------------------------------- //

style.css

@@ -419,6 +419,7 @@ h1.super {
 /*============================================
 										Intro 
 ==============================================*/
+
 .intro {
 	width: 100%;
 	height: 100%;
@@ -455,21 +456,24 @@ h1.super {
 	animation: blink 1s 30;
 }
 .welcome-back {
-	height: 420px;
-	padding: 80px 220px;
-	max-width: 100%;
-	display: block;
-	white-space: pre;
-	font-size: 27px;
-	background: transparent url('img/macbook.png') no-repeat center;
+	min-height: 500px;
+	padding: 70px 50px 40px;
+	font-size: 24px;
+	color: #34F743;
+	background: transparent url('img/terminal.svg');
+	background-size: cover;
+  border-radius: 1px;
 }
 .terminal .modal-content {
-	margin: 100px;
+	margin: 0 0 100px;
 	border: none;
-	-webkit-box-shadow:none;
+	box-shadow:none;
 	background-color: transparent !important;
 }
-.welcome-back:after {
+
+[contenteditable] {outline: none;}
+
+.welcome-back-text::after {
   visibility: visible;
   content: '';
   background-color: #d4f8e3;
@@ -488,7 +492,27 @@ h1.super {
 .typed-cursor{
 	display: none;
 }
-
+.thermo span.prompt {
+	color: #389436;
+}
+.thermo p.input {
+	line-height: 11px !important;
+	margin: 0px;
+}
+.thermo p.response {
+	line-height: 11px !important;
+	margin: 0px;
+	color:#34F743;
+}
+.thermo span.u {
+	color: #389436;
+}
+.thermo span.at {
+	color: #38BBC6;
+}
+.thermo span.mee {
+	color: #389436;
+}
 @keyframes blink{
     0% { opacity:1; }
     50% { opacity:0; }
@@ -521,7 +545,6 @@ h1.super {
 	padding: 100px 0;
 }
 .top-lead {
-	min-height: 400px;
 	background: #5E7A9B;
 	background: -webkit-linear-gradient(top, #355069 0, #5e7a9b 100%);
 	background: -moz-linear-gradient(top, #355069 0, #5e7a9b 100%);
@@ -566,17 +589,29 @@ h1.super {
   z-index: 2;
 }
 
-.blur {
-  -webkit-filter: blur(5px);
-  -moz-filter: blur(5px);
-  -o-filter: blur(5px);
-  -ms-filter: blur(5px);
-  filter: blur(5px);
-}
-
-#carousel {
+#caro-lead {
 	height: 400px;
 }
+#caro {
+	height: 600px;
+}
+.hide-svg {
+	visibility: hidden;
+}
+.fade-svg {
+	-webkit-animation: fadeOut 1s;
+	-moz-animation: fadeOut 1s;
+	-o-animation: fadeOut 1s;
+	-ms-animation: fadeOut 1s;
+	animation: fadeOut 1s;
+}
+.show-svg {
+	-webkit-animation: fadeIn 1s;
+	-moz-animation: fadeIn 1s;
+	-o-animation: fadeIn 1s;
+	-ms-animation: fadeIn 1s;
+	animation: fadeIn 1s;
+}
 .bg1 {
 	//background: url(img/desk.jpg) no-repeat left center;
 	background-size: cover;
@@ -585,6 +620,13 @@ h1.super {
 	-o-background-size: cover;
 	background-size: cover;
 }
+.blur {
+  -webkit-filter: blur(5px);
+  -moz-filter: blur(5px);
+  -o-filter: blur(5px);
+  -ms-filter: blur(5px);
+  filter: blur(5px);
+}
 #tv {
 	position: fixed; 
 	right: 0; 
@@ -810,13 +852,16 @@ img.dw {
 .dark {
 	background: #222;
 }
+.bottom {
+	padding-top: 50px;
+}
 .footer {
 	padding: 50px 0;
 }
 .footer-home {
 	padding: 90px 0 50px;
 }
-.col-centered {
+.centered {
 	float: none;
 	margin: 0 auto;
 }
@@ -847,6 +892,10 @@ article p {
 }
 
 
+
+
+
+
 /*===== Wordpress =====*/
 
 @media (max-width: 768px) {