-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
293 lines (264 loc) · 16 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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title>Jonathan Gaytan</title>
<meta name="keywords" content="Jonathan Gaytan, Computer Science, Portfolio, CS, student, Texas A&M">
<meta name="description" content="This is a Portfolio Site for Jonathan Gaytan.">
<script src="main.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar fixed-top navbar-default navbar-expand-md navbar-dark " >
<div class="navbar-header d-flex col">
<a class="navbar-brand" href="#photo">
<img src="images/white-JAG-logo.png" alt="Logo" style="width:60px;" class="d-inline-block align-center" id="logo">
</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse"
class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#aboutMe" class="cool-link nav-link text-light">About Me</a></li>
<li class="nav-item"><a href="#experience" class="cool-link nav-link text-light">Experience</a></li>
<li class="nav-item"><a href="#projects" class="cool-link nav-link text-light">Projects</a></li>
<li class="nav-item"><a href="#contact-me" class="cool-link nav-link text-light">Contact Me</a></li>
</ul>
<a href="Resume/Jonathan_Gaytan.pdf" class="ml-auto" target="_blank"><button type="button" class="btn btn-outline-light btn-sm">Resume</button></a>
</div>
</nav>
<!-- Home Screen -->
<div class="container-fluid parallax-home" id="photo">
<div class="row align-items-start">
<img src="images/signature.png" alt="" class="mx-auto d-block">
</div>
<div class="row">
<div class="col-md-12 text-justify">
<h5 class="motto text-center text-white" id="homeTxt">Developer | Student | Teacher</h5>
</div>
</div>
</div>
<!-- About Me -->
<div class="container-fluid" id="aboutMe">
<div class="row align-items-center">
<div class="col-md-6 align-self-center">
<div class="row justify-content-center align-items-start">
<img src="images/jonathan_zoomed.jpg" alt="" id="headShot">
</div>
<div class="row justify-content-center">
<h2 class="text-white">Jonathan Gaytan</h2>
</div>
<!-- <div class="row justify-content-center">
<div class="op-card">
<h2 class="secondary-text">Jonathan Gaytan</h2>
<p>
<mark>School: </mark>  Texas A&M University<br>
<mark>Major: </mark>  Computer Science<br>
<mark>Graduation Year: </mark>  2022
</p>
</div>
</div> -->
</div>
<div class="col-md-6">
<div class="row">
<div class="op-card-small">
<h5 class="secondary-text">Skills</h5>
<p> <p class="skill-p"><img src="images/python-icon.png" alt="" class="skill-icon">Python
<img src="images/swift-icon.png" alt="" class="skill-icon">SwiftUI
<img src="images/cpp-icon.png" alt="" class="skill-icon">C++
<img src="images/javascript-icon.png" alt="" class="skill-icon">JavaScript
<img src="images/html-icon.png" alt="" class="skill-icon">HTML
<img src="images/css-icon.png" alt="" class="skill-icon">CSS
</p>
</div>
</div>
<div class="row">
<div class="op-card">
<h2 class="secondary-text">About Me</h2>
<p>I'm currently a Computer Science student at Texas A&M University who's dedicated to sharing my coding knowledge
and experience with younger peers. My goal is to create inclusive software that empowers people of all backgrounds.
As the Director of Technical Affairs for TAMU SHPE, I provide committee members with technical experience through
projects such as a Personal Website, Point Automation System, Organisation Website, and much more.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Experience -->
<div class="container-fluid" id="experience">
<div class="row">
<div class="col text-center text-white">
<h1>Experience</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 pb-4">
<div class="card bg-dark text-white" id = "test8">
<img src="images/SHPE_Logo.png" alt="SHPE" style="width:100%" class="card-img img-fluid">
<div class="card-body">
<h5 class="card-title">Society of Hispanic Professional Engineers</h5>
<p class="card-text">
As the Mobile App Lead, I have implemented an automated points system that ranks members based off
their involvement in the organization and has reduced the work of our secretaries by more than 80%. My main
role however is to mentor a group of beginner and intermediate members on our journey to develop a
mobile application that centralizes all technical and social resources for SHPE.
</p>
</div>
</div>
</div>
<div class="col-md-6 pb-4">
<div class="card bg-dark text-white" id = "test9">
<img src="images/maroon-tamu-logo.png" alt="Tamu Engineering" style="width:100%" class="card-img img-fluid">
<div class="card-body">
<h5 class="card-title">Engineering Peer Teacher</h5>
<p class="card-text">
As an Engineering Peer Teacher, I have collaborated with 6 professors to ensure that students are well
prepared to use Python in their engineering career. I've had to develop numerous was to communicate high
level concepts to students with little to no experience in programming. Having reviewed and graded hundreds of projects,
I’ve diversified my approach to certain coding problems.
</p>
</div>
</div>
</div>
<!-- <div class="col-md-4">
<div class="card mx-auto bg-dark text-white">
<img src="images/acc.png" alt="Avatar" style="width:100%" class="card-img img-fluid">
<div class="card-body">
<h5 class="card-title">Aggie Coding Club</h5>
<p class="card-text">
</p>
</div>
</div>
</div> -->
</div>
</div>
<!-- Projects -->
<div class="container-fluid" id="projects">
<div class="row">
<div class="col-md-9 mx-auto pb-2 text-center text-white">
<h1>Projects</h1>
</div>
<div class="col-md-9 mx-auto">
<div class="row mb-4 p-4 text-white project">
<div class="col-sm-4 my-auto px-0">
<img src="images/strimi_landing_page.png" alt="" class="img-fluid">
</div>
<div class="col-sm-8">
<h3>Strimi</h3>
<p> Strimi is a new way to discover and explore new music, movies, and tv shows. This platform allows users to freely express
their opinions and preferences with friends through the use of reviews, likes, and dislikes. Users are provided with relevent information
such as movie trailers, descriptions, and Spotify links to stream music. Strimi began as a class project, but after developing a passion, my team and I
continue to improve the design and functionality on our free time.
</p>
<div>
<button type="button" class="btn btn-sm btn-light">Firebase</button>
<button type="button" class="btn btn-sm btn-light">Spotify API</button>
<button type="button" class="btn btn-sm btn-light">TMDb API</button>
</div>
<div class="badge px-0 py-2">
<a href="http://strimi.net" class="btn btn-outline-light" target="_blank" role="button" aria-pressed="true">Visit Website</a>
</div>
</div>
</div>
<div class="row mb-4 p-4 text-white project">
<div class="col-sm-4 my-auto px-0">
<img src="images/LearnPy4.png" alt="" class="img-fluid">
</div>
<div class="col-sm-8">
<h3>LearnPy</h3>
<p>LearnPy is an iOS app I’m working on with the goal of providing beginner coders a free resource to
learn Python. Through a well-structured curriculum, students will be provided interactive learning
material including reading lessons, quizzes, and coding challenges that keep them engaged at home or
on the go.
</p>
<div>
<button type="button" class="btn btn-sm btn-light">SwiftUI</button>
<button type="button" class="btn btn-sm btn-light">Xcode</button>
</div>
<div class="badge px-0 py-2">
<a href="#" class="btn btn-outline-light" role="button" aria-pressed="true">Github</a>
</div>
</div>
</div>
<div class="row mb-4 p-4 text-white project">
<div class="col-sm-4 my-auto px-0">
<img src="images/google-apps-script.svg" alt="" class="img-fluid">
</div>
<div class="col-sm-8">
<h3>Point Automation System</h3>
<p>As a summer project I created a point automation system that was implemented into a preexisting
method that used Google Sheets. I utilized Google App Scripts and created a system that would read
student data from event forms and add it to a monthly sheet that has their points from events of that month.
Members are also added to a master point sheet where their overall points
are displayed from all months. New members are sent custom/automated emails with information about the
organization. More than 90% of the entire process is automated reducing the work of our Secretary Committee by up to 84%.
</p>
<div>
<button type="button" class="btn btn-sm btn-light">JavaScript</button>
<button type="button" class="btn btn-sm btn-light">Google App Scripts</button>
</div>
<div class="badge px-0 py-2">
<a href="#" class="btn btn-outline-light" role="button" aria-pressed="true">Github</a>
</div>
</div>
</div>
<div class="row mb-4 p-4 text-white project">
<div class="col-sm-4 my-auto px-0">
<img src="images/SHPE_APP_IMG.png" alt="" class="img-fluid">
</div>
<div class="col-sm-8">
<h3>TAMU SHPE App</h3>
<p>I recently started working on a mobile app for TAMU SHPE that will provide a virtual community for all members.
The app will allow students to sign up for events, view photos from past events, view statistics of their points,
and interact with each other. So far, I have implemented a LogIn and SignUp system/UI that utilizes Firebase to authenticate
users.
</p>
<div>
<button type="button" class="btn btn-sm btn-light">SwiftUI</button>
<button type="button" class="btn btn-sm btn-light">Xcode</button>
<button type="button" class="btn btn-sm btn-light">Firebase</button>
</div>
<div class="badge px-0 py-2">
<a href="#" class="btn btn-outline-light" role="button" aria-pressed="true">Github</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Me -->
<section id="contact-me" class="contact">
<div class="social-menu">
<h1>Contact Me</h1>
<ul>
<li><a target="_blank" href="https://github.com/jonathan343"><i class="fa fa-github"></i></a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/jonathan-gaytan-b3bab01ab/"><i class="fa fa-linkedin"></i></a></li>
<li><a target="_blank" href="https://twitter.com/JonathanG343"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/jonathang09_/"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</section>
<!-- <div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> Jonathan Gaytan</a>
</div> -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>