Skip to content

Commit d5b6098

Browse files
author
joey-g
committed
Finished initial implementation of react-router-dom. Added new components for home and portfolio routes.
1 parent ccf20ae commit d5b6098

File tree

4 files changed

+247
-150
lines changed

4 files changed

+247
-150
lines changed

‎site/src/App.js

Lines changed: 21 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import React, { Component } from 'react';
2+
import { Route, Link } from 'react-router-dom'
23
import Contact from './Contact';
4+
import Home from './Home';
5+
import Portfolio from './Portfolio';
36

47
class App extends Component {
58

@@ -38,158 +41,27 @@ class App extends Component {
3841

3942
<div id="navPanel">
4043
<nav>
41-
<a className="link depth-0" href="index.html" style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}>
42-
<span className="indent-0"></span>
43-
Home</a>
44-
<a className="link depth-0" href="#" style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}>
45-
<span className="indent-0"></span>
46-
Dropdown
47-
</a>
44+
<Link to="/" className="link depth-0"
45+
style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}>
46+
<span className="indent-0"></span>Home
47+
</Link>
48+
<Link to="/portfolio"className="link depth-0"
49+
style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}>
50+
<span className="indent-0"></span>Portfolio
51+
</Link>
4852
</nav>
4953
</div>
5054

51-
<div className="homepage">
52-
<div id="page-wrapper">
53-
{/* Header */}
54-
<div id="header-wrapper" className="wrapper">
55-
<div id="header">
56-
57-
{/* Logo */}
58-
<div id="logo">
59-
<h1><a href="index.html">Joey Gryder</a></h1>
60-
<p>Sr. Software Engineer in Test - Charleston, SC</p>
61-
</div>
62-
63-
{/* Nav */}
64-
<nav id="nav">
65-
<ul>
66-
<li className="current"><a href="index.html">Home</a></li>
67-
<li><a href="#highlights" onClick={this.toggleSidebarVisibility}>Portfolio</a></li>
68-
<li><a href="#footer">Contact</a></li>
69-
</ul>
70-
</nav>
71-
</div>
72-
</div>
73-
{/* End Header */}
74-
75-
{/* Intro */}
76-
<div id="intro-wrapper" className="wrapper style1">
77-
<div className="title">The Introduction</div>
78-
<section id="intro" className="container">
79-
<p className="style1">So in case you were wondering what this is all about ...</p>
80-
<p className="style2">
81-
Escape Velocity is a free responsive<br className="mobile-hide" /> site template by <a href="http://html5up.net" className="nobr">HTML5 UP</a>
82-
</p>
83-
<p className="style3">
84-
It&#39;s <strong>responsive</strong>, built on <strong>HTML5</strong> and <strong>CSS3</strong>&nbsp;
85-
and released for free under the <a href="http://html5up.net/license"> Creative Commons Attribution 3.0 license</a>&nbsp;
86-
so use it for any of your personal or commercial projects -- just be sure to credit us!
87-
</p>
88-
<ul className="actions">
89-
<li><a href="#" className="button style3 big">Proceed</a></li>
90-
</ul>
91-
</section>
92-
</div>
93-
{/* End Intro */}
94-
95-
{/* Main */}
96-
<div className="wrapper style2">
97-
<div className="title">The Details</div>
98-
<div id="main" className="container">
99-
100-
{/* Image */}
101-
<a href="#" className="image featured">
102-
<img src="images/pic01.jpg" alt="" />
103-
</a>
104-
105-
{/* Features */}
106-
<section id="features">
107-
<header className="style1">
108-
<h2>Dolor consequat feugiat amet veroeros</h2>
109-
<p>Feugiat dolor nullam orci pretium phasellus justo</p>
110-
</header>
111-
{/* Feature List */}
112-
<div className="feature-list">
113-
<div className="row">
114-
<div className="6u 12u(mobile)" style={this.getMobileWidth()}>
115-
<section>
116-
<h3 className="icon fa-comment">Mattis velit diam vulputate</h3>
117-
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
118-
</section>
119-
</div>
120-
<div className="6u 12u(mobile)" style={this.getMobileWidth()}>
121-
<section>
122-
<h3 className="icon fa-refresh">Lorem ipsum dolor sit veroeros</h3>
123-
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
124-
</section>
125-
</div>
126-
</div>
127-
<div className="row">
128-
<div className="6u 12u(mobile)" style={this.getMobileWidth()}>
129-
<section>
130-
<h3 className="icon fa-picture-o">Pretium phasellus justo lorem</h3>
131-
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
132-
</section>
133-
</div>
134-
<div className="6u 12u(mobile)" style={this.getMobileWidth()}>
135-
<section>
136-
<h3 className="icon fa-cog">Tempus sed pretium orci</h3>
137-
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
138-
</section>
139-
</div>
140-
</div>
141-
<div className="row">
142-
<div className="6u 12u(mobile)" style={this.getMobileWidth()}>
143-
<section>
144-
<h3 className="icon fa-wrench">Aliquam consequat et feugiat</h3>
145-
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
146-
</section>
147-
</div>
148-
<div className="6u 12u(mobile)" style={this.getMobileWidth()}>
149-
<section>
150-
<h3 className="icon fa-check">Dolore laoreet aliquam mattis</h3>
151-
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
152-
</section>
153-
</div>
154-
</div>
155-
</div>
156-
{/* End Feature List */}
157-
<ul className="actions actions-centered">
158-
<li><a href="#" className="button style1 big">Get Started</a></li>
159-
<li><a href="#" className="button style2 big">More Info</a></li>
160-
</ul>
161-
</section>
162-
{/* End Features */}
163-
164-
</div>
165-
</div>
166-
{/* End Main */}
167-
168-
{/* Footer */}
169-
<div id="footer-wrapper" className="wrapper">
170-
<div className="title">The Rest Of It</div>
171-
<div id="footer" className="container">
172-
<header className="style1">
173-
<h2>Get In Touch</h2>
174-
<p>
175-
Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br /> Nam pharetra laoreet imperdiet volutpat etiam consequat feugiat.
176-
</p>
177-
</header>
178-
<hr />
179-
<Contact mobileWidth={this.getMobileWidth()}/>
180-
<hr />
181-
</div>
182-
<div id="copyright">
183-
<ul>
184-
<li>Joey Gryder &copy; {(new Date()).getFullYear()}</li>
185-
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
186-
</ul>
187-
</div>
188-
</div>
189-
{/* End Footer */}
190-
191-
</div>
192-
</div >
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+
/>
19365
</div>
19466
);
19567
}

‎site/src/Home.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom'
3+
import Contact from './Contact';
4+
import Portfolio from './Portfolio';
5+
6+
class Home extends Component {
7+
8+
render() {
9+
return (
10+
<div className="homepage">
11+
<div id="page-wrapper">
12+
{/* Header */}
13+
<div id="header-wrapper" className="wrapper">
14+
<div id="header">
15+
16+
{/* Logo */}
17+
<div id="logo">
18+
<h1><a href="index.html">Joey Gryder</a></h1>
19+
<p>Sr. Software Engineer in Test - Charleston, SC</p>
20+
</div>
21+
22+
{/* Nav */}
23+
<nav id="nav">
24+
<ul>
25+
<li className="current"><Link to="/">Home</Link></li>
26+
<li><Link to="/portfolio">Portfolio</Link></li>
27+
<li><a href="#footer">Contact</a></li>
28+
</ul>
29+
</nav>
30+
</div>
31+
</div>
32+
{/* End Header */}
33+
34+
{/* Intro */}
35+
<div id="intro-wrapper" className="wrapper style1">
36+
<div className="title">The Introduction</div>
37+
<section id="intro" className="container">
38+
<p className="style1">So in case you were wondering what this is all about ...</p>
39+
<p className="style2">
40+
Escape Velocity is a free responsive<br className="mobile-hide" /> site template by <a href="http://html5up.net" className="nobr">HTML5 UP</a>
41+
</p>
42+
<p className="style3">
43+
It&#39;s <strong>responsive</strong>, built on <strong>HTML5</strong> and <strong>CSS3</strong>&nbsp;
44+
and released for free under the <a href="http://html5up.net/license"> Creative Commons Attribution 3.0 license</a>&nbsp;
45+
so use it for any of your personal or commercial projects -- just be sure to credit us!
46+
</p>
47+
<ul className="actions">
48+
<li><a href="#" className="button style3 big">Proceed</a></li>
49+
</ul>
50+
</section>
51+
</div>
52+
{/* End Intro */}
53+
54+
{/* Main */}
55+
<div className="wrapper style2">
56+
<div className="title">The Details</div>
57+
<div id="main" className="container">
58+
59+
{/* Image */}
60+
<a href="#" className="image featured">
61+
<img src="images/pic01.jpg" alt="" />
62+
</a>
63+
64+
{/* Features */}
65+
<section id="features">
66+
<header className="style1">
67+
<h2>Dolor consequat feugiat amet veroeros</h2>
68+
<p>Feugiat dolor nullam orci pretium phasellus justo</p>
69+
</header>
70+
{/* Feature List */}
71+
<div className="feature-list">
72+
<div className="row">
73+
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
74+
<section>
75+
<h3 className="icon fa-comment">Mattis velit diam vulputate</h3>
76+
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
77+
</section>
78+
</div>
79+
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
80+
<section>
81+
<h3 className="icon fa-refresh">Lorem ipsum dolor sit veroeros</h3>
82+
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
83+
</section>
84+
</div>
85+
</div>
86+
<div className="row">
87+
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
88+
<section>
89+
<h3 className="icon fa-picture-o">Pretium phasellus justo lorem</h3>
90+
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
91+
</section>
92+
</div>
93+
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
94+
<section>
95+
<h3 className="icon fa-cog">Tempus sed pretium orci</h3>
96+
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
97+
</section>
98+
</div>
99+
</div>
100+
<div className="row">
101+
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
102+
<section>
103+
<h3 className="icon fa-wrench">Aliquam consequat et feugiat</h3>
104+
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
105+
</section>
106+
</div>
107+
<div className="6u 12u(mobile)" style={this.props.mobileWidth}>
108+
<section>
109+
<h3 className="icon fa-check">Dolore laoreet aliquam mattis</h3>
110+
<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet vulputate. Eget mattis at, laoreet vel velit lorem.</p>
111+
</section>
112+
</div>
113+
</div>
114+
</div>
115+
{/* End Feature List */}
116+
<ul className="actions actions-centered">
117+
<li><a href="#" className="button style1 big">Get Started</a></li>
118+
<li><a href="#" className="button style2 big">More Info</a></li>
119+
</ul>
120+
</section>
121+
{/* End Features */}
122+
123+
</div>
124+
</div>
125+
{/* End Main */}
126+
127+
{/* Footer */}
128+
<div id="footer-wrapper" className="wrapper">
129+
<div className="title">The Rest Of It</div>
130+
<div id="footer" className="container">
131+
<header className="style1">
132+
<h2>Get In Touch</h2>
133+
<p>
134+
Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br /> Nam pharetra laoreet imperdiet volutpat etiam consequat feugiat.
135+
</p>
136+
</header>
137+
<hr />
138+
<Contact mobileWidth={this.props.mobileWidth} />
139+
<hr />
140+
</div>
141+
<div id="copyright">
142+
<ul>
143+
<li>Joey Gryder &copy; {(new Date()).getFullYear()}</li>
144+
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
145+
</ul>
146+
</div>
147+
</div>
148+
{/* End Footer */}
149+
150+
</div>
151+
</div >
152+
);
153+
}
154+
}
155+
156+
export default Home;

0 commit comments

Comments
 (0)