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
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous" />
<link id="stylesheet" rel="stylesheet" href="https://d3o36tnwurb13j.cloudfront.net/dark-variables.css" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="https://d3o36tnwurb13j.cloudfront.net/assets/WebPic.png" type="image/x-icon">
<meta property="og:title" content="Tejansh Rana">
<meta property="og:description" content="Solution Architect, Fullstack Developer, Cloud Native.">
<meta property="og:image" content="https://d3o36tnwurb13j.cloudfront.net/assets/OG-Image.jpg">
<meta property="og:url" content="https://www.tejanshrana.com/index.htm">
<meta name="twitter:card" content="https://d3o36tnwurb13j.cloudfront.net/assets/OG-Image.jpg">
<title>Tejansh Rana</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="burger-menu">
<div class="burger-menu-btn"></div>
</div>
<div class="logo">
<h2 id="name-as-logo"><a class="nav-link" href="/">Tejansh Rana</a></h2>
</div>
<nav class="nav-links">
<a class="nav-link" href="#About">About</a>
<a class="nav-link" href="#Experience">Experience</a>
<a class="nav-link" href="https://blog.tejanshrana.com/" target="_blank"
rel="noopener noreferrer">Blog</a>
<a class="nav-link" href="#Testimonials">Testimonials</a>
<a class="nav-link" href="#Contact">Contact</a>
</nav>
<div id="theme-switch" class="theme-switch">
<div id="theme-icon" class="fas fa-sun"></div>
</div>
</div>
<div class="main-area">
<div class="hero-section">
<div class="tagline">
<h2 id="solarch">Solution Architect</h2>
<h2 id="fsd">Full stack Developer</h2>
<h2 id="clnat">Cloud Native</h2>
<small id="tag-text">Always leading from the front</small>
</div>
<div class="profile-pic-wrapper">
<div class="profile-pic"><img
src="https://d3o36tnwurb13j.cloudfront.net/assets/Profile_pic_original-removebg.png"
alt="Tejansh Rana's profile pic">
</div>
</div>
</div>
<section id="About" class="about-container">
<h2>Who am I and what do I?</h2>
<p>Hello 👋</p>
<p>My name is Tejansh Rana and I am a Mechanical Engineer turned into Software Engineer. I love building
applications. Every aspect of it. Right from the inception where the application is
still
an idea or a solution to a problem or at times, a non solution
to a non problem, visualizing it to be a full fledged application used by everyone on the planet, to
designing the
solution and actually building and deploying the application, I love every bit of it! Software
development, thus, is
beyond profession
for me, and is more of an obsession.</p>
<p>Currently, I am working as a Tech Lead at <a href="https://www.version1.com/" target="_blank"
rel="noopener noreferrer">Version1</a> where my primary responsibilities are</p>
<ul>
<li><strong>Solution Architecture</strong> - Designing end to end architecture, cloud infrastructure
design
with
AWS, deciding tech stack, and collaborating with Product Owners to translate business
requirements to technical solutions</li>
<li><strong>Fullstack development</strong> - Full stack development using Java, Springboot,
ReactJS, and Python. I specialize in building Cloud Native
applications with focus on AWS.</li>
<li><strong>Mentoring</strong> - Technical on boarding, helping team members up skill, mentoring
team members to help them reach the next level in their career path</li>
</ul>
<p>I obsess over
technologies. Not just the ones I work with but generally everything available out there. I love
learning about it and try it hands-on myself. This obsession extends to everything tech - cars,
gadgets,
concepts, hardware...everything. You can usually
find me reading, listening, or watching about it.
</p>
<h2>What stack do I work with?</h2>
<div class="tech-stack">
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/spring-boot-logo.png"
alt="Sprinboot logo">
<p> On the backend, I prefer Java and Sprinboot to build Microservices. I have
been using Spring since
the time I started development and prefer the mature, well-rounded framework and the huge
community support around. Spring Cloud Netflix is yet another valuable addition to the Spring
ecosystem and is all the
more reason I
prefer to use Spring to build my microservices.</p>
</div>
<div class="tech-stack">
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/React-icon.svg.png" alt="React logo">
<p> On the frontend, I prefer ReactJS. The flexibility to use a large number of supporting libraries
for various aspects for frontend development like forms, validations, testing, etc. as well as
the
modularity of every building block being it's own component feels the natural choice to me.
Although
frontend is an acquired skill for me, I can compliment it well enough to build large scale
enterprise applications.</p>
</div>
<div class="tech-stack">
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/Python-icon.png" alt="React logo">
<p> I cannot talk about being cloud native without having built Serverless Applications. In fact,
you
can read more about my Serverless experience below. My language of choice for building
Serverless
Applications is Python. This general purpose language is capable of being used in every aspect
of
Software development whether it be web apps, ML, data pipelines, or Infrastructure modules. The
rich
library support as well as the versatility of the language makes it the obvious choice for
building
Serverless applications.</p>
</div>
<div class="tech-stack">
<img id="aws-logo"
src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/Amazon_Web_Services_Logo_white.svg.png"
alt="React logo">
<p>While building Cloud applications whether they are microservices or monoliths or Serverless
Applications, my preference of Cloud provider is Amazon Web Services. I am also proficient with
building infrastructure, full fledged cloud solutions, as well as build and deployment pipelines
in
AWS, all with Infrastructure as Code using CloudFormation. In my current role, I also look after
the
end to end security of our applications, both for the application itself and the infrastructure
it
is deployed on.</p>
</div>
<div class="tech-stack">
<img id="docker" src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/docker-icon.png"
alt="React logo">
<p>Microservices and containers go hand in hand. I am quite comfortable working with Docker and
prefer
to run it on Fargate with ECS. Not only do containers make micrservices more autonomous and
self-serving, scaling applications comes in extremely handy with them. For local development as
well, building docker containers is my go to choice since working on multiple projects while
managing various versions and dependency support required for each one is extremely convenient
when
they are containerized.</p>
</div>
</section>
<section id="Experience" class="experience">
<h2>Experience</h2>
<p>Here's an interactive timeline of my experience and the various projects I have worked on. You can
click on the
projects or jobs below to see the details.</p>
<div class="timeline-container">
<div class="timeline">
<div class="dashed-line"></div>
<!-- <div class="point-1"></div>
<div class="point-2"></div> -->
</div>
<div class="companies">
<div class="company-n">
<div class="expanding-card">
<div class="project-logo">
<p id="arachas">Arachas Digital Insurance Wallet</p>
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/Arachas_White_2019.png"
alt="Eircom logo" id="arachas-logo" class="arachas">
</div>
<small>
<a href="http://arachas-digital.com/" target="_blank" rel="noopener noreferrer">This
is the live project.</a>
<p>
This was a greenfield project with the goal of developing a full fledged
insurance wallet with the
option to purchase insurance for various products like Home, Motor, Device,
Travel etc. from multiple
underwriters to get the most competitive price as well have one stop for all
insurance related needs
including a wallet for all documents, claims, document upload for verification,
MTAs, etc.
</p>
<p>Tech Stack - Java, Springboot, Docker, React, Node, Python, AWS</p>
<ul>
<li>Role - Tech Lead</li>
<li>Responsibilities:
<ul>
<li> Architecting the end to end solution </li>
<li> Security reviews </li>
<li> High as well as low-level design </li>
<li> Development of various microservices and libraries </li>
<li> Establishing best practices </li>
<li> Establishing the workflow for developers and DevOps </li>
<li> Mentoring team members </li>
<li> Interfacing with clients as well as all internal teams </li>
</ul>
</li>
</ul>
</small>
</div>
<div class="company-wrapper">
<div class="company-name">
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/v1.png"
alt="Version1 logo" class="v1-logo">
<h3>2020 - Tech Lead<br /><br />Version1</h3>
</div>
<small>As the tech lead, I am responsible for architecting, designing, developing, and
delivering projects across
multiple domains and teams. I am also responsible for ensuring the best security
practices are followed
across teams and solutions. In addition, client interfacing, mentoring team members,
establishing
technical strategies across teams, workshops of latest technologies and best
practices, as well as
consulting for projects across multiple teams are my other responsibilities.</small>
</div>
</div>
<div class="company-n">
<div class="expanding-card">
<div class="project-logo">
<p id="boi">Bank of Ireland Insurance Wallet</p>
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/Bank-of-Ireland.png"
alt="Bank of Ireland logo" id="boi-logo" class="boi-logo">
</div>
<small>
<a href="https://www.insuranceboi.com/" target="_blank"
rel="noopener noreferrer">This
is the live project.</a>
<p>
This was a greenfield project focused on developing a new insurance platform for
Bank Of
Ireland, based on a modern microservices architecture hosted on AWS.
</p>
<p>Tech Stack - Java, Springboot, Docker, React, Node, Python, AWS</p>
<ul>
<li>Role - Tech Lead</li>
<li>Responsibilities:
<ul>
<li> Architecting the end to end solution </li>
<li> Security reviews </li>
<li> Low-level design </li>
<li> Development of various microservices and libraries </li>
<li> Establishing best practices </li>
<li> Mentoring team members </li>
<li> Interfacing with clients as well as all internal teams </li>
</ul>
</li>
</ul>
</small>
</div>
<div class="expanding-card">
<div class="project-logo">
<p id="ebc">New Ireland External Broker Connectivity</p>
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/new-ireland.png"
alt="New Ireland logo" id="ebc-logo" class="ebc-logo">
</div>
<small>
<a href="https://www.brokerconnectivity.com/" target="_blank"
rel="noopener noreferrer">This
is the live project.</a> Note that you will only see an error page here since
the application is intended to be a middleware and the journey originates from the
aggregator's portal
<p>
This was a greenfield project focused on developing a new platform for New
Ireland to
seamlessly integrate with financial brokers. The key feature of this project was
it’s completely
serverless architecture hosted on AWS.
</p>
<p>Tech Stack - Python, AWS SAM, AWS Lambda, AWS API Gateway, ReactJS, NodeJS,
CodeBuild,
Other AWS Services</p>
<ul>
<li>Role - Tech Lead</li>
<li>Responsibilities:
<ul>
<li> Designing the end to end solution </li>
<li> Development of serverless APIs </li>
<li> Development of Lambda Authorizers </li>
<li> Security reviews </li>
<li> Low-level design </li>
<li> Interfacing with clients as well as all internal teams </li>
</ul>
</li>
</ul>
</small>
</div>
<div class="company-wrapper">
<div class="company-name">
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/Singlepoint-logo.png"
alt="Singlepoint Solutions logo" class="singlepoint-logo">
<h3>2019 - Tech Lead<br /><br />Singlepoint Solutions</h3>
</div>
<small>It was my responsibility to design solutions and lead the development team in
Singlepoint. This included
interacting with the company’s clients, designing solutions, reviewing the
solution with various security
teams, developing various modules of the solution, mentoring other developers,
interfacing with DevOps
and designing the cloud (AWS) based infrastructure. As part of this role, I was
also actively contributing to
an internal solution acceleration product.</small>
</div>
</div>
<div class="company-n">
<div class="expanding-card">
<div class="project-logo">
<p id="48months">48 Months System Revamp</p>
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/48_months.png"
alt="48 Months logo" id="48-logo" class="m48-logo">
</div>
<small>
<a href="https://48.ie/" target="_blank" rel="noopener noreferrer">This
is the live project.</a>
<p>
This project was focused on a system revamp that <a href="https://www.three.ie/"
target="_blank" rel="noopener noreferrer"></a> Three Ireland were undergoing
for their MVNO - 48 Months.
</p>
<p>Tech Stack - NodeJS, Angular, AWS</p>
<ul>
<li>Role - Solution Architect</li>
<li>Responsibilities:
<ul>
<li> Architecting the end to end solution </li>
<li> Security reviews </li>
<li> Solution presentation to stakeholders as part of the RFP </li>
<li> Infrastructure design </li>
<li>Interfacing with clients </li>
</ul>
</li>
</ul>
</small>
</div>
<div class="company-wrapper">
<div class="company-name">
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/THBS-logo.png"
alt="Envestnet Yodlee logo" class="this-logo">
<h3>2018 - Sr. Software Engineer<br /><br />Torry Harris Integration Solutions</h3>
</div>
<small>It was my responsibility to design solutions and lead the development team in
Torry Harris Integration
Solutions (formerly known as Torry Harris Business Solutions). I was involved in
various E2E solutions,
RFPs, as well as technical workshops.</small>
</div>
</div>
<div class="company-n">
<div class="expanding-card">
<div class="project-logo">
<p id="datapipeline">Data Pipeline SaaS</p>
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/DataPipeline.png"
alt="Datapipeline logo" id="dp-logo" class="dp-logo">
</div>
<small>
<p>
This project was focused on building a Datapipeline Saas product to stream
transactional data from American banks like <a href="https://bankofamerica.com/"
target="_blank" rel="noopener noreferrer">Bank of America</a>, <a
href="https://online.citi.com/" target="_blank" rel="noopener noreferrer">
Citi</a>, etc. This data was then cleansed as well as fed to ML models for
data classification.
</p>
<p>Tech Stack - Python, Scala, Spark, Redshift, Hadoop, and AWS</p>
<ul>
<li>Role - Data Engineer</li>
<li>Responsibilities:
<ul>
<li> Design and develop the data pipeline </li>
<li> Infrastructure design and deployment </li>
</ul>
</li>
</ul>
</small>
</div>
<div class="company-wrapper">
<div class="company-name">
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/Yodlee-logo.svg"
alt="Envestnet Yodlee logo" class="ey-logo">
<h3>2017 - Data Engineer<br /><br />Envestnet Yodlee</h3>
</div>
<small>It was my responsibility to design and develop data pipelines for the company’s
financial SaaS
products. These products were responsible for streaming and parsing financial
transactions from various
sources like major American and European Banks for running proprietary machine
learning algorithms for
merchant detection</small>
</div>
</div>
<div class="company-1">
<div class="expanding-card">
<div class="project-logo">
<p id="eir">Eir Self Serving Portal</p>
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/Eir-telecom-logo.png"
alt="Eircom logo" class="eir">
</div>
<small>
<a href="https://my.eir.ie/" target="_blank" rel="noopener noreferrer">This
is the live project.</a>
<p>
I worked as a Software Engineer on various projects within the Eircom portal
ranging from migration of the portal from Cold Fusion to Spring based Restful
platform to implementing a user facing Product Catalog in the portal to allow
users to manage, buy, renew, and update their addons and offers as well as pay
bills or top up their mobile phones.
</p>
<p>Tech Stack - Java, Spring, Chef, Jenkins, Apache Tomcat</p>
<ul>
<li>Role - Software Engineer</li>
<li>Responsibilities:
<ul>
<li> Designing and development</li>
<li> Infrastructure management with Chef</li>
<li> Build and deployment pipeline set up with Jenkins </li>
<li> Deployment using Jenkins, Chef, and Tomcat </li>
<li> Low-level design </li>
<li> Interfacing with clients </li>
</ul>
</li>
</ul>
</small>
</div>
<div class="company-wrapper">
<div class="company-name">
<img src="https://d3o36tnwurb13j.cloudfront.net/assets/icons/THBS-logo.png"
alt="Torry Harris Integration Solutions logo" class="this-logo">
<h3>2015 - Software Engineer<br /><br />Torry Harris Integration Solutions</h3>
</div>
<small>It was my responsibility to develop and eventually lead a team of developers for
the company’s former
client, Eir Ltd. I was majorly responsible for Eir’s online portals like
https://my.eir.ie/ and Eir’s former mobile
division Meteor. I was also involved in the rebranding projects as well as merger
(Eir and Meteor) projects
for Eir.</small>
</div>
</div>
</div>
</section>
<section class="testimonitals" id="Testimonials">
<h2>Testimonials</h2>
<p>Here are some kind words from the people I've worked with</p>
<div class="testim-wrapper">
<div class="testim">
<p>Tej you are the core of the team and you are continually delivering above and beyond the call
of duty. I don't think
there is a team member, including myself, that wouldn't be lost without your valuable
guidance and direction. You are
constantly pushing for the best solutions and you work like a robot sent from the future to
demonstrate how the matrix
should be developed.</p>
<h4> - Daniel Seavers,</h4>
<p class="role"> Solutions Architect, Version1</p>
</div>
<div class="testim">
<p>I worked with Tej in a few projects, where Tej was designing and developing microservices,
ranging from container based
applications to Serverless.
Tej always shown a very positive attitude, high quality deliverables and extremely
committed, in
projects with high
complexity and aggressive timelines.
Keep it up the good work Tej!</p>
<h4>- Fabio Douek,</h4>
<p class="role"> Solutions Architect, Amazon Web Services</p>
</div>
<div class="testim">
<p>Tejansh is a fantastic colleague to have on a team. He is a well-rounded engineer with the
capacity to architect entire
complex solutions from conception to deployment. He is extremely diligent, possibly the
hardest worker I have ever met,
all to ensure that his work is always of a high standard. I got to work directly with
Tejansh delivering an entirely
serverless insurance application from conception, security reviews, development and
deployment to production all in 4
months. A great asset for any team.</p>
<h4>- Niall Maher,</h4>
<p class="role"> CTO, Spark</p>
</div>
</div>
</section>
<section class="contact-section" id="Contact">
<h2>Contact me</h2>
<p>Have a question I can answer? Want to hire me? Or are you looking for collaboration?
You can reach me on <a href="https://twitter.com/TejanshRana" target="_blank"
rel="noopener noreferrer">Twitter</a> or <a href="https://www.linkedin.com/in/tejansh-rana/"
target="_blank" rel="noopener noreferrer"> LinkedIn</a> for a quick response.
Or you can email me at <a href="mailto:tejansh.rana@gmail.com"> tejansh.rana@gmail.com</a> <br />
Or fill in the form below and this will land straight in my inbox 😎</p>
<form class="contact-form" id="contact-form" method="POST">
<label for="name">Name*</label>
<input type="text" name="name" id="name-inp" maxlength="100" required>
<label for="email">Email*</label>
<input type="email" name="email" id="email-inp" maxlength="100" required>
<label for="message">Message*</label>
<textarea type="text" name="message" id="message-inp" maxlength="5000" required></textarea>
<button type="submit" id="submit-button">Send</button>
</form>
<div id="thank-you-msg" class="thank-you">
<p>Thanks for your message! 🙌 <br />I'll get back to you as soon as possible!</p>
<p>Want to send another message? Click <span id="msg-again" class="fake-link">here</span></p>
</div>
</section>
</div>
<footer class="footer social">
<div class="social">
<p><a href="https://github.com/tejanshrana/" target="_blank" rel="noopener noreferrer"><i
class="fab fa-github"></i></a></p>
<p><a href="https://www.linkedin.com/in/tejansh-rana/" target="_blank" rel="noopener noreferrer"><i
class="fab fa-linkedin"></i></a></p>
<p><a href="https://twitter.com/TejanshRana" target="_blank" rel="noopener noreferrer"><i
class="fab fa-twitter"></i></a></p>
<p><a href="https://www.twitch.tv/tejanshrana" target="_blank" rel="noopener noreferrer"><i
class="fab fa-twitch"></i></a></p>
<p>|</p>
<p id="copyright">Tejansh Rana © 2021</p>
</div>
</footer>
</div>
<script>
const stylesheet = document.getElementById('stylesheet')
const themeButton = document.getElementById('theme-switch')
const themeIcon = document.getElementById('theme-icon')
const testButton = document.getElementById('test')
const menuBtn = document.querySelector('.burger-menu')
const nav = document.querySelector('.nav-links')
const navLinks = document.querySelectorAll('.nav-link')
const awsImg = document.getElementById('aws-logo');
const arachasImg = document.getElementById('arachas-logo');
const nameAsLogo = document.getElementById('name-as-logo')
const companyWrapper = document.querySelectorAll('.company-wrapper')
const expandingCards = document.querySelectorAll('.expanding-card')
const darkIcon = "fa-sun";
const lightIcon = "fa-moon";
const lightTheme = "https://d3o36tnwurb13j.cloudfront.net/light-variables.css";
const darkTheme = "https://d3o36tnwurb13j.cloudfront.net/dark-variables.css";
function submit() {
console.log("Submitting form")
}
function themeSwitch() {
const currentStyle = stylesheet.href
if (currentStyle.indexOf(lightTheme) !== -1) {
stylesheet.href = darkTheme
themeIcon.classList.remove(lightIcon)
themeIcon.classList.add(darkIcon)
awsImg.src = "https://d3o36tnwurb13j.cloudfront.net/assets/icons/Amazon_Web_Services_Logo_white.svg.png"
arachasImg.src = "https://d3o36tnwurb13j.cloudfront.net/assets/icons/Arachas_White_2019.png"
}
else {
stylesheet.href = lightTheme
themeIcon.classList.remove(darkIcon)
themeIcon.classList.add(lightIcon)
awsImg.src = "https://d3o36tnwurb13j.cloudfront.net/assets/icons/Amazon_Web_Services_Logo.svg.png"
arachasImg.src = "https://d3o36tnwurb13j.cloudfront.net/assets/icons/Arachas_2019.png"
}
}
themeButton.addEventListener('click', themeSwitch)
menuBtn.addEventListener('click', () => {
menuBtn.classList.toggle('open')
nav.classList.toggle('nav-active')
navLinks.forEach(nav.addEventListener('click', () => {
nav.classList.remove('nav-active')
menuBtn.classList.remove('open')
}))
})
var clickCount = 0;
nameAsLogo.addEventListener('click', () => {
clickCount++
console.log(clickCount)
if (clickCount === 7) {
clickCount = 0
nameAsLogo.classList.toggle('fadeEffect');
}
})
expandingCards.forEach(card => card.addEventListener('click', () => {
card.classList.toggle('active')
})
)
companyWrapper.forEach(wrapper => wrapper.addEventListener('click', () => {
wrapper.classList.toggle('active-com')
})
)
const contactForm = document.getElementById("contact-form")
const thankYouMsg = document.getElementById("thank-you-msg")
async function sendEmail(body) {
const settings = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(body)
};
try {
const fetchResponse = await fetch(`https://s1rssn6hz1.execute-api.eu-west-1.amazonaws.com/email`, settings);
const data = await fetchResponse.json();
thankYouMsg.classList.add('active')
contactForm.classList.add('inactive')
contactForm.reset()
} catch (e) {
return e;
}
}
const msgBack = document.getElementById("msg-again")
msgBack.addEventListener('click', () => {
thankYouMsg.classList.remove('active')
contactForm.classList.remove('inactive')
})
const submitButton = document.getElementById("submit-button")
document.addEventListener('submit', event => {
event.preventDefault();
sendEmail(Object.fromEntries(new FormData(event.target)))
})
</script>
</body>
</html>