-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (206 loc) · 16.3 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
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
<!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">
<!-- Special Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates|Homemade+Apple" rel="stylesheet">
<!-- font-family: 'Homemade Apple', cursive; font-family: 'Montserrat Alternates', sans-serif;-->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"crossorigin="anonymous"></script>
<!-- Moment.js -->
<script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
<!-- Popper -->
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
crossorigin="anonymous"></script>
<!-- Linked files -->
<script type="text/javascript" src="assets/javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<title>Tri Pham Portfolio</title>
</head>
<body>
<div class="title text-center">Tri Pham</div>
<div class="container">
<div class="row margin-bot">
<div class="col-lg-2 padding-top">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Welcome</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">About Me</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Inspirations</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Future Endeavors</a>
</div>
</div>
<div class="col-lg-6 padding-top">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<p>Welcome to my portfolio! If you wish to contact me, use the information on the right side and be sure to include yours as well. </p>
<p>My projects are listed below along with the links to the repositories on GitHub.</p>
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
<p class="aboutText"> My name is Tri Pham and I recently graduated from the United States Merchant Marine Academy with a Bachelor's Degree in Maritime Transportation and Logistics. I have traveled the world on a variety of vessels and enjoyed every moment of the unique experience. My first ship was a Ro-Ro, or car carrier, that I had to meet in Aquaba, Jordan. From there, we traveled all around the Middle East going to ports in Kuwait, Pakistan, and Saudi Arabia. Eventually, we left to East Asia and then back to the United States. The whole journey was three months before I got off the ship in Rhode Island and went back to school.</p>
<p class="aboutText"> The next year, I had to go back out to sea for a total of eight months on a tanker vessel that performed underway replenishment operations for the Navy. I picked up the ship in New Jersey and headed off across the Atlantic Ocean for the Mediterranean. This time, we stayed around Greece and Jebel Ali for most of the journey. However, we were also able to go to Spain, Italy, and Scotland for a few days. After serving my eight months, I flew back from Rota, Spain to New York to finish my schooling. During my time at the Academy, I was able to circumnavigate the world, transit through both the Suez and Panama Canal, and explore a multitude of incredible places. </p>
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
<img class="construction" src="./assets/images/construction.png" alt="">
</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
<img class="construction" src="./assets/images/construction.png" alt="">
</div>
</div>
</div>
<div class="col-lg-4 text-center imgDiv">
Contact Me
<div class="contactInfo">
Email: [email protected]
</div>
<div class="contactInfo">
Phone: (111)-111-1111
</div>
<div >
<a href="https://github.com/Epiphamatic" target="_blank"> <img class="github" src="./assets/images/github3.png" alt=""> </a>
<a href="https://www.linkedin.com/in/tri-pham-jr/" target="_blank"> <img class="linkedin" src="./assets/images/linkedin2.png" alt=""> </a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="accordion" id="accordionExample">
<div class="card projectHeaders">
<div class="card-header" id="headingOne">
<h5 class="mb-0 btnSize">
<button class="btn btn-link collapsed btnSize" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
CRYPTON
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>CRYPTON is a crypto-currency tracker that allows for the user to store their desired coins within the div below and view live graphs of current and past market trends. No longer will your money sit silently in your bank account and slowly wait for the day to be used. On CRYPTON, everyone can be super and the best kind of super is super rich. </p>
<br>
<div>
<img src="./assets/images/crypton.PNG" class="imgCollapse" alt="">
</div>
<a href="https://github.com/Epiphamatic/Project-1" target="_blank"> <img src="./assets/images/repo.png" class="repo" alt=""> </a>
<a href="https://epiphamatic.github.io/Project-1/" target="_blank"> <img src="./assets/images/live.png" class="live" alt=""> </a>
</div>
</div>
</div>
<div class="card projectHeaders">
<div class="card-header" id="headingTwo">
<h5 class="mb-0 text-center">
<button class="btn btn-link collapsed btnSize" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Trivia Game
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<p>This Pokemon-themed trivia game asks you 10 questions on the wonders of the game world. However, you're on a timer, so you have to guess fast otherwise you may end up losing it all! At the end, your total score is shown with an option to try again. Can you guess them all? </p>
<br>
<div>
<img src="./assets/images/trivia.PNG" class="imgCollapse" alt="">
</div>
<br>
<div class="links">
<a href="https://github.com/Epiphamatic/TriviaGame" target="_blank"> <img src="./assets/images/repo.png" class="repo" alt=""> </a>
<a href="https://epiphamatic.github.io/TriviaGame/" target="_blank"> <img src="./assets/images/live.png" class="live" alt=""></a>
</div>
</div>
</div>
</div>
<div class="card projectHeaders">
<div class="card-header" id="headingThree">
<h5 class="mb-0 text-center">
<button class="btn btn-link collapsed btnSize" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Giphy
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<p>Have you ever wanted to know about the mythical wonders of the world? Well now you can with the Giphy Search site! This page utilizes the Giphy API to allow one to search up any topic on the web and display 10 different results for it in a .gif format. There is an unlimited amount of options so click on an image to witness the magic of movement!</p>
<br>
<div>
<img src="./assets/images/giphy.PNG" class="imgCollapse" alt="">
</div>
<br>
<a href="https://github.com/Epiphamatic/giphy" target="_blank"> <img src="./assets/images/repo.png" class="repo" alt=""> </a>
<a href="https://epiphamatic.github.io/giphy/" target="_blank"> <img src="./assets/images/live.png" class="live" alt=""> </a>
</div>
</div>
</div>
<div class="card projectHeaders">
<div class="card-header" id="headingFour">
<h5 class="mb-0 text-center">
<button class="btn btn-link collapsed btnSize" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
LIRI
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">
<p>From the users of command-based voice programs, LIRI is a revolutionary new application that allows for the user to search for tweets, songs, and concerts within terminal itself. Utilizing Node and Node Package Manager, experience firsthand the true strength of search programs without the hassle of Google. Let the revolution begin!</p>
<br>
<div>
<img src="./assets/images/liri.PNG" class="imgCollapse" alt="">
</div>
<br>
<a href="https://github.com/Epiphamatic/LIRI" target="_blank"> <img src="./assets/images/repo.png" class="repo" alt=""> </a>
<a href="https://github.com/Epiphamatic/LIRI" target="_blank"> <img src="./assets/images/live.png" class="live" alt=""> </a>
</div>
</div>
</div>
<div class="card projectHeaders">
<div class="card-header" id="headingFive">
<h5 class="mb-0 text-center">
<button class="btn btn-link collapsed btnSize" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFour">
Bamazon
</button>
</h5>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
<p>Have you decided that Amazon was too complicated to navigate? Well, the problem is now solved with the creation of Bamazon! Using a simple text prompt, we show you what's available to purchase and whether it is in stock for your shopping pleasure. Do you see it on the list? Then we have it. Do you not see it on the list? Then we don't. Simple!</p>
<br>
<div>
<img src="./assets/images/bamazon.PNG" class="imgCollapse" alt="">
</div>
<br>
<a href="https://github.com/Epiphamatic/Bamazon" target="_blank"> <img src="./assets/images/repo.png" class="repo" alt=""> </a>
<a href="https://github.com/Epiphamatic/Bamazon" target="_blank"> <img src="./assets/images/live.png" class="live" alt=""> </a>
</div>
</div>
</div>
<div class="card projectHeaders">
<div class="card-header" id="headingSix">
<h5 class="mb-0 text-center">
<button class="btn btn-link collapsed btnSize" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseFour">
HYPE
</button>
</h5>
</div>
<div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordionExample">
<div class="card-body">
<p>Picture this: You're at a party and the music is reverberating throughout your body with everyone dancing around you. Then, Never Gonna Give You Up pops up at full blast and ruins the whole atmosphere along with any chance of you having a fun night. Well, no longer will this be a problem with HYPE! HYPE is a dynamic playlist that integrates with your Spotify that allows for each individual at a party to vote on how they feel about a song. Depending on the percentage of people who like a song, it will go up higher in the queue to play earlier or get deleted if too many people hate the music choice. The party never stops with HYPE! </p>
<br>
<div>
<img src="./assets/images/HYPE.PNG" class="imgCollapse" alt="">
</div>
<br>
<a href="https://github.com/Epiphamatic/Project-2" target="_blank"> <img src="./assets/images/repo.png" class="repo" alt=""> </a>
<a href="https://obscure-garden-48741.herokuapp.com/" target="_blank"> <img src="./assets/images/live.png" class="live" alt=""> </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>