nonameable.github.io/temporal.html at master · nonameable/nonameable.github.io · GitHub

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
<div id="wellColModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel" style="text-align:center">WellCol</h3>
                      </div>
                      <div class="modal-body">
                        <img src="static/img/timeline/wellcol.png" alt="well col front page">
                        <h3>(2016) - Team project</h3>
                        <p>Application for storing information and monitoring emergencies a petroleum wells network.</p>
                        <p> The main objective for this project was to implement client requirements taking into account
                            quality attributes such as usability, performance, reliability, and security. </p>
                        <p> We made use of load balancers such as Nginx in order to guarantee availability
                            and also applied design patters such as Factory Method and Proxy to reach the desired levels of coupling and cohesion in
                            the source code.</p>
                        <p> In addition, we implemented an API that allowed communication with real sensors measuring data using NodeRED.</p>
                        <p>Technologies used: NodeJS, Express, PostreSQL and Angular.  We developed a client for Android and iOS.</p>
                        <p><a href="https://github.com/nonameable/well-col" target="_blank"> Code </a></p>
                      </div>
                    </div> <!-- Modal-->
                    <div id="UnitripModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel" style="text-align:center">Unitrip</h3>
                      </div>
                      <div class="modal-body">
                        <img src="static/img/projects/unitrip.png" alt="unitrip screenshot">
                        <p>Web application that allows users to plan your holidays. Users can create schedules, stops and events.</p>
                        <p>Our main goal was to learn how to make a simple application that exposed a well designed RESTFUL API.
                            As our secondary goal was to design a good system that modeled in the best possible way one to one, one to many, many to one
                            and many to many relationships</p>
                        <p> We made use of a object relational database and and JPA for persistence</p>
                        <p>Technologies used: Java EE, AngularJS</p>
                      <div class="gallery">
                        <div class="responsive">
                          <div class="img">
                            <a target="_blank" href="/static/img/projects/techdebt.png">
                              <img src="/static/img/projects/techdebt.png" alt="Tech debt image" width="300" height="200">
                            </a>
                            <div class="desc">Technical debt of the project during its duration</div>
                          </div>
                        </div>
                        <div class="responsive">
                          <div class="img">
                            <a target="_blank" href="/static/img/projects/sonar1.png">
                              <img src="/static/img/projects/sonar1.png" alt="Sonarqube image 1" width="600" height="400">
                            </a>
                            <div class="desc">Sonarqube summary 1</div>
                          </div>
                        </div>
                        <div class="responsive">
                          <div class="img">
                            <a target="_blank" href="/static/img/projects/sonar2.png">
                              <img src="/static/img/projects/sonar2.png" alt="Sonarqube image 2" width="600" height="400">
                            </a>
                            <div class="desc">Sonarqube summary 2</div>
                          </div>
                        </div>
                        <div class="responsive">
                          <div class="img">
                            <a target="_blank" href="/static/img/projects/api.png">
                              <img src="/static/img/projects/api.png" alt="Snapshot of API" width="600" height="400">
                            </a>
                            <div class="desc">Snapshot of API from Postman</div>
                          </div>
                        </div>
                      </div>
                      </div>
                    </div> <!-- Modal-->
                    <div id="CCTModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel" style="text-align:center">CCT</h3>
                  </div>
                  <div class="modal-body">
                    <img src="static/img/timeline/roads.png" alt="CCT map">
                    <h3>(2015) - Team project</h3>
                    <p> Application for finding shortest/cheapest/ routes for package delivery in Bogotá, Colombia using shortest path, Dijkstra and other graph algorithms. </p>
                    <p>The program saved the most efficient route in a file and also was able to draw it upon Google Maps</p>
                    <p>In order to increase the efficiency of our program we reimplemented the algorithms usind redundancy of data structures to make the operations as efficient as possible. Of course, we traded space for time complexity. This resulted in our program being at least 10x faster than other applications for certain searches.</p>
                    <p> This application was made using pure Java.</p>
                  </div>
                    </div> <!-- Modal-->
                    <div id="PuertoAndesModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel" style="text-align:center">Puerto Andes</h3>
                  </div>
                  <div class="modal-body">
                    <img src="static/img/projects/port3.png" alt="port image">
                    <h3>(2015) - Team project</h3>
                    <p>Application for storage, management and analysis of a port network. The application was able to handle many types of transactions
                        regarding the multiple agents in a port such as: customers, ships, containers, workers, employees, employers, traders, etc.<p></p>
                    <p> At the end of the project our database had tables with more than 2 million rows. All this data was proccesed and worked
                        by the implementation of a efficent database schema that used good design and indexes to make faster searches and also
                        efficient in memory algorithms when necessary</p>
                    <p> We also exposed all of this functionalities through a RESTFUL API.</p>
                    <p> Technologies used: Oracle11g, Java JDBC, SQLDeveloper.</p>
                  </div>
                    </div> <!-- Modal-->
                    <div id="CosasDePazModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabel" style="text-align:center">Cosas de Paz</h3>
                </div>
                <div class="modal-body">
                  <img src="static/img/projects/paz/plaza.jpg" alt="Candle in peace">
                  <h3>Current</h3>
                  <p> Application that informs its users about the most popular and relevant online content related to the peace process in Colombia. </p>
                  <p>  I used NodeJS, Express, MongoDB, Angular. </p>
                  <p><a href="https://github.com/nonameable/cosas_de_paz" target="_blank"> Code </a></p>
                </div>
                    </div> <!-- Modal-->
                    <div id="MentiraVerdadModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabel" style="text-align:center">Mentira y verdad</h3>
                </div>
                <div class="modal-body">
                  <img src="static/img/projects/pinocho.jpg" alt="pinocho evil">
                  <h3>Current</h3>
                  <p> Application that post what our most famous politicians say on twitter and let people decide if it is true or not. </p>
                  <p><a href="https://github.com/nonameable/mentira-verdad" target="_blank"> Code </a></p>
                </div>
                    </div> <!-- Modal-->
                      <div class="row-fluid">
                          <ul class="thumbnails">
                            <li class="span4">
                              <a href="#wellColModal" data-toggle="modal"><img src="static/img/timeline/wellcol.png" alt="well col front page"></a>
                              <div class="caption">
                                <h3>WellCol</h3>
                              </div>
                            </li>
                            <li class="span4">
                              <a href="#UnitripModal" data-toggle="modal"><img src="static/img/projects/unitrip.png" alt="unitrip image"></a>
                              <div class="caption">
                                <h3>Unitrip</h3>
                              </div>
                            </li>
                            <li class="span4">
                              <a href="#CCTModal" data-toggle="modal"><img src="static/img/timeline/roads.png" alt="CCT map"></a>
                              <div class="caption">
                                <h3>CCT</h3>
                              </div>
                            </li>
                        </ul>
                      </div>
                      <div class="row-fluid">
                          <ul class="thumbnails">
                            <li class="span4">
                              <a href="#PuertoAndesModal" data-toggle="modal"><img src="static/img/projects/port3.png" alt="port"></a>
                              <div class="caption">
                                <h3>Puerto Andes</h3>
                              </div>
                            </li>
                            <li class="span4">
                              <a href="#CosasDePazModal" data-toggle="modal"><img src="static/img/projects/paz/soldier.jpg" alt="candle in peace"></a>
                              <div class="caption">
                                <h3>Cosas de paz</h3>
                              </div>
                            </li>

                            <li class="span4">
                              <a href="#MentiraVerdadModal" data-toggle="modal"><img src="static/img/projects/pinocho.jpg" alt="pinocho evil"></a>
                              <div class="caption">
                                <h3>Mentira Verdad</h3>
                              </div>
                            </li>

                        </ul>

                      </div>