Skip to content

Commit 999079d

Browse files
author
joey-g
committed
Removed all logic around viewport width. Discovered that previous styling 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>.
1 parent bc235ee commit 999079d

20 files changed

+2718
-2746
lines changed

‎site/public/escape-velocity.css

Lines changed: 2696 additions & 0 deletions
Large diffs are not rendered by default.

‎site/src/images/banner.jpg renamed to ‎site/public/images/banner.jpg

File renamed without changes.

‎site/src/images/overlay.png renamed to ‎site/public/images/overlay.png

File renamed without changes.

‎site/src/images/pic01.jpg renamed to ‎site/public/images/pic01.jpg

File renamed without changes.

‎site/src/images/pic02.jpg renamed to ‎site/public/images/pic02.jpg

File renamed without changes.

‎site/src/images/pic03.jpg renamed to ‎site/public/images/pic03.jpg

File renamed without changes.

‎site/src/images/pic04.jpg renamed to ‎site/public/images/pic04.jpg

File renamed without changes.

‎site/src/images/pic05.jpg renamed to ‎site/public/images/pic05.jpg

File renamed without changes.

‎site/src/images/pic06.jpg renamed to ‎site/public/images/pic06.jpg

File renamed without changes.

‎site/src/images/pic07.jpg renamed to ‎site/public/images/pic07.jpg

File renamed without changes.

‎site/src/images/pic08.jpg renamed to ‎site/public/images/pic08.jpg

File renamed without changes.

‎site/src/images/pic09.jpg renamed to ‎site/public/images/pic09.jpg

File renamed without changes.

‎site/src/images/pic10.jpg renamed to ‎site/public/images/pic10.jpg

File renamed without changes.

‎site/src/images/shadow.png renamed to ‎site/public/images/shadow.png

File renamed without changes.

‎site/public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<meta name="theme-color" content="#000000">
76
<!--
87
manifest.json provides metadata used when your web app is added to the
98
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
@@ -20,6 +19,7 @@
2019
Learn how to configure a non-root public URL by running `npm run build`.
2120
-->
2221
<title>Joey Gryder</title>
22+
<link rel="stylesheet" href="escape-velocity.css">
2323
</head>
2424
<body>
2525
<noscript>

‎site/src/App.js

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Component } from 'react';
22
import { Route, Link } from 'react-router-dom'
3-
import Contact from './Contact';
43
import Home from './Home';
54
import Portfolio from './Portfolio';
65

@@ -10,58 +9,33 @@ class App extends Component {
109
super(props);
1110
this.state = {
1211
sidebarVisible: false,
13-
viewportWidth: 0,
14-
viewportHeight: 0
1512
};
1613
}
1714

18-
componentDidMount() {
19-
this.updateWindowDimensions();
20-
window.addEventListener('resize', this.updateWindowDimensions);
21-
}
22-
23-
componentWillUnmount() {
24-
window.removeEventListener('resize', this.updateWindowDimensions);
25-
}
26-
27-
updateWindowDimensions = () => {
28-
this.setState({ viewportWidth: window.innerWidth, viewportHeight: window.innerHeight });
29-
}
30-
31-
toggleSidebarVisibility = () => this.setState({ sidebarVisible: !this.state.sidebarVisible })
32-
33-
getMobileWidth = () => this.state.viewportWidth < 768 ? { width: '100%' } : {}
15+
toggleSidebarVisibility = () => this.setState({ sidebarVisible: !this.state.sidebarVisible });
3416

3517
render() {
3618
return (
37-
<div id='body' className={this.state.sidebarVisible ? 'navPanel-visible' : ''}>
19+
<div id="body" className={this.state.sidebarVisible ? 'navPanel-visible' : ''}>
3820
<div id="titleBar">
3921
<a href="#navPanel" onClick={this.toggleSidebarVisibility} className="toggle"></a>
4022
</div>
4123

4224
<div id="navPanel">
4325
<nav>
44-
<Link to="/" className="link depth-0"
26+
<Link to="/" className="link depth-0"
4527
style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}>
4628
<span className="indent-0"></span>Home
4729
</Link>
48-
<Link to="/portfolio"className="link depth-0"
30+
<Link to="/portfolio" className="link depth-0"
4931
style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}>
5032
<span className="indent-0"></span>Portfolio
5133
</Link>
5234
</nav>
5335
</div>
5436

55-
<Route exact path="/"
56-
render={(props) =>
57-
<Home {...props} mobileWidth={this.getMobileWidth()}/>
58-
}
59-
/>
60-
<Route exact path="/portfolio"
61-
render={(props) =>
62-
<Portfolio {...props} mobileWidth={this.getMobileWidth()}/>
63-
}
64-
/>
37+
<Route exact path="/" component={Home} />
38+
<Route exact path="/portfolio" component={Portfolio} />
6539
</div>
6640
);
6741
}

‎site/src/Contact.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,18 +61,18 @@ class Contact extends Component {
6161
render() {
6262
return (
6363
<div className="row 150%">
64-
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
64+
<div className="6u 12u(mobile)">
6565

6666
{/* Contact Form */}
6767
<section>
6868
<form onSubmit={this.handleContactSubmit}>
6969
<div className="row 50%">
70-
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
70+
<div className="6u 12u(mobile)">
7171
<input type="text" value={this.state.contactName}
7272
onChange={this.handleContactChange}
7373
name="contactName" id="contact-name" placeholder="Name" />
7474
</div>
75-
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
75+
<div className="6u 12u(mobile)">
7676
<input type="text" value={this.state.contactEmail}
7777
onChange={this.handleContactChange}
7878
name="contactEmail" id="contact-email" placeholder="Email" />
@@ -110,26 +110,24 @@ class Contact extends Component {
110110
{/* End Contact Form */}
111111

112112
</div>
113-
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
113+
<div className="6u 12u(mobile)">
114114

115115
{/* Contact Info */}
116116
<section className="feature-list small">
117117
<div className="row">
118-
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
118+
<div className="6u 12u(mobile)">
119119
<section>
120120
<h3 className="icon fa-envelope">Email</h3>
121121
<p>
122122
<a href="mailto:[email protected]">[email protected]</a>
123123
</p>
124124
</section>
125125
</div>
126-
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
126+
<div className="6u 12u(mobile)">
127127
<section>
128128
<h3 className="icon fa-comment">Social</h3>
129129
<p>
130130
<a href="#">@untitled-corp</a><br />
131-
<a href="#">linkedin.com/untitled</a><br />
132-
<a href="#">facebook.com/untitled</a>
133131
</p>
134132
</section>
135133
</div>

‎site/src/Home.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,10 +132,10 @@ class Home extends Component {
132132
<h2>Get In Touch</h2>
133133
<p>
134134
Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br /> Nam pharetra laoreet imperdiet volutpat etiam consequat feugiat.
135-
</p>
135+
</p>
136136
</header>
137137
<hr />
138-
<Contact mobileWidth={this.props.mobileWidth} />
138+
<Contact />
139139
<hr />
140140
</div>
141141
<div id="copyright">

‎site/src/Portfolio.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@ class Portfolio extends Component {
1212
<div id="header-wrapper" className="wrapper">
1313
<div id="header">
1414

15-
{/* Logo */}
16-
<div id="logo">
17-
<h1><a href="index.html">Joey Gryder</a></h1>
18-
<p>Sr. Software Engineer in Test - Charleston, SC</p>
19-
</div>
20-
2115
{/* Nav */}
2216
<nav id="nav">
2317
<ul>
@@ -26,6 +20,11 @@ class Portfolio extends Component {
2620
<li><a href="#footer">Contact</a></li>
2721
</ul>
2822
</nav>
23+
24+
{/* Logo */}
25+
<div id="logo">
26+
<h1><a href="index.html">Joey Gryder</a></h1>
27+
</div>
2928
</div>
3029
</div>
3130
{/* End Header */}
@@ -41,7 +40,7 @@ class Portfolio extends Component {
4140
</p>
4241
</header>
4342
<hr />
44-
<Contact mobileWidth={this.props.mobileWidth} />
43+
<Contact/>
4544
<hr />
4645
</div>
4746
<div id="copyright">

0 commit comments

Comments
 (0)