make intro complete

michaelwachell · May 3, 2018 · 2132d95 · 2132d95
1 parent e2530cc
commit 2132d95
Show file tree

Hide file tree

Showing 15 changed files with 222 additions and 56 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Assets/coding_things.png b/Assets/coding_things.png
diff --git a/LogicGraveyard.js b/LogicGraveyard.js
@@ -2,3 +2,6 @@
 // <Route path="/media" component={Media}/>
 // <Route path="/development" component={Development}/>
 // <Route path="/contact" component={Contact}/>
+// {
+// images ?  images.map((tup, i) => {return (<div key={i}><a href={tup[1]}><img src={tup[0]}/></a></div>)}) : null
+// }
diff --git a/client/public/6376a8a76c82daa96f51de3fa55af22d.png b/client/public/6376a8a76c82daa96f51de3fa55af22d.png
diff --git a/client/public/7df4c313f17e3b370f77cb95f54231f9.png b/client/public/7df4c313f17e3b370f77cb95f54231f9.png
diff --git a/client/public/bundle.js b/client/public/bundle.js
diff --git a/client/public/index.html b/client/public/index.html
@@ -3,10 +3,11 @@
   <head>
     <meta charset="utf-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=">
     <meta name="theme-color" content="#000000">
     <title>Michael Wachell</title>
     <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Cairo|Rajdhani" rel="stylesheet">
       <link href="/index.css" rel="stylesheet">
     <style>
       html,

diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx
@@ -8,6 +8,7 @@ import Development from './Development.jsx';
 import Intro from './Intro.jsx';
 import Media from './Media.jsx';
 import Contact from './Contact.jsx';
+import './App.scss';
 
 export default class App extends Component {
 

diff --git a/client/src/components/App.scss b/client/src/components/App.scss
@@ -0,0 +1,90 @@
+
+
+
+
+
+  @media (max-width: 599px) {
+    .media-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 5vw;
+    max-width: 599px;
+    width: 100%;
+    margin: 0 auto;
+    img {
+      width: 100%;
+    }
+  }
+
+  .container-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 5vw;
+    max-width: 599px;
+    width: 100%;
+    margin: 0 auto;
+    overflow: scroll;
+
+
+  }
+
+
+
+   }
+
+
+
+  @media (min-width: 600px) {
+  .media-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 5vw;
+    max-width: 600px;
+    width: 100%;
+    margin: 0 auto;
+    align: center;
+    img {
+      width: 100%;
+    }
+  }
+
+  .container-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 5vw;
+    max-width: 600px;
+    width: 100%;
+    margin: 0 auto;
+    align: center;
+
+  }
+
+   }
+
+
+
+  @media (min-width: 1200px) {
+  .media-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 5vw;
+    max-width: 1200px;
+    width: 100%;
+    margin: 0 auto;
+    img {
+      width: 100%;
+    }
+  }
+
+  .container-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 5vw;
+    max-width: 1200px;
+    width: 100%;
+    margin: 0 auto;
+    align: center;
+
+  }
+
+   }
diff --git a/client/src/components/Images.js b/client/src/components/Images.js
@@ -0,0 +1,6 @@
+module.exports = {
+
+first: [['https://i.imgur.com/cF0XUF5.jpg', "http://www.google.com"], ["https://blog.imgur.com/wp-content/uploads/2016/08/orgis.jpg", "http://www.google.com"], ['https://i.imgur.com/cF0XUF5.jpg', "http://www.google.com"], ["https://blog.imgur.com/wp-content/uploads/2016/08/orgis.jpg", "http://www.google.com"], ["https://blog.imgur.com/wp-content/uploads/2016/08/orgis.jpg", "http://www.google.com"]]
+
+
+}
diff --git a/client/src/components/Intro.jsx b/client/src/components/Intro.jsx
@@ -3,15 +3,21 @@ import ReactDOM from 'react-dom'
 import {Parallax} from 'react-spring'
 import './Intro.scss'
 import Copy from './text.js'
+import Images from './Images.js'
+import './App.scss'
+import Dep from '../../../Assets/coding_things.png'
 
 const Page = ({
   offset,
   caption,
   first,
   second,
   gradient,
+  images,
   onClick
-}) => (<React.Fragment>
+}) => { return (
+  <React.Fragment>
+
   <Parallax.Layer offset={offset} speed={0.2} onClick={onClick}>
     <div className="slopeBegin"/>
   </Parallax.Layer>
@@ -20,22 +26,34 @@ const Page = ({
     <div className={`slopeEnd ${gradient}`}/>
   </Parallax.Layer>
 
-  <Parallax.Layer className="text number" offset={offset} speed={0.3}>
-
-  </Parallax.Layer>
-
   <Parallax.Layer className="text header" offset={offset} speed={0.4}>
-    <span>
+
+      <div>
       <p style={{
           fontSize: "calc(8vw + 10%)"
         }}>{caption}</p>
       <div className={`stripe white`}/>
       <p>{first}</p>
       <p>{second}</p>
+    </div>
+    <div>
+
+      </div>
+
+  </Parallax.Layer>
+
+
+  <Parallax.Layer className="image-container" offset={offset} speed={0.8} onClick={onClick}>
+  {
+  images ?  (<div className="images"><img width="100%" src={images}/></div>) : null
+  }
+
 
-    </span>
   </Parallax.Layer>
-</React.Fragment>)
+
+</React.Fragment>
+
+)}
 
 export default class Intro extends Component {
 
@@ -49,10 +67,11 @@ export default class Intro extends Component {
   }
 
   render() {
-    return (<Parallax className="container" ref="parallax" pages={3} horizontal="horizontal" scrolling={true}>
-      <Page offset={0} gradient="teal" caption="Michael is..." first="Michael is a polymath" second="dolor sit" onClick={() => this.scroll(1)}/>
-      <Page offset={1} gradient="greyf" caption="Media" first="a" second="adipiscing elit" onClick={() => this.scroll(2)}/>
-      <Page offset={2} gradient="black" caption="Repos" first="Morbi quis" second="est dignissim" onClick={() => this.scroll(0)}/>
+    return (<Parallax className="container" ref="parallax" pages={4} horizontal="horizontal" scrolling={true}>
+      <Page offset={0} gradient="teal" images={Dep} caption="Hi!" first="My name is Michael..." second="" 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" caption="Web" first="I create using these tools" second="" onClick={() => this.scroll(3)}/>
+      <Page offset={3} gradient="teal" caption="Sight & Sound" first="These tools, too" second="" onClick={() => this.scroll(0)}/>
     </Parallax>)
   }
 }
diff --git a/client/src/components/Intro.scss b/client/src/components/Intro.scss
@@ -24,7 +24,7 @@
 }
 
 .header {
-  margin-left: 350px;
+  margin-left: 4vw;
   font-size: calc(15px + 20%);
   color: white;
 }
@@ -64,14 +64,15 @@
   background: linear-gradient(to right, #a0c5cf 0%, #e6eceb 100%);
 }
 
-.media-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 2fr);
-  grid-gap: 8px;
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-  img {
-    width: 10vw;
-  }
+
+.images {
+  margin-left: 50%;
+  width: 45%;
+  height: auto;
+  display: block;
+}
+
+.image-container{
+  width: 300px;
+  height: auto;
 }
diff --git a/client/src/components/Media.jsx b/client/src/components/Media.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import './Media.scss';
 
+import './App.scss'
 
 import {Component} from 'react'
 
@@ -24,6 +24,30 @@ export default class Media extends Component {
    </div>
    <div>
    <img src="https://i.imgur.com/VhBmLIk.jpg" />
+   </div>
+   <div>
+   <img src="https://i.imgur.com/VhBmLIk.jpg" />
+   </div>
+   <div>
+   <img src="https://i.imgur.com/VhBmLIk.jpg" />
+   </div>
+   <div>
+   <img src="https://i.imgur.com/VhBmLIk.jpg" />
+   </div>
+   <div>
+   <img src="https://i.imgur.com/VhBmLIk.jpg" />
+   </div>
+   <div>
+   <img src="https://i.imgur.com/VhBmLIk.jpg" />
+   </div>
+   <div>
+   <img src="https://i.imgur.com/VhBmLIk.jpg" />
+   </div>
+   <div>
+   <img src="https://i.imgur.com/VhBmLIk.jpg" />
+   </div>
+   <div>
+   <img src="https://i.imgur.com/VhBmLIk.jpg" />
    </div>
 
 

diff --git a/client/src/components/Media.scss b/client/src/components/Media.scss
@@ -1,7 +1,7 @@
 .media-grid {
   display: grid;
-  grid-template-columns: repeat(3, 2fr);
-  grid-gap: 8px;
+  grid-template-columns: repeat(3, 200px);
+  grid-gap: 5vw;
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;

diff --git a/webpack.config.js b/webpack.config.js
@@ -28,9 +28,7 @@ module.exports = {
         test: /\.scss$/,
         loaders: ['style-loader', 'css-loader', 'sass-loader']
       },
-      devServer: {
-        historyApiFallback: true
-      }, {
+       {
         test: /\.(png|jpg|gif)$/,
         use: [
           {