-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
273 lines (271 loc) · 18.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="output.css">
<link rel="stylesheet" type="text/css" href="css/new.css">
<!-- <link rel="icon" href="./asset/N.png"> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Robot|Source+Code+Pro|Inconsolata">
<title>Nanda W. Purba Resume</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
function checkViewportSize() {
if (window.innerWidth < 1024) {
document.getElementById("modal").style.display = "block";
} else {
document.getElementById("modal").style.display = "none";
}
}
checkViewportSize();
window.onresize = checkViewportSize;
});
</script>
</head>
<body class="bg-gray-200">
<div class="flex">
<div class="profile w-1/3 h-screen">
<div class="topProfile bg-no-repeat bg-center">
<!-- <img class ='top-image' src='./asset/1.jpg' alt='picture of a man sitting down viewing graphs off an iPad'> -->
</div>
<div class="lowProfile">
<img class ='profile-image mx-auto' src='./asset/new.png' alt='my alternate profile picture'>
<div class="link-section mt-4 ml-4" style="font-family: 'Inconsolata', serif;">
<p class="text-4xl">Nanda W. Purba</p>
<p class="text-xl">Backend Developer</p>
</div>
<div class="mt-4 ml-4" style="font-family: 'Inconsolata', serif;">
<p class="text-sm mb-4">I'm available on:</p>
<a href="https://github.com/neos1803?tab=repositories"><img class="inline w-8 mr-4" src="./asset/git.png" alt=""></a>
<a href="https://www.linkedin.com/in/nanda-purba-923121154/"><img class="inline w-8" src="./asset/link.png" alt=""></a>
</div>
</div>
<footer class="mt-24">
<div class="mx-16 text-center text-sm" style="font-family: 'Inconsolata', serif;">
<p> COPYRIGHT ©
This website is built by Nanda W. Purba and powered by github.io.
</p>
</div>
</footer>
</div>
<div class="info w-2/3">
<div id="about" class="about-text text-indigo-600 py-6 px-6 text-3xl" style="font-family: 'Source Code Pro', serif;">
<h1>About Me</h1>
</div>
<div class="about-info py-6 px-6 bg-white mx-6 rounded-lg" style="font-family: 'Inconsolata', serif;">
<div class="grid grid-cols-2">
<div class="intro border-r-2 border-black">
<p>Greetings. I'm an engineering graduate and currently employed by Universitas Terbuka as Back End Developer, or more like Technical Consultant.</p>
<br>
<p>I have more or less 3 years of professional job experience, but i (perhaps) have enough knowledge/understanding in back end development, data analyst and/or python 3 development,
and i have taken part in several projects during my time in Universitas Terbuka.
However, as you can see by this page, i'm not that good at front-end development and interface design.
</p>
<br>
<p>
I really don't have much portofolio to show since most of my job is discussing about "what kind of architecture should we use", "should we really use or implement this", "why this bug happens"
or "I need to find a way to handle this error". Yes, full of discussion, suggesting and debugging, besides of coding. In my current workspace, i often find myself in the middle of mess i did't create
and expected to clear it or make it works.
</p>
</div>
<div class="ml-4">
<ol>
<li class="mb-2">
Education(s):
<ol class="ml-4" style="list-style: square;">
<li>Telecommunication Engineering (B.Eng), Telkom University, 2016 - 2020, GPA: 3.31</li>
</ol>
</li>
<li class="mb-2">
Hobbies:
<ol class="ml-4" style="list-style: square;">
<li>
Random Programming -> <a class="hover:text-indigo-600" href="https://github.com/neos1803?tab=repositories">(Check out my github)</a>
</li>
<li>
Sharing Code on Gist -> <a class="hover:text-indigo-600" href="https://gist.github.com/neos1803">(Check out my gist)</a>
</li>
<li>
Competitive Gaming -> <a class="hover:text-indigo-600">Currently i take part in kind of semi-professional Efootball League.</a>
</li>
</ol>
</li>
<li class="mb-2">
Interest(s):
<ol class="ml-4" style="list-style: square;">
<li>
Back-end/API Development
</li>
<li>
Data Analyst
</li>
<li>
Probably anything that don't involve interface designing
</li>
</ol>
</li>
<li class="mb-2">
Language(s):
<ol class="ml-4" style="list-style: square;">
<li>
Indonesian (Native)
</li>
<li>
English (I guess it's good enough for discussing something technical and daily life)
</li>
<li>
Japanese (N4)
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
<div id="about" class="about-text text-indigo-600 py-6 px-6 text-3xl" style="font-family: 'Source Code Pro', serif;">
<h1>Professional Portfolio</h1>
</div>
<div class="about-info py-6 px-6 bg-white mx-6 rounded-lg" style="font-family: 'Inconsolata', serif;">
<ol class="ml-4 mt-4" style="list-style: square;">
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://api-sisupel.ut.ac.id/graphql">AI Assisted Learning</a>
<br>
<p>This is a project about how can we integrate our GPT-based model to our online learning ecosystem which is Moodle based. The project is still on going,
but we have implemented this on more or less 5000 thousands student. The concept is simple-yet-controversional. We plan to create an environment where
teacher and AI can coexist to teach students or maybe reduce the redundant workload of teachers. Other than coding, integration and such, i also take most part of
designing what architecture we want to implement.
Ps: Our solution got mentioned and noticed by current CEO of Microsoft, Satya Nadela. You can see it on my linkedin post.
</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="#">Student Record System (Universitas Terbuka Corporate Project)</a>
<br>
<p>This project is one of Universitas Terbuka main apps which is still on going and will keep improving.
This project is built with several tech stacks such as PostgreSQL and NestJS as its backend and database,
GraphQL as its API communication and Vue as its front-end.
</p>
<br>
<p>
I am assigned to develop some of it backend features and often participate in the group discussion for features improvement or application architecture defining.
We were thinking of transforming the old monolithic student record system into a brand new microservice based architecture, but due to several technical and non technical reasons we ended up
designing an anti-microservice architecture.
Here is the simplify version of this project architecture design
</p>
<br>
<img style="width: 70%; margin: 0 auto;" src='./asset/srs_architecture.png' alt='picture of a man sitting down viewing graphs off an iPad'>
<br>
<p>
To summarized, we use kubernetes for auto scaling. We also use RabbitMQ as the message broker for inter service communication. The side services are created for supporting jobs,
such as automation for students 365 accounts, realtime notification by listening database change, event based notification from each service, a read only caching implemented with redis
and other supporting feature to reduce the load of main backend service. Currrently, the MongoDB is used for notification logging only, but there will be improvements.
</p>
<br>
<p>
I am also assigned for innovation and such which is quite challenging. As far as today, i manage to improve the notification system by implementing microservice, utilizing postgre listener
to implement real time event and solving its long running problem regarding user unique identifier by applying queue. Currently, i am proposing an idea which covers deep learning and automation.
</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="#">Aplikasi Praktikum (Universitas Terbuka Corporate Project)</a>
<br>
<p>Another Universitas Terbuka Project and this time is about an app that helps their students on practice-based subjects. This project is developed and built with microservice architecture and several tech stacks
such as MongoDB, MySQL, ExpressJS (with Typescript), Redis, and Vue, but its development is postponed due to several reasons. The design architecture is coming soon.
</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://api-sisupel.ut.ac.id/graphql">Sisupel (Universitas Terbuka Corporate Project)</a>
<br>
<p>Another Universitas Terbuka Project and this time is about an app that helps their students on giving feedback and rating their services. This project is developed and built with several tech stacks
such as MongoDB, NestJS, Redis, and Vue. The design architecture is coming soon.
</p>
</li>
</ol>
</div>
<div id="about" class="about-text text-indigo-600 py-6 px-6 text-3xl" style="font-family: 'Source Code Pro', serif;">
<h1>Others Portfolio</h1>
</div>
<div class="about-info py-6 px-6 bg-white mx-6 rounded-lg" style="font-family: 'Inconsolata', serif;">
<ol class="ml-4 mt-4" style="list-style: square;">
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://medium.com/@ardipurba">Medium Articles</a>
<br>
<p>Sometimes i write an article about what technical problem i have faced and how i handle it. So far i have written 14 articles which can be count as my other portofolio.</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://github.com/neos1803/learning-python">Simple Python Programs</a>
<br>
<p>It redirects to repository that contains several python programs like hangman game, snake and dice game, etc. Coded with Python 3.</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://github.com/neos1803/learning-with-kaggle">Titanic: Machine Learning From Disaster</a>
<br>
<p>Introduction challenge to data science which taken from Kaggle.</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://github.com/neos1803/twitter-bot">Simple Twitter Bot</a>
<br>
<p>A simple bot which will do several actions to any tweet that matches given criteria. In my terms, the given criteria is any tweet that contains
and idol name. Coded with Python 3.
</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://github.com/neos1803/Bootcamp-UT/tree/master/vuex-app">Simple Vue App ft Vuex & Tailwind</a>
<br>
<p>A simple Vue App that is created for vuex and vue learning purposes</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://vue-simple-wms.herokuapp.com/">Simple WMS ft Vue and Tailwind</a>
<br>
<p>A simple website for warehouse management system in which admin can see and delete user, doing CRUD on products, etc</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://simple-wms.herokuapp.com/">Simple WMS API ft Express and Heroku</a>
<br>
<p>A simple REST-API about warehouse management system which consists of several endpoints</p>
<p>Checkout <a class="hover:text-indigo-600" href="https://github.com/dickyfahlevi21/backend-simple-wms">This Repo</a> For Documentation and source code</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://github.com/neos1803/dota2-lore-and-build">Dota 2 Lore and Build</a>
<br>
<p>A simple Android Application which consists of static Dota 2 Hero and Lore data</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://github.com/neos1803/learning-go">Golang Introduction</a>
<br>
<p>A repository that consists of simple Golang program created for learning purposes</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="https://github.com/muhamaddiaz/sekolahku">Sekolahku</a>
<br>
<p>A campus side project, about school learning management system. This supposed-to-be website is built by using Laravel as Back-end framework
and blade only as its Front-end framework</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="#">Bookstore API</a>
<br>
<p>My personal project which is about an app that scraps a books review-recommendation website and several e-commerce website to find . I developed this project using express built with Typescript.
Click <a class="hover:text-indigo-600" href="#">this</a> to view the docs of the API.
</p>
</li>
<li class="mb-4">
<a class="hover:text-indigo-600" href="#">Ampaba (VendorKamu Cancelled Project)</a>
<br>
<p>One of VendorKamu, my side job place as backend developer, project which is about an app that helps on maintaining Gym Online System. This project is developed and built with several tech stacks
such as MySQL, NestJS, Redis as its Backend Core. Click <a class="hover:text-indigo-600" href="#">this</a> to view the example of the GraphQL Api.
</p>
</li>
</ol>
</div>
</div>
</div>
<script src="js/porto.js"></script>
<script>
// This script will run after a delay once the page is fully loaded
window.onload = function() {
setTimeout(function() {
alert("Make sure to display this in or as desktop mode, since this is not responsive and i am bad at frontend development.");
}, 100); // Delay in milliseconds
};
</script>
</body>
</html>