-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
255 lines (242 loc) · 12.9 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maria Isabel Arévalo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container-fluid" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">María Arévalo</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#abt">About me</a></li>
<li><a href="#pry">Projects</a></li>
<li><a href="#skills" >Skills</a></li>
<li><a href="#cont">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="abt" class="container-fluid">
<!--<h3>María Arévalo</h3>-->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 id="habt" >About me</h2>
<h4 class="text-muted">A Systems engineering student willing to improve everyday</h4>
</div>
</div><!--row-->
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
<div>
<h4 style="text-align:center">Who am I?</h4>
<p class="text-muted" id="aboutme">I'm Maria Arevalo, currently I'm studying systems engineering at Los Andes University in Colombia. I'm from Arauca, Colombia.
It's a little country town with warm weather on the border with Venezuela. Since I was little I wanted to dedicate my life to anything software related.
To achieve this, I worked hard at my school to win the "Quiero Estudiar Escala" scholarship, provided by the University I'm currently in. I expect to graduate in 2018.
Studying this career in this university has been a wonderful experience to me due to all the fantastic things I've learn and the people I've met.</p>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div>
<h4 style="text-align:center">Interests</h4>
<p class="text-muted" id="int">I enjoy teaching new stuff to people. I've been teaching assistant of the object oriented programming class, and it's a joy to me seeing
how students learn all the wonderful things you can make with code.
Besides computer science related stuff I also enjoy music. During my free time back when I was in school, I learned to play the piano and the guitar.
Music is a whole new way of seeing the world, and learning the way is written and interpreted boosts your way of thinking</p>
</div>
</div>
</div><!--row-->
</div><!--container-->
</div><!--Div abt-->
<div id="pry" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Projects</h2>
<h4 class="text-muted">Projects I'v worked in through my career</h3>
</div>
</div><!--row-->
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a data-toggle="modal" data-target="#myModal1">
<img src="http://www.feathersoft.com/assets/images/level4/web_application.png" class="img-responsive center-block imgPry" alt="web app image">
</a>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mis vacaciones</h4>
</div>
<div class="modal-body">
<p>Web app developed in the Software Development class. It was made to keep track of your itinerary for your vacations.
You could have multiple itineraries and see them in a timeline or a schedule. Build with HTML, CSS, AngularJS and bootstrap
We've worked in teams of 4 and used tools like teamwork and postmorten at the end of every sprint.</p>
<a href="https://github.com/isis2603-Backup/punajut">Link to repo</a>
</div>
</div>
</div>
</div>
<div class="text-center"><!--info-->
<h4>Mis vacaciones</h4>
<div class="tag">AngularJS</div>
<div class="tag">Java</div>
<div class="tag">Jax-rs</div>
<div class="tag">HTML+CSS</div>
</div><!--info-->
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a data-toggle="modal" data-target="#myModal2">
<img src="http://www.nao.usace.army.mil/portals/31/siteimages/logos/PortofVA.jpg" class="img-responsive center-block imgPry" alt="port image">
</a>
<div class="text-center">
<h4>PuertoAndes</h4>
<div class="tag">Java</div>
<div class="tag">Jax-rs</div>
<div class="tag">SQL</div>
<div class="tag">REST</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PuertoAndes</h4>
</div>
<div class="modal-body">
<p>Developed in the Database class. A project made in pairs where we managed all the possible transactions that can occur in a port.
We used REST and Jax-rs architecture.Through this project I've learned the core concepts of relational databases using an oracle database. </p>
<a href="https://bitbucket.org/sistrans/puertoandes">Link to repo</a>
</div>
</div>
</div>
</div>
</div><!--project2 -->
<div class="col-md-4 col-sm-6 col-xs-12">
<a data-toggle="modal" data-target="#myModal3">
<img src="http://www.blugraphic.com/wp-content/uploads/2014/10/Oil-Logos-1.jpg" class="img-responsive center-block imgPry" alt="Oil logo">
</a>
<div class="text-center">
<h4>OilCol</h4>
<div class="tag">Java</div>
<div class="tag">Play!</div>
<div class="tag">AngualJS</div>
<div class="tag">IoT</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">OilCol</h4>
</div>
<div class="modal-body">
<p>Web app to manage an Oil Company. Developed for the Software architecture class, it involved a team work of 3.
We used Play framework and implemented a load balancer along with a PostgreSql database. We also implemented IoT techonology with the help of arduino and node-red</p>
<a href="https://github.com/miarevalo10/Oilcol">Link to repo</a>
</div>
</div>
</div>
</div>
</div><!--Project3-->
</div><!--row-->
</div><!--container-->
</div><!--Div pry-->
<div id="skills" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 >Skills & Education</h2>
</div>
</div>
<div class="col-md-5 prskills">
<h4>Java</h4>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100" style="width:84%">
</div>
</div><!--progress bar-->
<h4>HTML+CSS</h4>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
</div><!--progress bar-->
<h4>AngularJS</h4>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div><!--progress bar-->
<h4>JavaScript</h4>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
</div>
</div><!--progress bar-->
<h4>SQL</h4>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
</div><!--progress bar-->
</div>
<div class="col-md-1">
</div>
<div class="col-md-5 prskills edu">
<div class="list-group">
<ul> I've taken courses in...
<li class="list-group-item">Software Architecture </li>
<li class="list-group-item">Software Development</li>
<li class="list-group-item">Databases</li>
<li class="list-group-item">Computer Infraestructure</li>
<li class="list-group-item">Enterprise architecture </li>
</ul>
</div>
<a href="img/TOEFL.pdf">TOEFL Certificate</a>
</div><!--Education -->
</div>
</div>
<div id="cont" class="container-fluid " >
<div class="row"> <span><h2>Contact me!</h2></span>
</div>
<div class="row" style="display: table !important; margin:0 auto !important;">
<a class="col-md-4" href="https://github.com/miarevalo10">
<i class="fa fa-fw fa-github fa-5x"></i>
</a>
<a class="col-md-4" href="https://twitter.com/miarevalo10">
<i class="fa fa-fw fa-twitter fa-5x"></i>
</a>
<a class="col-md-4" href="https://www.facebook.com/mariaisabelarevalo">
<i class="fa fa-fw fa-facebook fa-5x"></i>
</a>
</div>
</div><!--Contact-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>