-
Notifications
You must be signed in to change notification settings - Fork 0
/
work.html
executable file
·154 lines (136 loc) · 7.71 KB
/
work.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
<!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><a href="/" class="nounderline">About Me</a></li>
<li class="active"><a class="nounderline">My Work</a></li>
</ul>
</nav>
</div>
</header>
<section>
<article class="resume-items secondary-background">
<div class="container">
<div class="card-wrapper">
<div class="card-item">
<div class="card">
<p class="heading">Hasgeek.com</p>
<p><i class="fa-solid fa-code"></i> <a href="https://github.com/hasgeek/funnel" target="_blank" class="nounderline">https://github.com/hasgeek/funnel</a></p>
<p>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>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>
</div>
</div>
<div class="card-item">
<div class="card">
<p class="heading">Hasgeek TV</p>
<p><i class="fa-solid fa-code"></i> <a href="https://github.com/hasgeek/hasgeek.tv" target="_blank" class="nounderline">https://github.com/hasgeek/hasgeek.tv</a></p>
<p>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>
</div>
</div>
<div class="card-item">
<div class="card">
<p class="heading">Hasjob</p>
<p><i class="fa-solid fa-code"></i> <a href="https://github.com/hasgeek/hasjob" target="_blank" class="nounderline">https://github.com/hasgeek/hasjob</a></p>
<p>HasGeek’s job board</p>
<p>My work involved converting the existing website into a Progressive web app and implementing support to offer the app as embeddable iframe.</p>
</div>
</div>
<div class="card-item">
<div class="card">
<p class="heading">Boxoffice</p>
<p><i class="fa-solid fa-code"></i> <a href="https://github.com/hasgeek/boxoffice" target="_blank" class="nounderline">https://github.com/hasgeek/boxoffice</a></p>
<p>HasGeek’s ticketing software</p>
<p>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>
</div>
</div>
<div class="card-item">
<div class="card">
<p class="heading">Streamline check-in</p>
<p><i class="fa-solid fa-code"></i> <a href="https://github.com/hasgeek/funnel" target="_blank" class="nounderline">https://github.com/hasgeek/funnel</a></p>
<p>I was in incharge of reducing the waiting time of attendees to check-in at Hasgeek conferences. In order to do, I worked on implementing offline checkin functionality using local storage and badge scanning using javascript QR code reading library.</p>
</div>
</div>
<div class="card-item">
<div class="card">
<p class="heading">Toddler fun spot</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">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 icon-skills">Terrace garden</h3>
<div class="video-container">
<div class="video">
<div class="video-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4HHbL_5ezpU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="video">
<div class="video-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/POpPmGV7z7E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</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();
</script>
</body>
</html>