-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
245 lines (235 loc) · 11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link
href="https://fonts.googleapis.com/css?family=Roboto+Slab:700|Roboto:300,400"
rel="stylesheet"
/>
<link href="./assets/css/reset.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/styles.css" rel="stylesheet" type="text/css" />
<title>Joshua Stevens</title>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="./assets/images/js-logo.png" alt="joshua stevens logo">
</div>
<div class="navigationLinks">
<a class="navigationLink" data-target="bio" href="#">About Me</a>
<a class="navigationLink" data-target="development" href="#"
>Projects</a
>
<a class="navigationLink" data-target="contact" href="#">Contact</a>
</div>
</nav>
</header>
<div class="pageWrapper">
<section id="home">
<div class="codeImage text parallax" data-speed="38">
<h1 id="titleText">Joshua Stevens</h1>
</div>
<div class="codeImage subtext parallax" data-speed="18">
<h2 id="subTitleText"><span class="green">{</span> A web <span class="purple">developer</span> & designer in Nashville <span class="green">}</span></h2>
</div>
<div class="codeImage green parallax" data-speed="52"></div>
<div class="codeImage blue parallax" data-speed="38"></div>
<div class="codeImage red parallax" data-speed="22"></div>
<div class="codeImage purple parallax" data-speed="3"></div>
<div class="codeImage gray parallax" data-speed="12"></div>
</section>
<section id="bio">
<article>
<div class="profilePicture">
<img src="./assets/images/josh-and-his-dog.jpg" class="profilePic" alt="Joshua Stevens and his dog.">
</div>
<div class="articleContent">
<h2>Design & Development</h2>
<p>
I’m a highly creative and accomplished <span class="red">digital creator</span> capable of designing <span class="purple">engaging UI and UX</span> experiences as well as writing code to
bring designs to life.</p>
<p>
With <span class="green">ten years of experience</span> in web <span class="blue">design</span>
and <span class="red">development</span>, I’ve built numerous websites and Saas applications
using front-end technologies like <span class="gray">HTML</span>, <span class="green">JavaScript</span>, and <span class="blue">React</span>.
Exceptional interpersonal skills, work ethic and an <span class="purple">eager-to-learn</span> attitude have propelled my career. I am continuing to stretch
myself, focusing on bolstering my <span class="red">back-end</span> know-how.
</p>
<p>See some of of my work:</p>
<a class="dribbble" href="http://joshuastevens.dribbble.com/" target="_blank">Dribbble <i class="fab fa-dribbble"></i></a>
<a class="github" href="https://github.com/jstevens79" target="_blank">GitHub <i class="fab fa-github"></i></a>
</div>
</article>
</section>
<section id="development">
<h2><span class="purple">{</span> Development Projects <span class="purple">}</span></h2>
<p>
Here are some of my most recent projects, done for a coding bootcamp I
am a part of.
</p>
<div class="projectsContainer">
<div class="project">
<div class="projectIcon"><i class="fas fa-gamepad"></i></div>
<div class="description">
<h3>Avengers: Assemble Words</h3>
<p>A word guessing game with a fun theme. Beware Thanos's snap!</p>
<a href="https://jstevens79.github.io/Word-Guess-Game/" target="_blank" class="view">View</a>
<a href="https://github.com/jstevens79/Word-Guess-Game" target="_blank" class="viewCode">View Code</a>
</div>
<div class="technologies">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
</div>
<div class="project">
<div class="projectIcon"><i class="fas fa-jedi"></i></div>
<div class="description">
<h3>STAR WARS: RPG</h3>
<p>A simple RPG game built with HTML and JavaScript. Can you defeat all opponents?</p>
<a href="https://jstevens79.github.io/star-wars-rpg/" target="_blank" class="view">View</a>
<a href="https://github.com/jstevens79/star-wars-rpg" target="_blank" class="viewCode">View Code</a>
</div>
<div class="technologies">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
</div>
<div class="project">
<div class="projectIcon"><i class="fas fa-ticket-alt"></i></div>
<div class="description">
<h3>Movie Trivia</h3>
<p>How well do you know movies? Find out in this challenging quiz.</p>
<a class="view" href="https://jstevens79.github.io/TriviaGame/" target="_blank">View</a>
<a href="https://github.com/jstevens79/TriviaGame" target="_blank" class="viewCode">View Code</a>
</div>
<div class="technologies">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>JSON</li>
</ul>
</div>
</div>
<div class="project">
<div class="projectIcon"><i class="fas fa-images"></i></div>
<div class="description">
<h3>GifTastic</h3>
<p>See trending gifs from Giphy, add gifs by topic, and manage your list.</p>
<a class="view" href="https://jstevens79.github.io/giftastic/" target="_blank">View</a>
<a href="https://github.com/jstevens79/GifTastic" target="_blank" class="viewCode">View Code</a>
</div>
<div class="technologies">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>AJAX</li>
<li>LocalStorage</li>
</ul>
</div>
</div>
<div class="project">
<div class="projectIcon"><i class="fas fa-subway"></i></div>
<div class="description">
<h3>Train Scheduler</h3>
<p>Add trains, choose their start time and frequency and see their next arrival times in real-time, using Firebase.</p>
<a class="view" href="https://jstevens79.github.io/Train-Scheduler/" target="_blank">View</a>
<a href="https://github.com/jstevens79/Train-Scheduler" target="_blank" class="viewCode">View Code</a>
</div>
<div class="technologies">
<ul>
<li>HTML</li>
<li>Javascript</li>
<li>CSS</li>
<li>Firebase</li>
<li>Moment.js</li>
</ul>
</div>
</div>
<div class="project">
<div class="projectIcon"><i class="fas fa-calendar-check"></i></div>
<div class="description">
<h3>PlanIt</h3>
<p>A small social-planning app that lets you choose create events, add friends and see their response in real-time.</p>
<a class="view" href="https://jstevens79.github.io/Project1/" target="_blank">View</a>
<a href="https://github.com/jstevens79/Project1" target="_blank" class="viewCode">View Code</a>
</div>
<div class="technologies">
<ul>
<li>HTML</li>
<li>Javascript</li>
<li>CSS</li>
<li>AJAX Requests</li>
<li>Firebase</li>
</ul>
</div>
</div>
<div class="project">
<div class="projectIcon"><i class="fas fa-hamburger"></i></div>
<div class="description">
<h3>Burger Time</h3>
<p>A simple application that allows you to add, eat or delete burgers (or regurgitate, if you'd like).</p>
<a class="view" href="https://boiling-tor-33041.herokuapp.com/" target="_blank">View</a>
<a href="https://github.com/jstevens79/burger" target="_blank" class="viewCode">View Code</a>
</div>
<div class="technologies">
<ul>
<li>Node</li>
<li>Express</li>
<li>Handlebars</li>
<li>jQuery</li>
<li>MySQL</li>
</ul>
</div>
</div>
<div class="project">
<div class="projectIcon"><i class="fas fa-tasks"></i></div>
<div class="description">
<h3>MNGR</h3>
<p>A project managment application featuring authentication, roles and a custom UI.</p>
<a class="view" href="https://murmuring-gorge-74790.herokuapp.com/" target="_blank">View</a>
<a href="https://github.com/jstevens79/project-management-app" target="_blank" class="viewCode">View Code</a>
</div>
<div class="technologies">
<ul>
<li>Node</li>
<li>Express</li>
<li>Passport</li>
<li>Handlebars</li>
<li>Sass</li>
<li>MySQL</li>
</ul>
</div>
</div>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Interested in working with me?</p>
<div class="contactLinks">
<a href="mailto:joshua@joshuastevensdesign.com" class="email">Email Me <i class="fas fa-envelope"></i></a>
<a href="https://www.linkedin.com/in/joshuastevens79/" target="_blank" class="linkedIn">Connect on LinkedIn <i class="fab fa-linkedin"></i></a>
<a href="./assets/pdf/Joshua_Stevens_Resume_2019.pdf" target="_blank" class="resume">View my resume <i class="fas fa-file"></i></i></a>
</div>
</section>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
<script src="./assets/scripts/parallax-effect.js"></script>
<script src="./assets/scripts/page-scripts.js"></script>
</body>
</html>