-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork.html
356 lines (293 loc) · 20 KB
/
work.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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jon Cody - My Work</title>
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<link rel="normalize" type="text/css" href="css/normalize.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<!--<link rel="stylesheet" type="text/css" href="css/style.production.css">-->
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-lg custom-navbar">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="sweet logo" class="navbar-logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Home</a>
<a class="nav-item nav-link" href="work.html">Projects</a>
<a class="nav-item nav-link" href="https://drive.google.com/file/d/1WQ9C1lgeQx0gQm6pS8LLM3t0dyfzm-xA/view?usp=sharing" target="_blank">Resume</a>
<a class="nav-item nav-link" href="work.html#case-study-1">Case Studies</a>
</div>
</div>
</nav>
<section class="work-samples">
<h1 style="margin-top:4%">Work Samples</h1>
<div class="work-samples slick-slider" style="margin-top:2%">
<!-- Slide 1 -->
<div class="project-card">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#pokedexModal">
<h2>Pokedex Web App</h2>
<img src="img/main-page.png" alt="Pokedex screenshot" class="project-image">
</button>
</div>
<!-- Slide 2 -->
<div class="project-card">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myFlix-modal">
<h2>myFlix React App</h2>
<img src="img/myFlix-screenshot.png" alt="myFlix screenshot" class="project-image">
</button>
</div>
<!-- Slide 3 -->
<div class="project-card">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#meetModal">
<h2>Meet App</h2>
<img src="img/Meet Snapshot.png" alt="Meet screenshot" class="project-image">
</button>
</div>
<!-- Slide 4 -->
<div class="project-card">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#chat-app-modal">
<h2>Chat App</h2>
<img src="img/Chat-App.PNG" alt="Chat App screenshot" class="project-image" style="width: 100%; max-height: 205px;">
</button>
</div>
<!-- Slide 5 -->
<div class="project-card">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myFlix-Angular-modal">
<h2>myFlix Angular App</h2>
<img src="img/myFlix-Angular.png" alt="myFlix Angular screenshot" class="project-image" style="width: 100%;">
</button>
</div>
<!-- Slide 6 -->
<div class="project-card">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#cookbook-collective-modal">
<h2 style="font-size: 1.4em;" class="project-title">The Cookbook Collective App</h2>
<img src="img/cookbook_collective.png" alt="Cookbook Collective screenshot" class="project-image" style="width: 100%;">
</button>
</div>
</div>
</section>
<!--CASE STUDIES-->
<h1 style="margin-top:8%">Case Studies</h1>
<section class="case-studies">
<div class="project-card">
<a href="https://drive.google.com/file/d/1NNPgDR7RSxytxEH99fD5L7o-3TBGeCfL/view?usp=sharing" target="_blank">
<button type="button" class="btn" id="case-study-1">
<h2>myFlix React App</h2>
<img src="img/myFlix-screenshot.png" alt="myFlix screenshot" class="project-image">
</button>
</a>
</div>
<div class="project-card">
<a href="https://drive.google.com/file/d/1FhwVMqy5uJJU_n8zW01W63VFeYo1LitD/view?usp=sharing" target="_blank">
<button type="button" class="btn" id="case-study-2">
<h2>Chat App</h2>
<img src="img/Chat-App.PNG" alt="Chat App screenshot" class="project-image" style="width: 100%; max-height: 205px;">
</button>
</a>
</div>
<div class="project-card">
<a href="https://drive.google.com/file/d/1m65BOhZo9QHAEe2w2H6rloNMranXf9As/view?usp=sharing" target="_blank">
<button type="button" class="btn" id="case-study-3">
<h2 style="font-size: 1.4em;" class="project-title">The Cookbook Collective App</h2>
<img src="img/cookbook_collective.png" alt="Cookbook Collective screenshot" class="project-image" style="width: 100%;">
</button>
</a>
</div>
</section>
<!-- MODALS -->
<section>
<!--pokedex modal-->
<div class="modal fade" id="pokedexModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-flex justify-content-center">
<h5 class="modal-title mx-auto" id="exampleModalLabel">Web App: Pokedex</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>I developed this web app with HTML, JavaScript, and CSS, and I have integrated the jQuery library and Bootstrap framework into this app. It fetches from a Pokemon API and displays the Pokemon as buttons. The buttons can be clicked to trigger modal functions built into Bootstrap. The modals display the Pokemon images, names, types, and heights.</p>
<p style="text-align: center;">
<a href="https://github.com/jcody49/simple-js-app" target="_blank">See the code on Github</a><br> or <br>
<a href="https://jcody49.github.io/simple-js-app/" target="_blank">Visit the web app</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--myFlix React modal-->
<div class="modal fade" id="myFlix-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-flex justify-content-center">
<h5 class="modal-title mx-auto" id="exampleModalLabel"> Single Page REST App: myFlix</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
This project involved building both the back end and front end of a React web application. First, I implemented the Express framework to route server requests and responses. After that, I designed the architecture of my API. Next, I built a non-relational database using MongoDB, configuring the schema and models with Mongoose. Also, I implemented JWT authentication methods and set up the strategies with Passport. The app features password hashing to keep users safe. The API is hosted via Heroku, and the MongoDB database has been deployed through MongoDB Atlas. <br><br>
As for the front end, I began with establishing the React library in my app as well Parcel for its bundling and transpiling capabilities. I created several components for the app using JSX and React Bootstrap: the main view, the sign-up view, the log-in view, the movie view, and the profile view. I also used cards in a responsive grid for the movie layout. In addition, I implemented client-side routing and a navigation bar using a state-based router. Last, I hosted the front end of the app via Netlify.
</p>
<p style="text-align: center;">
Visit the <a href="https://github.com/jcody49/myFlix-client-main" target="_blank">front-end</a> code or the <a href="https://github.com/jcody49/movie_api" target="_blank">back-end</a> code on Github<br> or <br>
<a href="https://myflixmoviepix.netlify.app/" target="_blank">Visit the progressive web app</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--meet modal-->
<div class="modal fade" id="meetModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-flex justify-content-center">
<h5 class="modal-title mx-auto" id="exampleModalLabel"> Progressive Web App: Meet</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
I developed a sophisticated application that enables users to discover local events by seamlessly integrating Google Calendar data. Throughout the project, I emphasized test-driven development (TDD) and behavior-driven development (BDD) to ensure the reliability and robustness of the codebase. Key aspects of the project included the implementation of serverless functions, comprehensive testing methodologies (unit tests, integration tests, end-to-end testing, and user acceptance tests), and secure authentication using Google OAuth. Leveraging Object-Oriented Programming principles, I designed and integrated alert functionality to enhance user engagement. As a Progressive Web Application (PWA), the app offers offline functionality and can be downloaded onto various devices for convenient access. Additionally, I incorporated data visualizations using Recharts to provide users with insightful and interactive displays. This project reflects my dedication to delivering high-quality solutions and leveraging cutting-edge technologies to meet user needs effectively.
</p>
<p style="text-align: center;">
<a href="https://github.com/jcody49/Meet" target="_blank">See the code on Github</a><br> or <br>
<a href="https://jcody49.github.io/Meet/" target="_blank">Visit the web app</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Chat App modal-->
<div class="modal fade" id="chat-app-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-flex justify-content-center">
<h5 class="modal-title mx-auto" id="exampleModalLabel"> React Native App: Chat App</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<p class="modal-body">
This comprehensive app boasts real-time messaging capabilities and versatile multimedia sharing features, including GPS locations, images, and videos. Users can personalize their experience with customizable options, ensuring a tailored interface that suits their individual preferences. I conducted exhaustive testing through Xcode and Android Studio to guarantee seamless cross-platform compatibility, delivering a consistent experience across both iOS and Android devices. By integrating a Firestore database, I ensured robust security and efficient client-side storage, prioritizing user privacy and data management. Notably, I implemented a custom ActionSheet feature to streamline user interaction, simplifying tasks such as image selection, photo capture, and location sharing. This project represents a testament to my dedication and expertise in delivering innovative solutions to meet the evolving needs of mobile communication.
</p>
<p style="text-align: center;">
<a href="https://github.com/jcody49/ChatApp" target="_blank">See the code on Github</a><br>
</p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div>h</div>
<!--myFlix Angular modal-->
<div class="modal fade" id="myFlix-Angular-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-flex justify-content-center">
<h5 class="modal-title mx-auto" id="exampleModalLabel"> React Native App: Chat App</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<p class="modal-body">
I crafted a dynamic web application using a stack comprising HTML, JavaScript, CSS, and Typescript, harnessing the power and versatility of the Angular framework for its design. This application offers users a seamless experience to explore a vast repository of movies, directors, and genres. With features such as user authentication, users can log in securely to access personalized content. Detailed information about movies, directors, and genres is readily available, empowering users to make informed choices. The ability to add movies to favorites and customize profile details adds a personalized touch to the user experience. Behind the scenes, the application communicates with a robust movie API, which relies on MongoDB to store and manage data efficiently. Together, these elements create a compelling platform for movie enthusiasts to discover, engage with, and enjoy their favorite films.
</p>
<p style="text-align: center;">
<a href="https://github.com/jcody49/myFlix-Angular-gh-pages/tree/main" target="_blank">See the code on Github</a><br> or <br>
<a href="https://jcody49.github.io/myFlix-Angular-gh-pages/" target="_blank">Visit the web app</a>
</p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Cookbook Collective App modal-->
<div class="modal fade" id="cookbook-collective-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-flex justify-content-center">
<h5 class="modal-title mx-auto" id="exampleModalLabel"> Cookbook Collective Python App</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<p class="modal-body">
The Cookbook Collective is a sophisticated Python recipe app that seamlessly incorporates object-oriented programming principles to organize its functionalities. Leveraging a MySQL database, the app efficiently stores recipe data, while Django serves as its sturdy framework, facilitating smooth interactions. Custom models, meticulously defined and tested, ensure data integrity and reliability. Robust authentication mechanisms, coupled with CSRF protection, guarantee secure user interactions. Matplotlib aids in crafting insightful data visualizations, seamlessly embedded into the HTML interface. Deployment to Heroku, with PostgreSQL as the production database and Gunicorn handling HTTP requests, underscores its scalability and reliability. By managing dependencies through a requirements file and safeguarding sensitive information with environment variables, The Cookbook Collective sets a high standard for recipe apps.
</p>
<p style="text-align: center;">
<a href="https://github.com/jcody49/recipe_App" target="_blank">See the code on Github</a><br>
<a href="https://immense-bastion-00478-585468ff82eb.herokuapp.com/" target="_blank">Visit the web app</a>
</p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</section>
<!-- Footer with links to social media profiles -->
<footer class="page-footer">
<div class="social-media">
Find me on:
<!-- Linkdin logo -->
<a href = "https://www.linkedin.com/in/jon-cody" target = "_blank"><img src="img/linkdin.svg" alt="linkdin" width="30"></a>
<!-- GitHub logo -->
<a href = "https://github.com/jcody49" target = "_blank"><img src="img/github.svg" alt="GitHub" width="30"></a>
</div>
</footer>
<!-- Add jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Add Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Add Bootstrap JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="js/tota11y.min.js"></script>
<!--SLICK CAROUSEL INIT SCRIPT-->
<script>
$(document).ready(function(){
console.log("Initializing slick slider...");
var slider = $('.slick-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
prevArrow: '<button class="slick-prev">❮</button>',
nextArrow: '<button class="slick-next">❯</button>',
dots: true, // Add pagination dots
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1
}
}
]
});
console.log("Slider initialized:", slider);
});
</script>
</body>
</html>