-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwork.html
More file actions
474 lines (473 loc) · 30.4 KB
/
work.html
File metadata and controls
474 lines (473 loc) · 30.4 KB
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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel= "icon" href= "assets/logo.png">
<title>Works</title>
</head>
<body>
<div class="modal fade" id="YouNiteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">YouNite</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img" src="assets/iphone Icon.jpg" alt="An app icon of the world"></div>
<div class="modal-body">
YouNite was an app icon that I created for an imaginary app in my Social Platform class. I thoroughly enjoyed learning how to make app logos as
I have always been genuinely curious about how to create one, as making an app of my own one day is a goal of mine. I also loved learning how to use
Adobe Illustrator more in depth and to challenge myself. I fell in love with the design of the icon I made as well as the overall app concept.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="BrandModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Brand Logo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img" src="assets/logo.png" alt="Personal Brand Logo"></div>
<div class="modal-body">
In today's age everyone needs their own brand. Something to be recognized by. I loved taking color theory and learning about what feelings shape convey to
create my own logo. While I love this logo, I recognize it could use improvement which I plan on doing in the future. When creating this logo I had not yet learned
about designing for accessibility and had just started using Adobe Illustrator. In the future, I would love to remaster my own logo and create something even better.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DogModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"> Illustration of Chica</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"> <img class="project-img" src="assets/Chica-Illustration.jpg" alt="Colorful artwork of a yellow labrador"></div>
<div class="modal-body">
I love dogs. More specifically, I adore my own dog, Chica. In trying to improve my skills, I decided to take a picture I love and create a
unique illustration of it using Adobe Draw. It was a fun challenge learning how to use Adobe Draw on the tablet with the pen and learning how to use all
the different brushes and blending. It's safe to say this is one of my favorite pieces of artworks that I have done.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="FamilyPhotoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Restoring Family Photos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img" src="assets/Grandpa Restoration Photo.jpg" alt="An old family photo of four men redone in color"></div>
<div class="modal-body">
One of my most sentimental projects, this project was done for my Digital Imaging Fundamentals course. This picture is an old family photo of my
now deceased grandfather with his family and friends. It was a delight trying to imagine what colors were in the original photo and recreating something so
near and dear to my heart. It is another level of satisfaction when the design work you do makes the lives of other people a happier, brighter place.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="StyleGuideModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img scroll-img" src="assets/MyFlorida-StyleGuide.JPG" alt="A style guide for MyFlorida.com"></div>
<div class = "text-center"><img class="project-img scroll-img" src="assets/style-guide-1.jpg" alt="A style guide for MyFlorida.com"></div>
<div class = "text-center"><img class="project-img scroll-img" src="assets/style-guide-2.jpg" alt="A style guide for MyFlorida.com"></div>
<div class = "text-center"><img class="project-img scroll-img" src="assets/style-guide-3.jpg" alt="A style guide for MyFlorida.com"></div>
<div class="modal-body">
In a group project, I was the designated Designer. I was in charge of creating the style guide and pattern libraries for a redesign and redevelopment
of the official state website, MyFlorida.com. It was a fun and exciting challenge to completely reimagine this website in a different color pattern and theme
layout. While it was more work than I anticipated creating all the user interface elements and pattern libraries, I enjoyed every last bit of it.
Here is the link if you want to view more:
<a href = "https://drive.google.com/file/d/1x58RoKi3GtiuKa-0OYZAcAtB3_AEK5On/view?usp=sharing"> MyFlorida Style Guide</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="HifiModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">YouNite Designs</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img" src="assets/Hi-fi Proto.PNG" alt="App layout designs"></div>
<div class = "text-center"><img class="project-img" src="assets/hi-fi-2.PNG" alt="App layout designs"></div>
<div class="modal-body">
Having to brand my YouNite application, I had to create some high-fidelity examples of what the app would look like on a mobile device. This included the categories
user could interact with and a messaging center. I had a lot of fun using a wireframe tool, it is actually one of my favorite tools to play with!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="FreshEatsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Fresh Eats</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Fresh Eats.JPG" alt="App layout designs"></div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Fresh-Eats-2.JPG" alt="App layout designs"></div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Fresh-Eats-3.JPG" alt="App layout designs"></div>
<div class="modal-body">
This is my most developed website and it utilizes PHP and MySQL. I used techniques such as database and sessions to create things such as logins and more.
Fresh Eats is a version of Hello Fresh where users can see recipies and buy meal kits. There is a login, a gallery to view, and a functional (not yet pretty) calander
one can view. This is one of my most favorite projects, as everything is done completely from scratch,no frameworks were used. In the future, I would like to polish the calander
and add more functionality to the website. Here is the link if you would like to see more:
<a href = "..."> Fresh Eats</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="MyFloridaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">MyFlorida Redesign</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/MyFlorida Website.png" alt="App layout designs"></div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/MyFlorida Website-2.JPG" alt="App layout designs"></div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/MyFlorida Website-3.JPG" alt="App layout designs"></div>
<div class="modal-body">
This project was the first project I have ever done with teammates. It was a fun and insightful experience, as I learned how important communication truly is
during this process. As the designer of the group, I created the color pallete and all the design choices for this website. Our group had a little hiccup with using WordPress
as we did not build the website on the server first.Our end product ended up having some slight design changes due to this, but the main idea is still there.
Here is the link to the site:
<a href = "https://students.cah.ucf.edu/~da336924/dig4104c/MyFlorida/"> MyFlorida</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="StudyAppModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Study App</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Study-App.JPG" alt="App layout designs"></div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Study-App-2.JPG" alt="App layout designs"></div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Study-App-3.JPG" alt="App layout designs"></div>
<div class="modal-body">
This project encompasses many techniques I learned throughout my Mobile Development class. The user can log in with their name and input anything for the password
and will be greeted by the app. The user then can choose a category to study and set various timers for it. They can also view a summary of what they studied. In the future,
I would like to update the summary component to save what topics the user has already studied. If you would like to see this app in more detail, here is the link:
<a href = "https://snack.expo.dev/@chanbeltran/portfolio-2"> Study App</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ExerciseModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Exercise App</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Exercise-App.JPG" alt="App layout designs"></div>
<div class="modal-body">
This app is much more simple than my Study App. The user can choose which exercise they would like to do and then they can click up a button to keep track
of how many reps they have complete. The can also reset this repetition counter if they wish. In the future, I would like to change the color scheme of the whole app,
as it is too bright and distracting for users. Here is the link:
<a href = "https://chanbeltran2019.github.io/portfolio-1/"> Exercise app</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="StackModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Exercise App (Stack Version)</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Stack-Example.JPG" alt="App layout designs"></div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/Stack-Example-2.JPG" alt="App layout designs"></div>
<div class="modal-body">
This application is a lot like the exercise app, but utilizes Stack Navigation. This time the exercises comes with descriptions and even has suggestions
for the next exercise the user can partake in. Here is the link to view more:
<a href = "https://snack.expo.dev/@chanbeltran/week-13---stack"> Exercise App (Stack Version)</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ToDoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">To-Do List</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "text-center"><img class="project-img scroll-img web-img" src="assets/To-Do-List.JPG" alt="App layout designs"></div>
<div class="modal-body">
One of my favorite applications that I have done, this To-Do list has all the basic features. You can create new tasks, check them off, and filter out the
completed tasks. This app also comes with a date you can pick to set a deadline. If you would like to see more, here is the link:
<a href = "https://snack.expo.dev/@chanbeltran/to-do-list"> Exercise app</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class = "nav-container">
<nav class = "navbar navbar-expand-lg navbar-light shadow p-3 mb-5 rounded">
<button class = "navbar-toggler" data-toggle = "collapse" data-target = "#navbarMenu">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarMenu">
<a href = "#" class = "navbar-brand"><img class = "logo" src = "assets/logo.png"/></a>
<ul class = "navbar-nav ms-auto">
<li class = "nav-item"><a href = "index.html" class = "nav-link" aria-current="page">Home</a></li>
<li class = "nav-item"><a href = "about.html" class = "nav-link">About</a></li>
<li class = "nav-item"><a href = "#" class = "nav-link last active">Works</a></li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid ">
<div class="row">
<div class="col works-header">
<h1 class = "text-center">Projects</h1>
</div>
</div>
<a id = "design_destination">
<div class="row">
<div class="col work-cat">
<h2>Design</h2>
</div>
</div>
</a>
<div class="row row-cols-1 row-cols-md-3 g-4 card-container">
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/iphone Icon.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">YouNite Icon</h5>
<p class="card-text fw-bold tool">Adobe Illustrator</p>
<p class="card-text">I created an App Icon for an imaginary application that would "YouNite" people from around the world together.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#YouNiteModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/logo.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">My Brand Logo</h5>
<p class="card-text fw-bold tool">Adobe Illustrator</p>
<p class="card-text">This is my brand logo. Inspired by my favorite colors, I created a logo that expressed who I am.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#BrandModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/Chica-Illustration.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Illustration of My Dog</h5>
<p class="card-text fw-bold tool">Adobe Draw/Tablet</p>
<p class="card-text">There is not much that I love more than my dog. I decided to recreate a picture of my pup with a creative twist.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#DogModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/Grandpa Restoration Photo.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Restoring Old Family Photos</h5>
<p class="card-text fw-bold tool">Adobe Photoshop</p>
<p class="card-text">It's fun to imagine old family photos come to life, who knows what the original colors were! Here was my take.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#FamilyPhotoModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/MyFlorida-StyleGuide.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">MyFlorida Style Guide</h5>
<p class="card-text fw-bold tool">Adobe Photoshop/Canva</p>
<p class="card-text"> Designing the colors, user interface elements, and layouts was a fun challenge for a website that had little to no content to begin with.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#StyleGuideModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/Hi-fi Proto.PNG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">YouNite App Designs</h5>
<p class="card-text fw-bold tool"> MockFlow WireFrames</p>
<p class="card-text">Creating the design of an app was a fun challenge, the colors of the application is my favorite part.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#HifiModal"> See more</button>
</div>
</div>
</div>
</div>
<a id = "front_end_destination">
<div class="row">
<div class="col work-cat">
<h2>Front-End Development</h2>
</div>
</div>
</a>
<div class="row row-cols-1 row-cols-md-3 g-4 card-container">
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/Fresh Eats.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Fresh Eats</h5>
<p class="card-text fw-bold tool"> PHP/MySQL/JavaScript/HTML/CSS</p>
<p class="card-text">My most developed website. This website includes PHP functionality, including sessions for logging in.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#FreshEatsModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/MyFlorida Website.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">MyFlorida</h5>
<p class="card-text fw-bold tool"> WordPress</p>
<p class="card-text">My first website built as a group. I was in charge of the design and aided in the development of this WordPress site.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyFloridaModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/Study-App.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Study App</h5>
<p class="card-text fw-bold tool"> React Native</p>
<p class="card-text">This project was a culmination of a lot of skills I acquired through learning Mobile Development using React Native.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#StudyAppModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/Exercise-App.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Exercise App</h5>
<p class="card-text fw-bold tool"> React Native</p>
<p class="card-text">This is a small functionality snippet using incrementation to have a successfully tracked workout.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ExerciseModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/Stack-Example.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Exercise with Stack</h5>
<p class="card-text fw-bold tool"> React Native/SnackExpo</p>
<p class="card-text">Another exercise app but with even more functionality. This app uses the Stack Navigator to navigate through exercises.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#StackModal"> See more</button>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="skill card">
<img class="card-img-top project-img" src="assets/To-Do-List.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">To-Do List</h5>
<p class="card-text fw-bold tool"> React Native/SnackExpo</p>
<p class="card-text">A To-Do List that is sure to keep you organized! Even includes a date picker! Now you'll never miss a task.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ToDoModal"> See more</button>
</div>
</div>
</div>
</div>
<div class = "container-fluid">
<div class = "row">
<div class = "col d-flex flex-column text-center">
<footer>
<img class = "contact-icon" src = "assets/logo.png" alt= "brand logo">
<p class = "fw-bold"> Chantal Beltran</p>
<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</footer>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>