Removed all logic around viewport width. Discovered that previous sty…

…ling issues were around webpack defect webpack-contrib/css-loader#459. To temporarily get around this, I've moved all theme-specific styles/images into public directory as static resources and linked directly from <head>.
joey-g · Mar 14, 2018 · 999079d · 999079d
1 parent bc235ee
commit 999079d
Show file tree

Hide file tree

Showing 20 changed files with 2,718 additions and 2,746 deletions.
diff --git a/site/public/escape-velocity.css b/site/public/escape-velocity.css
diff --git a/site/src/images/banner.jpg → site/public/images/banner.jpg b/site/src/images/banner.jpg → site/public/images/banner.jpg
diff --git a/site/src/images/overlay.png → site/public/images/overlay.png b/site/src/images/overlay.png → site/public/images/overlay.png
diff --git a/site/src/images/pic01.jpg → site/public/images/pic01.jpg b/site/src/images/pic01.jpg → site/public/images/pic01.jpg
diff --git a/site/src/images/pic02.jpg → site/public/images/pic02.jpg b/site/src/images/pic02.jpg → site/public/images/pic02.jpg
diff --git a/site/src/images/pic03.jpg → site/public/images/pic03.jpg b/site/src/images/pic03.jpg → site/public/images/pic03.jpg
diff --git a/site/src/images/pic04.jpg → site/public/images/pic04.jpg b/site/src/images/pic04.jpg → site/public/images/pic04.jpg
diff --git a/site/src/images/pic05.jpg → site/public/images/pic05.jpg b/site/src/images/pic05.jpg → site/public/images/pic05.jpg
diff --git a/site/src/images/pic06.jpg → site/public/images/pic06.jpg b/site/src/images/pic06.jpg → site/public/images/pic06.jpg
diff --git a/site/src/images/pic07.jpg → site/public/images/pic07.jpg b/site/src/images/pic07.jpg → site/public/images/pic07.jpg
diff --git a/site/src/images/pic08.jpg → site/public/images/pic08.jpg b/site/src/images/pic08.jpg → site/public/images/pic08.jpg
diff --git a/site/src/images/pic09.jpg → site/public/images/pic09.jpg b/site/src/images/pic09.jpg → site/public/images/pic09.jpg
diff --git a/site/src/images/pic10.jpg → site/public/images/pic10.jpg b/site/src/images/pic10.jpg → site/public/images/pic10.jpg
diff --git a/site/src/images/shadow.png → site/public/images/shadow.png b/site/src/images/shadow.png → site/public/images/shadow.png
diff --git a/site/public/index.html b/site/public/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
@@ -20,6 +19,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Joey Gryder</title>
+    <link rel="stylesheet" href="escape-velocity.css">
   </head>
   <body>
     <noscript>

diff --git a/site/src/App.js b/site/src/App.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Route, Link } from 'react-router-dom'
-import Contact from './Contact';
 import Home from './Home';
 import Portfolio from './Portfolio';
 
@@ -10,58 +9,33 @@ class App extends Component {
 		super(props);
 		this.state = {
 			sidebarVisible: false,
-			viewportWidth: 0,
-			viewportHeight: 0
 		};
 	}
 
-	componentDidMount() {
-		this.updateWindowDimensions();
-		window.addEventListener('resize', this.updateWindowDimensions);
-	}
-
-	componentWillUnmount() {
-		window.removeEventListener('resize', this.updateWindowDimensions);
-	}
-
-	updateWindowDimensions = () => {
-		this.setState({ viewportWidth: window.innerWidth, viewportHeight: window.innerHeight });
-	}
-
-	toggleSidebarVisibility = () => this.setState({ sidebarVisible: !this.state.sidebarVisible })
-
-	getMobileWidth = () => this.state.viewportWidth < 768 ? { width: '100%' } : {}
+	toggleSidebarVisibility = () => this.setState({ sidebarVisible: !this.state.sidebarVisible });
 
 	render() {
 		return (
-			<div id='body' className={this.state.sidebarVisible ? 'navPanel-visible' : ''}>
+			<div id="body" className={this.state.sidebarVisible ? 'navPanel-visible' : ''}>
 				<div id="titleBar">
 					<a href="#navPanel" onClick={this.toggleSidebarVisibility} className="toggle"></a>
 				</div>
 
 				<div id="navPanel">
 					<nav>
-						<Link to="/" className="link depth-0" 
+						<Link to="/" className="link depth-0"
 							style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}>
 							<span className="indent-0"></span>Home
 						</Link>
-						<Link to="/portfolio"className="link depth-0" 
+						<Link to="/portfolio" className="link depth-0"
 							style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}>
 							<span className="indent-0"></span>Portfolio
 						</Link>
 					</nav>
 				</div>
 
-				<Route exact path="/" 
-    				render={(props) => 
-						<Home {...props} mobileWidth={this.getMobileWidth()}/>
-					}
-				/>
-				<Route exact path="/portfolio" 
-    				render={(props) => 
-						<Portfolio {...props} mobileWidth={this.getMobileWidth()}/>
-					}
-				/>
+				<Route exact path="/" component={Home} />
+				<Route exact path="/portfolio" component={Portfolio} />
 			</div>
 		);
 	}

diff --git a/site/src/Contact.js b/site/src/Contact.js
@@ -61,18 +61,18 @@ class Contact extends Component {
     render() {
         return (
             <div className="row 150%">
-                <div className="6u 12u(mobile)" style={this.props.mobileWidth}>
+                <div className="6u 12u(mobile)">
 
                     {/* Contact Form */}
                     <section>
                         <form onSubmit={this.handleContactSubmit}>
                             <div className="row 50%">
-                                <div className="6u 12u(mobile)" style={this.props.mobileWidth}>
+                                <div className="6u 12u(mobile)">
                                     <input type="text" value={this.state.contactName}
                                         onChange={this.handleContactChange}
                                         name="contactName" id="contact-name" placeholder="Name" />
                                 </div>
-                                <div className="6u 12u(mobile)" style={this.props.mobileWidth}>
+                                <div className="6u 12u(mobile)">
                                     <input type="text" value={this.state.contactEmail}
                                         onChange={this.handleContactChange}
                                         name="contactEmail" id="contact-email" placeholder="Email" />
@@ -110,26 +110,24 @@ class Contact extends Component {
                     {/* End Contact Form */}
 
                 </div>
-                <div className="6u 12u(mobile)" style={this.props.mobileWidth}>
+                <div className="6u 12u(mobile)">
 
                     {/* Contact Info */}
                     <section className="feature-list small">
                         <div className="row">
-                            <div className="6u 12u(mobile)" style={this.props.mobileWidth}>
+                            <div className="6u 12u(mobile)">
                                 <section>
                                     <h3 className="icon fa-envelope">Email</h3>
                                     <p>
                                         <a href="mailto:joey.gryder@gmail.com">joey.gryder@gmail.com</a>
                                     </p>
                                 </section>
                             </div>
-                            <div className="6u 12u(mobile)" style={this.props.mobileWidth}>
+                            <div className="6u 12u(mobile)">
                                 <section>
                                     <h3 className="icon fa-comment">Social</h3>
                                     <p>
                                         <a href="#">@untitled-corp</a><br />
-                                        <a href="#">linkedin.com/untitled</a><br />
-                                        <a href="#">facebook.com/untitled</a>
                                     </p>
                                 </section>
                             </div>

diff --git a/site/src/Home.js b/site/src/Home.js
@@ -132,10 +132,10 @@ class Home extends Component {
                                 <h2>Get In Touch</h2>
                                 <p>
                                     Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br /> Nam pharetra laoreet imperdiet volutpat etiam consequat feugiat.
-                        </p>
+                                </p>
                             </header>
                             <hr />
-                            <Contact mobileWidth={this.props.mobileWidth} />
+                            <Contact />
                             <hr />
                         </div>
                         <div id="copyright">

diff --git a/site/src/Portfolio.js b/site/src/Portfolio.js
@@ -12,12 +12,6 @@ class Portfolio extends Component {
                     <div id="header-wrapper" className="wrapper">
                         <div id="header">
 
-                            {/* Logo */}
-                            <div id="logo">
-                                <h1><a href="index.html">Joey Gryder</a></h1>
-                                <p>Sr. Software Engineer in Test - Charleston, SC</p>
-                            </div>
-
                             {/* Nav */}
                             <nav id="nav">
                                 <ul>
@@ -26,6 +20,11 @@ class Portfolio extends Component {
                                     <li><a href="#footer">Contact</a></li>
                                 </ul>
                             </nav>
+
+                            {/* Logo */}
+                            <div id="logo">
+                                <h1><a href="index.html">Joey Gryder</a></h1>
+                            </div>
                         </div>
                     </div>
                     {/* End Header */}
@@ -41,7 +40,7 @@ class Portfolio extends Component {
                                 </p>
                             </header>
                             <hr />
-                            <Contact mobileWidth={this.props.mobileWidth} />
+                            <Contact/>
                             <hr />
                         </div>
                         <div id="copyright">