crossing over to main comp

michaelwachell · Jun 4, 2018 · e7404ee · e7404ee
1 parent 2ec1ad5
commit e7404ee
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 98 deletions.
diff --git a/client/src/components/App.scss b/client/src/components/App.scss
@@ -1,28 +1,28 @@
-.media-grid {
-  display: grid;
-  padding: 2vw;
-  grid-template-columns: repeat(1, 1fr);
-  max-width: 800px;
-  width: 100%;
-  margin: 0 auto;
-  font-size: calc(12px + 20%);
-  border-radius: 10px;
-  min-height: 500px;
-  color: #e6eceb;
-  vertical-align: text-top;
-}
+// .media-grid {
+//   display: grid;
+//   padding: 2vw;
+//   grid-template-columns: repeat(1, 1fr);
+//   max-width: 800px;
+//   width: 100%;
+//   margin: 0 auto;
+//   font-size: calc(12px + 20%);
+//   border-radius: 10px;
+//   min-height: 500px;
+//   color: #e6eceb;
+//   vertical-align: text-top;
+// }
 
-.container-grid {
-  display: grid;
-  padding: 2vw;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 5vw;
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-  align: center;
-  font-size: calc(12px + 20%);
-}
+// .container-grid {
+//   display: grid;
+//   padding: 2vw;
+//   grid-template-columns: repeat(2, 1fr);
+//   grid-gap: 5vw;
+//   max-width: 1200px;
+//   width: 100%;
+//   margin: 0 auto;
+//   align: center;
+//   font-size: calc(12px + 20%);
+// }
 
 // .media-container>div>div>img {
 //   width: 100%;

diff --git a/client/src/components/Carousel.jsx b/client/src/components/Carousel.jsx
@@ -4,6 +4,14 @@ import './Carousel.scss';
 import Images from './Images.jsx'
 
 export default class Nuka extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state= {
+
+    }
+  }
+
+
   afterSlide (currentSlide) {
     const list = window.document.querySelector('.slider-list');
     const nextSlide = list.childNodes[currentSlide];
@@ -16,7 +24,7 @@ export default class Nuka extends React.Component {
 
       <Carousel 
                 afterSlide={()=> this.afterSlide()}
-                width="65%"
+                width="75%"
                 className="carousel"             
                 cellAlign="center"
 

diff --git a/client/src/components/Carousel.scss b/client/src/components/Carousel.scss
@@ -7,14 +7,14 @@
     height: 100%;
 }
 
-.slider-list {
-    min-height: 40%;
-}
+// .slider-list {
+//     min-height: 40%;
+// }
 
 @media (min-width: 600px) {
     .carousel {
-        width: 30%;
-        height: 40%;
+        width: 100%;
+        // height: 40%;
         position: relative;
         left: 17%;
     }
@@ -26,6 +26,6 @@
         height: 100%;
         position: relative;
         left: 1%;
-        top: 29%
+        top: 15%
     }
 }
diff --git a/client/src/components/Intro.jsx b/client/src/components/Intro.jsx
@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import { Parallax } from 'react-spring'
 import './Intro.scss'
-
 import Images from './Images.jsx'
 import Dep from '../../../Assets/coding_things.png'
 import Me from '../../../Assets/me2.png'
@@ -29,15 +28,15 @@ const Page = ({
       </Parallax.Layer>
 
 
-      <Parallax.Layer className="text header" offset={offset} speed={0.4}>
+      <Parallax.Layer className="text header wrapword" offset={offset} speed={0.4}>
 
         <div>
 
-          <p style={{
-            fontSize: "calc(8vw + 10%)"
+          <p className="caption" style={{
+            fontSize: "calc(8vw + 10%)",
           }}>{caption}</p>
 
-          <p style={{
+          <p className="first" style={{
             fontSize: "calc(4vw + 10%)"
           }}>{first} </p>
           <p style={{
@@ -82,12 +81,22 @@ export default class Intro extends Component {
     this.refs.parallax.scrollTo(to)
   }
 
+  onMouseWheel(e) {
+    const currentScrollDelta = this.scrollBars.getScrollRight();
+    this.scrollBars.scrollRight(currentScrollDelta + e.deltaY);
+  }
+
   render() {
-    return (<Parallax className="container" ref="parallax" pages={4} horizontal="horizontal" scrolling={true}>
+    return (
+
+    <Parallax onWheel={(e)=> this.onMouseWheel(e)} className="container" ref="parallax" pages={4} horizontal="false" scrolling={true}>
+
       <Page offset={0} gradient="teal" className="roundMe" images={Me} caption="Hi!" first="My name is Michael..." second="*click or tap*" onClick={() => this.scroll(1)} />
-      <Page offset={1} gradient="greyf" caption="I am a media polymath" first="" second="" onClick={() => this.scroll(2)} />
-      <Page offset={2} gradient="black" images={Dep} caption="I create..." first="the web using these tools" second="" onClick={() => this.scroll(3)} />
-      <Page offset={3} gradient="teal" images={Media} caption="I create..." first="media using these tools" second="" onClick={() => this.scroll(0)} />
-    </Parallax>)
+      <Page offset={1} gradient="greyf" caption="I am a media polymath." first="I ideate, design, manage, and execute exciting media projects." second="" onClick={() => this.scroll(2)} />
+      <Page offset={2} gradient="black" images={Dep} caption="I create..." first="with these web frameworks" second="" onClick={() => this.scroll(3)} />
+      <Page offset={3} gradient="teal" images={Media} caption="I create..." first="with these media tools" second="" onClick={() => this.scroll(0)} />
+    </Parallax>
+
+    )
   }
 }
diff --git a/client/src/components/Intro.scss b/client/src/components/Intro.scss
@@ -1,11 +1,39 @@
+.copy-holder {
+  min-height: 200px;
+  max-width: 85vw;
+}
+
+.first {
+    line-height: 110%;
+}
+
+
+
+
 @media (min-width: 600px) {
+  .wrapword {
+    display: flex;
+    white-space: -moz-pre-wrap !important;
+    /* Mozilla, since 1999 */
+    white-space: -pre-wrap;
+    /* Opera 4-6 */
+    white-space: -o-pre-wrap;
+    /* Opera 7 */
+    white-space: pre-wrap;
+    /* css-3 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
+    white-space: -webkit-pre-wrap;
+    /* Newer versions of Chrome/Safari*/
+    white-space: normal;
+  }
   .flexing {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: row;
   }
-  .container>div>div {
+  .container > div > div {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -28,7 +56,7 @@
     height: auto;
     display: block;
     position: relative;
-    left: 5%;
+    left: 6%;
     width: 100%;
     top: 2%;
     height: auto;
@@ -45,17 +73,14 @@
     left: -13vw;
     z-index: 1000000 !important;
   }
-  .image-container {
-    width: 300px;
-    height: auto;
-  }
   .text {
     pointer-events: none;
     justify-content: start !important;
-    font-family: 'Kanit', sans-serif;
-    line-height: 0px;
+    // font-family: "Kanit", sans-serif;
+
     position: relative;
-    top:5%;
+    top: 5%;
+    display: flex;
   }
   .slopeBegin,
   .slopeEnd {
@@ -64,32 +89,43 @@
     height: 100%;
     cursor: pointer;
   }
-
 }
 
 // END DESKTOP BP
-// 
-// 
+//
+//
 // END DESKTOP BP
 @media only screen and (max-width: 599px) {
-
-
-  .container>div>div {
+  .container > div > div {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-content: center;
     align-self: center;
   }
-
-
+  .wrapword {
+    display: flex;
+    white-space: -moz-pre-wrap !important;
+    /* Mozilla, since 1999 */
+    white-space: -pre-wrap;
+    /* Opera 4-6 */
+    white-space: -o-pre-wrap;
+    /* Opera 7 */
+    white-space: pre-wrap;
+    /* css-3 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
+    white-space: -webkit-pre-wrap;
+    /* Newer versions of Chrome/Safari*/
+    white-space: normal;
+  }
 
   .header {
     font-size: calc(20px + 40%);
     color: #f9f9f9;
   }
   .images {
-    width: 45%;
+    width: 40%;
     height: auto;
     position: relative;
     text-align: center;
@@ -98,9 +134,8 @@
     width: 100%;
     height: auto;
     top: 20%;
-    min-width: 250px;
+    min-width: 200px;
     min-height: 100px;
-
   }
   .portrait {
     min-width: 50%;
@@ -113,43 +148,46 @@
     max-width: 600px;
   }
   .text {
-
     pointer-events: none;
-    top:-15%;
-    font-family: 'Kanit', sans-serif;
-    line-height: 0px;
+    top: -18%;
+    font-family: "Kanit", sans-serif;
+
     font-size: calc(20px + 40%);
     position: inherit;
     text-align: center;
+    max-width: 80%;
   }
 
   .slopeBegin,
-.slopeEnd {
-  position: absolute;
-  width: 140%;
-  height: 100%;
-  cursor: pointer;
-}
+  .slopeEnd {
+    position: absolute;
+    width: 140%;
+    height: 100%;
+    cursor: pointer;
+  }
 }
 
-
-
-
-
 .slopeBegin {
   background-color: #0093b7;
   clip-path: polygon(15% 0%, 90% 0%, 65% 100%, 0% 100%);
   -webkit-clip-path: polygon(15% 0%, 90% 0%, 65% 100%, 0% 100%);
 }
 
 .slopeEnd {
-
-  clip-path: polygon(70% 0, 90% 0, calc(100% - 10vw) 100%, calc(70% - 20vw) 100%);
-  -webkit-clip-path: polygon(70% 0, 90% 0, calc(100% - 10%) 100%, calc(70% - 20%) 100%);
+  clip-path: polygon(
+    70% 0,
+    90% 0,
+    calc(100% - 10vw) 100%,
+    calc(70% - 20vw) 100%
+  );
+  -webkit-clip-path: polygon(
+    70% 0,
+    90% 0,
+    calc(100% - 10%) 100%,
+    calc(70% - 20%) 100%
+  );
 }
 
-
-
 .black {
   background: #005f89;
 }
@@ -166,4 +204,4 @@
 
 .container {
   background: -webkit-linear-gradient(bottom, #a0c5cf, #63cdd7);
-}
+}