├── Assets
    ├── favicon.png
    └── queMark.webp
├── README.md
├── Script
    └── script.js
├── Style
    └── style.css
└── index.html


/Assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hellosatyajit/GitHub-Profile-Page-Creator/5d01f9cdb67f7ba5e5caba38a92dcf5f73189aa9/Assets/favicon.png


--------------------------------------------------------------------------------
/Assets/queMark.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hellosatyajit/GitHub-Profile-Page-Creator/5d01f9cdb67f7ba5e5caba38a92dcf5f73189aa9/Assets/queMark.webp


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <h1> <img src="Assets/favicon.png" width="80px"><br/>Github Profile Page Creator</h1>
 3 | </div>
 4 | <p align="center">
 5 |   <a href="https://linkedin.com/in/iamsatyajit" target="_blank"><img src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white" height="30px"></a>
 6 |   <a href="https://twitter.com/0xSatyajit" target="_blank"><img src="https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white" height="30px"></a>
 7 | </p>
 8 | 
 9 | ## Features
10 | - Header Image
11 | - Skill & Social Badge
12 | - Github Addons, Like Badge, Trophy, Profile View, Profile Stats...
13 | - With No Extra Cost
14 | 
15 | ## Tech Used
16 | ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
17 | ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
18 | ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
19 | ![Bootstrap](https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&logo=bootstrap&logoColor=white)
20 | 
21 | ## Credits
22 | - [Skill & Social Badge](https://shields.io/)
23 | - [GitHub Profile Badge](https://github.com/acervenky/animated-github-badges)
24 | - [GitHub Profile Trophy](https://github.com/ryo-ma/github-profile-trophy)
25 | - [Github Profile Activity Graoh](https://github.com/Ashutosh00710/github-readme-activity-graph)
26 | - [Github Profile Streak Stats](https://github.com/DenverCoder1/github-readme-streak-stats)
27 | - [Visit Count](https://github.com/VishwaGauravIn/visit-count-pro)
28 | 


--------------------------------------------------------------------------------
/Script/script.js:
--------------------------------------------------------------------------------
  1 | document.onreadystatechange = () => {
  2 |     var state = document.readyState
  3 |     if (state == 'interactive') {
  4 |         document.getElementById('mainBody').style.display = "none";
  5 |     } else if (state == 'complete') {
  6 |         setTimeout(() => {
  7 |             document.getElementById('interactive');
  8 |             document.getElementById('loader').style.display = "none";
  9 |             document.getElementById('mainBody').style.display = "block";
 10 |         }, 1000);
 11 |     }
 12 | }
 13 | 
 14 | let myName = document.getElementById("myName");
 15 | let idName = document.getElementById("idName");
 16 | let isName = false;
 17 | myName.parentElement.style.display = "none";
 18 | 
 19 | idName.addEventListener("keyup", changeName);
 20 | 
 21 | function changeName() {
 22 |     myName.innerText = idName.value;
 23 | 
 24 |     if (idName.value == 0) {
 25 |         myName.parentElement.style.display = "none";
 26 |         isName = false;
 27 |     }
 28 |     if (idName.value != 0) {
 29 |         myName.parentElement.style.display = "block";
 30 |         isName = true;
 31 |     }
 32 | }
 33 | 
 34 | let myImg = document.getElementById("myImg");
 35 | let idImg = document.getElementById("idImg");
 36 | 
 37 | idImg.addEventListener("keyup", changeImg);
 38 | 
 39 | function changeImg() {
 40 |     myImg.src = idImg.value;
 41 | }
 42 | 
 43 | let myAbout = document.getElementById("myAbout");
 44 | let idAbout = document.getElementById("idAbout");
 45 | 
 46 | idAbout.addEventListener("keyup", changeAbout);
 47 | 
 48 | function changeAbout() {
 49 |     myAbout.innerText = idAbout.value;
 50 | }
 51 | 
 52 | let headingList = document.getElementById("headingList");
 53 | headingList.style.display = "none";
 54 | 
 55 | let list1 = document.getElementById("list1");
 56 | let idList1 = document.getElementById("idList1");
 57 | list1.parentElement.style.display = "none";
 58 | 
 59 | let list2 = document.getElementById("list2");
 60 | let idList2 = document.getElementById("idList2");
 61 | list2.parentElement.style.display = "none";
 62 | 
 63 | let list3 = document.getElementById("list3");
 64 | let idList3 = document.getElementById("idList3");
 65 | list3.parentElement.style.display = "none";
 66 | 
 67 | let list4 = document.getElementById("list4");
 68 | let idList4 = document.getElementById("idList4");
 69 | list4.parentElement.style.display = "none";
 70 | 
 71 | let list5 = document.getElementById("list5");
 72 | let idList5 = document.getElementById("idList5");
 73 | list5.parentElement.style.display = "none";
 74 | 
 75 | let list6 = document.getElementById("list6");
 76 | let idList6 = document.getElementById("idList6");
 77 | list6.parentElement.style.display = "none";
 78 | 
 79 | let list7 = document.getElementById("list7");
 80 | let idList7 = document.getElementById("idList7");
 81 | let idList71 = document.getElementById("idList71");
 82 | list7.parentElement.style.display = "none";
 83 | 
 84 | let list8 = document.getElementById("list8");
 85 | let idList8 = document.getElementById("idList8");
 86 | let idList81 = document.getElementById("idList81");
 87 | list8.parentElement.style.display = "none";
 88 | 
 89 | let list9 = document.getElementById("list9");
 90 | let idList9 = document.getElementById("idList9");
 91 | list9.parentElement.style.display = "none";
 92 | 
 93 | let list10 = document.getElementById("list10");
 94 | let idList10 = document.getElementById("idList10");
 95 | list10.parentElement.style.display = "none";
 96 | 
 97 | const listArr = [idList1, idList2, idList3, idList4, idList5, idList6, idList7, idList8, idList9, idList10]
 98 | 
 99 | const myListArr = [list1, list2, list3, list4, list5, list6, list7, list8, list9, list10]
100 | 
101 | for (let i = 0; i < listArr.length; i++) {
102 |     listArr[i].addEventListener("keyup", () => {
103 |         if (i == 6 || i == 7)
104 |             changeListWithLink(listArr[i], myListArr[i])
105 | 
106 |         else if (i == 8)
107 |             changeHereWithLink(listArr[i], myListArr[i])
108 | 
109 |         else
110 |             changeList(listArr[i], myListArr[i])
111 |     });
112 | }
113 | 
114 | function changeListWithLink(idList, nameList) {
115 |     nameList.innerHTML = "<a href=\"\">" + idList.value + "</a>";
116 | 
117 |     nameList.parentElement.style.display = idList.value == 0 ? "none" : "block";
118 | 
119 |     headingList.style.display = showHeadingList() ? "block" : "none"
120 | }
121 | 
122 | function changeHereWithLink(idList, nameList) {
123 |     nameList.href = idList.value;
124 | 
125 |     nameList.parentElement.style.display = idList.value == 0 ? "none" : "block";
126 | 
127 |     headingList.style.display = showHeadingList() ? "block" : "none"
128 | }
129 | 
130 | function changeList(idList, nameList) {
131 |     nameList.innerText = idList.value;
132 |     
133 |     nameList.parentElement.style.display = idList.value == 0 ? "none" : "block";
134 | 
135 |     headingList.style.display = showHeadingList() ? "block" : "none"
136 | }
137 | 
138 | function showHeadingList() {
139 |     for (let i = 0; i < listArr.length; i++) {
140 |         if (listArr[i].value)
141 |             return true;
142 |     }
143 | }
144 | 
145 | //SKILLS
146 | 
147 | let headingSkills = document.getElementById("headingSkills");
148 | headingSkills.style.display = "none";
149 | 
150 | let idJava = document.getElementById("idJava");
151 | let java = document.getElementById("java");
152 | java.style.display = "none";
153 | 
154 | let idC = document.getElementById("idC");
155 | let c = document.getElementById("c");
156 | c.style.display = "none";
157 | 
158 | let idCpp = document.getElementById("idCpp");
159 | let cpp = document.getElementById("cpp");
160 | cpp.style.display = "none";
161 | 
162 | let idCsharp = document.getElementById("idCsharp");
163 | let csharp = document.getElementById("csharp");
164 | csharp.style.display = "none";
165 | 
166 | let idPython = document.getElementById("idPython");
167 | let python = document.getElementById("python");
168 | python.style.display = "none";
169 | 
170 | let idJs = document.getElementById("idJs");
171 | let js = document.getElementById("js");
172 | js.style.display = "none";
173 | 
174 | let idTs = document.getElementById("idTs");
175 | let ts = document.getElementById("ts");
176 | ts.style.display = "none";
177 | 
178 | let idSwift = document.getElementById("idSwift");
179 | let swift = document.getElementById("swift");
180 | swift.style.display = "none";
181 | 
182 | let idGo = document.getElementById("idGo");
183 | let go = document.getElementById("go");
184 | go.style.display = "none";
185 | 
186 | let idPhp = document.getElementById("idPhp");
187 | let php = document.getElementById("php");
188 | php.style.display = "none";
189 | 
190 | let idAndroid = document.getElementById("idAndroid");
191 | let android = document.getElementById("android");
192 | android.style.display = "none";
193 | 
194 | let idFlutter = document.getElementById("idFlutter");
195 | let flutter = document.getElementById("flutter");
196 | flutter.style.display = "none";
197 | 
198 | let idKotlin = document.getElementById("idKotlin");
199 | let kotlin = document.getElementById("kotlin");
200 | kotlin.style.display = "none";
201 | 
202 | let idReactnative = document.getElementById("idReactnative");
203 | let reactnative = document.getElementById("reactnative");
204 | reactnative.style.display = "none";
205 | 
206 | let idDart = document.getElementById("idDart");
207 | let dart = document.getElementById("dart");
208 | dart.style.display = "none";
209 | 
210 | let idHtml = document.getElementById("idHtml");
211 | let html = document.getElementById("html");
212 | html.style.display = "none";
213 | 
214 | let idCss = document.getElementById("idCss");
215 | let css = document.getElementById("css");
216 | css.style.display = "none";
217 | 
218 | let idBootstrap = document.getElementById("idBootstrap");
219 | let bootstrap = document.getElementById("bootstrap");
220 | bootstrap.style.display = "none";
221 | 
222 | let idReact = document.getElementById("idReact");
223 | let react = document.getElementById("react");
224 | react.style.display = "none";
225 | 
226 | let idTailwind = document.getElementById("idTailwind");
227 | let tailwind = document.getElementById("tailwind");
228 | tailwind.style.display = "none";
229 | 
230 | let idVuejs = document.getElementById("idVuejs");
231 | let vuejs = document.getElementById("vuejs");
232 | vuejs.style.display = "none";
233 | 
234 | let idAngular = document.getElementById("idAngular");
235 | let angular = document.getElementById("angular");
236 | angular.style.display = "none";
237 | 
238 | let idMaterialui = document.getElementById("idMaterialui");
239 | let materialui = document.getElementById("materialui");
240 | materialui.style.display = "none";
241 | 
242 | let idBulma = document.getElementById("idBulma");
243 | let bulma = document.getElementById("bulma");
244 | bulma.style.display = "none";
245 | 
246 | let idSvelte = document.getElementById("idSvelte");
247 | let svelte = document.getElementById("svelte");
248 | svelte.style.display = "none";
249 | 
250 | let idNodejs = document.getElementById("idNodejs");
251 | let nodejs = document.getElementById("nodejs");
252 | nodejs.style.display = "none";
253 | 
254 | let idExpress = document.getElementById("idExpress");
255 | let express = document.getElementById("express");
256 | express.style.display = "none";
257 | 
258 | let idNginx = document.getElementById("idNginx");
259 | let nginx = document.getElementById("nginx");
260 | nginx.style.display = "none";
261 | 
262 | let idDjango = document.getElementById("idDjango");
263 | let django = document.getElementById("django");
264 | django.style.display = "none";
265 | 
266 | let idFlask = document.getElementById("idFlask");
267 | let flask = document.getElementById("flask");
268 | flask.style.display = "none";
269 | 
270 | let idUnity = document.getElementById("idUnity");
271 | let unity = document.getElementById("unity");
272 | unity.style.display = "none";
273 | 
274 | let idUnreal = document.getElementById("idUnreal");
275 | let unreal = document.getElementById("unreal");
276 | unreal.style.display = "none";
277 | 
278 | let idGit = document.getElementById("idGit");
279 | let git = document.getElementById("git");
280 | git.style.display = "none";
281 | 
282 | let idArduino = document.getElementById("idArduino");
283 | let arduino = document.getElementById("arduino");
284 | arduino.style.display = "none";
285 | 
286 | let idLinux = document.getElementById("idLinux");
287 | let linux = document.getElementById("linux");
288 | linux.style.display = "none";
289 | 
290 | const skillArr = [idJava, idC, idCpp, idCsharp, idPython, idJs, idTs, idSwift, idGo, idPhp, idAndroid, idFlutter, idKotlin, idReactnative, idDart, idHtml, idCss, idBootstrap, idReact, idTailwind, idVuejs, idAngular, idMaterialui, idBulma, idSvelte, idNodejs, idExpress, idDjango, idFlask, idUnity, idUnreal, idGit, idArduino, idLinux]
291 | 
292 | const myskillArr = [java, c, cpp, csharp, python, js, ts, swift, go, php, android, flutter, kotlin, reactnative, dart, html, css, bootstrap, react, tailwind, vuejs, angular, materialui, bulma, svelte, nodejs, express, django, flask, unity, unreal, git, arduino, linux]
293 | 
294 | for (let i = 0; i < skillArr.length; i++) {
295 |     skillArr[i].addEventListener("click", () => {
296 |         showSkill(skillArr[i], myskillArr[i])
297 |     });
298 | }
299 | 
300 | function showSkill(idSkill, imgSkill) {
301 |     if (idSkill.checked)
302 |         imgSkill.style.display = "inline";
303 | 
304 |     else
305 |         imgSkill.style.display = "none";
306 | 
307 |         headingSkills.style.display = showHeadingSkill() ? "block" : "none"
308 | }
309 | 
310 | function showHeadingSkill() {
311 |     for (let i = 0; i < skillArr.length; i++) {
312 |         if (skillArr[i].checked)
313 |             return true;
314 |     }
315 | }
316 | 
317 | // SOCIALS
318 | 
319 | let headingSocials = document.getElementById("headingSocials");
320 | headingSocials.style.display = "none";
321 | 
322 | let myLinkedin = document.getElementById("myLinkedin");
323 | let idLinkedin = document.getElementById("idLinkedin");
324 | myLinkedin.style.display = "none";
325 | 
326 | idLinkedin.addEventListener("keyup", changeLinkedin);
327 | 
328 | function changeLinkedin() {
329 |     myLinkedin.href = "https://linkedin.com/in/" + idLinkedin.value;
330 | 
331 |     showSocials(idLinkedin, myLinkedin);
332 | }
333 | 
334 | let myTwitter = document.getElementById("myTwitter");
335 | let idTwitter = document.getElementById("idTwitter");
336 | myTwitter.style.display = "none";
337 | 
338 | idTwitter.addEventListener("keyup", changeTwitter);
339 | 
340 | function changeTwitter() {
341 |     myTwitter.href = "https://twitter.com/" + idTwitter.value;
342 | 
343 |     showSocials(idTwitter, myTwitter);
344 | }
345 | 
346 | let myDiscord = document.getElementById("myDiscord");
347 | let idDiscord = document.getElementById("idDiscord");
348 | myDiscord.style.display = "none";
349 | 
350 | idDiscord.addEventListener("keyup", changeDiscord);
351 | 
352 | function changeDiscord() {
353 |     myDiscord.href = "https://twitter.com/" + idDiscord.value;
354 |     showSocials(idDiscord, myDiscord);
355 | }
356 | 
357 | let myStackoverflow = document.getElementById("myStackoverflow");
358 | let idStackoverflow = document.getElementById("idStackoverflow");
359 | myStackoverflow.style.display = "none";
360 | 
361 | idStackoverflow.addEventListener("keyup", changeSOF);
362 | 
363 | function changeSOF() {
364 |     myStackoverflow.href = "https://twitter.com/" + idStackoverflow.value;
365 |     showSocials(idStackoverflow, myStackoverflow);
366 | }
367 | 
368 | let myFacebook = document.getElementById("myFacebook");
369 | let idFacebook = document.getElementById("idFacebook");
370 | myFacebook.style.display = "none";
371 | 
372 | idFacebook.addEventListener("keyup", changeFacebook);
373 | 
374 | function changeFacebook() {
375 |     myFacebook.href = "https://www.facebook.com/" + idFacebook.value;
376 |     showSocials(idFacebook, myFacebook);
377 | }
378 | 
379 | let myInstgram = document.getElementById("myInstgram");
380 | let idInstagram = document.getElementById("idInstagram");
381 | myInstgram.style.display = "none";
382 | 
383 | idInstagram.addEventListener("keyup", changeInstagram);
384 | 
385 | function changeInstagram() {
386 |     myInstgram.href = "https://www.instagram.com/" + idInstagram.value;
387 |     showSocials(idInstagram, myInstgram);
388 | }
389 | 
390 | let myYoutube = document.getElementById("myYoutube");
391 | let idYoutube = document.getElementById("idYoutube");
392 | myYoutube.style.display = "none";
393 | 
394 | idYoutube.addEventListener("keyup", changeYoutube);
395 | 
396 | function changeYoutube() {
397 |     myYoutube.href = "https://www.youtube.com/c/" + idYoutube.value;
398 |     showSocials(idYoutube, myYoutube);
399 | }
400 | 
401 | let myReddit = document.getElementById("myReddit");
402 | let idReddit = document.getElementById("idReddit");
403 | myReddit.style.display = "none";
404 | 
405 | idReddit.addEventListener("keyup", changeReddit);
406 | 
407 | function changeReddit() {
408 |     myReddit.href = "https://www.reddit.com/user/" + idReddit.value;
409 |     showSocials(idReddit, myReddit);
410 | }
411 | 
412 | let myKaggle = document.getElementById("myKaggle");
413 | let idKaggle = document.getElementById("idKaggle");
414 | myKaggle.style.display = "none";
415 | 
416 | idKaggle.addEventListener("keyup", changeKaggle);
417 | 
418 | function changeKaggle() {
419 |     myKaggle.href = "https://www.kaggle.com/" + idKaggle.value;
420 |     showSocials(idKaggle, myKaggle);
421 | }
422 | 
423 | let myMedium = document.getElementById("myMedium");
424 | let idMedium = document.getElementById("idMedium");
425 | myMedium.style.display = "none";
426 | 
427 | idMedium.addEventListener("keyup", changeMedium);
428 | 
429 | function changeMedium() {
430 |     myMedium.href = "https://medium.com/@" + idMedium.value;
431 |     showSocials(idMedium, myMedium);
432 | }
433 | 
434 | let myDribble = document.getElementById("myDribble");
435 | let idDribble = document.getElementById("idDribble");
436 | myDribble.style.display = "none";
437 | 
438 | idDribble.addEventListener("keyup", changeDribble);
439 | 
440 | function changeDribble() {
441 |     myDribble.href = "https://dribbble.com/" + idDribble.value;
442 |     showSocials(idDribble, myDribble);
443 | }
444 | 
445 | let myBehance = document.getElementById("myBehance");
446 | let idBehance = document.getElementById("idBehance");
447 | myBehance.style.display = "none";
448 | 
449 | idBehance.addEventListener("keyup", changeBehance);
450 | 
451 | function changeBehance() {
452 |     myBehance.href = "https://www.behance.net/" + idBehance.value;
453 |     showSocials(idBehance, myBehance);
454 | }
455 | 
456 | let myCodepen = document.getElementById("myCodepen");
457 | let idCodepen = document.getElementById("idCodepen");
458 | myCodepen.style.display = "none";
459 | 
460 | idCodepen.addEventListener("keyup", changeCodepen);
461 | 
462 | function changeCodepen() {
463 |     myCodepen.href = "https://codepen.io/" + idCodepen.value;
464 |     showSocials(idCodepen, myCodepen);
465 | }
466 | 
467 | let myGFG = document.getElementById("myGFG");
468 | let idGFG = document.getElementById("idGFG");
469 | myGFG.style.display = "none";
470 | 
471 | idGFG.addEventListener("keyup", changeGFG);
472 | 
473 | function changeGFG() {
474 |     myGFG.href = "https://auth.geeksforgeeks.org/user/" + idGFG.value + "/profile";
475 |     showSocials(idGFG, myGFG);
476 | }
477 | 
478 | let myHackerrank = document.getElementById("myHackerrank");
479 | let idHackerrank = document.getElementById("idHackerrank");
480 | myHackerrank.style.display = "none";
481 | 
482 | idHackerrank.addEventListener("keyup", changeHackerrank);
483 | 
484 | function changeHackerrank() {
485 |     myHackerrank.href = "https://www.hackerrank.com/" + idHackerrank.value;
486 |     showSocials(idHackerrank, myHackerrank);
487 | }
488 | 
489 | let myLeetcode = document.getElementById("myLeetcode");
490 | let idLeetcode = document.getElementById("idLeetcode");
491 | myLeetcode.style.display = "none";
492 | 
493 | idLeetcode.addEventListener("keyup", changeLeetcode);
494 | 
495 | function changeLeetcode() {
496 |     myLeetcode.href = "https://leetcode.com/" + idLeetcode.value;
497 |     showSocials(idLeetcode, myLeetcode);
498 | }
499 | 
500 | let myCodechef = document.getElementById("myCodechef");
501 | let idCodechef = document.getElementById("idCodechef");
502 | myCodechef.style.display = "none";
503 | 
504 | idCodechef.addEventListener("keyup", changeCodechef);
505 | 
506 | function changeCodechef() {
507 |     myCodechef.href = "https://discuss.codechef.com/u/" + idCodechef.value + "/summary";
508 |     showSocials(idCodechef, myCodechef);
509 | }
510 | 
511 | let myCodeforces = document.getElementById("myCodeforces");
512 | let idCodeforces = document.getElementById("idCodeforces");
513 | myCodeforces.style.display = "none";
514 | 
515 | idCodeforces.addEventListener("keyup", changeCodeforces);
516 | 
517 | function changeCodeforces() {
518 |     myCodeforces.href = "https://codeforces.com/profile/" + idCodeforces.value;
519 |     showSocials(idCodeforces, myCodeforces);
520 | }
521 | 
522 | 
523 | const socailArr = [idLinkedin, idTwitter, idDiscord, idStackoverflow, idFacebook, idInstagram, idYoutube, idReddit, idKaggle, idMedium, idDribble, idBehance, idCodepen, idGFG, idHackerrank, idLeetcode, idCodechef, idCodeforces]
524 | 
525 | const mysocailArr = [myLinkedin, myTwitter, myDiscord, myStackoverflow, myFacebook, myInstgram, myYoutube, myReddit, myKaggle, myMedium, myDribble, myBehance, myCodepen, myGFG, myHackerrank, myLeetcode, myCodechef, myCodeforces]
526 | 
527 | function showSocials(idSocial, imgSocial) {
528 |     if (idSocial.value == 0)
529 |         imgSocial.style.display = "none";
530 | 
531 |     if (idSocial.value != 0)
532 |         imgSocial.style.display = "inline";
533 | 
534 |         headingSocials.style.display = showHeadingSocial() ? "block" :  "none"
535 | }
536 | 
537 | function showHeadingSocial() {
538 |     for (let i = 0; i < socailArr.length; i++) {
539 |         if (socailArr[i].value.length > 0)
540 |             return true;
541 |     }
542 | }
543 | 
544 | //GITHUB SPECIAl
545 | 
546 | let userName = document.getElementById("userName");
547 | 
548 | let headingBadges = document.getElementById("headingBadges");
549 | headingBadges.style.display = "none";
550 | 
551 | let idArcCon = document.getElementById("idArcCon");
552 | let arcContribute = document.getElementById("arcContribute");
553 | arcContribute.style.display = "none";
554 | 
555 | let idDev = document.getElementById("idDev");
556 | let devBadge = document.getElementById("devBadge");
557 | devBadge.style.display = "none";
558 | 
559 | let idStar = document.getElementById("idStar");
560 | let starBadge = document.getElementById("starBadge");
561 | starBadge.style.display = "none";
562 | 
563 | let idPro = document.getElementById("idPro");
564 | let proBadge = document.getElementById("proBadge");
565 | proBadge.style.display = "none";
566 | 
567 | let idSponsor = document.getElementById("idSponsor");
568 | let sponsorBadge = document.getElementById("sponsorBadge");
569 | sponsorBadge.style.display = "none";
570 | 
571 | let headingStatus = document.getElementById("headingStatus");
572 | headingStatus.style.display = "none";
573 | 
574 | let idProView = document.getElementById("idProView");
575 | let profileView = document.getElementById("profileView");
576 | profileView.parentElement.style.display = "none";
577 | 
578 | let idSteak = document.getElementById("idSteak");
579 | let streakStatus = document.getElementById("streakStatus");
580 | streakStatus.parentElement.style.display = "none";
581 | 
582 | let idMetrics = document.getElementById("idMetrics");
583 | let matrcis = document.getElementById("matrcis");
584 | matrcis.parentElement.style.display = "none";
585 | 
586 | let idAtivity = document.getElementById("idAtivity");
587 | let activityGraph = document.getElementById("activityGraph");
588 | activityGraph.parentElement.style.display = "none";
589 | 
590 | let idStatustics = document.getElementById("idStatustics");
591 | let statistics = document.getElementById("statistics");
592 | statistics.parentElement.style.display = "none";
593 | 
594 | let idMostUsedLang = document.getElementById("idMostUsedLang");
595 | let mostUsedLang = document.getElementById("mostUsedLang");
596 | mostUsedLang.parentElement.style.display = "none";
597 | 
598 | let headingTrophy = document.getElementById("headingTrophy");
599 | headingTrophy.style.display = "none";
600 | 
601 | let idTrophies = document.getElementById("idTrophies");
602 | let trophies = document.getElementById("trophies");
603 | trophies.parentElement.style.display = "none";
604 | 
605 | const githubArr = [idArcCon, idStar, idPro, idDev, idSponsor, idAtivity, idStatustics, idMostUsedLang, idMetrics, idSteak, idProView, idTrophies]
606 | 
607 | const mygithubArr = [arcContribute, starBadge, proBadge, devBadge, sponsorBadge, activityGraph, statistics, mostUsedLang, matrcis, streakStatus, profileView, trophies]
608 | 
609 | userName.addEventListener("focusin", removeUsername);
610 | 
611 | function removeUsername() {
612 |     profileView.src = "https://visitcount.itsvg.in/api?id=";
613 |     streakStatus.src = "https://github-readme-streak-stats.herokuapp.com/?user=";
614 |     matrcis.src = "https://metrics.lecoq.io/";
615 |     activityGraph.src = "https://activity-graph.herokuapp.com/graph?username=";
616 |     statistics.src = "https://github-readme-stats.vercel.app/api?username=";
617 |     mostUsedLang.src = "https://github-readme-stats.vercel.app/api/top-langs/?username=";
618 |     trophies.src = "https://github-profile-trophy.vercel.app/?username=";
619 | }
620 | 
621 | disableGithubAddOns();
622 | 
623 | userName.addEventListener("focusout", changeLinkGithubAddOns);
624 | 
625 | function changeLinkGithubAddOns() {
626 |     profileView.src = profileView.src + userName.value + "&label=Profile%20Views&color=12&icon=5&pretty=true";
627 |     streakStatus.src = streakStatus.src + userName.value;
628 |     matrcis.src = matrcis.src + userName.value;
629 |     activityGraph.src = activityGraph.src + userName.value;
630 |     statistics.src = statistics.src + userName.value + "&show_icons=true";
631 |     mostUsedLang.src = mostUsedLang.src + userName.value + "&layout=compact";
632 |     trophies.src = trophies.src + userName.value;
633 | 
634 |     if (userName.value == 0) {
635 |         for (let i = 0; i < 5; i++) {
636 |             mygithubArr[i].style.display = "none";
637 |         }
638 |         for (let i = 5; i < githubArr.length; i++) {
639 |             mygithubArr[i].parentElement.style.display = "none";
640 |         }
641 |     }
642 | 
643 |     disableGithubAddOns();
644 | }
645 | 
646 | function disableGithubAddOns() {
647 |     if (userName.value == 0) {
648 |         for (let i = 0; i < githubArr.length; i++) {
649 |             githubArr[i].checked = false;
650 |             githubArr[i].disabled = true;
651 |         }
652 |     }
653 | 
654 |     else {
655 |         for (let i = 0; i < githubArr.length; i++) {
656 |             githubArr[i].disabled = false;
657 |         }
658 |     }
659 | }
660 | 
661 | for (let i = 0; i < 5; i++) {
662 |     githubArr[i].addEventListener("click", () => {
663 |         showGithubBadge(githubArr[i], mygithubArr[i])
664 |     });
665 | }
666 | 
667 | function showGithubBadge(idAddOns, imgAddOns) {
668 |     if (userName.value != 0) {
669 |         if (idAddOns.checked)
670 |             imgAddOns.style.display = "inline";
671 | 
672 |         else
673 |             imgAddOns.style.display = "none";
674 | 
675 |         headingBadges.style.display = showHeadingBadge() ? "block" :  "none"
676 |     }
677 | }
678 | 
679 | function showHeadingBadge() {
680 |     for (let i = 0; i < 5; i++) {
681 |         if (githubArr[i].checked)
682 |             return true;
683 |     }
684 | }
685 | 
686 | for (let i = 5; i < githubArr.length - 1; i++) {
687 |     githubArr[i].addEventListener("click", () => {
688 |         showGithubAddOns(githubArr[i], mygithubArr[i])
689 |     });
690 | }
691 | 
692 | function showGithubAddOns(idAddOns, imgAddOns) {
693 |     if (userName.value != 0) {
694 |         if (idAddOns.checked)
695 |             imgAddOns.parentElement.style.display = "inline";
696 | 
697 |         else
698 |             imgAddOns.parentElement.style.display = "none";
699 | 
700 |         headingStatus.style.display = showHeadingAddons() ? "block" :  "none"
701 |     }
702 | }
703 | 
704 | function showHeadingAddons() {
705 |     for (let i = 5; i < githubArr.length - 1; i++) {
706 |         if (githubArr[i].checked)
707 |             return true;
708 |     }
709 | }
710 | 
711 | idTrophies.addEventListener("click", () => {
712 |     if (userName.value != 0) {
713 |         if (idTrophies.checked) {
714 |             headingTrophy.style.display = "block";
715 |             trophies.parentElement.style.display = "inline";
716 |         }
717 | 
718 |         else {
719 |             headingTrophy.style.display = "none";
720 |             trophies.parentElement.style.display = "none";
721 |         }
722 |     }
723 | });
724 | 
725 | let btnGeneratReadmeFile = document.getElementById("generatReadmeFile");
726 | btnGeneratReadmeFile.addEventListener("click", generatReadmeFile);
727 | 
728 | let codeArea = document.getElementById("codeArea");
729 | 
730 | function generatReadmeFile() {
731 | 
732 |     codeArea.innerText = "";
733 |     if (isName)
734 |         codeArea.innerText = "# " + myName.parentElement.innerText;
735 | 
736 |     if (idImg.value)
737 |         codeArea.append("\n\n<img width=\"100%\" src=\"" + myImg.src + "\" alt=\"my banner\">")
738 | 
739 |     if ((idAbout.value).length > 0)
740 |         codeArea.append("\n\n" + myAbout.innerText);
741 | 
742 |     codeArea.append("\n\n## 💫 Liitle Bit More About Me");
743 |     for (let i = 0; i < 10; i++) {
744 |         if ((listArr[i].value).length > 0) {
745 |             if (i == 6) {
746 |                 codeArea.append("\n<p>I regularly write articles on <a href=\"" + idList71.value + "\">" + myListArr[i].innerText + "</a></p>");
747 |             }
748 |             else if (i == 7) {
749 |                 codeArea.append("\n<p>All of my projects are available at <a href=\"" + idList81.value + "\">" + myListArr[i].innerText + "</a></p>");
750 |             }
751 |             else if (i == 8) {
752 |                 codeArea.append("\n<p>Know about my experiences <a href=\"" + idList9.value + "\">here</a></p>");
753 |             }
754 |             else
755 |                 codeArea.append("\n<p>" + myListArr[i].parentElement.innerText + "</p>");
756 |         }
757 |     }
758 | 
759 |     codeArea.append("\n\n## 💻 Skills");
760 | 
761 |     codeArea.append("\n<p>");
762 |     for (let j = 0; j < skillArr.length; j++) {
763 |         if (skillArr[j].checked)
764 |             codeArea.append("\n<img src=\"" + myskillArr[j].src + "\" style=\"margin-bottom: 4px;\" height=\"30px\">");
765 |     }
766 |     codeArea.append("\n</p>");
767 | 
768 |     codeArea.append("\n\n## 👥 Connect With Me");
769 |     codeArea.append("\n<p>");
770 |     for (let i = 0; i < 18; i++) {
771 |         if ((socailArr[i].value).length > 0)
772 |             codeArea.append("\n<a href=\"" + mysocailArr[i] + "\"><img src=\"" + mysocailArr[i].lastElementChild.src + "\" style=\"margin-bottom: 4px;\" height=\"30px\"></a>");
773 |     }
774 |     codeArea.append("\n</p>");
775 | 
776 |     codeArea.append("\n\n## 🌟 Github Badges");
777 |     codeArea.append("\n<p>");
778 |     for (let i = 0; i < 5; i++) {
779 |         if (githubArr[i].checked) 
780 |             codeArea.append("\n<img src=\"" + mygithubArr[i].src + "\" height=\"24px\">");
781 |     }
782 |     codeArea.append("\n</p>");
783 | 
784 |     codeArea.append("\n\n## 🏆 GitHub Trophies");
785 |     codeArea.append("\n\n<p><img src=\"" + trophies.src + "\">\n</p>");
786 | 
787 |     codeArea.append("\n\n## 📊 Github Status");
788 |     for (let i = 5; i < githubArr.length - 1; i++) {
789 |         if (githubArr[i].checked)
790 |             codeArea.append("\n\n" + "<p><img src=\"" + mygithubArr[i].src + "\"><p>");
791 |     }
792 | }
793 | 
794 | let copyReadmeFile = document.getElementById("copyReadmeFile")
795 | 
796 | function copyToClipBoard(text) {
797 |     navigator.clipboard.writeText(text)
798 | }
799 | 
800 | copyReadmeFile.addEventListener('click', () => {
801 |     copyToClipBoard(codeArea.value);
802 | });


--------------------------------------------------------------------------------
/Style/style.css:
--------------------------------------------------------------------------------
  1 | /* left and right for continer in content box */
  2 | body{
  3 |     scroll-behavior: smooth;
  4 | }
  5 | 
  6 | .right div {
  7 |     width: 235px;
  8 | }
  9 | 
 10 | .genretedCode,
 11 | .codeSecondBox {
 12 |     width: 500px;
 13 | }
 14 | 
 15 | .editor {
 16 |     width: 500px;
 17 | }
 18 | 
 19 | .socialBoxes input {
 20 |     width: 225px;
 21 | }
 22 | 
 23 | .priviewBox {
 24 |     width: 575px;
 25 |     border: 1px rgba(0, 0, 0, 0.5) solid;
 26 |     border-radius: 4px;
 27 | }
 28 | 
 29 | textarea {
 30 |     resize: none;
 31 | }
 32 | 
 33 | /* .skillsImg img {
 34 |     margin: 2px 0;
 35 | } */
 36 | 
 37 | i:hover {
 38 |     font-weight: 600;
 39 | }
 40 | 
 41 | input, label img {
 42 |     cursor: pointer;
 43 | }
 44 | 
 45 | label img:hover {
 46 |     box-shadow: 0px 0px 20px gray;
 47 | }
 48 | 
 49 | @media only screen and (max-width: 1000px) {
 50 |     .mainBox,
 51 |     .codeBox {
 52 |         flex-direction: column;
 53 |     }
 54 | 
 55 |     .editor,
 56 |     .priviewBox,
 57 |     .codeBox,
 58 |     .genretedCode {
 59 |         width: 100%;
 60 |     }
 61 | 
 62 |     .codeSecondBox {
 63 |        display: flex;
 64 |        flex-direction: column;
 65 |        align-items: center;
 66 |     }
 67 | }
 68 | 
 69 | @media only screen and (max-width: 540px) {
 70 |     .form1>div {
 71 |         flex-direction: column;
 72 |     }
 73 | 
 74 |     .form2 {
 75 |         flex-direction: column;
 76 |     }
 77 | 
 78 |     .right div {
 79 |         width: 235px;
 80 |     }
 81 | 
 82 |     .socialBoxes div{
 83 |         flex-direction: column;
 84 |     }
 85 | 
 86 |     .socialBoxes div input:first-child{
 87 |         margin-bottom: 1rem;
 88 |     }
 89 | 
 90 |     .left,
 91 |     .right,
 92 |     .genretedCode,
 93 |     .codeSecondBox {
 94 |         width: auto;
 95 |     }
 96 | 
 97 |     .socialBoxes input {
 98 |         width: 100%;
 99 |     }
100 | 
101 |     .priviewBox {
102 |         margin-top: 24px;
103 |         width: auto;
104 |     }
105 | 
106 |     #trophies, #mostUsedLang, #statistics, #activityGraph, #matrcis, #streakStatus, #profileView {
107 |         width: 100%;
108 |     }
109 | }
110 | 
111 | #spinnerHead {
112 |     height: 100vh;
113 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <link rel="stylesheet" href="Style/style.css">
  9 |     <link rel="icon" type="image/png" href="Assets/favicon.png" />
 10 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
 11 |         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 12 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
 13 |         integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
 14 |         crossorigin="anonymous"></script>
 15 | 
 16 |     <title>Github Profile Page Creator</title>
 17 | </head>
 18 | 
 19 | <body>
 20 | 
 21 |     <div id="loader">
 22 |         <div class="d-grid" id="spinnerHead">
 23 |             <div class="spinner-border m-auto" role="status">
 24 |                 <span class="visually-hidden">Loading...</span>
 25 |             </div>
 26 |         </div>
 27 |     </div>
 28 |     <div id="mainBody">
 29 |         <div class="my-3">
 30 |             <h1 class="container">GitHub Profile Page Creator</h1>
 31 |         </div>
 32 |         <hr>
 33 |         <div class="mainBox container d-flex justify-content-center">
 34 |             <div class="editor mx-3">
 35 |                 <nav class="mb-4">
 36 |                     <div class="nav nav-pills justify-content-between" id="pills-tab" role="tablist">
 37 |                         <button class="nav-link active" id="nav-home-tab" data-bs-toggle="pill" data-bs-target="#header"
 38 |                             type="button" role="tab" aria-controls="nav-home" aria-selected="true">Header</button>
 39 |                         <button class="nav-link" id="nav-profile-tab" data-bs-toggle="pill" data-bs-target="#skills"
 40 |                             type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Langueages &
 41 |                             Tools</button>
 42 |                         <button class="nav-link" id="nav-contact-tab" data-bs-toggle="pill" data-bs-target="#social"
 43 |                             type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Socials</button>
 44 |                         <button class="nav-link" id="nav-contact-tab" data-bs-toggle="pill" data-bs-target="#github"
 45 |                             type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Github
 46 |                             Specials</button>
 47 |                     </div>
 48 |                 </nav>
 49 |                 <div class="tab-content" id="nav-tab Content">
 50 |                     <div id="header" class="tab-pane fade show active">
 51 |                         <h3>Heading</h3>
 52 |                         <input name="" id="idName" class="form-control mb-3" placeholder="Your name"></input>
 53 |                         <h3>Banner <a href="https://leviarista.github.io/github-profile-header-generator/" target="_blank"><img src="Assets/queMark.webp" alt="que mark" height="20px"></a> </h3>
 54 |                         <input name="" id="idImg" class="form-control mb-3" placeholder="Banner Link"></input>
 55 |                         <h3>About Me</h3>
 56 |                         <textarea name="" id="idAbout" rows="2" class="form-control mb-3"
 57 |                             placeholder="Write about yourself"></textarea>
 58 |                         <h3>Work</h3>
 59 |                         <form class="mb-3 form1">
 60 |                             <div class="d-flex justify-content-between">
 61 |                                 <div class="mb-3 socialBoxes">
 62 |                                     <label class="form-label">I'm currently working on </label>
 63 |                                     <input id="idList1" type="text" class="form-control"
 64 |                                         placeholder="Project Name">
 65 |                                 </div>
 66 |                                 <div class="mb-3 socialBoxes">
 67 |                                     <label class="form-label">I want to collaborate on </label>
 68 |                                     <input id="idList2" type="text" class="form-control" placeholder="Project Name">
 69 |                                 </div>
 70 |                             </div>
 71 |                             <div class="d-flex justify-content-between">
 72 |                                 <div class="mb-3 socialBoxes">
 73 |                                     <label class="form-label">I'm looking for help with </label>
 74 |                                     <input id="idList3" type="text" class="form-control" placeholder="Project Name">
 75 |                                 </div>
 76 |                                 <div class="mb-3 socialBoxes">
 77 |                                     <label class="form-label">I'm currently learning </label>
 78 |                                     <input id="idList4" type="text" class="form-control" placeholder="web3, react, pyhton">
 79 |                                 </div>
 80 |                             </div>
 81 |                             <div class="d-flex justify-content-between">
 82 |                                 <div class="mb-3 socialBoxes">
 83 |                                     <label class="form-label">Ask me about </label>
 84 |                                     <input id="idList5" type="text" class="form-control"
 85 |                                         placeholder="Front-End Development">
 86 |                                 </div>
 87 |                                 <div class="mb-3 socialBoxes">
 88 |                                     <label class="form-label">How to reach me</label>
 89 |                                     <input id="idList6" type="text" class="form-control"
 90 |                                         placeholder="example@gmail.com">
 91 |                                 </div>
 92 |                             </div>
 93 |                             <div>
 94 |                                 <div class="mb-3 socialBoxes">
 95 |                                     <label class="form-label">All of my projects are available
 96 |                                         at </label>
 97 |                                     <div class="d-flex justify-content-between">
 98 |                                         <input id="idList7" type="text" class="form-control"
 99 |                                             placeholder="Portfolio Name">
100 |                                         <input id="idList71" type="text" class="form-control"
101 |                                             placeholder="Portfolio Link">
102 |                                     </div>
103 |                                 </div>
104 |                             </div>
105 |                             <div>
106 |                                 <div class="mb-3 socialBoxes">
107 |                                     <label class="form-label">I regularly write articles on
108 |                                         at </label>
109 |                                     <div class="d-flex justify-content-between">
110 |                                         <input id="idList8" type="text" class="form-control" placeholder="Blog Name">
111 |                                         <input id="idList81" type="text" class="form-control" placeholder="Blog Link">
112 |                                     </div>
113 |                                 </div>
114 |                             </div>
115 |                             <div class="d-flex justify-content-between">
116 |                                 <div class="mb-3 socialBoxes">
117 |                                     <label class="form-label">Know about my experiences </label>
118 |                                     <div>
119 |                                         <input id="idList9" type="text" class="form-control" placeholder="Resume Link">
120 |                                     </div>
121 |                                 </div>
122 |                                 <div class="mb-3 socialBoxes">
123 |                                     <label class="form-label">Fun Fact </label>
124 |                                     <input id="idList10" type="text" class="form-control" placeholder="I love memes">
125 |                                 </div>
126 |                             </div>
127 |                         </form>
128 |                     </div>
129 |                     <div id="skills" class="tab-pane fade">
130 |                         <h3 class="mb-3">Programming Langueages</h3>
131 |                         <div class="mb-4">
132 |                                     <input hidden id="idJava" class="form-check-input" type="checkbox"> 
133 |                                     <label for="idJava"><img
134 |                                         class="mb-1" src="https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=java&logoColor=white"
135 |                                         height="30px" alt=""></label>
136 |                                     <input hidden id="idC" class="form-check-input" type="checkbox"> 
137 |                                     <label for="idC"><img class="mb-1"
138 |                                         src="https://img.shields.io/badge/c-%2300599C.svg?style=for-the-badge&logo=c&logoColor=white"
139 |                                         height="30px" alt=""></label>
140 |                                     <input hidden id="idCpp" class="form-check-input" type="checkbox"> 
141 |                                     <label for="idCpp"><img class="mb-1"
142 |                                         src="https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white"
143 |                                         height="30px" alt=""></label>
144 |                                     <input hidden id="idCsharp" class="form-check-input" type="checkbox"> 
145 |                                     <label for="idCsharp"><img
146 |                                         class="mb-1"
147 |                                         src="https://img.shields.io/badge/c%23-%23239120.svg?style=for-the-badge&logo=c-sharp&logoColor=white"
148 |                                         height="30px" alt=""></label>
149 |                                     <input hidden id="idPython" class="form-check-input" type="checkbox"> 
150 |                                     <label for="idPython"><img
151 |                                         class="mb-1" src="https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54"
152 |                                         height="30px" alt=""></label>
153 |                                     <input hidden id="idJs" class="form-check-input" type="checkbox"> 
154 |                                     <label for="idJs"><img class="mb-1"
155 |                                         src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E"
156 |                                         height="30px" alt=""></label>
157 |                                     <input hidden id="idTs" class="form-check-input" type="checkbox"> 
158 |                                     <label for="idTs"><img class="mb-1"
159 |                                         src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white"
160 |                                         height="30px" alt=""></label>
161 |                                     <input hidden id="idSwift" class="form-check-input" type="checkbox">
162 |                                     <label for="idSwift"> <img
163 |                                         class="mb-1" src="https://img.shields.io/badge/swift-F54A2A?style=for-the-badge&logo=swift&logoColor=white"
164 |                                         height="30px" alt=""></label>
165 |                                     <input hidden id="idGo" class="form-check-input" type="checkbox"> 
166 |                                     <label for="idGo"><img class="mb-1"
167 |                                         src="https://img.shields.io/badge/go-%2300ADD8.svg?style=for-the-badge&logo=go&logoColor=white"
168 |                                         height="30px" alt=""></label>
169 |                                     <input hidden id="idPhp" class="form-check-input" type="checkbox"> 
170 |                                     <label for="idPhp"><img class="mb-1"
171 |                                         src="https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge&logo=php&logoColor=white" height="30px" alt=""></label>
172 |                         </div>
173 |                         <h3 class="mb-3">Mobile App Development</h3>
174 |                         <div class="mb-4">
175 |                                     <input hidden id="idAndroid" class="form-check-input" type="checkbox"> 
176 |                                     <label for="idAndroid"><img
177 |                                         class="mb-1" src="https://img.shields.io/badge/Android-3DDC84?style=for-the-badge&logo=android&logoColor=white"
178 |                                         height="30px" alt=""></label>
179 |                                     <input hidden id="idFlutter" class="form-check-input" type="checkbox">
180 |                                     <label for="idFlutter"> <img
181 |                                         class="mb-1"
182 |                                         src="https://img.shields.io/badge/Flutter-%2302569B.svg?style=for-the-badge&logo=Flutter&logoColor=white"
183 |                                         height="30px" alt=""></label>
184 |                                     <input hidden id="idKotlin" class="form-check-input" type="checkbox">
185 |                                     <label for="idKotlin"> <img
186 |                                         class="mb-1" 
187 |                                         src="https://img.shields.io/badge/kotlin-%230095D5.svg?style=for-the-badge&logo=kotlin&logoColor=white"
188 |                                         height="30px" alt=""></label>
189 |                                     <input hidden id="idReactnative" class="form-check-input" type="checkbox">
190 |                                     <label for="idReactnative"> <img
191 |                                         class="mb-1"
192 |                                         src="https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB"
193 |                                         height="30px" alt=""></label>
194 |                                     <input hidden id="idDart" class="form-check-input" type="checkbox"> 
195 |                                     <label for="idDart"><img
196 |                                         class="mb-1"
197 |                                         src="https://img.shields.io/badge/dart-%230175C2.svg?style=for-the-badge&logo=dart&logoColor=white"
198 |                                         height="30px" alt=""></label>
199 |                         </div>
200 |                         <h3 class="mb-3">Frontend Development</h3>
201 |                         <div class="mb-4">
202 |                                     <input hidden id="idHtml" class="form-check-input" type="checkbox"> 
203 |                                     <label for="idHtml"><img
204 |                                         class="mb-1"
205 |                                         src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white"
206 |                                         height="30px" alt=""></label>
207 |                                     <input hidden id="idCss" class="form-check-input" type="checkbox"> 
208 |                                     <label for="idCss"><img 
209 |                                     class="mb-1"
210 |                                         src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white"
211 |                                         height="30px" alt=""></label>
212 |                                     <input hidden id="idBootstrap" class="form-check-input" type="checkbox"> 
213 |                                     <label for="idBootstrap"><img
214 |                                         class="mb-1"
215 |                                         src="https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&logo=bootstrap&logoColor=white"
216 |                                         height="30px" alt=""></label>
217 |                                     <input hidden id="idReact" class="form-check-input" type="checkbox"> 
218 |                                     <label for="idReact"><img
219 |                                         class="mb-1"
220 |                                         src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB"
221 |                                         height="30px" alt=""></label>
222 |                                     <input hidden id="idTailwind" class="form-check-input" type="checkbox"> 
223 |                                     <label for="idTailwind"><img
224 |                                         class="mb-1"
225 |                                         src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white"
226 |                                         height="30px" alt=""></label>
227 |                                     <input hidden id="idVuejs" class="form-check-input" type="checkbox"> 
228 |                                     <label for="idVuejs"><img
229 |                                         class="mb-1"
230 |                                         src="https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D"
231 |                                         height="30px" alt=""></label>
232 |                                     <input hidden id="idAngular" class="form-check-input" type="checkbox">
233 |                                     <label for="idAngular"> <img
234 |                                         class="mb-1"
235 |                                         src="https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge&logo=angular&logoColor=white"
236 |                                         height="30px" alt=""></label>
237 |                                     <input hidden id="idMaterialui" class="form-check-input" type="checkbox">
238 |                                     <label for="idMaterialui"> <img
239 |                                         class="mb-1"
240 |                                         src="https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white"
241 |                                         height="30px" alt=""></label>
242 |                                     <input hidden id="idBulma" class="form-check-input" type="checkbox">
243 |                                     <label for="idBulma"> <img
244 |                                         class="mb-1"
245 |                                         src="https://img.shields.io/badge/bulma-cyan?style=for-the-badge&logo=bulma&logoColor=white"
246 |                                         height="30px" alt=""></label>
247 |                                     <input hidden id="idSvelte" class="form-check-input" type="checkbox">
248 |                                     <label for="idSvelte"> <img
249 |                                         class="mb-1"
250 |                                         src="https://img.shields.io/badge/svelte-%23f1413d.svg?style=for-the-badge&logo=svelte&logoColor=white"
251 |                                         height="30px" alt=""></label>
252 |                         </div>
253 |                         <h3 class="mb-3">Backend Development</h3>
254 |                         <div class="mb-4">
255 |                             <input hidden id="idNodejs" class="form-check-input" type="checkbox">
256 |                             <label for="idNodejs"> <img class="mb-1"
257 |                                     src="https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white"
258 |                                     height="30px" alt=""></label>
259 |                             <input hidden id="idExpress" class="form-check-input" type="checkbox">
260 |                             <label for="idExpress"> <img class="mb-1"
261 |                                     src="https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB"
262 |                                     height="30px" alt=""></label>
263 |                             <input hidden id="idNginx" class="form-check-input" type="checkbox">
264 |                             <label for="idNginx"> <img class="mb-1"
265 |                                     src="https://img.shields.io/badge/nginx-%23009639.svg?style=for-the-badge&logo=nginx&logoColor=white"
266 |                                     height="30px" alt=""></label>
267 |                             <input hidden id="idDjango" class="form-check-input" type="checkbox">
268 |                             <label for="idDjango"> <img class="mb-1"
269 |                                     src="https://img.shields.io/badge/django-%23092E20.svg?style=for-the-badge&logo=django&logoColor=white"
270 |                                     height="30px" alt=""></label>
271 |                             <input hidden id="idFlask" class="form-check-input" type="checkbox">
272 |                             <label for="idFlask"> <img class="mb-1"
273 |                                     src="https://img.shields.io/badge/flask-%23000.svg?style=for-the-badge&logo=flask&logoColor=white"
274 |                                     height="30px" alt=""></label>
275 |                         </div>
276 |                         <h3 class="mb-3">Other</h3>
277 |                         <input hidden id="idUnity" class="form-check-input" type="checkbox">
278 |                         <label for="idUnity"><img class="mb-1"
279 |                                 src="https://img.shields.io/badge/unity-%23000000.svg?style=for-the-badge&logo=unity&logoColor=white"
280 |                                 height="30px" alt=""></label>
281 |                         <input hidden id="idUnreal" class="form-check-input" type="checkbox">
282 |                         <label for="idUnreal"><img class="mb-1"
283 |                                 src="https://img.shields.io/badge/unreal-%23313131.svg?style=for-the-badge&logo=unrealengine&logoColor=white"
284 |                                 height="30px" alt=""></label>
285 |                         <input hidden id="idGit" class="form-check-input" type="checkbox">
286 |                         <label for="idGit"><img class="mb-1"
287 |                                 src="https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white"
288 |                                 height="30px" alt=""></label>
289 |                         <input hidden id="idArduino" class="form-check-input" type="checkbox">
290 |                         <label for="idArduino"><img class="mb-1"
291 |                                 src="https://img.shields.io/badge/-Arduino-00979D?style=for-the-badge&logo=Arduino&logoColor=white"
292 |                                 height="30px" alt=""></label>
293 |                         <input hidden id="idLinux" class="form-check-input" type="checkbox">
294 |                         <label for="idLinux"><img class="mb-1"
295 |                                 src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black"
296 |                                 height="30px" alt=""></label>
297 |                     </div>
298 |                     <div id="social" class="tab-pane fade">
299 |                         <form class="form1">
300 |                             <div class="d-flex justify-content-between">
301 |                                 <div class="mb-3 socialBoxes">
302 |                                     <label class="form-label">LinkedIn</label>
303 |                                     <input type="text" class="form-control" id="idLinkedin"
304 |                                         placeholder="Enter your username">
305 |                                 </div>
306 |                                 <div class="mb-3 socialBoxes">
307 |                                     <label class="form-label">Twitter</label>
308 |                                     <input type="text" class="form-control" id="idTwitter"
309 |                                         placeholder="Enter your username">
310 |                                 </div>
311 |                             </div>
312 |                             <div class="d-flex justify-content-between">
313 |                                 <div class="mb-3 socialBoxes">
314 |                                     <label class="form-label">Discord</label>
315 |                                     <input type="text" class="form-control" id="idDiscord"
316 |                                         placeholder="Enter your username">
317 |                                 </div>
318 |                                 <div class="mb-3 socialBoxes">
319 |                                     <label class="form-label">Stackoverflow</label>
320 |                                     <input type="text" class="form-control" id="idStackoverflow"
321 |                                         placeholder="Enter your username">
322 |                                 </div>
323 |                             </div>
324 |                             <div class="d-flex justify-content-between">
325 |                                 <div class="mb-3 socialBoxes">
326 |                                     <label class="form-label">Facebook</label>
327 |                                     <input type="text" class="form-control" id="idFacebook"
328 |                                         placeholder="Enter your username">
329 |                                 </div>
330 |                                 <div class="mb-3 socialBoxes">
331 |                                     <label class="form-label">Instagram</label>
332 |                                     <input type="text" class="form-control" id="idInstagram"
333 |                                         placeholder="Enter your username">
334 |                                 </div>
335 |                             </div>
336 |                             <div class="d-flex justify-content-between">
337 |                                 <div class="mb-3 socialBoxes">
338 |                                     <label class="form-label">Youtube</label>
339 |                                     <input type="text" class="form-control" id="idYoutube"
340 |                                         placeholder="Enter your username">
341 |                                 </div>
342 |                                 <div class="mb-3 socialBoxes">
343 |                                     <label class="form-label">Reddit</label>
344 |                                     <input type="text" class="form-control" id="idReddit"
345 |                                         placeholder="Enter your username">
346 |                                 </div>
347 |                             </div>
348 |                             <div class="d-flex justify-content-between">
349 |                                 <div class="mb-3 socialBoxes">
350 |                                     <label class="form-label">Kaggle</label>
351 |                                     <input type="text" class="form-control" id="idKaggle"
352 |                                         placeholder="Enter your username">
353 |                                 </div>
354 |                                 <div class="mb-3 socialBoxes">
355 |                                     <label class="form-label">Medium</label>
356 |                                     <input type="text" class="form-control" id="idMedium"
357 |                                         placeholder="Enter your username">
358 |                                 </div>
359 |                             </div>
360 |                             <div class="d-flex justify-content-between">
361 |                                 <div class="mb-3 socialBoxes">
362 |                                     <label class="form-label">Dribble</label>
363 |                                     <input type="text" class="form-control" id="idDribble"
364 |                                         placeholder="Enter your username">
365 |                                 </div>
366 |                                 <div class="mb-3 socialBoxes">
367 |                                     <label class="form-label">Behnace</label>
368 |                                     <input type="text" class="form-control" id="idBehance"
369 |                                         placeholder="Enter your username">
370 |                                 </div>
371 |                             </div>
372 |                             <div class="d-flex justify-content-between">
373 |                                 <div class="mb-3 socialBoxes">
374 |                                     <label class="form-label">Codepen</label>
375 |                                     <input type="text" class="form-control" id="idCodepen"
376 |                                         placeholder="Enter your username">
377 |                                 </div>
378 |                                 <div class="mb-3 socialBoxes">
379 |                                     <label class="form-label">Geeks For Geeks</label>
380 |                                     <input type="text" class="form-control" id="idGFG"
381 |                                         placeholder="Enter your username">
382 |                                 </div>
383 |                             </div>
384 |                             <div class="d-flex justify-content-between">
385 |                                 <div class="mb-3 socialBoxes">
386 |                                     <label class="form-label">Hackerrank</label>
387 |                                     <input type="text" class="form-control" id="idHackerrank"
388 |                                         placeholder="Enter your username">
389 |                                 </div>
390 |                                 <div class="mb-3 socialBoxes">
391 |                                     <label class="form-label">Leetcode</label>
392 |                                     <input type="text" class="form-control" id="idLeetcode"
393 |                                         placeholder="Enter your username">
394 |                                 </div>
395 |                             </div>
396 |                             <div class="d-flex justify-content-between">
397 |                                 <div class="mb-3 socialBoxes">
398 |                                     <label class="form-label">Codechef</label>
399 |                                     <input type="text" class="form-control" id="idCodechef"
400 |                                         placeholder="Enter your username">
401 |                                 </div>
402 |                                 <div class="mb-3 socialBoxes">
403 |                                     <label class="form-label">Codeforces</label>
404 |                                     <input type="text" class="form-control" id="idCodeforces"
405 |                                         placeholder="Enter your username">
406 |                                 </div>
407 |                             </div>
408 |                         </form>
409 |                     </div>
410 |                     <div id="github" class="tab-pane fade">
411 |                         <form>
412 |                             <div class="mb-3">
413 |                                 <label for="exampleInputEmail1" class="form-label">Github Username</label>
414 |                                 <input type="text" class="form-control" id="userName" placeholder="Enter your username"
415 |                                     aria-describedby="emailHelp">
416 |                                 <div id="emailHelp" class="form-text">GitHub username required</div>
417 |                             </div>
418 |                         </form>
419 |                         <h3>Badges</h3>
420 |                         <div class="form2 d-flex justify-content-between mb-3">
421 |                             <div class="left">
422 |                                 <div>
423 |                                     <input class="form-check-input mb-2" type="checkbox" value="" id="idArcCon"> Arctic
424 |                                     Contributor
425 |                                 </div>
426 |                                 <div>
427 |                                     <input class="form-check-input mb-2" type="checkbox" value="" id="idStar"> Stars
428 |                                     Program
429 |                                 </div>
430 |                                 <div>
431 |                                     <input class="form-check-input" type="checkbox" value="" id="idPro"> Github Pro
432 |                                 </div>
433 |                             </div>
434 |                             <div class="right">
435 |                                 <div>
436 |                                     <input class="form-check-input mb-2" type="checkbox" value="" id="idDev"> Developer
437 |                                     Program
438 |                                 </div>
439 |                                 <div>
440 |                                     <input class="form-check-input" type="checkbox" value="" id="idSponsor"> Sponsor
441 |                                 </div>
442 |                             </div>
443 |                         </div>
444 |                         <h3>Statistics</h3>
445 |                         <div class="form2 d-flex justify-content-between mb-3">
446 |                             <div class="left">
447 |                                 <div>
448 |                                     <input class="form-check-input mb-2" type="checkbox" value="" id="idProView"> Show
449 |                                     Profile Views
450 |                                 </div>
451 |                                 <div>
452 |                                     <input class="form-check-input" type="checkbox" value="" id="idAtivity"> Show GitHub
453 |                                     Activity
454 |                                     Graph
455 |                                 </div>
456 |                             </div>
457 |                             <div class="right">
458 |                                 <div>
459 |                                     <input class="form-check-input mb-2" type="checkbox" value="" id="idStatustics">
460 |                                     Show
461 |                                     GitHub
462 |                                     statistics
463 |                                 </div>
464 |                                 <div>
465 |                                     <input class="form-check-input" type="checkbox" value="" id="idMostUsedLang"> Show
466 |                                     Most
467 |                                     Used
468 |                                     Languages
469 |                                 </div>
470 |                             </div>
471 |                         </div>
472 | 
473 |                         <h3>Others</h3>
474 |                         <div class="form2 d-flex justify-content-between mb-3">
475 |                             <div class="left">
476 |                                 <div>
477 |                                     <input class="form-check-input mb-2" type="checkbox" value="" id="idTrophies"> Show
478 |                                     Trophies
479 |                                 </div>
480 |                                 <div>
481 |                                     <input class="form-check-input" type="checkbox" value="" id="idMetrics"> Show GitHub
482 |                                     Metrics
483 |                                 </div>
484 |                             </div>
485 |                             <div class="right">
486 |                                 <div>
487 |                                     <input class="form-check-input" type="checkbox" value="" id="idSteak"> Show GitHub
488 |                                     Streak Stats
489 |                                 </div>
490 |                             </div>
491 |                         </div>
492 |                     </div>
493 |                 </div>
494 |             </div>
495 | 
496 |             <div class="px-2 priviewBox">
497 |                 <h2>Preview</h2>
498 |                 <hr>
499 |                 <h3>Hi there 👋, My name is <span id="myName"></span></h3>
500 |                 <div>
501 |                     <img width="100%" id="myImg" src="" alt="">
502 |                 </div>
503 | 
504 |                 <p class="text-wrap" id="myAbout"></p>
505 |                 <div class="mb-3">
506 |                     <h3 id="headingList">💫 Little Bit More About Me</h3>
507 |                     <p class="my-1">🔭 I'm currently working on <b id="list1"></b></p>
508 |                     <p class="my-1">👯 I want to collaborate on <b id="list2"></b></p>
509 |                     <p class="my-1">🙏 I'm looking for help with <b id="list3"></b></p>
510 |                     <p class="my-1">🌱 I'm currently learning <b id="list4"></b></p>
511 |                     <p class="my-1">💬 Ask me about <b id="list5"></b></p>
512 |                     <p class="my-1">📫 How to reach me? <b id="list6"></b></p>
513 |                     <p class="my-1">🤖 All of my projects are available at <b id="list7"></b></p>
514 |                     <p class="my-1">📰 I regularly write articles on <b id="list8"></b></p>
515 |                     <p class="my-1">😄 Know about my experiences <a id="list9" href="">here</a></p>
516 |                     <p class="my-1">⚡ Fun Fact: <b id="list10"></b></p>
517 |                 </div>
518 | 
519 |                 <div class="skillsImg mb-3">
520 |                     <h3 id="headingSkills">💻 My Skills</h3>
521 |                     <img id="java" class="mt-1"
522 |                         src="https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=java&logoColor=white"
523 |                         height="30px"  alt="">
524 |                     <img id="c" class="mt-1"
525 |                         src="https://img.shields.io/badge/c-%2300599C.svg?style=for-the-badge&logo=c&logoColor=white"
526 |                         height="30px"  alt="">
527 |                     <img id="cpp" class="mt-1"
528 |                         src="https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white"
529 |                         height="30px"  alt="">
530 |                     <img id="csharp" class="mt-1"
531 |                         src="https://img.shields.io/badge/c%23-%23239120.svg?style=for-the-badge&logo=c-sharp&logoColor=white"
532 |                         height="30px"  alt="">
533 |                     <img id="python" class="mt-1"
534 |                         src="https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54"
535 |                         height="30px"  alt="">
536 |                     <img id="js" class="mt-1"
537 |                         src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E"
538 |                         height="30px"  alt="">
539 |                     <img id="ts" class="mt-1"
540 |                         src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white"
541 |                         height="30px"  alt="">
542 |                     <img id="swift" class="mt-1"
543 |                         src="https://img.shields.io/badge/swift-F54A2A?style=for-the-badge&logo=swift&logoColor=white"
544 |                         height="30px"  alt="">
545 |                     <img id="go" class="mt-1"
546 |                         src="https://img.shields.io/badge/go-%2300ADD8.svg?style=for-the-badge&logo=go&logoColor=white"
547 |                         height="30px"  alt="">
548 |                     <img id="php" class="mt-1"
549 |                         src="https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge&logo=php&logoColor=white"
550 |                         height="30px"  alt="">
551 |                     <img id="android" class="mt-1"
552 |                         src="https://img.shields.io/badge/Android-3DDC84?style=for-the-badge&logo=android&logoColor=white"
553 |                         height="30px"  alt="">
554 |                     <img id="flutter" class="mt-1"
555 |                         src="https://img.shields.io/badge/Flutter-%2302569B.svg?style=for-the-badge&logo=Flutter&logoColor=white"
556 |                         height="30px"  alt="">
557 |                     <img id="kotlin" class="mt-1"
558 |                         src="https://img.shields.io/badge/kotlin-%230095D5.svg?style=for-the-badge&logo=kotlin&logoColor=white"
559 |                         height="30px"  alt="">
560 | 
561 |                     <img id="reactnative" class="mt-1"
562 |                         src="https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB"
563 |                         height="30px"  alt="">
564 |                     <img id="dart" class="mt-1"
565 |                         src="https://img.shields.io/badge/dart-%230175C2.svg?style=for-the-badge&logo=dart&logoColor=white"
566 |                         height="30px"  alt="">
567 |                     <img id="html" class="mt-1"
568 |                         src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white"
569 |                         height="30px"  alt="">
570 |                     <img id="css" class="mt-1"
571 |                         src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white"
572 |                         height="30px"  alt="">
573 |                     <img id="bootstrap" class="mt-1"
574 |                         src="https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&logo=bootstrap&logoColor=white"
575 |                         height="30px"  alt="">
576 |                     <img id="react" class="mt-1"
577 |                         src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB"
578 |                         height="30px"  alt="">
579 |                     <img id="tailwind" class="mt-1"
580 |                         src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white"
581 |                         height="30px"  alt="">
582 |                     <img id="vuejs" class="mt-1"
583 |                         src="https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D"
584 |                         height="30px"  alt="">
585 |                     <img id="angular" class="mt-1"
586 |                         src="https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge&logo=angular&logoColor=white"
587 |                         height="30px"  alt="">
588 |                     <img id="materialui" class="mt-1"
589 |                         src="https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white"
590 |                         height="30px"  alt="">
591 |                     <img id="bulma" class="mt-1"
592 |                         src="https://img.shields.io/badge/bulma-cyan?style=for-the-badge&logo=bulma&logoColor=white"
593 |                         height="30px"  alt="">
594 |                     <img id="svelte" class="mt-1"
595 |                         src="https://img.shields.io/badge/svelte-%23f1413d.svg?style=for-the-badge&logo=svelte&logoColor=white"
596 |                         height="30px"  alt="">
597 | 
598 |                     <img id="nodejs" class="mt-1"
599 |                         src="https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white"
600 |                         height="30px"  alt="">
601 |                     <img id="express" class="mt-1"
602 |                         src="https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB"
603 |                         height="30px"  alt="">
604 |                     <img id="nginx" class="mt-1"
605 |                         src="https://img.shields.io/badge/nginx-%23009639.svg?style=for-the-badge&logo=nginx&logoColor=white"
606 |                         height="30px"  alt="">
607 |                     <img id="django" class="mt-1"
608 |                         src="https://img.shields.io/badge/django-%23092E20.svg?style=for-the-badge&logo=django&logoColor=white"
609 |                         height="30px"  alt="">
610 |                     <img id="flask" class="mt-1"
611 |                         src="https://img.shields.io/badge/flask-%23000.svg?style=for-the-badge&logo=flask&logoColor=white"
612 |                         height="30px"  alt="">
613 |                     <img id="unity" class="mt-1"
614 |                         src="https://img.shields.io/badge/unity-%23000000.svg?style=for-the-badge&logo=unity&logoColor=white"
615 |                         height="30px"  alt="">
616 |                     <img id="unreal" class="mt-1"
617 |                         src="https://img.shields.io/badge/unreal-%23313131.svg?style=for-the-badge&logo=unrealengine&logoColor=white"
618 |                         height="30px"  alt="">
619 |                     <img id="git" class="mt-1"
620 |                         src="https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white"
621 |                         height="30px"  alt="">
622 |                     <img id="arduino" class="mt-1"
623 |                         src="https://img.shields.io/badge/-Arduino-00979D?style=for-the-badge&logo=Arduino&logoColor=white"
624 |                         height="30px"  alt="">
625 |                     <img id="linux" class="mt-1"
626 |                         src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black"
627 |                         height="30px"  alt="">
628 |                 </div>
629 | 
630 |                 <div class="mb-3">
631 |                     <h3 id="headingSocials">👥 Connect With Me</h3>
632 |                     <a href="" id="myLinkedin" class="text-decoration-none" target="_blank">
633 |                         <img src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white"
634 |                             alt="" class="mt-1" height="30px">
635 |                     </a>
636 |                     <a href="" id="myTwitter" class="text-decoration-none" target="_blank">
637 |                         <img src="https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white"
638 |                             alt="" class="mt-1" height="30px">
639 |                     </a>
640 |                     <a href="" id="myDiscord" class="text-decoration-none" target="_blank">
641 |                         <img src="https://img.shields.io/badge/Discord-%237289DA.svg?style=for-the-badge&logo=discord&logoColor=white"
642 |                             alt="" class="mt-1" height="30px">
643 |                     </a>
644 |                     <a href="" id="myStackoverflow" class="text-decoration-none" target="_blank">
645 |                         <img src="https://img.shields.io/badge/-Stackoverflow-FE7A16?style=for-the-badge&logo=stack-overflow&logoColor=white"
646 |                             alt="" class="mt-1" height="30px">
647 |                     </a>
648 |                     <a href="" id="myFacebook" class="text-decoration-none" target="_blank">
649 |                         <img src="https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white"
650 |                             alt="" class="mt-1" height="30px">
651 |                     </a>
652 |                     <a href="" id="myInstgram" class="text-decoration-none" target="_blank">
653 |                         <img src="https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white"
654 |                             alt="" class="mt-1" height="30px">
655 |                     </a>
656 |                     <a href="" id="myYoutube" class="text-decoration-none" target="_blank">
657 |                         <img src="https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white"
658 |                             alt="" class="mt-1" height="30px">
659 |                     </a>
660 |                     <a href="" id="myReddit" class="text-decoration-none" target="_blank">
661 |                         <img src="https://img.shields.io/badge/Reddit-FF4500?style=for-the-badge&logo=reddit&logoColor=white"
662 |                             alt="" class="mt-1" height="30px">
663 |                     </a>
664 |                     <a href="" id="myKaggle" class="text-decoration-none" target="_blank">
665 |                         <img src="https://img.shields.io/badge/Kaggle-035a7d?style=for-the-badge&logo=kaggle&logoColor=white"
666 |                             alt="" class="mt-1" height="30px">
667 |                     </a>
668 |                     <a href="" id="myMedium" class="text-decoration-none" target="_blank">
669 |                         <img src="https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white"
670 |                             alt="" class="mt-1" height="30px">
671 |                     </a>
672 |                     <a href="" id="myDribble" class="text-decoration-none" target="_blank">
673 |                         <img src="https://img.shields.io/badge/Dribbble-EA4C89?style=for-the-badge&logo=dribbble&logoColor=white"
674 |                             alt="" class="mt-1" height="30px">
675 |                     </a>
676 |                     <a href="" id="myBehance" class="text-decoration-none" target="_blank">
677 |                         <img src="https://img.shields.io/badge/Behance-1769ff?style=for-the-badge&logo=behance&logoColor=white"
678 |                             alt="" class="mt-1" height="30px">
679 |                     </a>
680 |                     <a href="" id="myCodepen" class="text-decoration-none" target="_blank">
681 |                         <img src="https://img.shields.io/badge/Codepen-000000?style=for-the-badge&logo=codepen&logoColor=white"
682 |                             alt="" class="mt-1" height="30px">
683 |                     </a>
684 |                     <a href="" id="myGFG" class="text-decoration-none" target="_blank">
685 |                         <img src="https://img.shields.io/badge/GeeksforGeeks-darkgreen?style=for-the-badge&logo=geeksforgeeks&logoColor=white"
686 |                             alt="" class="mt-1" height="30px">
687 |                     </a>
688 |                     <a href="" id="myHackerrank" class="text-decoration-none" target="_blank">
689 |                         <img src="https://img.shields.io/badge/-Hackerrank-2EC866?style=for-the-badge&logo=HackerRank&logoColor=white"
690 |                             alt="" class="mt-1" height="30px">
691 |                     </a>
692 |                     <a href="" id="myLeetcode" class="text-decoration-none" target="_blank">
693 |                         <img src="https://img.shields.io/badge/LeetCode-000000?style=for-the-badge&logo=LeetCode&logoColor=#d16c06"
694 |                             alt="" class="mt-1" height="30px">
695 |                     </a>
696 |                     <a href="" id="myCodechef" class="text-decoration-none" target="_blank">
697 |                         <img src="https://img.shields.io/badge/CodeChef-%23964B00.svg?style=for-the-badge&logo=CodeChef&logoColor=white"
698 |                             alt="" class="mt-1" height="30px">
699 |                     </a>
700 |                     <a href="" id="myCodeforces" class="text-decoration-none" target="_blank">
701 |                         <img src="https://img.shields.io/badge/Codeforces-445f9d?style=for-the-badge&logo=Codeforces&logoColor=white"
702 |                             alt="" class="mt-1" height="30px">
703 |                     </a>
704 |                 </div>
705 | 
706 |                 <div>
707 |                     <h3 id="headingBadges">🌟 GitHub Badges</h3>
708 |                     <div class="mb-3">
709 |                         <img id="arcContribute"
710 |                             src="https://raw.githubusercontent.com/acervenky/animated-github-badges/master/assets/acbadge.gif"
711 |                             width="40" height="40">
712 |                         <img id="devBadge"
713 |                             src="https://raw.githubusercontent.com/acervenky/animated-github-badges/master/assets/devbadge.gif"
714 |                             width="40" height="40">
715 |                         <img id="starBadge"
716 |                             src="https://raw.githubusercontent.com/acervenky/animated-github-badges/master/assets/starbadge.gif"
717 |                             width="35" height="35">
718 |                         <img id="proBadge"
719 |                             src="https://raw.githubusercontent.com/acervenky/animated-github-badges/master/assets/pro.gif"
720 |                             width="35" height="35">
721 |                         <img id="sponsorBadge"
722 |                             src="https://raw.githubusercontent.com/acervenky/animated-github-badges/master/assets/sponsorbadge.gif"
723 |                             width="35" height="35">
724 |                     </div>
725 |                     <h3 id="headingTrophy">🏆 GitHub Trophies</h3>
726 |                     <div class="mb-3">
727 |                             <a href="https://github.com/ryo-ma/github-profile-trophy"><img id="trophies"
728 |                             src="https://github-profile-trophy.vercel.app/?username=" alt="trophy"
729 |                             width="550px"></a>
730 |                     </div>
731 |                     <h3 id="headingStatus">📊 GitHub Status</h3>
732 |                     <div class="mb-3"><a href="https://github.com/anuraghazra/github-readme-stats"><img id="mostUsedLang"
733 |                                 src="https://github-readme-stats.vercel.app/api/top-langs/?username="
734 |                                 alt="Top Langs"></a>
735 |                     </div>
736 |                     <div class="mb-3"><img id="statistics" src="https://github-readme-stats.vercel.app/api?username="
737 |                             alt="GitHub stats">
738 |                     </div>
739 |                     <div class="mb-3"><img id="activityGraph" src="https://activity-graph.herokuapp.com/graph?username="
740 |                             alt="GitHub Activity Graph" width="550px"></div>
741 |                     <div class="mb-3"><img id="matrcis" src="https://metrics.lecoq.io/" alt="GitHub metrics"></div>
742 |                     <div class="mb-3"><img id="streakStatus"
743 |                             src="https://github-readme-streak-stats.herokuapp.com/?user=" alt="GitHub streak stats">
744 |                     </div>
745 |                     <div class="mb-3"><img id="profileView" src="https://visitcount.itsvg.in/api?id=" alt="Profile views"></div>
746 |                 </div>
747 |             </div>
748 |         </div>
749 | 
750 |         <div class="d-flex justify-content-center">
751 |             <button class="btn btn-primary my-5 ce" id="generatReadmeFile">Generat ReadMe File</button>
752 |         </div>
753 | 
754 |         <div class="codeBox container d-flex justify-content-between" id="last">
755 |             <div class="genretedCode">
756 |                 <div class="d-flex justify-content-between mb-2">
757 |                     <h3>Code</h3>
758 |                     <button type="button" class="btn btn-primary" id="copyReadmeFile">Copy</button>
759 |                 </div>
760 |                 <textarea name="" id="codeArea" class="form-control" rows="20"></textarea>
761 |             </div>
762 |             <div class="ms-4 codeSecondBox">
763 |                 <h4>Support Me With Crypto Coffee</h4>
764 |                 <script type="text/javascript" src="https://buymeacryptocoffee.xyz/buttonwidget.js"
765 |                     data-address="0x0b0af035a1d07b66e9da02ade6545ca5b57dc744" data-name="crypto-coffee-button"></script>
766 |             </div>
767 |         </div>
768 | 
769 |         <footer class="bg-black mt-3 py-2">
770 |             <p class="text-center text-white my-0">MADE WITH ❤ BY <a href="https://github.com/iamsatyajit05"
771 |                     class="text-warning text-decoration-none"><i class="hover-bold">IAMSATYAJIT05</i></a></p>
772 |         </footer>
773 |     </div>
774 |     <script src="Script/script.js" type="text/javascript"></script>
775 | </body>
776 | 
777 | </html>


--------------------------------------------------------------------------------