-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
326 lines (305 loc) · 17.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Kartik Rai (Underrated Coder)" />
<meta property="og:description" content="Portfolio Website of Kartik Rai" />
<meta property="og:image" content="https://github.com/raikartik186/Portfolio-Website/blob/main/images/phone-preview.png?raw=true"/>
<meta property="og:url" content="https://raikartik186.github.io/Portfolio-Website/" />
<meta property="og:type" content="website" />
<link rel="icon" href="images/favicon.png" sizes="16x16" type="image/x-icon">
<link rel="apple-touch-icon" href="images/favicon.png">
<title>Kartik Rai (Underrated Coder)</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/cb31bfb0c6.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="images/logo.png" class="logo" alt="" />
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fas fa-times" onclick="closemenu()"></i>
</ul>
<i class="fas fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>Full Stack Developer</p>
<h1>Hi, I'm <span>Kartik Rai</span><br />from India</h1>
</div>
</div>
</div>
<!---------------About Section----------------->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="images/user.png" alt="" />
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p style="text-align: justify; padding-top: 20px;">
As a passionate content creator on YouTube, I share my expertise in coding and software
development, offering insights
and tutorials to help fellow enthusiasts navigate the ever-evolving world of technology. With a
background as a
professional full-stack developer in the industry, I bring real-world experience to my engaging
content. Committed to
continuous learning and fostering a community of learners, I aim to make complex coding concepts
accessible and
enjoyable. Join me on this journey of exploration and mastery in the dynamic field of software
development!
</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">
Skills
</p>
<p class="tab-links" onclick="opentab('experience')">
Experience
</p>
<p class="tab-links" onclick="opentab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>LANGUAGES</span><br />JavaScript, Java, C#, Python, TypeScript, PHP, SQL</li>
<li><span>FRONTEND TECHNOLOGIES</span><br />AngularJS, ReactJS, Redux, JavaScript,
ReactNative, jQuery, Bootstrap, HTML, CSS</li>
<li><span>BACKEND TECHNOLOGIES</span><br />Javascript, NodeJS, ExpressJS, .Net, PHP, Java,
API</li>
<li><span>DATABASE</span><br />MySQL, MongoDB, Postgres, MS SQL Server</li>
<li><span>DEVELOPER TOOLS</span><br />Git, GitHub, GitLab, TFS, Postman, Jira</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>Sriggle Tech Pvt. Ltd.</span><br />Full Stack Developer (January 2024 - Present)
</li>
<li><span>NEC India Pvt. Ltd.</span><br />Software Engineer (October 2022 - January 2024)
</li>
<li><span>Isnartech Pvt. Ltd.</span><br />Full Stack Developer Intern (June 2022 - October
2022)</li>
<li><span>Coding Ninjas</span><br />Teaching Assistant (July 2022 - October 2022)</li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>B.TECH</span><br />Greater Noida Institute of technology (AKTU) <br> 2019-2023
</li>
<li><span>SENIOR SECONDARY</span><br />D.T.E.A. Sr. Secondary School (CBSE) <br> 2017-2019
</li>
<li><span>SECONDARY</span><br />Paramount International School (CBSE) <br> 2015-2017</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Services -->
<div id="services">
<div class="container">
<h1 class="sub-title">My Services</h1>
<div class="services-list">
<div>
<i class="fas fa-code"></i>
<h2>Web Development</h2>
<p style="text-align: justify;">
I provide top-notch web development services tailored to your needs. From sleek front-end
designs to robust back-end functionality, I specialize in creating user-friendly and responsive
websites. Whether it's building from scratch or enhancing existing sites, I'm here to elevate
your online presence with cutting-edge technology and a touch of creativity.
</p>
<a target="_blank" style="font-size: 15px; color: #FF5F1F;"
href="https://www.google.com/search?q=web+development&rlz=1C1UEAD_enIN1068IN1068&oq=web+deve&gs_lcrp=EgZjaHJvbWUqDQgAEAAYgwEYsQMYgAQyDQgAEAAYgwEYsQMYgAQyBggBEEUYOTINCAIQABiDARixAxiABDINCAMQABiDARixAxiABDINCAQQABiDARixAxiABDINCAUQABiDARixAxiABDINCAYQABiDARixAxiABDIKCAcQABixAxiABDIHCAgQABiABDIHCAkQABiABNIBCDUyMDVqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8">Learn
more</a>
</div>
<div>
<i class="fas fa-crop-alt"></i>
<h2>UI/UX Design</h2>
<p style="text-align: justify;">
I specialize in providing top-notch UI/UX design services, creating visually appealing and
user-friendly interfaces for digital products. With a keen understanding of user behavior and
industry trends, I craft designs that not only look great but also enhance the overall user
experience. From wireframes to prototypes, I bring concepts to life, ensuring seamless
navigation and engaging interactions. Let's collaborate to elevate your digital presence with
intuitive and aesthetically pleasing design solutions.
</p>
<a target="_blank" style="font-size: 15px; color: #FF5F1F;"
href="https://www.google.com/search?q=UI%2FUX+Design&sca_esv=595645066&rlz=1C1UEAD_enIN1068IN1068&biw=1536&bih=738&ei=cZeWZZjlBpKMseMPlKyg-A4&ved=0ahUKEwjY4cbC0cODAxUSRmwGHRQWCO8Q4dUDCBA&uact=5&oq=UI%2FUX+Design&gs_lp=Egxnd3Mtd2l6LXNlcnAiDFVJL1VYIERlc2lnbjILEAAYgAQYigUYkQIyERAAGIAEGIoFGJECGLEDGIMBMhEQABiABBiKBRiRAhixAxiDATILEAAYgAQYsQMYgwEyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgARI6QVQAFgAcAB4AZABAJgBqQGgAakBqgEDMC4xuAEDyAEA-AEC-AEB4gMEGAAgQYgGAQ&sclient=gws-wiz-serp">Learn
more</a>
</div>
<div>
<i class="fa-solid fa-mobile-screen"></i>
<h2>App Development</h2>
<p style="text-align: justify;">
I specialize in providing comprehensive app development services, crafting innovative and
user-centric mobile applications tailored to meet your unique business needs. From concept to
deployment, I ensure a seamless development process, leveraging cutting-edge technologies to
create robust and scalable solutions. Whether you're targeting iOS, Android, or cross-platform
development, my expertise encompasses the full spectrum, delivering high-quality and engaging
applications that resonate with your audience.
</p>
<a target="_blank" style="font-size: 15px; color: #FF5F1F;"
href="https://www.google.com/search?sca_esv=595645066&rlz=1C1UEAD_enIN1068IN1068&q=app+development&spell=1&sa=X&ved=2ahUKEwiqhvjA0cODAxWfSmwGHZZgCzwQBSgAegQICRAC&biw=1536&bih=738&dpr=1.25">Learn
more</a>
</div>
</div>
</div>
</div>
<!-- Portfolio -->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="images/work-1.png" alt="" />
<img src="images/work-11.png" alt="" />
<img src="images/work-111.png" alt="" />
<div class="layer">
<h3>Pregle AI Website</h3>
<p>
<ul>
<li style="padding-bottom: 5px;">Built a Complete website with frontend in HTML, CSS,
JavaScript and backend in JavaScript and PHP.</li>
<li style="padding-bottom: 5px;">Integrated with the PregleAI's other websites.</li>
<li style="padding-bottom: 5px;">There are 6 Modules: AI Products , Rent a PC, AI Internship
Programme, PregleAI Indoor Stadium, PregleAI Library, Technical Training.</li>
</ul>
</p>
<a style="text-align: center;" target="_blank" href="https://pregleai.com/"><i
class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="work">
<img src="images/work-2.png" alt="" />
<img src="images/work-22.png" alt="" />
<img src="images/work-222.png" alt="" />
<div class="layer">
<h3>Rivotta</h3>
<p>
<ul>
<li style="padding-bottom: 5px;">Built a Complete website with frontend in HTML, CSS,
jQuery, JavaScript, Bootstrap and backend in JavaScript and PHP.</li>
<li style="padding-bottom: 5px;">Changed the design of the webpage several times according
to the client's need.</li>
<li style="padding-bottom: 5px;">There are 5 Modules: Ausio Visual Products , Digital
Interactive Kiosk, Digital Signage, Office Automation & IT Products, Products on Rent.
</li>
</ul>
</p>
<a style="text-align: center;" href="https://www.rivotta.com/" target="_blank"><i
class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="work">
<img src="images/work-3.png" alt="" />
<img src="images/work-33.png" alt="" />
<img src="images/work-333.png" alt="" />
<div class="layer">
<h3>AIS School ERP</h3>
<p>
<ul>
<li style="padding-bottom: 5px;">Built a Complete website with frontend and backend in
JavaScript and PHP.</li>
<li style="padding-bottom: 5px;">Integrated with the AI Team for capturing the frame and
behaviour of students.</li>
<li style="padding-bottom: 5px;">There are 4 Modules: Student , Teacher, Staff, Admin and
for everyone there is Login with OTP, Registration with Approval, Dashboard with 15
features.</li>
</ul>
</p>
<a target="_blank" style="text-align: center;"
href="https://ashokainternationalschool.digisnartech.online/"><i
class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
<a href="#" class="btn">See more</a>
</div>
</div>
<!-- Contact -->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-envelope"></i> dummy@gmail.com</p>
<p><i class="fa-solid fa-phone"></i> +91 XXXXXXXXXX</p>
<div class="social-icons">
<a target="_blank" href="https://www.youtube.com/@coderunderrated"><i
class="fa-brands fa-youtube"></i></a>
<a target="_blank" href="https://www.instagram.com/underratedcoder/"><i
class="fab fa-instagram"></i></a>
<a target="_blank" href="https://www.linkedin.com/in/raikartik186/"><i
class="fab fa-linkedin"></i></a>
<a target="_blank" href="https://github.com/raikartik186"><i
class="fa-brands fa-github"></i></a>
<a target="_blank" href="https://www.facebook.com/raikartik186"><i
class="fab fa-facebook"></i></a>
<a target="_blank" href="https://twitter.com/raikartik186"><i class="fab fa-x-twitter"></i></a>
</div>
<a href="javascript:void(0)" download class="btn btn2">Download Resume</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required />
<input type="email" name="Email" placeholder="Your Email" required />
<textarea name="Message" rows="5" placeholder="Your Message" required></textarea>
<button type="Submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright 2024 © Kartik Rai. All rights reserved. Made with <i class="fas fa-heart"></i> by Underrated
Coder</p>
</div>
</div>
<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");
function opentab(tabname) {
for (tablink of tablinks) {
tablink.classList.remove("active-link");
}
for (tabcontent of tabcontents) {
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>
var sidemenu = document.getElementById("sidemenu");
function openmenu() {
sidemenu.style.right = "0";
}
function closemenu() {
sidemenu.style.right = "-200px";
}
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbwSawvairRZtoaXaQwgEI8kkQAevLa3nIGHgCPuZ0r6bJTCThE0KGHtCokGZ1Lva7e-Bw/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById('msg')
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
msg.innerHTML = "Message Sent Successfully"
setTimeout(function () {
msg.innerHTML = ""
}, 4000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>