-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
492 lines (489 loc) · 22.8 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
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
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="./images/favicons/Logo_tej.ico" rel="icon" type="image/svg+xml" />
<meta content="width=device-width,initial-scale=1" name="viewport" />
<meta content="index, nofollow" name="robots" />
<meta content="Portfolio of Tejas DL" name="description" />
<title>Hey There 👋</title>
<link rel="preload" href="/svgs/introduction/intro-avatar.svg" as="image" />
<link rel="preload" href="/svgs/blobs/blob-home.svg" as="image" type="image/svg+xml" />
<link rel="preload" href="/assets/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="#" as="image" imagesrcset="
/svgs/introduction/introduction449.svg 449vw,
/svgs/introduction/introduction639.svg 639vw,
/svgs/introduction/introduction899.svg 899vw,
/svgs/introduction/introduction1199.svg 1199vw,
/svgs/introduction/introduction1399.svg 1399vw,
"
imagesizes="(max-width: 449px) 449vw, (max-width: 639px) 639vw, (max-width: 899px) 899vw, (max-width: 1199px) 1199vw, (max-width: 1400px) 1399vw" />
<link rel="preload" href="#" as="image" imagesrcset="
/svgs/portfolio/portfolio449.svg 449vw,
/svgs/portfolio/portfolio639.svg 639vw,
/svgs/portfolio/portfolio899.svg 899vw,
/svgs/portfolio/portfolio1199.svg 1199vw,
/svgs/portfolio/portfolio1399.svg 1399vw,
"
imagesizes="(max-width: 449px) 449vw, (max-width: 639px) 639vw, (max-width: 899px) 899vw, (max-width: 1199px) 1199vw, (min-width: 1200px) 1399vw" />
<script>
!(function (t, e) {
var o, n, p, r;
e.__SV ||
((window.posthog = e),
(e._i = []),
(e.init = function (i, s, a) {
function g(t, e) {
var o = e.split(".");
2 == o.length && ((t = t[o[0]]), (e = o[1])),
(t[e] = function () {
t.push([e].concat(Array.prototype.slice.call(arguments, 0)));
});
}
((p = t.createElement("script")).type = "text/javascript"),
(p.async = !0),
(p.src = s.api_host + "/static/array.js"),
(r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(
p,
r,
);
var u = e;
for (
void 0 !== a ? (u = e[a] = []) : (a = "posthog"),
u.people = u.people || [],
u.toString = function (t) {
var e = "posthog";
return (
"posthog" !== a && (e += "." + a), t || (e += " (stub)"), e
);
},
u.people.toString = function () {
return u.toString(1) + ".people (stub)";
},
o =
"capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(
" ",
),
n = 0;
n < o.length;
n++
)
g(u, o[n]);
e._i.push([i, s, a]);
}),
(e.__SV = 1));
})(document, window.posthog || []);
posthog.init("phc_MXuF3jJJ0jcoqjtdY0QBEWrAmBbgXqm5t9Gq8SYrlC0", {
api_host: "https://us.i.posthog.com",
person_profiles: "identified_only",
});
</script>
<link rel="stylesheet" href="/assets/styles.css" />
<link rel="modulepreload" href="/assets/script.js" />
</head>
<body>
<script type="module" src="/assets/script.js" defer></script>
<div id="app">
<div id="mobile-container">
<div class="mobile-nav">
<a href="#portfolio"><img alt="exp-icon" src="./svgs/extras/anchor.svg" width="22" height="22"
style="padding-bottom: 1px;" />Experience</a>
<a href="#projects"><img alt="projects-icon" src="./svgs/extras/project-svgrepo-com.svg" width="25"
height="25" />Projects</a>
<a href="#about"><img alt="about-icon" src="./svgs/extras/user.svg" width="25" height="25"
style="padding-bottom: 0px;" />About</a>
<a href="#contact"><img alt="message-icon" src="./svgs/extras/message.svg" width="30" height="30"
style="margin-bottom: -2px;" />Connect</a>
</div>
</div>
<nav>
<a href="#"><img src="./images/icons/Logo_tej.webp" id="logo" width="24" height="24" alt="logo_tej" /></a>
<div class="social">
<a href="https://twitter.com/yousurebro_tej"><img alt="twitter" src="./svgs/social/icons8-twitter.svg"
width="24" height="24" loading="eager" /> </a>
<a href="https://www.linkedin.com/in/tejas-dl-94b771185"><img alt="linkedin"
src="./svgs/social/linkedin-svgrepo-com.svg" loading="eager" width="24" height="24" /> </a>
<a href="https://github.com/tejas-git64"><img alt="github" loading="eager"
src="./svgs/social/github-svgrepo-com.svg" width="24" height="24" style="margin-left: -2px;" /></a>
</div>
</nav>
<section id="introduction">
<picture class="intro-background">
<source srcset="/svgs/introduction/introduction449.svg" media="(max-width: 449px)">
<source srcset="/svgs/introduction/introduction639.svg" media="(max-width: 639px)">
<source srcset="/svgs/introduction/introduction899.svg" media="(max-width: 899px)">
<source srcset="/svgs/introduction/introduction1199.svg" media="(max-width: 1199px)">
<source srcset="/svgs/introduction/introduction1399.svg" media="(min-width: 1200px)">
<img src="#" loading="eager" alt="intro-background" />
</picture>
<div class="intro-text">
<header>
<h4>Hi there,</h4>
<h1>i'm Tejas</h1>
</header>
<b>Frontend developer, UI Enthusiast</b>
<p>I build elegant experiences on the web</p>
<div class="connect">
<a href="#contact">Let's talk
<img src="/svgs/extras/arrow-up-right-svgrepo-com.svg" alt="visit-icon" width="20" height="20" /></a>
<a href="#about">About me
<img src="/svgs/extras/arrow-up-right-svgrepo-com.svg" alt="visit-icon" width="20" height="20" /></a>
</div>
</div>
<div class="intro-images">
<img src="./svgs/blobs/blob-home.svg" id="blob" loading="eager" alt="blob" />
<img src="./svgs/introduction/intro-avatar.svg" id="avatar" loading="eager" width="280" height="350"
alt="intro-image" />
</div>
</section>
<section id="portfolio">
<h1>Portfolio</h1>
<div class="stack-header">
<p class="stack-heading">Experience</p>
<img alt="exp" src="./svgs/extras/anchor.svg" loading="eager" style="margin-bottom: 0px" />
</div>
<ul id="roles">
<li class="animateFromRight role">
<p class="company">
Sonata Software Ltd
</p>
<div style="
position: relative;
margin-bottom: 10px;
background-color: #140126;
padding: 10px 15px;
border-radius: 10px;
">
<div style="
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
">
<b>Digital engineer</b><small>Nov 2023 - March 2025</small>
</div>
<ul style="padding: 0 16px" id="res">
<li>
<p>
Led the frontend development of an internal project,
overseeing the design and implementation of user interfaces
to enhance user engagement and satisfaction.
</p>
</li>
<li>
<p>
Created mock-ups using Figma and collaborated closely with stakeholders and clients to envision the
implementation of the specified designs and speed up MVP creation by 20%.
</p>
</li>
<li>
<p>
Utilized Tailwindcss for faster prototyping resulting in an increase in productivity by 25% and
developer experience.
</p>
</li>
<li>
<p>
Enhanced engagement by 20% making it mobile friendly and responsive across various devices and
layouts while ensuring consistent design using vendor prefixes.
</p>
</li>
<li>
<p>
Optimized application performance using Lighthouse and React Devtools and significantly improving
performance by 30% and a performance score of 98.
</p>
</li>
</ul>
</div>
<div style="
position: relative;
margin-bottom: 5px;
background-color: #140126;
padding: 10px 15px;
border-radius: 10px;
">
<div style="
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
">
<b>Digital associate engineer</b><small>Sept 2022 - Oct 2023</small>
</div>
<p style="font-family: monospace; font-size: 0.75rem;">
Designed responsive user interfaces with React.js and TypeScript, optimized layouts using CSS
techniques, explored state management strategies, and continuously learned new technologies to enhance
frontend development productivity.
</p>
</div>
</li>
</ul>
<div class="stack-header">
<p class="stack-heading">Tech stack</p>
<img alt="tech-icon" loading="lazy" src="./svgs/extras/layers.svg" />
</div>
<div class="tech-stacks">
<ul class="vanilla">
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/icons8-html5.svg" />
<p>HTML</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/icons8-css.svg" />
<p>CSS</p>
</li>
</ul>
<ul class="main">
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/icons8-javascript.svg" />
<p>Javascript</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/reactjs-svgrepo-com.svg" />
<p>React.js</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/tailwindcss-icon-svgrepo-com.svg"
style="margin-bottom: -10px; padding: 5px 0;" />
<p>Tailwind</p>
</li>
</ul>
<ul class="abstraction">
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/icons8-typescript.svg" />
<p>Typescript</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/icons8-nextjs.svg" />
<p>Next.js</p>
</li>
</ul>
</div>
<div class="stack-header">
<p class="stack-heading">Tools & Platforms</p>
<img alt="tech-icon" loading="lazy" src="./svgs/extras/drafting-compass.svg" />
</div>
<div class="platforms">
<ul class="tools">
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/graphql-svgrepo-com.svg" />
<p>GraphQL</p>
</li>
<li class="tech vcs">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/git-svgrepo-com.svg" />
<p>Git</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/vite.svg" />
<p>Vite</p>
</li>
</ul>
<ul class="tools">
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/jest-svgrepo-com.svg" />
<p>Jest</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/testing-library.svg" />
<p>Testing<br>library</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./images/icons/zustand.png" />
<p>Zustand</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/redux-svgrepo-com.svg" />
<p>Redux</p>
</li>
</ul>
<ul class="platform">
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/netlify-svgrepo-com.svg" />
<p>Netlify</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/vercel-fill-svgrepo-com.svg" />
<p>Vercel</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/github-svgrepo-com.svg" />
<p>Github</p>
</li>
</ul>
</div>
<div class="stack-header">
<p class="stack-heading">Backends and Databases</p>
<img alt="db" loading="lazy" src="./svgs/tech/database.svg" />
</div>
<ul class="backends">
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/icons8-firebase.svg" />
<p>Firebase</p>
</li>
<li class="tech">
<img alt="tech-icon" loading="lazy" src="./svgs/tech/icons8-mysql.svg" />
<p>MySQL</p>
</li>
</ul>
</section>
<section id="projects">
<h1>Projects</h1>
<div class="projects-container">
<div class="project" id="project1">
<div class="animateFromLeft main-content">
<img alt="bingetown" loading="eager" src="./images/bingetown/main.webp" height="229" width="452" />
<ul class="links">
<li>
<a href="https://github.com/tejas-git64/BingeTown"><img alt="github-icon" loading="lazy"
src="./svgs/tech/github-svgrepo-com.svg" class="github" /></a>
</li>
<li>
<a href="https://bingetown.vercel.app" title="Visit Bingetown"><img src="./svgs/extras/link.svg"
loading="lazy" alt="link-icon" class="link" /></a>
</li>
</ul>
</div>
<div class="animateFromRight main-description">
<h2 class="main-title">BingeTown</h2>
<p class="main-summary">
The ultimate platform for movie junkies. Watch from a vast array
of genres, it includes various regional tv
shows and early release trailers.
</p>
</div>
</div>
<div class="project" id="project2">
<div class="animateFromRight main-description">
<h2 class="main-title">Lowkey</h2>
<p class="main-summary">
A Spotify & SoundCloud inspired web based music player, where you can stream tracks from popular
playlists, artists and albums. Has the familiar
spotify-like experience along with some personal touches.
</p>
</div>
<div class="animateFromLeft main-content">
<img alt="lowkey" loading="eager" src="./images/lowkey/main.webp" height="229" width="452" />
<ul class="links">
<li>
<a href="https://github.com/tejas-git64/LowKey-player"><img alt="github-icon"
src="./svgs/tech/github-svgrepo-com.svg" loading="lazy" class="github" /></a>
</li>
<li>
<a href="https://lowkeymusic-v2.netlify.app" title="Visit Lowkey"><img src="./svgs/extras/link.svg"
loading="lazy" alt="link-icon" class="link" /></a>
</li>
</ul>
</div>
</div>
<div class="project" id="project3">
<div class="animateFromRight main-content">
<img alt="notes" src="./images/socialdashboard/main.webp" loading="eager" height="229" width="452" />
<ul class="links">
<li>
<a href="https://github.com/tejas-git64/SocialDashboard"><img alt="github-icon" loading="lazy"
src="./svgs/tech/github-svgrepo-com.svg" class="github" /></a>
</li>
<li>
<a href="https://adorable-otter-3d83ff.netlify.app/" title="Visit SocialDashboard"><img
src="./svgs/extras/link.svg" alt="link-icon" loading="lazy" class="link" /></a>
</li>
</ul>
</div>
<div class="animateFromLeft main-description">
<h2 class="main-title">SocialDashboard</h2>
<p class="main-summary">
A dashboard for social media created using Svelte and Chart.js encompassing a variety of charts
including line, bar and map charts.
</p>
</div>
</div>
<div class="project" id="project4">
<div class="animateFromLeft main-description">
<h2 class="main-title">Tenki</h2>
<p class="main-summary">
A sleek and minimal weather app with built-in map support, can
save locations and updates weather data in realtime along with
future forecasts.
</p>
</div>
<div class="animateFromRight main-content">
<img alt="tenki" loading="eager" src="./images/Tenki/main.webp" height="229" width="452" />
<ul class="links">
<li>
<a href="https://github.com/tejas-git64/Tenki"><img alt="github-icon"
src="./svgs/tech/github-svgrepo-com.svg" loading="lazy" class="github" /></a>
</li>
<li>
<a href="https://preeminent-cucurucho-2b4740.netlify.app" title="Visit Tenki"><img
src="./svgs/extras/link.svg" alt="link-icon" loading="lazy" class="link" /></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="about">
<h1>About me</h1>
<div class="about-me">
<div class="img-back">
<img alt="tejasdl" src="/images/portfolio_image.webp" loading="lazy" id="about-img"
class="animateFromRight" />
</div>
<p class="animateFromLeft">
I'm Tejas, a passionate <b>Frontend developer</b> with a keen eye for
detail and a love for creating beautiful and functional web experiences.
<br />My journey into web development began during my under-grad days in 2022 when i came across <b>CSS</b>,
which led me to dive into the rabbit-hole to explore its ends. Fast forward to today with over <b>2 years of
experience</b>, i have built decent <b>UIs</b> and <b>Web applications</b> and i'm continuously learning
and levelling up my game in the<b>Web dev</b> space.<br />
From using plain vanilla languages like <b>HTML</b>, <b>CSS</b> and <b>Javascript</b> to using libraries
like <b>React.js</b> and now <b>Next.js</b> and <b>Svelte</b>, I have come a long way and the journey has
been a rollercoaster
ride and I have enjoyed every bit of it. I started with <b>Web development</b> because i loved making
websites and apps.I enjoy the process of building things from scratch and seeing them come to life.
I am always looking for new opportunities to grow as a developer and i am excited to see where my journey
will take me next.<br />
If you're looking for a dedicated and talented frontend developer to join your team, I would love to hear
from you!
</p>
</div>
<a href="./Tejasdl_Resume.pdf" class="animateFadeIn" download="Tejasdl-resume.pdf">View Resume</a>
</section>
<section id="contact">
<p class="top"></p>
<h1 data-animation="animateFadeIn">
Want to build the next big thing?
</h1>
<img src="/svgs/illustration/contact-illustration.svg" loading="lazy" alt="mail-art" id="mail-art" width="500"
height="500" />
<div class="animateFadeBottom contact-container">
<form action="https://formsubmit.co/b0699b68232a81637d5197ce1cdbefcc" id="contact-form" method="POST"
target="_blank">
<h2>Let's connect</h2>
<label for="fname">Full name</label>
<input name="Name" id="fname" required="" autocomplete="name" />
<label for="org">Organization</label>
<input name="Organization" id="org" required="" autocomplete="organization-title" />
<label for="email">Email address</label>
<input name="Email address" type="email" id="email" required="" autocomplete="email" />
<label for="comments">Message</label>
<textarea id="comments" name="Message" required="" autocomplete="on"></textarea>
<input name="_subject" type="hidden" value="Invitation to connect 📩" />
<input name="_blacklist" type="hidden" value="spammy pattern, banned term, phrase" />
<input type="hidden" name="_autoresponse"
value="Hey!, i received your email. You'll receive a reply soon once your request is accepted. Till then stay tuned 👌" />
<input type="hidden" name="_captcha" value="false" />
<input name="_template" type="hidden" value="box" />
<button id="send-button" type="submit">
<p id="button-text">Send message</p>
<img alt="plane" loading="lazy" src="./images/icons/icons8-send-48.png" id="button-img" />
</button>
</form>
</div>
<p class="bottom-wave"></p>
</section>
</div>
</body>
</html>