-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
426 lines (422 loc) · 21.7 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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
<!doctype html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to my profile!</title>
<meta property="og:image" content="./images/nivi.jpg" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300i,400" rel="stylesheet">
</head>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- <a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img"></div>
</a> -->
<div class="navbar-brand">
<a href="index.html"><h1 class="hvr-grow">Nivedhitha Venkatachalam</h1></a>
<p><span>Front-end | Full-stack developer</span></p>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li class="hvr-float">
<a href="#aboutme"><span>ABOUT ME</span></a>
</li>
<li class="hvr-float">
<a href="#projects"><span>PROJECTS</span></a>
</li>
<li class="hvr-float">
<a href="#sample-sites"><span>LIVE SITES</span></a>
</li>
<li class="hvr-float">
<a href="#contact"><span>CONTACT</span></a>
</li>
</ul><!-- #nav-list -->
</div><!-- .collapse .navbar-collapse -->
</div>
</nav>
</header>
<div class="container">
<div class="bg-white">
<h1 class="main-header">Welcome to My Website!</h1>
<div class="intro-site">
<blockquote>"Everything I know is but a drop in the ocean of knowledge."
<span>- Albert Einstein</span>
</blockquote>
<img src="./images/nivi.jpg" alt="nivi-profilePic" class="img-rounded center-pic">
</div>
<!--1. About Me-->
<section id="aboutme" class="section-padding text-justify">
<h2 class="fixednav-spacing">About Me <i class="glyphicon glyphicon-info-sign"></i></h2>
<div class="row">
<p class="para-padding">
I am Nivedhitha Venkatachalam, new MS in Software Engineering graduate from San Jose State University. I am a software engineer with 3 years of experience in application development and actively looking for full-time opportunities. My
skills include front-end and database development as well as object oriented programming.
</p>
<details open>
<summary class="summary-deco">Detailed Introduction</summary>
<p class="para-padding d-intro"></p>
<p class="para-padding d-intro"></p>
<p class="para-padding d-intro"></p>
</details>
<details>
<summary class="summary-deco">Experience</summary>
<h3>Software Engineer Intern, Flow Labs, Sunnyvale, CA</h3><span class="minor-detail">November 2016 - December2016</span>
<ul>
<li>Developed dashboard to visualize IoT sensor data using responsive and scalable technologies such as ReactJS, MeteorJS, Sass, D3.JS. Implemented communication with MongoDB in a secure (Publish/Subscribe) and fast (Projection) manner.</li>
<li>Worked with Head of Software and Founders to implement optimizations and new features.</li>
<li>Performed testing across desktop and mobile browsers and troubleshoot issues.</li>
</ul>
<h3>User Interface Intern, Pulse Secure, San Jose, CA</h3><span class="minor-detail">June 2016 – August 2016</span>
<ul>
<li>Worked with user experience designers to build web-based user interface using HTML/SCSS, JavaScript framework, AngularJS while making calls to MySQL database using REST API.</li>
<li>Fixed issues in the existing web application to improve user experience.</li>
</ul>
<h3>Web Developer, Stealth Startup (volunteered), San Jose, CA</h3><span class="minor-detail">July 2015 – August 2015</span>
<ul>
<li>Performed Requirement Analysis and created website wireframe.</li>
<li>Used embedded JavaScript to develop webpages and used MySQL to store data.</li>
</ul>
<h3>Programmer Analyst, Cognizant Technology Solutions, Chennai, India</h3><span class="minor-detail">July 2010 – March 2013</span>
<ul>
<li>UI development with JSP, worked with content management system (Pepper), web site analytics reports (Adobe
Omniture), search engine optimization and Enterprise content management (Alfresco).</li>
<li>Worked as part of the support team to resolve tickets without any SLA (Service Level Agreement) misses for enterprise applications, web analytics, email triaging and email processing tools.</li>
<li>Contributed towards standard operating procedure documentation and participated in quality audits.</li>
</ul>
</details>
<details>
<summary class="summary-deco">Skill Set</summary>
<div class="col-lg-6">
<h3>Programming Languages</h3>
<ul class="list-unstyled">
<li>C++ (proficient) </li>
<li>Java (fluent)</li>
<li>JavaScript (AngularJS, ReactJS, MeteorJS) (proficient)</li>
</ul>
</div>
<div class="col-lg-6">
<h3>Databases</h3>
<ul class="list-unstyled">
<li>MySQL (relational DB)</li>
<li>MongoDB (non relational DB)</li>
<li>Apache Cassandra (prior experience)</li>
</ul>
</div>
<div class="col-lg-6">
<h3>Operating systems</h3>
<ul class="list-unstyled">
<li>OS X </li>
<li>Windows
<li>Ubuntu</li>
</ul>
</div>
<div class="col-lg-6">
<h3>Amazon Web Services</h3>
<ul class="list-unstyled">
<li>Storage and Content Delivery (Amazon S3)</li>
<li>Compute (Amazon EC2, Amazon Lambda)</li>
</ul>
</div>
<div>
<h3 class="col-lg-12">IDEs and Tools</h3>
<ul>
<li class="tools">Git CLI</li>
<li class="tools">Sublime Text</li>
<li class="tools">Atom</li>
<li class="tools">MongoChef</li>
<li class="tools">Eclipse</li>
<li class="tools">Visual Studio</li>
<li class="tools">Greenfoot</li>
<li class="tools">BlueJ</li>
<li class="tools">Spring Tool Suite</li>
</ul>
</div>
</details>
</div>
</section><!-- end of about me -->
<section id="projects" class="section-padding text-justify">
<h2 class="fixednav-spacing">Academic Projects <i class="glyphicon glyphicon-briefcase"></i></h2>
<p class="para-padding">Below are snapshots of select projects that I have worked on.
You can checkout more projects on my <a href="https://github.com/nivedhithaVenkatachalam" target="_blank" rel="noreferrer">github</a>. </p>
<div class="row">
<div class="col-md-4 col-sm-6 projects">
<div class="panel panel-default">
<div class="panel-header box-center course-title-index">GLMS</div>
<div class="panel-body">
<img class="img-course img-fluid" src="./images/project1/GLMS.png" alt="Project Img"/>
</div>
<div class="panel-footer box-center"><button class="btn btn-default btn-basics btn-view course-thumbnail-button hvr-grow" onclick="openDetails1()">View Details</button></div>
</div>
</div>
<div class="col-md-4 col-sm-6 projects">
<div class="panel panel-default">
<div class="panel-header box-center course-title-index">Frogger Game</div>
<div class="panel-body">
<img class="img-course img-fluid" src="./images/project2/Frogger.png" alt="Project Img"/>
</div>
<div class="panel-footer box-center"><button class="btn btn-default btn-basics btn-view course-thumbnail-button hvr-grow" onclick="openDetails2()">View Details</button></div>
</div>
</div>
<div class="col-md-4 col-sm-6 projects">
<div class="panel panel-default">
<div class="panel-header box-center course-title-index">Predictive Analysis</div>
<div class="panel-body">
<img class="img-course img-fluid" src="./images/project3/PredictiveIntro.png" alt="Project Img"/>
</div>
<div class="panel-footer box-center"><button class="btn btn-default btn-basics btn-view course-thumbnail-button hvr-grow" onclick="openDetails3()">View Details</button></div>
</div>
</div>
</div>
</section><!-- end of projects -->
<section id="sample-sites" class="section-padding text-justify">
<h2 class="fixednav-spacing">Sample Websites <i class="glyphicon glyphicon-blackboard"></i></h2>
<p class="para-padding">I am highlighting few of my projects which are live and have been built with latest front end frameworks and libraries.</p>
<ul class="list-unstyled">
<li>
<h3>Restaurant Menu</h3>
<p class="para-padding">I have created a multi view UI to browse through the categories in a menu and view items under each category. Aim is to implement the functionality using modules, components and UI router. I have styled the website with bootstrap and css.</p>
<span><a href="https://nivedhithavenkatachalam.github.io/coursera-angular/mod4_solution/#/" target="_blank" rel="noreferrer">Check out the website here!</a></span>
</li>
</ul>
</section><!-- end of sample sites -->
<section id="contact" class="section-padding text-justify">
<h2 class="fixednav-spacing">Contact <i class="glyphicon glyphicon-pencil"></i></h2>
<p class="para-padding"> If I match the requirements for any available positions,
please send me an email to the email address given below
or connect with me on <a href="https://www.linkedin.com/in/nivedhithavenkatachalam" target="_blank" rel="noreferrer">LinkedIn</a>.</p>
<div class="para-padding">Email address: [email protected]</div>
</section><!-- end of contact -->
</div><!-- end of bg-white class -->
</div>
<footer class="footer-style">
<p>All content copyright Nivedhitha Venkatachalam © 2016 All rights reserved.</p>
<p>Published with <a href="https://github.com/nivedhithaVenkatachalam/hellonive">GitHub</a></p>
</footer>
<a id="project1" href="#openProject1">Project1</a>
<a id="project2" href="#openProject2">Project2</a>
<a id="project3" href="#openProject3">Project3</a>
<div id="openProject1" class="modalDialog">
<div id="project1id">
<a href="#close" title="Close" class="close">X</a>
<h3>Gamification of Learning Management System (GLMS)</h3>
<div class="modal-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 project-carousel">
<div id="myCarousel1" class="carousel slide well" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
<li data-target="#myCarousel1" data-slide-to="2"></li>
<li data-target="#myCarousel1" data-slide-to="3"></li>
<li data-target="#myCarousel1" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="project-imgs" src="./images/project1/1enrolled_courses.png" alt="Project1Img1">
</div>
<div class="item">
<img class="project-imgs" src="./images/project1/2trending_courses.png" alt="Project1Img2">
</div>
<div class="item">
<img class="project-imgs" src="./images/project1/3Coursedetails.png" alt="Project1Img3">
</div>
<div class="item">
<img class="project-imgs" src="./images/project1/4search_query.png" alt="Project1Img4">
</div>
<div class="item">
<img class="project-imgs" src="./images/project1/5search_result.png" alt="Project1Img5">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- End of carousel -->
</div>
<div class="col-lg-5 col-lg-offset-1 col-xs-12 modal-padding">
<h4>1. Enrolled Courses</h3>
<p> Display of courses enrolled by the user.</p>
<h4>2. Trending Courses</h3>
<p> Display recommended courses based on the courses enrolled by the user.</p>
<h4>3. Course Details</h3>
<p> Display topics in the course, badges earned by the user along with daily goals and leaderboards.</p>
<h4>4. Search Box</h3>
<p> Search available courses using keyword entered.</p>
<h4>5. Search Result</h3>
<p> Display results for the keyword searched.</p>
</div>
<div class="col-lg-6 col-sm-12 project-carousel">
<figure>
<figcaption>Component Model of GLMS</figcaption>
<img src="./images/project1/subsystem.png" alt="Project1Arch" class="img-modal img-fluid">
</figure>
</div>
</div>
</div>
</div>
</div>
<div id="openProject2" class="modalDialog">
<div id="project2id">
<a href="#close" title="Close" class="close">X</a>
<h3>Frogger Ninja</h3>
<div class="modal-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 project-carousel">
<div id="myCarousel2" class="carousel slide well" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
<li data-target="#myCarousel2" data-slide-to="3"></li>
<li data-target="#myCarousel2" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="project-imgs" src="./images/project2/1gameintro.png" alt="Project2Img1">
</div>
<div class="item">
<img class="project-imgs" src="./images/project2/2twitterwidget.png" alt="Project2Img2">
</div>
<div class="item">
<img class="project-imgs" src="./images/project2/3gamescreen.png" alt="Project2Img3">
</div>
<div class="item">
<img class="project-imgs" src="./images/project2/4gameinstructions.png" alt="Project2Img4">
</div>
<div class="item">
<img class="project-imgs" src="./images/project2/5localization.png" alt="Project2Img5">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- End of carousel -->
</div>
<div class="col-lg-5 col-lg-offset-1 col-xs-12 modal-padding">
<h4>1. Game Introduction</h3>
<p> Home page for game.</p>
<h4>2. Twitter Widget</h3>
<p> Live feeds of Frogger Ninja and links to our Facebook, Twitter and G+ pages.</p>
<h4>3. Game Screen</h3>
<p> User can play game from this page. Since this is a multiplayer game, a user has to wait until another player comes online. From this
page a user can also chat with his/her opponent and customize the game while playing.</p>
<h4>4. Game Instructions</h3>
<p> Provides information like game rules and how to play the game.</p>
<h4>5. Localization</h3>
<p> Shows different languages from which a user can select to change the web page content.</p>
</div>
<div class="col-lg-6 col-sm-12 project-carousel">
<figure>
<figcaption>Game Components for Frogger Game</figcaption>
<img src="./images/project2/gameComponents.png" alt="Project2GameComponents" class="img-modal img-fluid">
</figure>
</div>
</div>
</div>
</div>
</div>
<div id="openProject3" class="modalDialog">
<div id="project3id">
<a href="#close" title="Close" class="close">X</a>
<h3>Predictive Analysis of Movie Ratings</h3>
<div class="modal-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 project-carousel">
<div id="myCarousel3" class="carousel slide well" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel3" data-slide-to="1"></li>
<li data-target="#myCarousel3" data-slide-to="2"></li>
<li data-target="#myCarousel3" data-slide-to="3"></li>
<li data-target="#myCarousel3" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="project-imgs" src="./images/project3/1movierating.png" alt="Project3Img1">
</div>
<div class="item">
<img class="project-imgs" src="./images/project3/2socialmedia.png" alt="Project3Img2">
</div>
<div class="item">
<img class="project-imgs" src="./images/project3/3compareratings.png" alt="Project3Img3">
</div>
<div class="item">
<img class="project-imgs" src="./images/project3/4sentimentanalysis.png" alt="Project3Img4">
</div>
<div class="item">
<img class="project-imgs" src="./images/project3/5visualizetweets.png" alt="Project3Img5">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel3" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- End of carousel -->
</div>
<div class="col-lg-5 col-lg-offset-1 col-xs-12 modal-padding">
<h4>1. Movie Ratings</h3>
<p> Predicted rating for the user based on his previous movie ratings are displayed.</p>
<h4>2. Social Media</h3>
<p> Rating across different social media platforms such as facebook, twitter, youtube etc are collected using their APIs and web scraping.</p>
<h4>3. Comparison of Ratings</h3>
<p> Ratings across different sites such as Imdb and Rotten Tomatoes are visualized.</p>
<h4>4. Sentiment Analysis</h3>
<p> Tweets on the movie are collected using Twitter API and analysed using Tweepy.</p>
<h4>5. Visualize Tweets</h3>
<p> General opinion about the movie is represented by categorizing tweets into negative and positive.</p>
</div>
<div class="col-lg-6 col-sm-12 project-carousel">
<figure>
<figcaption>KDD Model</figcaption>
<img src="./images/project3/StepsinDataAnalytics.png" alt="Project1Arch" class="img-modal img-fluid img-wide">
</figure>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script src="js/constants.js"></script>
</body>
</html>