-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
421 lines (408 loc) · 17.1 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
<!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.0" />
<title>Kancharla Anil</title>
<link rel="icon" href="./Images/KA.svg" type="image/x-icon" />
<link rel="stylesheet" href="portfolio.css" />
<link
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Outfit:wght@100..900&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik+Bubbles&family=Satisfy&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-88Q5VLRQR0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "GT-NGJTQ2CJ");
</script>
</head>
<body>
<div id="home">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<nav id="nav-menu">
<ul id="logo-container">
<li><a id="nav-name" href="#home">Kancharla</a></li>
</ul>
<ul class="nav right-align">
<ul class="nav-menu-items">
<li><a class="nav-link home" href="#home">Home</a></li>
<li><a class="nav-link about" href="#about">About Me</a></li>
<li><a class="nav-link projects" href="#projects">Project</a></li>
<li><a class="nav-link skills" href="#skills">Skills</a></li>
<li><a class="nav-link contact" href="#contact">Contact</a></li>
</ul>
<ul>
<button id="resume-button-1" onclick="downloadResume()">
Resume
</button>
</ul>
</ul>
</nav>
<div id="mobile-nav-menu">
<ul class="mob-nav-menu-items">
<li>
<a class="nav-link home" href="#about">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="40px" fill="#122620">
<path
d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z" />
</svg>
Profile
</a>
</li>
<li>
<a class="nav-link projects" href="#projects">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="40px" fill="#122620">
<path
d="M160-120q-33 0-56.5-23.5T80-200v-440q0-33 23.5-56.5T160-720h160v-80q0-33 23.5-56.5T400-880h160q33 0 56.5 23.5T640-800v80h160q33 0 56.5 23.5T880-640v440q0 33-23.5 56.5T800-120H160Zm0-80h640v-440H160v440Zm240-520h160v-80H400v80ZM160-200v-440 440Z" />
</svg>
Projects
</a>
</li>
<li>
<a class="nav-link home" href="#home">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="40px" fill="#122620">
<path
d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
</svg>
Home
</a>
</li>
<li>
<a class="nav-link skills" href="#skills">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="40px" fill="#122620">
<path
d="M480-400 40-640l440-240 440 240-440 240Zm0 160L63-467l84-46 333 182 333-182 84 46-417 227Zm0 160L63-307l84-46 333 182 333-182 84 46L480-80Zm0-411 273-149-273-149-273 149 273 149Zm0-149Z" />
</svg>
Skills
</a>
</li>
<li>
<a class="nav-link contact" href="#contact">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="40px" fill="#122620">
<path
d="M796-120q-119 0-240-55.5T333-333Q231-435 175.5-556T120-796q0-18.86 12.57-31.43T164-840h147.33q14 0 24.34 9.83Q346-820.33 349.33-806l26.62 130.43q2.05 14.9-.62 26.24-2.66 11.33-10.82 19.48L265.67-530q24 41.67 52.5 78.5T381-381.33q35 35.66 73.67 65.5Q493.33-286 536-262.67l94.67-96.66q9.66-10.34 23.26-14.5 13.61-4.17 26.74-2.17L806-349.33q14.67 4 24.33 15.53Q840-322.27 840-308v144q0 18.86-12.57 31.43T796-120ZM233-592l76-76.67-21-104.66H187q3 41.66 13.67 86Q211.33-643 233-592Zm365.33 361.33q40.34 18.34 85.84 29.67 45.5 11.33 89.16 13.67V-288l-100-20.33-75 77.66ZM233-592Zm365.33 361.33Z" />
</svg>
Contact
</a>
</li>
</ul>
</div>
<div id="home-about">
<div id="intro">
<h2 id="interests">
<p>Code.</p>
<p>Coffee.</p>
<p>Cooking.</p>
<p>Freelancing.</p>
<p>Travel.</p>
<p>Enthusiastic.</p>
</h2>
</div>
<div id="name-section">
<h2 id="name">Anil Kancharla</h2>
<a href="#contact"><span>Let's make something amazing.</span></a>
</div>
</div>
<!-- <video id="video-background" autoplay muted loop>
<source src="./Images/1678134221405733.MP4" type="video/mp4" />
</video> -->
</div>
<div id="about" class="about section">
<h1>About me</h1>
<p><span>See</span> for yourself</p>
<div id="about-container">
<img id="about-img" class="home-img" src="./Images/me_working.webp" alt="" />
<div id="about-info">
<p id="user-detail-intro">I've always been interested in technology and the way it can be used
to make people's lives better. I've been fascinated by the way that
computers and software can be used to solve problems and streamline
processes. I take real pride in the work that I do, and I'm always
striving to do my best. I believe that it's important to be committed
to excellence, and I try to bring that mindset to everything I do. I
also value teamwork and collaboration, and I enjoy working with others
to achieve common goals. I believe that by working together, we can
accomplish much more than we can individually. </p>
<button id="resume-button-2" onclick="downloadResume()">
Resume
</button>
</div>
</div>
</div>
<div id="projects">
<h1>Performance beats promises.</h1>
<p>
Bring your <span>creative ideas to life</span> with my expertise in
backend and full stack development, ensuring user-friendly and efficient
web solutions.
</p>
<div class="project-card">
<div class="project-info">
<!-- <div class="project-number">01</div> -->
<h1 class="project-title">
<span class="actual-text">Chick-n-Fry</span>
</h1>
<p class="project-description">
Chick-n-Fry is a fast-food restaurant chain known for its chicken
sandwiches, waffle fries, and friendly service. Chick-n-Fry is a
popular choice for quick and delicious meals.
</p>
<div class="project-tech-stack">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>ExpressJS</p>
<p>MongoDB</p>
</div>
<div class="project-source">
<a class="project-github-link" href="https://github.com/Smoke221/tangible-voyage-4988" target="_blank">Source
code</a>
<a class="project-deployed-link" href="https://timely-parfait-491bed.netlify.app/" target="_blank">Live
here</a>
</div>
</div>
<div id="project-image-coursel">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./Images/index.png" alt="#" />
</div>
<div class="swiper-slide">
<img src="./Images/menu.png" alt="#" />
</div>
<div class="swiper-slide">
<img src="./Images/cart.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
<div class="project-card">
<div class="project-info">
<h1 class="project-title">
<span class="actual-text">MG Classic Interiors</span>
</h1>
<p class="project-description">
A sleek and modern homepage designed for an interior design company, showcasing their portfolio, services, and
testimonials. The design prioritizes user engagement, aesthetic appeal, and intuitive navigation, providing a
seamless experience for potential clients.
</p>
<div class="project-tech-stack">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>Bootstrap</p>
</div>
<div class="project-source">
<!-- <a class="project-github-link" href="https://github.com/git-rishab/interior-design-homepage"
target="_blank">Source code</a> -->
<a class="project-deployed-link" href="https://www.mgclassicinteriors.com/" target="_blank">Live here</a>
</div>
</div>
<div id="project-image-coursel">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./Images/mg1.png" alt="Image 1" />
</div>
<div class="swiper-slide">
<img src="./Images/mg2.png" alt="Image 2" />
</div>
<div class="swiper-slide">
<img src="./Images/mg3.png" alt="Image 3" />
</div>
<!-- <div class="swiper-slide"></div>
<iframe src="./Images/mgv.mp4" frameborder="0"></iframe>
</div> -->
</div>
</div>
</div>
</div>
<div class="project-card">
<div class="project-info">
<h1 class="project-title">
<span class="actual-text">Analyzy</span>
</h1>
<p class="project-description">
An application designed to read PDFs with the help of AI in a better
way allowing users to ask questions about the contents of the file.
</p>
<div class="project-tech-stack">
<p>Vue.js</p>
<p>Node JS</p>
<p>Express JS</p>
<p>JavaScript</p>
<p>MongoDB</p>
<p>Gemini API</p>
<p>AWS S3</p>
<p>GCP</p>
<p>AI</p>
</div>
<div class="project-source">
<a class="project-github-link" href="https://github.com/Smoke221/Analyzy" target="_blank">Source code</a>
<a class="project-deployed-link" href="https://analyzy.vercel.app/" target="_blank">Live here</a>
</div>
</div>
<div id="project-image-coursel">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./Images/Analyzy-Home.png" alt="" />
</div>
<div class="swiper-slide">
<img src="./Images/Analyzy-Drag and Drop.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="skills">
<h1>Skills</h1>
<p>Bringing <span>ideas to life</span> with these tools</p>
<div id="container">
<div class="skills-card">
<img class="skills-card-img" src="./Images/html-5.svg" alt="" />
<h2 class="skills-card-name">HTML</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/css3.svg" alt="" />
<h2 class="skills-card-name">CSS</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/javascript.svg" alt="" />
<h2 class="skills-card-name">JAVASCRIPT</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/nodejs.svg" alt="" />
<h2 class="skills-card-name">NODE JS</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/expressj.svg" alt="" />
<h2 class="skills-card-name">EXPRESS JS</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/mongodb.svg" alt="" />
<h2 class="skills-card-name">MONGO DB</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/amazon-web-services-4.svg" alt="" />
<h2 class="skills-card-name">AWS</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/icons8-my-sql.svg" alt="" />
<h2 class="skills-card-name">MY SQL</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/python.svg" alt="" />
<h2 class="skills-card-name">Python</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/dsa.png" alt="" />
<h2 class="skills-card-name">DSA</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/vue.svg" alt="" />
<h2 class="skills-card-name">Vue</h2>
</div>
<div class="skills-card">
<img class="skills-card-img" src="./Images/frontegg.png" alt="" />
<h2 class="skills-card-name">Frontegg</h2>
</div>
</div>
</div>
<div class="github">
<h1>Github Activity</h1>
<p>
Showcasing my <span>contributions and active involvement</span> in the
developer community
</p>
<div id="github">
<img id="github-stats-card" src="https://github-readme-stats.vercel.app/api?username=Smoke221&show_icons=true" />
<img id="github-top-langs"
src="https://github-readme-stats.vercel.app/api/top-langs/?username=Smoke221&layout=compact" alt="" />
<div>
<img src="https://ghchart.rshah.org/D1462F/Smoke221" alt="Smoke221's Blue Github Chart" />
</div>
<img id="github-streak-stats" src="https://github-readme-streak-stats.herokuapp.com/?user=Smoke221" alt="" />
</div>
</div>
<div id="contact">
<h1>Connect</h1>
<p>Don't be <span>a stranger</span></p>
<div id="container-contact">
<div id="main-contact">
<div>
<img src="./Images/github.svg" alt="Github logo" />
<a id="contact-github" href="https://github.com/Smoke221">Smoke221</a>
</div>
<div>
<img src="./Images/linkedin.svg" alt="LinkedIn logo" />
<a id="contact-linkedin" href="https://www.linkedin.com/in/anil-reddy-b2a364169/">Kancharla Anil</a>
</div>
<div>
<img src="./Images/mail.svg" alt="Email logo" />
<a id="contact-email" href="mailto:ismoketechlabs@gmail.com">ismoketechlabs@gmail.com</a>
</div>
<div>
<img src="./Images/whatsapp.svg" alt="Phone logo" />
<a id="contact-phone" href="tel:+91-8121792408">+91-8121792408</a>
</div>
</div>
<div id="contact-info">
<p>
As a backend developer specializing in robust, scalable solutions, I’m eager to collaborate on challenging projects. Whether you need to strengthen your team or seek a freelance expert, I’d love to connect.</p>
<p> With a passion for solving complex problems and a solid track record, I'm ready to contribute to innovative projects. Feel free to reach out via phone or email for collaboration or freelance opportunities. </p>
</div>
</div>
</div>
<!-- Resume Modal -->
<div id="resumeModal" class="modal">
<div class="modal-content">
<span class="close-button" onclick="closeModal('resumeModal')"></span>
<p>For more details, please check the contact section!</p>
</div>
</div>
<!-- First Modal -->
<div id="firstModal" class="modal">
<div class="modal-content">
<span class="close-button" onclick="closeModal('firstModal')"></span>
<p>Anil is currently working as a backend developer...</p>
</div>
</div>
<!-- Second Modal -->
<div id="secondModal" class="modal">
<div class="modal-content">
<span class="close-button" onclick="closeModal('secondModal')"></span>
<p>He is open to taking on freelance projects.</p>
</div>
</div>
</body>
</html>
<script src="portfolio.js"></script>