-
Notifications
You must be signed in to change notification settings - Fork 0
/
mini-projects.html
459 lines (433 loc) · 24 KB
/
mini-projects.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
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, CSS, JavaScript, Projects, Supriya Minnasandram, Web developer">
<meta name="description" content="Web Development Projects">
<meta name="author" content="Supriya">
<meta name="Copyright" content="SupTECH">
<title>Supminn | Mini Projects</title>
<link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
<link href="styles/stylesheet.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script defer src="./scripts/theme.js"></script>
</head>
<body>
<nav class="navigation container">
<div class="flex-container">
<b class="nav-brand">SupTECH</b>
<i class="btn-theme far fa-moon"></i>
</div>
<ul class="list-non-bullet nav-pills flex-mobile">
<li class="list-item-inline">
<a aria-label="home" class="link" href="/"><i class="fas fa-home"></i><span class="web-desc">
Home</span></a>
</li>
<li class="list-item-inline">
<a aria-label="projects" class="link" href="/projects.html"><i class="fas fa-tablet-alt"></i><span
class="web-desc">
Projects</span></a>
</li>
<li class="list-item-inline">
<a aria-label="blogs" class="link" href="/blogs.html"><i class="fas fa-newspaper"></i><span
class="web-desc">
Blogs</span></a>
</li>
</ul>
</nav>
<div class="content-container">
<header class="hero">
<img class="hero-img" src="images/remote_working.svg" alt="hero" />
<h1 class="hero-heading">Mini Projects by <span class="heading-inverted"> Supriya</span></h1>
</header>
<section class="section off-white container-center">
<div class="container">
<h1>Coding bootcamp testimonials slider </h1>
<small>Created on: 24th February 2021</small>
<p><a class="web-link" href="https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam"
rel="noopener noreferrer" target="_blank">Frontendmentor</a> challenge to replicate
coding-bootcamp-testimonials-slider-master for desktop and mobile screens.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://coding-bootcamp-testimonials-slider-master-supminn.vercel.app/"
rel="noopener noreferrer" target="_blank">Try it
out!</a>
<a class="link link-secondary"
href="https://github.com/supminn/coding-bootcamp-testimonials-slider-master"
rel="noopener noreferrer" target="_blank">Access
Source Code</a></div>
</div>
</section>
<section class="section container-center ">
<div class="container">
<h1>Article preview component</h1>
<small>Created on: 13th February 2021</small>
<p><a class="web-link" href="https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam"
rel="noopener noreferrer" target="_blank">Frontendmentor</a> challenge to replicate
article-preview-component-master for
desktop and mobile screens.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://article-preview-component-master-supminn.vercel.app/" rel="noopener noreferrer"
target="_blank">Try it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/article-preview-component-master"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center ">
<div class="container">
<h1>Four card feature section</h1>
<small>Created on: 4th February 2021</small>
<p><a class="web-link" href="https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam"
rel="noopener noreferrer" target="_blank">Frontendmentor</a> challenge to replicate
four-card-feature-section-master for
desktop and mobile screens.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://four-card-feature-section-master-supminn.vercel.app/" rel="noopener noreferrer"
target="_blank">Try it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/four-card-feature-section-master"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section container-center ">
<div class="container">
<h1>Social proof section</h1>
<small>Created on: 1st February 2021</small>
<p><a class="web-link" href="https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam"
rel="noopener noreferrer" target="_blank">Frontendmentor</a> challenge to replicate Social proof
section master for
desktop and mobile screens.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://social-proof-section-supminn.vercel.app/" rel="noopener noreferrer"
target="_blank">Try
it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/social-proof-section-master"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center ">
<div class="container">
<h1>Profit/Loss of Stock</h1>
<small>Created on: 31st January 2021</small>
<p>VanillaJS app which compares the purchase price to current price of a stock and represent the
profit/loss status.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-stockpnl.netlify.app/" rel="noopener noreferrer" target="_blank">Try
it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG_stockPnL/"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section container-center">
<div class="container">
<h1>FAQ Accordian card</h1>
<small>Created on: 18th January 2021</small>
<p><a class="web-link" href="https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam"
rel="noopener noreferrer" target="_blank">Frontendmentor</a> challenge to replicate the FAQ
Accordian for desktop and
mobile screens.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://faq-accordion-card-main-supminn.vercel.app/" rel="noopener noreferrer"
target="_blank">Try it
out!</a>
<a class="link link-secondary"
href="https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center ">
<div class="container">
<h1>Profile Card Component</h1>
<small>Created on: 16th January 2021</small>
<p><a class="web-link" href="https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ"
rel="noopener noreferrer" target="_blank">Frontendmentor</a> challenge to replicate the profile
card component for desktop
and mobile screens.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://profile-card-component-main-supminn.vercel.app/" rel="noopener noreferrer"
target="_blank">Try it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/profile-card-component-main"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section container-center">
<div class="container">
<h1>Palindrome Birthday</h1>
<small>Created on: 13th January 2021</small>
<p>Check if your birthday forms a palindrome string. This app checks the date in 4 different
combinations.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-palindromebday.netlify.app/" rel="noopener noreferrer"
target="_blank">Try
it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG_palindromeDate"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center">
<div class="container">
<h1>Triangles Quiz</h1>
<small>Created on: 6th January 2021</small>
<p>A simple VannillaJS app to learn and play around with triangles.</p>
<div class="flex-container"> <a class="link link-primary" rel="noopener noreferrer"
href="https://supminn-neog-triangles.netlify.app/" target="_blank">Try it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG_TriangleQuiz"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section container-center">
<div class="container">
<h1>Tweet Progress</h1>
<small>Created on: 4th January 2021</small>
<p>Automating tweeting process to track the #151daysofcode challenge. This app is created using ReactJS
</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-tweetprogress.netlify.app/" rel="noopener noreferrer" target="_blank">Try
it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neog-151daysofcode"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center ">
<div class="container">
<h1>Lucky Birthday</h1>
<small>Created on: 28th December 2020</small>
<p>VannillaJS app to check if your birthday is lucky.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-lucky-bday.netlify.app/" rel="noopener noreferrer"
target="_blank">Try it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG_LuckyBirthday"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section container-center ">
<div class="container">
<h1>Cash Manager</h1>
<small>Created on: 24th December 2020</small>
<p>A cash register manager app which assists to return the correct change currency for a bill amount.
</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-cashmgr.netlify.app/" rel="noopener noreferrer" target="_blank">Try
it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG_CashRegManager"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center">
<div class="container">
<h1>Bollywood Buff</h1>
<small>Created on: 6th December 2020</small>
<p>Some of the bollywood movies i would recommend to watch. This app is created using React</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-movrcmnd.netlify.app/" rel="noopener noreferrer" target="_blank">Try
it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neog_l4_movirec"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section container-center ">
<div class="container">
<h1>Hand Gestures</h1>
<small>Created on: 6th December 2020</small>
<p>This app interprets the meaning of a hand gesture! You can either provide an input or choose from the
given list.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-gesture.netlify.app/" rel="noopener noreferrer" target="_blank">Try
it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neog_l4_gesture"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center">
<div class="container">
<h1>EmoGenious</h1>
<small>Created on: 6th December 2020</small>
<p>This app helps you interpret the meaning of an emoji! It's a React app developed on <a
class="web-link" href="https://codesandbox.io/" rel="noopener noreferrer"
target="_blank">CodeSandBox</a>.</p>
<div class="flex-container"> <a class="link link-primary" href="https://230hq.csb.app/"
rel="noopener noreferrer">Try it
out!</a>
<a class="link link-secondary" href="https://codesandbox.io/s/neogcamp-mark8-230hq?file=/src/App.js"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section container-center">
<div class="container">
<h1>Fetch Bank Details</h1>
<small>Created on: 3rd December 2020</small>
<p>Given a valid IFSC code, this app helps you obtain the bank details corresponding to the code.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-bank-ifsc.netlify.app/" rel="noopener noreferrer" target="_blank">Try
it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG_L3_BanksIFSC"
rel="noopener noreferrer" target="_blank">Access Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center">
<div class="container">
<h1>Swedish Chef Talks</h1>
<small>Created on: 2nd December 2020</small>
<p>An interative webapp which transalates English to the Swedish chef accent. Note that we are
referring to free APIs, hence there is a limit on the number of transaltions.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-chefspeaks.netlify.app/" rel="noopener noreferrer"
target="_blank">Try it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG_L3_ChefSpeaks"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section container-center">
<div class="container">
<h1>Speak Banana</h1>
<small>Created on: 1st December 2020</small>
<p>An interative webapp which transalates English to the Minion's Banana language. Note that we are
referring to free APIs, hence there is a limit on the number of transaltions.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://supminn-neog-bananaspeak.netlify.app/" rel="noopener noreferrer"
target="_blank">Try it
out!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG_L3_VanillaJS"
rel="noopener noreferrer" target="_blank">Access
Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center">
<div class="container">
<h1>Is your DoB a prime number.</h1>
<small>Created on: 24th November 2020</small>
<p>A short quiz to check if your date of birth is a prime number. This quiz has been created on <a
class="web-link" href="https://repl.it/" rel="noopener noreferrer" target="_blank">Repl.it</a>.
</p>
<div class="flex-container"> <a class="link link-primary"
href="https://repl.it/@supriyaminn/DoB-isPrime?embed=1&output=1" rel="noopener noreferrer"
target="_blank">Take the
Quiz!</a>
<a class="link link-secondary" href="https://repl.it/@supriyaminn/DoB-isPrime#index.js"
rel="noopener noreferrer" target="_blank">Access Source Code</a>
</div>
</div>
</section>
<section class="section container-center">
<div class="container">
<h1>Are you born on a leap year?</h1>
<small>Created on: 23rd November 2020</small>
<p>This is a small quiz which lets you know if you were born on a leap year! This quiz has been created
on
<a class="web-link" href="https://repl.it/" rel="noopener noreferrer" target="_blank">Repl.it</a>.
Checkout the game for more
information.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://repl.it/@supriyaminn/Born-in-prime-year?embed=1&output=1"
rel="noopener noreferrer" target="_blank">Take the
Quiz!</a>
<a class="link link-secondary" href="https://repl.it/@supriyaminn/Born-in-prime-year#index.js"
rel="noopener noreferrer" target="_blank">Access Source Code</a>
</div>
</div>
</section>
<section class="section off-white container-center">
<div class="container">
<h1>Multi-level Quiz</h1>
<small>Created on: 18th November 2020</small>
<p>This quiz contains 3 levels. The user get's to choose one among the two quizes available. This quiz
has
been created on <a class="web-link" href="https://repl.it/" rel="noopener noreferrer"
target="_blank">Repl.it</a>. Checkout the game for more
information.</p>
<div class="flex-container"> <a class="link link-primary"
href="https://repl.it/@supriyaminn/multiLevel-multiple-quiz?embed=1&output=1"
rel="noopener noreferrer" target="_blank">Take
the Quiz!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG-L1-Multi-level-quiz"
rel="noopener noreferrer" target="_blank">Access Source Code</a>
</div>
</div>
</section>
<section class="section container-center">
<div class="container">
<h1>Do you know Supriya?</h1>
<small>Created on: 16th November 2020</small>
<p>A short quiz to test how well you know me. This quiz has been created on <a class="web-link"
href="https://repl.it/" rel="noopener noreferrer" target="_blank">Repl.it</a></p>
<div class="flex-container"> <a class="link link-primary"
href="https://repl.it/@supriyaminn/Do-you-know-me?embed=1&output=1" rel="noopener noreferrer"
target="_blank">Take the
Quiz!</a>
<a class="link link-secondary" href="https://github.com/supminn/neoG-L1-Do-you-know-me"
rel="noopener noreferrer" target="_blank">Access Source Code</a>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="footer-header">Social media presence</div>
<ul class="social-links list-non-bullet">
<li class="list-item-inline">
<a aria-label="github" class="link" href="https://github.com/supminn" rel="noopener noreferrer"
target="_blank">
<i class="fab fa-lg fa-github"></i><span class="web-desc"> Github</span>
</a>
</li>
<li class="list-item-inline">
<a aria-label="twitter" class="link" rel="noopener noreferrer" target="_blank"
href="https://twitter.com/supminn">
<i class="fab fa-lg fa-twitter"></i><span class="web-desc"> Twitter</span>
</a>
</li>
<li class="list-item-inline">
<a aria-label="linkedin" class="link" rel="noopener noreferrer" target="_blank"
href="https://www.linkedin.com/in/supminn">
<i class="fab fa-lg fa-linkedin-in"></i><span class="web-desc"> Linkedin</span>
</a>
</li>
</ul>
<small>Copyright © 2020 SupTECH</small>
</footer>
</body>
</html>