-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·333 lines (303 loc) · 18.1 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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Profile page of Vidya Ramakrishnan">
<meta name="author" content="Vidya Ramakrishnan">
<link rel="shortcut icon" href="favicon.ico">
<title>Vidya</title>
<link href="css/normalize_8.0.1.css" rel="stylesheet">
<link href="css/helper.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav class="navbar">
<h1 class="navbar-brand"><a href="#" class="nounderline">Vidya</a></h1>
<ul class="nav navbar-nav no-list-style ">
<li class="active"><a class="nounderline">About Me</a></li>
<li><a href="work.html" class="nounderline">My Work</a></li>
</ul>
</nav>
</div>
</header>
<section class="banner secondary-background">
<div class="banner-text">
<div class="container">
<p class="banner-text-intro">Hello I'm</p>
<h2 class="banner-text-name">Vidya Ramakrishnan</h2>
<p class="banner-text-desc">Frontend developer</p>
<address>
<span class="margin-right"><i class="fa-solid fa-location-dot"></i> Bangalore, India</span>
<a href="mailto:[email protected]?subject=Resume" target="_blank" class="nounderline margin-right"><i class="fa-solid fa-envelope"></i> [email protected]</a><br>
<a href="https://github.com/vidya-ram" target="_blank" class="nounderline margin-right"><i class="fa-brands fa-github"></i> vidya-ram</a><br>
</address>
<a href="work.html" class="nounderline btn">My Work</a>
</div>
</div>
<img class="banner-image" src="images/author.jpg" alt="Vidya">
</section>
<section>
<article class="resume-items">
<div class="container">
<h3 class="heading">About me</h3>
<p>I'm a frontend developer with <span class="js-experience"></span> years of experience. I enjoy web development and have always loved to code.</p>
<p>This is a small story of the incident, that sparked my interest in web development. My earlier years of career I worked on embedded software and then I took a career break. When my daughter was a toddler, I used to help her identify animals, names, colours, fruits using flash cards. Once she had learnt to identify everything on the flash cards, she lost interest. I used to download more images from the internet and we used an image viewer. Constant need to click a button, to move to the next image was a trouble. I was looking for a solution and I happen to read about HTML carousel sliders. This got me excited about developing a small website that will help her learn . In the process of building this educational, gaming <a href="http://discoveringthemind.appspot.com" target="_blank" class="nounderline">website</a>, I learnt HTML, CSS and javascript.</p>
</div>
</article>
<article class="resume-items secondary-background">
<div class="container">
<h3 class="heading">Work Experience</h3>
<p class="heading-small no-margin">Hasgeek , India</strong></p>
<p class="no-margin">Front end developer</p>
<p>March 2015 - Present</p>
<ul>
<li class="less-margin">
<p class="less-margin"><i>Hasgeek.com</i>(code: <a href="https://github.com/hasgeek/funnel" target="_blank" class="nounderline">https://github.com/hasgeek/funnel</a>): I am the lead frontend developer for this project. My main contributions have been</p>
<ul>
<li>Improving performance of the website using</li>
techniques like lazy loading, code splitting.</li>
<li>Use Vue.js for client side rendering</li>
<li>Setup integration tests using Cypress.</li>
<li>Convert the website into a Progressive web app.</li>
<li>Move the old website from Bootstrap to a lighter
MUI(Material Design CSS Framework) and implement the new material design UI.</li>
</ul>
</li>
<li class="less-margin">
<p class="less-margin"><i>Hasgeek TV </i>(code: <a href="https://github.com/hasgeek/hasgeek.tv" target="_blank" class="nounderline">https://github.com/hasgeek/hasgeek.tv</a>): HasGeek’s video content app.</p>
<ul>
<li>I worked on converting the existing website into a Single page and Progressive web app using Vue.js framework.</li>
<li>Move the old website from Bootstrap to a lighter MUI(Material Design CSS Framework) and implement the new material design UI.</li>
</ul>
</li>
<li class="less-margin">
<p><i>Hasjob</i> (code: <a href="https://github.com/hasgeek/hasjob" target="_blank" class="nounderline">https://github.com/hasgeek/hasjob</a>): HasGeek’s job board. My work involved converting the existing website into a Progressive web app and implementing support to offer the app as embeddable iframe.</p>
</li>
<li class="less-margin">
<p><i>Boxoffice</i> (code: <a href="https://github.com/hasgeek/boxoffice" target="_blank" class="nounderline">https://github.com/hasgeek/hasjob</a>): HasGeek’s ticketing software. I handled front-end development work. It involved designing detailed UI workflows based on user stories and developing the client side web interface for both customer and organizer using ractive JS framework and jquery.</p>
</li>
<li class="less-margin">
<p class="less-margin">Streamline conference check-in workflow: I was in incharge of reducing the waiting time of attendees to check-in at Hasgeek events. My role involved</p>
<ul>
<li>Identifying the bottlenecks and preparing tasks list for improving the check-in workflow.</li>
<li>Building frontend for offline check-in and badge scanning.</li>
<li>Coordinating with the backend team for integration and release.</li>
<li>Working with the design team to modify the floor layout to improve the check-in queue.</li>
</ul>
</li>
<li>
<p>Maintaining Hasgeek's event brand websites.<br>JSFoo (<a href="https://jsfoo.in/2015/" target="_blank" class="nounderline">2015</a>, <a href="https://jsfoo.in/2016/" target="_blank" class="nounderline">2016</a>), Fifthelephant(<a href="https://fifthelephant.in/2015/" target="_blank" class="nounderline">2015</a>, <a href="https://fifthelephant.in/2016/" target="_blank" class="nounderline">2016</a>), Rootconf (<a href="https://rootconf.in/2015/" target="_blank" class="nounderline">2015</a>, <a href="https://rootconf.in/2016/" target="_blank" class="nounderline">2016</a>), <a href="https://kilter.in/" target="_blank" class="nounderline">Kilter</a>, Metarefresh <a href="https://metarefresh.in/2016" target="_blank" class="nounderline">(2016)</a>, 50p <a href="https://50p.in/2017" target="_blank" class="nounderline">(2017)</a>, <a href="https://juliacon.in/2015" target="_blank" class="nounderline">Juliacon</a></p>
</li>
</ul>
<p class="heading-small no-margin">Motorola, India</p>
<p class="no-margin">Senior Software Engineer</p>
<p>November 2004 - September 2008</p>
<ul>
<li>Software Development of MM1 module of Multimedia messaging system.</li>
<li>Interoperability Testing of Motorola iDEN phones at the Motorola office at Fort Lauderdale, USA.</li>
<li>Designing and Development of automated test scripts for performance and stress testing.</li>
<li>Designing test plans, developing test cases, preparing test summary reports.</li>
</ul>
</div>
</article>
<article class="resume-items">
<div class="container">
<h3 class="heading icon icon-skills">Skills</h3>
<div>
<img src="images/icons8-html-5-96.png" alt="HTML" class="margin-right"/>
<img src="images/icons8-css-96.png" alt="CSS" class="margin-right"/>
<img src="images/icons8-javascript-96.png" alt="JavaScript" class="margin-right"/>
<img src="images/icons8-vue-js-96.png" alt="Vue" class="margin-right"/>
<img src="images/icons8-react-96.png" alt="React" class="margin-right"/>
<p><small>Icons by <a target="_blank" href="https://icons8.com">Icons8</a></small><p>
<div>
</div>
</article>
<article class="resume-items secondary-background">
<div class="container">
<h4 class="heading icon icon-education">Education:</h4>
<div class="education">
<div class="education-item">
<p class="education-item-right heading-small">MOOC</p>
<div class="education-item-center"></div>
<div class="education-item-left">
<div class="card">
<ul class="list-less-padding">
<li>ES2015: The Shape of JavaScript to Come (Codeschool, 2015)</li>
<li>Introduction to Computer Science and Programming using Python (6.00.1x - edx MITx, 2014)</li>
<li>An Introduction to Interactive Programming in Python (Coursera-Rice University, 2013)</li>
<li>Web Application Engineering: How to Build a Blog (CS253-Udacity, 2012)</li>
<li>Learn to Program: The Fundamentals using Python (Coursera-University of Toronto, 2012)</li>
</ul>
</div>
</div>
</div>
<div class="education-item">
<div class="education-item-right">
<p class="heading-small">B.Tech in Electronics Engineering</p>
<p class="heading-smaller primary-txt">Cochin University of Science and Technology</p>
<p>2000 - 2004, Kerala, India</p>
</div>
<div class="education-item-center"></div>
<div class="education-item-left"></div>
</div>
<div class="education-item">
<div class="education-item-right">
<p class="heading-small">Standard 12th</p>
<p class="heading-smaller primary-txt">Bhavan's Vidya Mandir</p>
<p>2000, Kerala, India</p>
</div>
<div class="education-item-center"></div>
<div class="education-item-left"></div>
</div>
<div class="education-item">
<div class="education-item-right">
<p class="heading-small">Standard 10th</p>
<p class="heading-smaller primary-txt">International Indian School</p>
<p>1998, Riyadh, Saudi Arabia</p>
</div>
<div class="education-item-center"></div>
<div class="education-item-left"></div>
</div>
</div>
</div>
</article>
<article class="resume-items">
<div class="container">
<h3 class="heading icon icon-projects">Talks presented</h3>
<div class="card-wrapper">
<div class="card-item">
<div class="card-talks">
<div class="card-left">
<p class="heading-smaller">My experience rewriting hasgeek tv to a spa using Vue.js</p>
</div>
<div class="card-right">
<p>CodeUp Bangalore- dotJS 101 <br>organized by PayU</p>
<a href="https://www.facebook.com/upstartncodeup/videos/1658022374254928/" target="_blank" class="nounderline"><i class="fa-solid fa-video"></i></a>
</div>
</div>
</div>
<div class="card-item">
<div class="card-talks">
<div class="card-left">
<p class="heading-smaller">An overview of Vue.js</p>
</div>
<div class="card-right">
<p>Girls who javascript meetup</p>
<a href="https://hasgeek.com/girls-who-javascript/meetup-6/sub/an-overview-of-vue-js-Gaebd6SMnkwSiDRkNai4fh" target="_blank" class="nounderline margin-right"><i class="fa-brands fa-meetup"></i></a>
<a href="https://slides.com/vidya_ramki/an-overview-of-vue-js" target="_blank" class="nounderline"><i class="fa-regular fa-file-powerpoint"></i></a>
</div>
</div>
</div>
<div class="card-item">
<div class="card-talks">
<div class="card-left">
<p class="heading-smaller">Handling forms in Vue.js</p>
</div>
<div class="card-right">
<p>Vue Bangalore meetup</p>
<a href="https://eventil.com/events/vueblr-11-step-by-step" target="_blank" class="nounderline margin-right"><i class="fa-brands fa-meetup"></i></a>
<a href="https://slides.com/vidya_ramki/handling-form-in-vue" target="_blank" class="nounderline"><i class="fa-regular fa-file-powerpoint"></i></a>
</div>
</div>
</div>
<div class="card-item">
<div class="card-talks">
<div class="card-left">
<p class="heading-smaller">Let's talk about Web APIs</p>
</div>
<div class="card-right">
<p>Girls who javascript meetup</p>
<a href="https://slides.com/vidya_ramki/web-api" target="_blank" class="nounderline"><i class="fa-regular fa-file-powerpoint"></i></a>
</div>
</div>
</div>
<div class="card-item">
<div class="card-talks">
<div class="card-left">
<p class="heading-smaller">How I learnt web development while building a fun and educational website for my toddler</p>
</div>
<div class="card-right">
<p>KeKShow - Show your hack!</p>
<a href="https://kek.org.in/events" target="_blank" class="nounderline margin-right"><i class="fa-brands fa-meetup"></i></a>
</div>
</div>
</div>
</div>
</div>
</article>
<article class="resume-items secondary-background">
<div class="container">
<h3 class="heading">Side Projects</h3>
<div class="card-wrapper">
<div class="card-item">
<div class="card">
<p class="heading"><a href="https://github.com/vidya-ram/toddlergames" target="_blank" class="nounderline">Toddler fun spot</a></p>
<p class="less-margin"><i class="fa-solid fa-code"></i> <a href="https://github.com/vidya-ram/toddlergames" target="_blank" class="nounderline">https://github.com/vidya-ram/toddlergames</a></p>
<p><i class="fa-solid fa-link"></i> <a href="http://discoveringthemind.appspot.com" target="_blank" class="nounderline">View website</a></p>
<p>Building this fun and educational website for my toddler sparked my interest in web development.</p>
</div>
</div>
<div class="card-item">
<div class="card">
<p class="heading"><a href="https://ragya.netlify.app" target="_blank" class="nounderline">Ragya</a></p>
<p><i class="fa-solid fa-link"></i> <a href="https://ragya.netlify.app" target="_blank" class="nounderline">View website</a> <small>(obsolete)</small></p>
<p>The first version of Ragya, an Indian classical music website that plays different songs by time of the day. This app was built using Vue.js, Airtable and Netlify.</p>
</div>
</div>
<div class="card-item">
<div class="card">
<p class="heading"><a href="https://github.com/vidya-ram/ecommerce-tshirt-store" target="_blank" class="nounderline">Tshirt store</a></p>
<p><i class="fa-solid fa-link"></i> <a href="https://tshirt-ecommerce-store.netlify.app" target="_blank" class="nounderline">View website</a></p>
<p>A small ecommerce website using Vue.js, Vuex with client-side filtering and search.</p>
</div>
</div>
</div>
</div>
</article>
<article class="resume-items">
<div class="container">
<h3 class="heading icon">Other interests</h3>
<div class="hobbies">
<div class="hobby-item">
<a href="https://hasgeek.com/girls-who-javascript" target="_blank" class="nounderline"><i class="fa-solid fa-user-group hobby-icon"></i></a>
<div class="description">
<p class="no-margin">Organizer of Girls Who JS Bangalore group from 2018.</p>
<p><i class="fa-brands fa-twitter"></i> <a href="https://mobile.twitter.com/blrjavascript" target="_blank" class="nounderline">blrjavascript</a></p>
</div>
</div>
<div class="hobby-item">
<a href="https://medium.com/@vidya_ramki" target="_blank" class="nounderline"><i class="fa-solid fa-leaf hobby-icon"></i></a>
<div>
<p class="no-margin">Terrace gardening</p>
</div>
</div>
<div class="hobby-item">
<i class="fa-solid fa-paintbrush hobby-icon"></i>
<div>
<p class="no-margin">Painting</p>
</div>
</div>
</div>
</div>
</article>
</section>
<footer>
<div class="container">
<p class="text-center">Vidya copyright © <span class="js-year"></span></p>
</div>
</footer>
<script src="https://kit.fontawesome.com/a8567adb67.js" crossorigin="anonymous"></script>
<script type="text/javascript">
document.querySelector('.js-year').innerHTML = new Date().getFullYear();
document.querySelector('.js-experience').innerHTML = new Date().getFullYear() - new Date('2015').getFullYear();
</script>
</body>
</html>