(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{125:function(e,t){t.cleanMaterial=function(e){e.dispose();for(var t=0,a=Object.keys(e);t<a.length;t++){var n=e[a[t]];n&&"object"===typeof n&&"minFilter"in n&&n.dispose()}}},196:function(e,t){e.exports="data:image/png;base64,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"},197:function(e,t,a){e.exports=a.p+"static/media/3dModel2.c8e87ef5.mp4"},198:function(e,t,a){e.exports=a.p+"static/media/trainingVideo.4f0bdb62.mp4"},199:function(e,t,a){e.exports=a.p+"static/media/calVideo.7d9627e1.mp4"},200:function(e,t,a){e.exports=a.p+"static/media/newPost.d4763719.mp4"},201:function(e,t,a){e.exports=a.p+"static/media/newJerseyChange.73afe5d3.mp4"},202:function(e,t,a){e.exports=a.p+"static/media/coachTool.ff108207.mp4"},203:function(e,t,a){e.exports=a.p+"static/media/visitor.39f12564.mp4"},204:function(e,t,a){e.exports=a.p+"static/media/3dModel2.830e34cf.webm"},205:function(e,t,a){e.exports=a.p+"static/media/trainingVideo.6c5ed818.webm"},206:function(e,t,a){e.exports=a.p+"static/media/calVideo.216c3ebe.webm"},207:function(e,t,a){e.exports=a.p+"static/media/newPost.2b664f8e.webm"},208:function(e,t,a){e.exports=a.p+"static/media/newJerseyChange.3b68b263.webm"},209:function(e,t,a){e.exports=a.p+"static/media/coachTool.4ff87096.webm"},210:function(e,t,a){e.exports=a.p+"static/media/visitor.e65e4956.webm"},211:function(e,t,a){e.exports=a.p+"static/media/addresser.5b1339b7.png"},212:function(e,t,a){e.exports=a.p+"static/media/home.19985f6f.png"},213:function(e,t,a){e.exports=a.p+"static/media/scan.31d73a10.png"},214:function(e,t,a){e.exports=a.p+"static/media/report.de3131e9.png"},215:function(e,t,a){e.exports=a.p+"static/media/macbook2X_noLabel.c48739a2.jpg"},216:function(e,t,a){e.exports=a.p+"static/media/sd_first.95d1b78a.mp4"},217:function(e,t,a){e.exports=a.p+"static/media/sd_first.b38a653a.webm"},218:function(e,t,a){e.exports=a.p+"static/media/saildroneVideo.725b0990.mp4"},219:function(e,t,a){e.exports=a.p+"static/media/saildroneVideo.e0cb120c.webm"},220:function(e,t,a){e.exports=a.p+"static/media/menu.0d084943.png"},221:function(e,t,a){e.exports=a.p+"static/media/customize.9b6aab96.png"},222:function(e,t,a){e.exports=a.p+"static/media/checkout.addfd443.png"},223:function(e,t,a){e.exports=a.p+"static/media/fl_cover_dark.4df589fe.jpg"},224:function(e,t,a){e.exports=a.p+"static/media/sd_cover.647d1af5.jpg"},225:function(e,t,a){e.exports=a.p+"static/media/s1_cover_faded.0855481f.png"},226:function(e,t,a){e.exports=a.p+"static/media/tb_new_cover.a1f0ef88.jpg"},231:function(e,t,a){e.exports=a(457)},438:function(e,t,a){},439:function(e,t,a){},457:function(e,t,a){"use strict";a.r(t);a(232),a(242);var n=a(0),o=a.n(n),r=a(124),s=a.n(r),i=a(6),l=a(7),c=a(9),m=a(8),d=a(20),u=a(10),p=(a(438),a(439),a(50)),h=a(65),f=a(79);function E(e,t,a,n,o){var r=["/","/sunlife"];setTimeout(function(){if("/"===e)n("#three",["fadeOut","fast"],function(){r.includes(t)?a.push(t):(a.push(t),n(".scrollUpSection",["fadeInUp","fast"]))});else{var o=0;"/"!==t&&(o=0===window.scrollY?0:300,document.body.scrollTop=document.documentElement.scrollTop=0),setTimeout(function(){"/sunlife"===t?(n(".cover",["fadeOut","fast"]),n(".scrollUpSection",["fadeOutDown","fast"],function(){a.push(t)})):"/"!==t||r.includes(e)?(n(".ring-container",["fadeOut","fast"]),n(".cover",["fadeOut","faster"],function(){a.push(t),!r.includes(t)&&r.includes(e)&&n(".scrollUpSection",["fadeInUp","fast"])})):a.push(t)},o)}},o?0:320)}var v=function(e){function t(e){var a;return Object(i.a)(this,t),(a=Object(c.a)(this,Object(m.a)(t).call(this,e))).state={enterTimeout:1e3,leaveTimeout:230,rectOpacity:0,h1Opacity:0},a.handleScroll=a.handleScroll.bind(Object(d.a)(a)),a.routeTo=a.routeTo.bind(Object(d.a)(a)),a}return Object(u.a)(t,e),Object(l.a)(t,[{key:"getHeaderTitle",value:function(e){switch(e){case"/slf":return"Sun Life";case"/soccer1":return"Soccer-1";case"/saildrone":return"Saildrone";case"/fifthlight":return"Fifth Light";case"/teabot":return"teaBot";default:return""}}},{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.handleScroll);var e=document.getElementsByTagName("header")[0].offsetHeight,t=.8*document.documentElement.clientHeight-e;this.setState({headerHeight:e,scrollUpPosition:t,startPosition:t-6*e})}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.handleScroll)}},{key:"componentDidUpdate",value:function(e){this.props.routerProps.location.pathname!==e.routerProps.location.pathname&&this.setState({rectOpacity:0,h1Opacity:0})}},{key:"routeTo",value:function(){Object(h.setBackgroundToBlack)(),this.setState({rectOpacity:0,h1Opacity:0}),E(this.props.routerProps.location.pathname,"/",this.props.routerProps.history,p.animateCSS,!0)}},{key:"handleScroll",value:function(e){if(document.getElementsByClassName("scrollUpSection")[0]){document.documentElement.scrollTop>=this.state.scrollUpPosition?this.setState({rectOpacity:.8,h1Opacity:1}):document.documentElement.scrollTop<this.state.startPosition?this.setState({rectOpacity:0,h1Opacity:0}):document.documentElement.scrollTop>=this.state.startPosition&&this.setState({rectOpacity:document.documentElement.scrollTop/(this.state.scrollUpPosition-this.state.startPosition)-this.state.scrollUpPosition/(this.state.scrollUpPosition-this.state.startPosition)+.8,h1Opacity:document.documentElement.scrollTop/(this.state.scrollUpPosition-this.state.startPosition)-this.state.scrollUpPosition/(this.state.scrollUpPosition-this.state.startPosition)+1});var t=document.querySelector(".cover"),a=document.querySelector(".rect-fill");document.getElementsByClassName("scrollUpSection")[0].getBoundingClientRect().top-document.getElementsByTagName("header")[0].offsetHeight<0?a.classList.add("backDropBlur"):a.classList.remove("backDropBlur"),document.getElementsByClassName("scrollUpSection")[0].getBoundingClientRect().top<0?(t.classList.remove("animated"),t.classList.remove("fadeIn"),t.classList.add("hidden-cover")):t.classList.remove("hidden-cover")}}},{key:"render",value:function(){return o.a.createElement("div",null,o.a.createElement("header",null,o.a.createElement(f.CSSTransitionGroup,{transitionName:"homeicon",transitionEnterTimeout:this.state.enterTimeout,transitionLeaveTimeout:this.state.leaveTimeout},"/"!==this.props.routerProps.location.pathname&&o.a.createElement("div",{onClick:this.routeTo,className:"home-icon"},o.a.createElement("svg",{version:"1.1",x:"0px",y:"0px",viewBox:"0 0 64 64",enableBackground:"new 0 0 64 64",xmlSpace:"preserve"},o.a.createElement("g",null,o.a.createElement("path",{fill:"#FFFFFF",d:"M25.6,53.4V21.9H14.1V10.6h35.8v11.3H38.5v31.5H25.6z"})),o.a.createElement("rect",{x:"43.7",y:"47.2",fill:"#FFFFFF",width:"6.2",height:"6.2"}))))),"/"!==this.props.routerProps.location.pathname&&o.a.createElement("div",{className:"rect-fill",style:{backgroundColor:"rgba(0,0,0,".concat(this.state.rectOpacity)}},o.a.createElement("h1",{style:{opacity:this.state.h1Opacity}},this.getHeaderTitle(this.props.routerProps.location.pathname))))}}]),t}(o.a.Component),b=a(51),g=a(1),w=a(193),y=a(194),U=a(229),R=a(195),O=a(230),X=a(96),k=a(125),N=10500,T=3900,C=-3e3,x=.004,S=function(e){function t(e){var a;return Object(i.a)(this,t),(a=Object(c.a)(this,Object(m.a)(t).call(this,e))).generateTitle=function(){(new y.a).load("name.svg",function(e){for(var t=e.paths,n=new g.p,o=0;o<t.length;o++)for(var r=t[o],s=new g.y({color:r.color,side:g.j,depthWrite:!1}),i=r.toShapes(!0),l=0;l<i.length;l++){var c=i[l],m=new g.N(c);m.applyMatrix((new g.w).makeScale(1,-1,1));var d=new g.x(m,s);n.add(d)}n.scale.set(3,3,3);var u=(new g.c).setFromObject(n),p=new g.U,h=u.getSize(p).x,f=u.getSize(p).y;n.translateX(-h/2),n.translateY(f/2),a.scene.add(n)},function(e){},function(e){})},a.generateGrid=function(){var e=new g.r({color:804471}),t=function(t){for(var n=0;n<4;n++){var o=void 0,r=void 0,s=void 0,i=void 0,l=new g.o;switch(n){case 0:o=-1*N/2,s=N/2,r=N/2,i=N/2;break;case 1:o=N/2,s=N/2,r=N/2,i=-1*N/2;break;case 2:o=N/2,s=-1*N/2,r=-1*N/2,i=-1*N/2;break;case 3:o=-1*N/2,s=-1*N/2,r=-1*N/2,i=N/2}l.vertices.push(new g.U(o,t,s),new g.U(r,t,i));var c=new g.q(l,e);a.scene.add(c)}};t(T),t(C),function(){for(var t=0;t<4;t++){var n=void 0,o=void 0,r=new g.o;switch(t){case 0:n=N/2,o=N/2;break;case 1:n=-1*N/2,o=N/2;break;case 2:n=-1*N/2,o=-1*N/2;break;case 3:n=N/2,o=-1*N/2}r.vertices.push(new g.U(n,T,o),new g.U(n,C,o));var s=new g.q(r,e);a.scene.add(s)}}()},a.getRandomColor=function(e){var t,n=a.state.colorThemeName,o={BLACK:{colorName:"BLACK",colorSet:["1BE7FF","6EEB83","E4FF1A","E8AA14","FF5714","F46036","2E294E","1B998B","E71D36","C5D86D"]},WHITE:{colorName:"WHITE",colorSet:["7B777D","A29F99","A3A09A","85837E","8892A1","737075","57A6CF"]},ALT:{colorName:"COLORNAME",colorSet:["363635","62A87C","617073","4D685A","545775","202C39","1F487E","60B2E5","AEECEF"]},NEW:{colorName:"NEW",colorSet:["022B3A","235789","4C86A8","235789","4C86A8","a80707","8cfc03"]},CAMO:{colorName:"CAMO",colorSet:["BAAD80","4B6329","260500","142513"]}};return t=e?o[e].colorSet[Math.floor(Math.random()*o[e].colorSet.length)]:o[n].colorSet[Math.floor(Math.random()*o[n].colorSet.length)],parseInt("0x"+t)},a.generateSceneObjects=function(){a.group=new g.p;for(var e=new g.d(40,30,40),t=0;t<300;t++){var n=new g.x(e,new g.A({color:a.getRandomColor()}));n.position.x=(2*Math.round(Math.random())-1)*Math.random()*5e3,n.position.y=(2*Math.round(Math.random())-1)*Math.random()*5e3,n.position.z=(2*Math.round(Math.random())-1)*Math.random()*5e3,n.rotation.x=2*Math.random()*Math.PI,n.rotation.y=2*Math.random()*Math.PI,n.rotation.z=2*Math.random()*Math.PI;n.scale.x=.95*(10*Math.random()*2+1),n.scale.y=.95*(5*Math.random()*2+1),n.scale.z=.95*(4*Math.random()*2+1),n.castShadow=!0,n.receiveShadow=!1,a.group.add(n)}a.group.scale.set(.001,.001,.001),a.scaleBlocks(),a.scene.add(a.group)},a.generateFloor=function(){var e=new g.R,t=Object(d.a)(a);e.load("darkness.png",function(e){e.wrapS=g.K,e.wrapT=g.K,e.repeat.set(25,25);var a=new g.z({map:e}),n=new g.G(N,N,8,8),o=new g.x(n,a);o.rotateX(-Math.PI/2),o.position.y=C,t.scene.add(o)})},a.generateSkybox=function(){var e=[],t=(new g.R).load("spaceTest.jpg"),n=(new g.R).load("spaceTest.jpg"),o=(new g.R).load("spaceTest.jpg"),r=(new g.R).load("spaceTest.jpg"),s=(new g.R).load("spaceTest.jpg"),i=(new g.R).load("spaceTest.jpg");e.push(new g.y({map:t})),e.push(new g.y({map:n})),e.push(new g.y({map:o})),e.push(new g.y({map:r})),e.push(new g.y({map:s})),e.push(new g.y({map:i}));for(var l=0;l<6;l++)e[l].side=g.b;var c=new g.d(3e4,3e4,3e4),m=new g.x(c,e);a.scene.add(m)},a.sceneSetup=function(){var e=window.innerWidth,t=window.innerHeight;a.scene=new g.L,a.camera=new g.E(70,e/t,1,3*N),a.camera.position.z=5061,a.camera.position.y=-1144;var n=new g.Q(16777215,.3),o=new g.a(3223857);n.position.set(0,5e3,0),a.scene.add(n),a.scene.add(o),a.renderer=new g.W({antialias:!0}),a.renderer.setSize(e,t),a.renderer.setPixelRatio(window.devicePixelRatio),a.renderer.shadowMap.enabled=!0,a.renderer.shadowMap.type=g.C,a.controls=new w.a(a.camera,a.renderer.domElement),a.controls.enabled=!0,a.controls.enableZoom=!0,a.controls.enablePan=!1,a.controls.enableDamping=!1,a.controls.maxDistance=6e3,a.composer=new U.a(a.renderer),a.composer.addPass(new R.a(a.scene,a.camera));var r=new O.a;a.composer.addPass(r),a.scene.background=new g.g(0),a.mount.appendChild(a.renderer.domElement)},a.startAnimationLoop=function(){a.rotateBlocks(),a.state.glitchEnabled?a.composer.render():a.renderer.render(a.scene,a.camera),X.a.update(),a.frameId=window.requestAnimationFrame(a.startAnimationLoop)},a.zoomCamera=function(e){var t,n=new g.U(0,0,0),o=new g.U(a.camera.position.x,a.camera.position.y,a.camera.position.z),r=n.distanceTo(o);t=e>0?r+400:r-400;var s=o.sub(n).setLength(t).add(n);return new X.a.Tween(a.camera.position).to(s,180).start()},a.rotateBlocks=function(){a.group.children.forEach(function(e){e.rotateX(x)})},a.scaleBlocks=function(){setTimeout(function(){return new X.a.Tween(a.group.scale).to({x:1,y:1,z:1},160).start()},500)},a.glitch=function(e){a.setState({glitchEnabled:!0}),setTimeout(function(){a.setState({glitchEnabled:!1})},e)},a.updateDimensions=function(){a.renderer.setSize(window.innerWidth,window.innerHeight),a.camera.aspect=window.innerWidth/window.innerHeight,a.camera.updateProjectionMatrix()},a.state={showWebGLNotice:!1,colorThemeName:"NEW",glitchEnabled:!1},a}return Object(u.a)(t,e),Object(l.a)(t,[{key:"componentDidMount",value:function(){if(window.WebGLRenderingContext)this.sceneSetup(),this.generateSceneObjects(),this.generateGrid(),this.generateTitle(),this.glitch(700),Object(p.animateCSS)("#three",["fadeIn"],function(){Object(h.setBackgroundToBlack)()}),this.startAnimationLoop(),window.addEventListener("resize",this.updateDimensions);else{var e=document.createElement("span"),t=document.createTextNode("Unable to initialize WebGL. Your browser or machine may not support it.");e.appendChild(t),this.mount.appendChild(e),this.setState({showWebGLNotice:!0})}}},{key:"componentWillUnmount",value:function(){if(!this.state.showWebGLNotice){window.removeEventListener("resize",this.updateDimensions),window.cancelAnimationFrame(this.frameId),this.controls.dispose(),this.scene.traverse(function(e){if(e.isMesh)if(e.geometry.dispose(),e.material.isMaterial)Object(k.cleanMaterial)(e.material);else{var t=!0,a=!1,n=void 0;try{for(var o,r=e.material[Symbol.iterator]();!(t=(o=r.next()).done);t=!0){var s=o.value;Object(k.cleanMaterial)(s)}}catch(i){a=!0,n=i}finally{try{t||null==r.return||r.return()}finally{if(a)throw n}}}});for(var e=this.scene.children.length-1;e>=0;e--)this.scene.remove(this.scene.children[e]);this.scene.dispose(),this.scene=null}}},{key:"componentDidUpdate",value:function(e){this.state.showWebGLNotice||this.props.blurOn!==e.blurOn&&(this.props.blurOn?this.zoomCamera(1):this.zoomCamera(-1))}},{key:"render",value:function(){var e=this;return o.a.createElement("div",{id:"three",className:"".concat(this.state.showWebGLNotice?"webgl-notice":""),ref:function(t){return e.mount=t}})}}]),t}(o.a.Component),j=function(e){function t(e){var a;return Object(i.a)(this,t),(a=Object(c.a)(this,Object(m.a)(t).call(this,e))).state={route:a.props.routerProps.location.pathname,urls:["/sunlife","/soccer1","/saildrone","/fifthlight","/teabot"]},a.prevRoute=a.prevRoute.bind(Object(d.a)(a)),a.nextRoute=a.nextRoute.bind(Object(d.a)(a)),a}return Object(u.a)(t,e),Object(l.a)(t,[{key:"routeTo",value:function(e){E(this.state.route,e,this.props.routerProps.history,p.animateCSS)}},{key:"prevRoute",value:function(){var e=this.state.urls.indexOf(this.state.route);0===e?this.routeTo(this.state.urls[this.state.urls.length-1]):this.routeTo(this.state.urls[e-1])}},{key:"nextRoute",value:function(){var e=this.state.urls.indexOf(this.state.route);e===this.state.urls.length-1?this.routeTo(this.state.urls[0]):this.routeTo(this.state.urls[e+1])}},{key:"render",value:function(){return o.a.createElement("div",null,o.a.createElement("div",{onClick:this.prevRoute,className:"side-text-left ".concat("/sunlife"===this.state.route?"fadedArrow":"")},o.a.createElement("svg",{version:"1.1",width:"512",height:"512",viewBox:"0 0 512 512"},o.a.createElement("path",{fill:"#FFFFFF",d:"M158.628 177.372l-45.256 45.256 142.628 142.627 142.627-142.628-45.254-45.254-97.373 97.372z"}))),o.a.createElement("div",{onClick:this.nextRoute,className:"side-text-right"},o.a.createElement("svg",{version:"1.1",width:"512",height:"512",viewBox:"0 0 512 512"},o.a.createElement("path",{fill:"#FFFFFF",d:"M158.628 177.372l-45.256 45.256 142.628 142.627 142.627-142.628-45.254-45.254-97.373 97.372z"}))))}}]),t}(o.a.Component);function A(){return(A=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function M(e,t){if(null==e)return{};var a,n,o=function(e,t){if(null==e)return{};var a,n,o={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(o[a]=e[a]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}var L=o.a.createElement("g",null,o.a.createElement("path",{fill:"#595A60",d:"M293.7,555c-0.1,24.8-20.3,45-45.1,45H48.1c-24.8,0-45-20.2-45-45V45c0-24.8,20.2-45,45-45h201.7 c24.8,0,45,20.2,44.9,45L293.7,555z"}),o.a.createElement("path",{fill:"#83848A",d:"M48.1,598c-23.7,0-43-19.3-43-43V45c0-23.7,19.3-43,43-43h201.7c11.4,0,22.2,4.5,30.3,12.6 s12.6,18.9,12.6,30.4l-1.1,510c0,23.7-19.4,43-43.1,43H48.1z"}),o.a.createElement("path",{fill:"#111111",d:"M48.1,596c-22.6,0-41-18.4-41-41V45c0-22.6,18.4-41,41-41h201.7c10.9,0,21.2,4.3,28.9,12 c7.8,7.8,12,18,12,28.9l-1.1,510c0,22.6-18.5,41-41.1,41H48.1z"}),o.a.createElement("path",{d:"M48.1,594c-21.5,0-39-17.5-39-39V45c0-21.5,17.5-39,39-39h201.7c10.4,0,20.1,4.1,27.5,11.5c7.4,7.4,11.4,17.2,11.4,27.5 l-1.1,510c0,21.5-17.6,39-39.1,39L48.1,594L48.1,594L48.1,594z"}),o.a.createElement("path",{fill:"#323232",d:"M12.5,555V45c0-14,6.7-26.5,17.2-34.3C17.4,17.3,9.1,30.2,9.1,45v510c0,14.8,8.3,27.7,20.5,34.3 C19.2,581.5,12.5,569,12.5,555z"})),F=o.a.createElement("path",{d:"M19.6,530.8V73.2h258.7l-1.2,457.7H19.6z M276.6,532.3c1.1,0,2-0.9,2-2l1.2-456.7c0-1.1-0.9-2-2-2H20.1c-1.1,0-2,0.9-2,2 v456.7c0,1.1,0.9,2,2,2H276.6z"}),I=o.a.createElement("path",{fill:"url(#IPHONESVG_1_)",d:"M148.3,541.4c-12.9,0-23.4,10.5-23.4,23.4c0,6.5,2.6,12.3,6.8,16.5l33-33 C160.4,543.9,154.5,541.4,148.3,541.4z"}),P=o.a.createElement("path",{fill:"url(#IPHONESVG_2_)",d:"M171.6,564.8c0-6.2-2.5-12.1-6.8-16.5l-33,33c4.4,4.4,10.3,6.9,16.5,6.8 C161.2,588.1,171.6,577.7,171.6,564.8z"}),B=o.a.createElement("path",{d:"M127.3,564.8c0,11.5,9.4,20.9,20.9,20.9c11.5,0,20.9-9.4,20.9-20.9c0-11.5-9.4-20.9-20.9-20.9 C136.7,543.9,127.3,553.2,127.3,564.8z"}),H=o.a.createElement("path",{fill:"url(#IPHONESVG_3_)",d:"M97,38c0,2.6,2.1,4.7,4.7,4.7s4.7-2.1,4.7-4.7c0,0,0,0,0,0c0-2.6-2.1-4.7-4.7-4.7 C99.1,33.4,97,35.5,97,38"}),D=o.a.createElement("path",{fill:"#3F5A83",d:"M99.8,39.1c0-0.4,0.4-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8c0,0.4-0.4,0.8-0.8,0.8S99.8,39.5,99.8,39.1"}),z=o.a.createElement("path",{fill:"url(#IPHONESVG_4_)",d:"M1.5,185c-0.8,0-1.5,0.7-1.5,1.5L0,225c0,0.8,0.7,1.5,1.5,1.5h1.7V185H1.5z"}),V=o.a.createElement("path",{fill:"url(#IPHONESVG_5_)",d:"M1.6,187.2c0-0.8-0.3-1.5-0.7-2.1c-0.6,0.2-0.9,0.8-0.9,1.4L0,225c0,0.6,0.4,1.1,0.9,1.4 c0.5-0.6,0.7-1.3,0.7-2.1L1.6,187.2z"}),G=o.a.createElement("path",{fill:"url(#IPHONESVG_6_)",d:"M1.5,131c-0.8,0-1.5,0.7-1.5,1.5L0,171c0,0.8,0.7,1.5,1.5,1.5h1.7V131H1.5z"}),W=o.a.createElement("path",{fill:"url(#IPHONESVG_7_)",d:"M1.6,133.2c0-0.8-0.3-1.5-0.7-2.1c-0.6,0.2-0.9,0.8-0.9,1.4L0,171c0,0.6,0.4,1.1,0.9,1.4 c0.5-0.6,0.7-1.3,0.7-2.1L1.6,133.2z"}),K=o.a.createElement("path",{fill:"#212121",d:"M285.2,555V45c0-14-6.7-26.5-17.2-34.3c12.2,6.6,20.5,19.5,20.5,34.3v510c0,14.8-8.3,27.7-20.5,34.3 C278.4,581.5,285.2,569,285.2,555z"}),q=o.a.createElement("g",null,o.a.createElement("path",{fill:"#505050",d:"M292.7,45.3l0,8.6h2l0-8.6"}),o.a.createElement("path",{fill:"#6E6E6E",d:"M290.7,53.9h2l0-8.6h-2"}),o.a.createElement("path",{fill:"#505050",d:"M5.1,45.3l0,8.6h-2l0-8.6"}),o.a.createElement("path",{fill:"#6E6E6E",d:"M7.1,53.9h-2l0-8.6h2"})),J=o.a.createElement("path",{d:"M19.6,532.3c-0.8,0-1.5-0.7-1.5-1.5V73.2c0-0.8,0.7-1.5,1.5-1.5h258.1c0.8,0,1.5,0.7,1.5,1.5v457.7c0,0.8-0.7,1.5-1.5,1.5 H19.6z M277.7,530.8V73.2H19.6v457.7H277.7z"}),Q=o.a.createElement("path",{fill:"#1A1A1A",stroke:"#0D0D0D",strokeWidth:.136,d:"M128.1,40.2c-1.2,0-2.2-1-2.2-2.2v-0.2c0-1.2,1-2.2,2.2-2.2h41.7 c1.2,0,2.2,1,2.2,2.2V38c0,1.2-1,2.2-2.2,2.2H128.1z"}),Z=o.a.createElement("path",{fill:"none",d:"M128.1,35.6c-1.2,0-2.2,1-2.2,2.2V38c0,1.2,1,2.2,2.2,2.2h41.7c1.2,0,2.2-1,2.2-2.2v-0.2c0-1.2-1-2.2-2.2-2.2 H128.1z"}),Y=o.a.createElement("path",{fill:"url(#IPHONESVG_8_)",d:"M145,18c0,1.9,1.5,3.4,3.3,3.5c1.9,0,3.4-1.5,3.5-3.3c0,0,0-0.1,0-0.1c0-1.9-1.6-3.4-3.5-3.3 C146.5,14.7,145,16.2,145,18"}),_=function(e){var t=e.svgRef,a=M(e,["svgRef"]);return o.a.createElement("svg",A({x:"0px",y:"0px",viewBox:"0 0 294.7 600",enableBackground:"new 0 0 294.7 600",xmlSpace:"preserve",ref:t},a),o.a.createElement("g",null,L,F,o.a.createElement("g",null,o.a.createElement("linearGradient",{id:"IPHONESVG_1_",gradientUnits:"userSpaceOnUse",x1:-137.2615,y1:705.5685,x2:-136.7999,y2:705.0101,gradientTransform:"matrix(39.88 0 0 -39.882 5606.9712 28685.8789)"},o.a.createElement("stop",{offset:0,style:{stopColor:"#0A0A0A"}}),o.a.createElement("stop",{offset:.5263,style:{stopColor:"#353535"}}),o.a.createElement("stop",{offset:1,style:{stopColor:"#656565"}})),I,o.a.createElement("linearGradient",{id:"IPHONESVG_2_",gradientUnits:"userSpaceOnUse",x1:-136.6682,y1:704.8604,x2:-137.0466,y2:705.2754,gradientTransform:"matrix(39.881 0 0 -39.881 5613.96 28692.0156)"},o.a.createElement("stop",{offset:0,style:{stopColor:"#0A0A0A"}}),o.a.createElement("stop",{offset:.4251,style:{stopColor:"#353535"}}),o.a.createElement("stop",{offset:.83,style:{stopColor:"#575757"}})),P,B),o.a.createElement("linearGradient",{id:"IPHONESVG_3_",gradientUnits:"userSpaceOnUse",x1:-125.7053,y1:697.9696,x2:-124.9982,y2:697.2625,gradientTransform:"matrix(9.308 0 0 -9.308 1268.4148 6531.4409)"},o.a.createElement("stop",{offset:0,style:{stopColor:"#1A1A1A"}}),o.a.createElement("stop",{offset:.5992,style:{stopColor:"#353535"}}),o.a.createElement("stop",{offset:1,style:{stopColor:"#5A5A5A"}})),H,D,o.a.createElement("g",null,o.a.createElement("linearGradient",{id:"IPHONESVG_4_",gradientUnits:"userSpaceOnUse",x1:-95.5096,y1:705.7754,x2:-95.5096,y2:704.7837,gradientTransform:"matrix(3.134 0 0 -41.5 300.894 29474.9863)"},o.a.createElement("stop",{offset:0,style:{stopColor:"#666666"}}),o.a.createElement("stop",{offset:.1417,style:{stopColor:"#ADADAD"}}),o.a.createElement("stop",{offset:.8302,style:{stopColor:"#B8B8B8"}}),o.a.createElement("stop",{offset:1,style:{stopColor:"#666666"}})),z,o.a.createElement("linearGradient",{id:"IPHONESVG_5_",gradientUnits:"userSpaceOnUse",x1:-54.2087,y1:705.7966,x2:-54.2087,y2:704.7376,gradientTransform:"matrix(1.634 0 0 -41.273 89.394 29314.3867)"},o.a.createElement("stop",{offset:0,style:{stopColor:"#4F4F4F"}}),o.a.createElement("stop",{offset:.1417,style:{stopColor:"#7A7A7A"}}),o.a.createElement("stop",{offset:.8302,style:{stopColor:"#858585"}}),o.a.createElement("stop",{offset:1,style:{stopColor:"#404040"}})),V),o.a.createElement("g",null,o.a.createElement("linearGradient",{id:"IPHONESVG_6_",gradientUnits:"userSpaceOnUse",x1:-95.5096,y1:705.7754,x2:-95.5096,y2:704.7837,gradientTransform:"matrix(3.134 0 0 -41.5 300.894 29420.9863)"},o.a.createElement("stop",{offset:0,style:{stopColor:"#666666"}}),o.a.createElement("stop",{offset:.1417,style:{stopColor:"#ADADAD"}}),o.a.createElement("stop",{offset:.8302,style:{stopColor:"#B8B8B8"}}),o.a.createElement("stop",{offset:1,style:{stopColor:"#666666"}})),G,o.a.createElement("linearGradient",{id:"IPHONESVG_7_",gradientUnits:"userSpaceOnUse",x1:-54.2087,y1:705.7966,x2:-54.2087,y2:704.7376,gradientTransform:"matrix(1.634 0 0 -41.273 89.394 29260.3867)"},o.a.createElement("stop",{offset:0,style:{stopColor:"#4F4F4F"}}),o.a.createElement("stop",{offset:.1417,style:{stopColor:"#7A7A7A"}}),o.a.createElement("stop",{offset:.8302,style:{stopColor:"#858585"}}),o.a.createElement("stop",{offset:1,style:{stopColor:"#404040"}})),W),K,q,J,Q,Z,o.a.createElement("radialGradient",{id:"IPHONESVG_8_",cx:-119.7891,cy:693.9844,r:.5,gradientTransform:"matrix(6.808 0 0 -6.807 963.9155 4742.0396)",gradientUnits:"userSpaceOnUse"},o.a.createElement("stop",{offset:0,style:{stopColor:"#454545"}}),o.a.createElement("stop",{offset:.5587,style:{stopColor:"#353535"}}),o.a.createElement("stop",{offset:1,style:{stopColor:"#1A1A1A"}})),Y))},$=o.a.forwardRef(function(e,t){return o.a.createElement(_,A({svgRef:t},e))}),ee=(a.p,a(196)),te=a.n(ee),ae=a(5),ne=a.n(ae),oe=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){return o.a.createElement("div",{className:"iphone-container"},o.a.createElement($,null),o.a.createElement("div",{className:"video-container"},o.a.createElement(ne.a,null,o.a.createElement("video",{loop:!0,autoPlay:!0,muted:!0,playsInline:!0},o.a.createElement("source",{src:this.props.src,type:"video/mp4"}),o.a.createElement("source",{src:this.props.webmsrc,type:"video/webm"}),o.a.createElement("img",{src:te.a,alt:"Your browser does not support the <video> tag"})))))}}]),t}(o.a.Component),re=function(e){function t(e){var a;return Object(i.a)(this,t),(a=Object(c.a)(this,Object(m.a)(t).call(this,e))).state={activeTab:a.props.tabdata[0],tabs:a.props.tabdata},a.setActiveTab=a.setActiveTab.bind(Object(d.a)(a)),a}return Object(u.a)(t,e),Object(l.a)(t,[{key:"setActiveTab",value:function(e){this.setState({activeTab:this.state.tabs[e]})}},{key:"render",value:function(){var e=this;return o.a.createElement("div",{className:"tabbed-content"},o.a.createElement("div",{className:"title-row"},this.state.tabs.map(function(t){return o.a.createElement("div",{className:"tab-title ".concat(e.state.activeTab.id===t.id?"activeTitle":""),key:t.id,onClick:e.setActiveTab.bind(e,t.id)},t.title)})),o.a.createElement("p",{className:"tab-content-area"},this.state.activeTab.text))}}]),t}(o.a.Component),se=function(e){function t(e){var a;return Object(i.a)(this,t),(a=Object(c.a)(this,Object(m.a)(t).call(this,e))).state={emailOn:!1},a.showEmail=a.showEmail.bind(Object(d.a)(a)),a}return Object(u.a)(t,e),Object(l.a)(t,[{key:"showEmail",value:function(){this.setState({emailOn:!0})}},{key:"handleInputClick",value:function(e){e.target.select()}},{key:"render",value:function(){return o.a.createElement("div",null,o.a.createElement("footer",{onClick:this.showEmail,className:"".concat(this.state.emailOn?"emailFooter":"")},this.state.emailOn&&o.a.createElement("div",{className:"email-display"},o.a.createElement("input",{type:"text",onClick:this.handleInputClick,defaultValue:"taylordotsikas@gmail.com"})),!this.state.emailOn&&o.a.createElement("div",{className:"center-content"},o.a.createElement("h1",null,"Taylor Dotsikas"),o.a.createElement("span",null,"Get in touch"))))}}]),t}(o.a.Component),ie=.28*document.documentElement.clientHeight,le=function(e){function t(e){var a;return Object(i.a)(this,t),(a=Object(c.a)(this,Object(m.a)(t).call(this,e))).state={opacity:1},a.handleScroll=a.handleScroll.bind(Object(d.a)(a)),a}return Object(u.a)(t,e),Object(l.a)(t,[{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.handleScroll)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.handleScroll)}},{key:"handleScroll",value:function(){this.setState({opacity:-1*document.documentElement.scrollTop/ie+1})}},{key:"render",value:function(){return o.a.createElement("div",{className:"animated fadeIn cover",id:this.props.coverId,style:this.props.coverStyle},o.a.createElement("div",{className:"cover-headline",style:{opacity:this.state.opacity}},o.a.createElement("h1",null,this.props.content.h1),o.a.createElement("h2",null,this.props.content.h2),o.a.createElement("h3",null,this.props.content.h3)))}}]),t}(o.a.Component),ce=a(197),me=a.n(ce),de=a(198),ue=a.n(de),pe=a(199),he=a.n(pe),fe=a(200),Ee=a.n(fe),ve=a(201),be=a.n(ve),ge=a(202),we=a.n(ge),ye=a(203),Ue=a.n(ye),Re=a(204),Oe=a.n(Re),Xe=a(205),ke=a.n(Xe),Ne=a(206),Te=a.n(Ne),Ce=a(207),xe=a.n(Ce),Se=a(208),je=a.n(Se),Ae=a(209),Me=a.n(Ae),Le=a(210),Fe=a.n(Le),Ie=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){var e={backgroundImage:"url(".concat(this.props.cover,")")};return o.a.createElement("div",{className:"portfolio-feature"},o.a.createElement(j,{routerProps:this.props}),o.a.createElement(le,{content:{h1:"Soccer-1",h2:"Design and development",h3:"2016 - 2017"},coverId:"s1_background",coverStyle:e}),o.a.createElement("div",{className:"scrollUpBack"},o.a.createElement("div",{className:"scrollUpSection"},o.a.createElement("div",{className:"overview-banner"},o.a.createElement("div",{className:"banner-container"},o.a.createElement("p",null,"Soccer-1 was a mobile application for improving your soccer skills and connecting with players and coaches."),o.a.createElement("p",null,"The project called for combining a 3D learning experience, a regimented personalized training assistant, an extensive social network, and a tool for soccer coaches into one application. A high degree of organization and consistency was required to bring all of these features together."))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel"},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"An engaging learning experience")),o.a.createElement(oe,{src:me.a,webmsrc:Oe.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Using state of the art motion capture, the movements of professional soccer players were recorded as they performed the fundamentals of the game."),o.a.createElement("p",null,"I combined the motion capture data with the knowledge from the sports science team to create an experience that helps the user improve their kicking, passing, dribbling, and much more.")),o.a.createElement(re,{tabdata:[{title:"Hologram assist",id:0,text:"3D hologram elements were added to highlight the importance of certain aspects of a move. This proved to be more effective and engaging rather than overlaying descriptive text on the 3D model. I wrote the code to be performant and scalable so it could be applied to all the motion capture data and run smoothly on a mobile phone. The elements were refined through user feedback until users understood what the elements were highlighting."},{title:"360 degree view",id:1,text:"If you are learning a soccer move from a video, you can only see what the camera shows you. With a 3D environment, the user has full control over the camera position. For example, the user can move the camera and zoom in on the kicking foot to see exactly where to strike the ball to deliver the most power."},{title:"Motion control",id:2,text:"If you are watching a video of a soccer move, you will find yourself pausing and rewinding to analyze a specific moment. Adding the motion controller enables the user with complete fine grained control over viewing every moment during the move."}]}))),o.a.createElement("div",{className:"content-panel alt-content-panel"},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Personalized Training")),o.a.createElement(oe,{src:ue.a,webmsrc:ke.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Tapping the soccer ball in the bottom left corner opens up a customized training program. The skill training facilitates practicing and asks for the user\u2019s personal feedback each time a technique is completed. The feedback generates corrective exercises to address the user\u2019s problem areas."),o.a.createElement("p",null,"A bright theme was applied to make it easier to read for the primary use case of being outside. The list of assigned techniques is displayed up front so the user\u2019s workload can be understood at a glance. Illustrations were added as a visual assist to the text in the detail view.")))),o.a.createElement("div",{className:"content-panel"},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Your training schedule at a glance")),o.a.createElement(oe,{src:he.a,webmsrc:Te.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Training sessions are scheduled so that your body is resting in between sessions for the optimal amount of time."),o.a.createElement("p",null,"The calendar view displays markers on selected dates to give the user an overview of their training schedule."),o.a.createElement("p",null,"When a day is selected, everything you need to know about that day is shown in the detail section.")))),o.a.createElement("div",{className:"content-panel alt-content-panel"},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"A community for soccer")),o.a.createElement(oe,{src:Ee.a,webmsrc:xe.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Tapping the newsfeed icon in the bottom right corner opens up the community. Soccer-1 valued the ability for users to connect with each other. Multimedia sharing between users was a priority since the beginning of development."),o.a.createElement("p",null,"Users can login and register with social media, upload a profile picture, and post content to their feeds.")))),o.a.createElement("div",{className:"content-panel"},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Customizable profiles")),o.a.createElement(oe,{src:be.a,webmsrc:je.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Soccer players identify with their number and uniform. A customized jersey can be added to style your profile."),o.a.createElement("p",null,"Change your jersey and the player in the 3D model will instantly wear your custom jersey.")))),o.a.createElement("div",{className:"content-panel alt-content-panel"},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"A tool for coaches")),o.a.createElement(oe,{src:we.a,webmsrc:Me.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Soccer-1 decided to explore the coaching space. Groups were introduced to the social network as a means for coaches to organize their players and view player data.")),o.a.createElement(re,{tabdata:[{title:"Coach Dashboard",id:0,text:"Player data is accessible to the coach through a clear layout accessible from the group page. If a soccer team trains with the app, then the coach will receive valuable data which can be used to coach players more effectively."},{title:"Location based organization",id:1,text:"Groups and coaches were deiscoverable to players by location. I implemented a simple map interface with Google Maps Javascript API to accomplish this. A group can invite a coach to join them or a coach can request to coach a group."}]}))),o.a.createElement("div",{className:"content-panel"},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Explore the app as a visitor")),o.a.createElement(oe,{src:Ue.a,webmsrc:Fe.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Getting users to adopt your application is a challenge for any client facing business. A good first impression needs to be made in order to convert a visitor to a real user."))))),o.a.createElement(se,null))))}}]),t}(o.a.Component),Pe=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){return o.a.createElement("div",{className:"".concat(this.props.landscape?"ipadFeatureLandscape":"ipadFeaturePortrait")},o.a.createElement(ne.a,null,o.a.createElement("img",{src:this.props.src,alt:"Ipad"})))}}]),t}(o.a.Component),Be=a(211),He=a.n(Be),De=a(212),ze=a.n(De),Ve=a(213),Ge=a.n(Ve),We=a(214),Ke=a.n(We),qe=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){var e={backgroundImage:"url(".concat(this.props.cover,")")};return o.a.createElement("div",{className:"portfolio-feature"},o.a.createElement(j,{routerProps:this.props}),o.a.createElement(le,{content:{h1:"Fifth light",h2:"Design",h3:"2015"},coverId:"fl_background",coverStyle:e}),o.a.createElement("div",{className:"scrollUpBack"},o.a.createElement("div",{className:"scrollUpSection"},o.a.createElement("div",{className:"overview-banner"},o.a.createElement("div",{className:"banner-container"},o.a.createElement("p",null,"Fifth Light installs electrical devices in buildings and connects them to their management software for maintenance and control. I designed the user interface for a tablet application that assists a worker with installing the electrical devices."),o.a.createElement("p",null,"In the application, there is a tool for adding devices to the system, and a tool that scans the system to make sure everything was installed correctly."))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel full-width-content",style:{minHeight:"auto"}},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Built for speed")),o.a.createElement(Pe,{src:He.a,landscape:!0}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"The client wanted an interface that would speed up the process of adding devices to the system. A tablet was selected as the best device for the worker to hold while walking around a building during the setup process."),o.a.createElement("p",null,"The installed devices appear in a list on the left side of the screen. Up and down arrow buttons are used to select devices in the list. The buttons are placed in close proximity to the worker\u2019s left hand for ergonomic comfort and ease of use."),o.a.createElement("p",null,"The primary use case is pressing the down arrow button to highlight a device in the list, and then tapping the device on the floor plan (not shown) to add its address ID into the field."))))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel full-width-content",style:{minHeight:"auto"}},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Complete system status visibility")),o.a.createElement(Pe,{src:ze.a,landscape:!0}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Once all devices are connected, the worker then runs an installation check scan to see if everything is working correctly."),o.a.createElement("p",null,"The home screen displays a list of ongoing and past scans for a full historical diagnosis of the system."))),o.a.createElement(Pe,{src:Ge.a,landscape:!0}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"The play button starts a new scan. During a scan, the worker is kept informed as the lighting control panels get updated with the latest information about the system. They can be expanded for a more detailed breakdown of all their installed devices."))))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel full-width-content",style:{minHeight:"auto"}},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Detailed report")),o.a.createElement(Pe,{src:Ke.a,landscape:!0}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"When the scan is finished, the worker is shown a report. The same expanding panels are used to allow the worker to view more information if they choose to. The status of each panel is shown even when the panel is closed, so at a glance, the worker can tell if there is a problem in the panel they need to bring their attention to."),o.a.createElement("p",null,"If there are errors or warnings, they are listed at the top of the expanded panel. The worker can then fix the issues and then run the scan again to ensure that there are no more problems."),o.a.createElement("p",null,"The application assists the worker during every step of the job allowing them to finish on time."))))),o.a.createElement(se,null))))}}]),t}(o.a.Component),Je=a(215),Qe=a.n(Je),Ze=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){return o.a.createElement("div",{className:"desktop-video"},o.a.createElement("img",{src:Qe.a,alt:"Macbook"}),o.a.createElement("div",{className:"video-container"},o.a.createElement(ne.a,null,o.a.createElement("video",{loop:!0,autoPlay:!0,playsInline:!0,muted:!0},o.a.createElement("source",{src:this.props.src,type:"video/mp4"}),o.a.createElement("source",{src:this.props.webmsrc,type:"video/webm"})))))}}]),t}(o.a.Component),Ye=a(216),_e=a.n(Ye),$e=a(217),et=a.n($e),tt=a(218),at=a.n(tt),nt=a(219),ot=a.n(nt),rt=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){var e={backgroundImage:"url(".concat(this.props.cover,")")};return o.a.createElement("div",{className:"portfolio-feature"},o.a.createElement(j,{routerProps:this.props}),o.a.createElement(le,{content:{h1:"Saildrone mission builder",h2:"Design and development",h3:"2016"},coverId:"sd_background",coverStyle:e}),o.a.createElement("div",{className:"scrollUpBack"},o.a.createElement("div",{className:"scrollUpSection"},o.a.createElement("div",{className:"overview-banner"},o.a.createElement("div",{className:"banner-container"},o.a.createElement("p",null,"Saildrone utilizes a fleet of autonomous drone sailboats to collect high resolution ocean data. I created a desktop web application that clients can use to easily plan and manage their ocean data collection missions."))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel full-width-content",style:{minHeight:"auto"}},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Define your data mission")),o.a.createElement(Ze,{src:_e.a,webmsrc:et.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Defining your mission is broken down into 3 simple steps. Answer some questions, define coordinates, and submit your mission by creating an account.")),o.a.createElement(re,{tabdata:[{title:"State Awareness",id:0,text:"The user is always aware of what step they are on by viewing the navigation at the top. At the bottom of the fixed panel, there are back and next buttons that let the user anticipate what has to be done next and smoothly guide them through the process."},{title:"Explorable interface",id:1,text:"The user doesn\u2019t need to create an account until the very end. They are free to begin with filling out the form or defining coordinates. The path of least resistance is outlined to the user, but those who wish to explore are free to do so."}]})))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel full-width-content",style:{minHeight:"auto"}},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Map based planning")),o.a.createElement(Ze,{src:at.a,webmsrc:ot.a}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"A map based interface was the best solution for the user to select where they want to send their saildrone."),o.a.createElement("p",null,"The user can choose to define waypoints for the saildrone to travel to, or a rough area where they want the saildrone to explore. GPS coordinates are displayed over the cursor for users who want to explore precise locations. Coordinates appear in the side panel as you choose them. Navionics API for google maps was also integrated to reveal more ocean data on the map."),o.a.createElement("p",null,"The app is complete with a login system to review and edit your mission as well as an administrator panel for the Saildrone team to proceed with conducting the submitted missions.")),o.a.createElement(re,{tabdata:[{title:"Always allow undo",id:0,text:"Each action can be undone with the undo button. You can also click and drag data points on the map to move them and expand areas by adding points to them. Doing so will automatically update the coordinates in the side panel."},{title:"Simple submission",id:1,text:"To submit your mission you simply supply your email and password!"}]})))),o.a.createElement(se,null))))}}]),t}(o.a.Component),st=a(220),it=a.n(st),lt=a(221),ct=a.n(lt),mt=a(222),dt=a.n(mt),ut=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){var e={backgroundImage:"url(".concat(this.props.cover,")")};return o.a.createElement("div",{className:"portfolio-feature"},o.a.createElement(j,{routerProps:this.props}),o.a.createElement(le,{content:{h1:"teabot",h2:"Design",h3:"2014"},coverId:"tb_background",coverStyle:e}),o.a.createElement("div",{className:"scrollUpBack"},o.a.createElement("div",{className:"scrollUpSection"},o.a.createElement("div",{className:"overview-banner"},o.a.createElement("div",{className:"banner-container"},o.a.createElement("p",null,"teaBOT created and deployed custom tea making machines. I redesigned the user interface of the tablet application that controled the machine."))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel full-width-content",style:{minHeight:"auto"}},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Quick and easy customer experience")),o.a.createElement(Pe,{src:it.a,landscape:!1}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"The customer approaches the machine and the menu screen is displayed on the tablet. From here, a custom blend can be created, or one of the pre made blends can be chosen. Pre made blends are ordered by popularity. The screen can be swiped to reveal more. Each blend is color coded for the type of tea it is comprised of."))))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel full-width-content",style:{minHeight:"auto"}},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Simple customization")),o.a.createElement(Pe,{src:ct.a,landscape:!1}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"The customer has the ability to create their own blend of tea. Up to three blends can be added and their proportions can be configured with the plus and minus buttons. The strength and caffeine level of the resulting blend is displayed graphically with progress bars. Condiments can can also be added to the tea with the plus and minus buttons."),o.a.createElement("p",null,"Finally, the thermometer on the right defaults to the optimal temperature setting. The customer has the ability to drag the line up or down to adjust the temperature."))))),o.a.createElement("div",{className:"content-section"},o.a.createElement("div",{className:"content-panel full-width-content",style:{minHeight:"auto"}},o.a.createElement(ne.a,null,o.a.createElement("h1",null,"Checkout")),o.a.createElement(Pe,{src:dt.a,landscape:!1}),o.a.createElement("div",{className:"description-area"},o.a.createElement(ne.a,null,o.a.createElement("p",null,"Tapping a blend, or confirming your customized blend brings you to the Checkout page. From here, the user can customize their pre made selection or tap \u201cMake Blend\u201d to tell the machine to begin pouring."),o.a.createElement("p",null,"Every detail of the order is clearly displayed on the page for the customer to review."))))),o.a.createElement(se,null))))}}]),t}(o.a.Component),pt=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){return o.a.createElement("div",{className:"portfolio-feature three-feature"},o.a.createElement(j,{routerProps:this.props}),o.a.createElement("div",{className:"cover slf-cover",id:"s1_background"},o.a.createElement("div",{className:"animated fadeIn cover-headline slf-cover-headline"},o.a.createElement("h1",null,"Sun Life"),o.a.createElement("h2",null,"Development"),o.a.createElement("h3",{onClick:function(){return window.open("https://www.amazon.ca/Sun-Life-Financial/dp/B07F7F52J5")}},"View Alexa Skill"))),o.a.createElement("div",{className:"animated fadeIn ring-container"},o.a.createElement("div",{className:"blue-ring"},o.a.createElement("div",{className:"black-cover"}))))}}]),t}(o.a.Component),ht=a(223),ft=a.n(ht),Et=a(224),vt=a.n(Et),bt=a(225),gt=a.n(bt),wt=a(226),yt=a.n(wt),Ut=function(e){function t(){return Object(i.a)(this,t),Object(c.a)(this,Object(m.a)(t).apply(this,arguments))}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){var e=this;return o.a.createElement("main",null,o.a.createElement(b.c,null,o.a.createElement(b.a,{exact:!0,path:"/",render:function(t){return o.a.createElement(S,Object.assign({},t,{blurOn:e.props.showMenu}))}}),o.a.createElement(b.a,{path:"/sunlife",render:function(t){return o.a.createElement(pt,Object.assign({},t,{showMenu:e.props.showMenu}))}}),o.a.createElement(b.a,{path:"/soccer1",render:function(t){return o.a.createElement(Ie,Object.assign({},t,{showMenu:e.props.showMenu,cover:gt.a}))}}),o.a.createElement(b.a,{path:"/fifthlight",render:function(t){return o.a.createElement(qe,Object.assign({},t,{showMenu:e.props.showMenu,cover:ft.a}))}}),o.a.createElement(b.a,{path:"/saildrone",render:function(t){return o.a.createElement(rt,Object.assign({},t,{showMenu:e.props.showMenu,cover:vt.a}))}}),o.a.createElement(b.a,{path:"/teabot",render:function(t){return o.a.createElement(ut,Object.assign({},t,{showMenu:e.props.showMenu,cover:yt.a}))}})))}}]),t}(o.a.Component),Rt=function(e){function t(e){var a;return Object(i.a)(this,t),(a=Object(c.a)(this,Object(m.a)(t).call(this,e))).routeTo=function(e){var t=a.props.location.location.pathname;if(t===e.path)return a.props.onClick();a.props.onClick(),E(t,e.path,a.props.location.history,p.animateCSS)},a.state={features:[{label:"Sun Life",subLabel:"Development",date:"Current",path:"/sunlife"},{label:"Soccer-1",subLabel:"Design and Development",date:"2016-2017",path:"/soccer1"},{label:"Saildrone",subLabel:"Design and Development",date:"2016",path:"/saildrone"},{label:"Fifth Light",subLabel:"Desgin",date:"2015",path:"/fifthlight"},{label:"teaBot",subLabel:"Design",date:"2014",path:"/teabot"}],enterTimeout:280,leaveTimeout:230},a.routeTo=a.routeTo.bind(Object(d.a)(a)),a}return Object(u.a)(t,e),Object(l.a)(t,[{key:"render",value:function(){var e=this;return o.a.createElement("div",null,o.a.createElement(f.CSSTransitionGroup,{transitionName:"slide",transitionEnterTimeout:this.state.enterTimeout,transitionLeaveTimeout:this.state.leaveTimeout},this.props.showMenu&&o.a.createElement("div",{key:"menu",className:"menu"},o.a.createElement("div",{className:"menu-header"},o.a.createElement("span",null,"Portfolio")),o.a.createElement("div",{className:"feature-list"},this.state.features.map(function(t){return o.a.createElement("div",{key:t.path,onClick:function(){return e.routeTo(t)},className:"feature ".concat(e.props.location.location.pathname===t.path?"currentFeature":"")},o.a.createElement("div",{className:"feature-info"},o.a.createElement("h1",null,o.a.createElement("div",{className:"indicator"}),t.label),o.a.createElement("span",null,t.subLabel)),o.a.createElement("div",{className:"feature-date"},o.a.createElement("span",null,t.date)))})),o.a.createElement("div",{className:"menu-footer"},o.a.createElement("span",null,o.a.createElement("b",null,"Contact")),o.a.createElement("span",{className:"email-link"},"taylordotsikas@gmail.com")))),o.a.createElement("div",{className:"menu-button-container",onClick:this.props.onClick},o.a.createElement("div",{id:"menuIcon",className:this.props.showMenu?"open":"closed"},o.a.createElement("span",null),o.a.createElement("span",null),o.a.createElement("span",null)),!this.props.showMenu&&o.a.createElement("span",{id:"workLabel"},"WORK")),o.a.createElement(f.CSSTransitionGroup,{transitionName:"fade",transitionEnterTimeout:this.state.enterTimeout,transitionLeaveTimeout:this.state.leaveTimeout},this.props.showMenu&&o.a.createElement("div",{className:"black-curtain ".concat("/"===this.props.location.location.pathname?"blurred-shade":""),onClick:this.props.onClick})))}}]),t}(o.a.Component),Ot=function(e){function t(e){var a;return Object(i.a)(this,t),(a=Object(c.a)(this,Object(m.a)(t).call(this,e))).state={showMenu:!1},a.handleMenuIconClick=a.handleMenuIconClick.bind(Object(d.a)(a)),a}return Object(u.a)(t,e),Object(l.a)(t,[{key:"componentDidUpdate",value:function(e){this.props.location.pathname!==e.location.pathname&&this.state.showMenu&&(document.body.scrollTop=document.documentElement.scrollTop=0,this.setState({showMenu:!1}))}},{key:"componentDidMount",value:function(){"/"!==this.props.location.pathname&&Object(h.setBackgroundToBlack)()}},{key:"handleMenuIconClick",value:function(){this.setState({showMenu:!this.state.showMenu})}},{key:"render",value:function(){return o.a.createElement("div",{className:"App"},o.a.createElement(v,{routerProps:this.props}),o.a.createElement(Rt,{location:this.props,onClick:this.handleMenuIconClick,showMenu:this.state.showMenu}),o.a.createElement(Ut,{showMenu:this.state.showMenu}))}}]),t}(o.a.Component),Xt=Object(b.f)(function(e){return o.a.createElement(Ot,e)});Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));var kt=a(95);s.a.render(o.a.createElement(kt.a,null,o.a.createElement(Xt,null)),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then(function(e){e.unregister()})},50:function(e,t){t.animateCSS=function(e,t,a){var n=document.querySelector(e);n&&(n.classList.add("animated"),t.forEach(function(e){e&&n.classList.add(e)}),n.addEventListener("animationend",function e(){n.classList.remove("animated"),t.forEach(function(e){n.classList.remove(e)}),n.removeEventListener("animationend",e),"function"===typeof a&&a()}))}},65:function(e,t){t.setBackgroundToBlack=function(){document.getElementsByTagName("main")[0].style["background-color"]="#000"}}},[[231,1,2]]]);
//# sourceMappingURL=main.eb41ea72.chunk.js.map