[ { "path": "index.html", "content": "\r\n\r\n\r\n \r\n \r\n \r\n Bhargav Tibadiya | Web Developer\r\n \r\n \r\n\r\n\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n

\r\n BHARGAV
TIBADIYA \r\n

\r\n
\r\n
\r\n

\r\n PERSONAL
PORTFOLIO\r\n

\r\n
\r\n
\r\n
\r\n
\r\n

\r\n [ NAVIGATION ]\r\n

\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n \"\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n

\r\n [ FULL STACK WEB DEVELOPER ]\r\n

\r\n

\r\n \r\n [ RESUME ]\r\n \r\n

\r\n
\r\n \r\n
\r\n

SELECT

\r\n \"\"\r\n \r\n
\r\n
\r\n ->\r\n
\r\n \r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n\r\n \r\n
\r\n *\r\n
\r\n
\r\n
\r\n I'm more than just your average developer because I'm fluent in HTML, CSS, JavaScript, and a variety of back-end technologies. I have a KEEN eye for design, an burning passion for creativity, and an unshakable commitment to delivering flawless results every time. I'll handle it all, whether it's optimizing website performance, or adopting cutting-edge online technology. So, if you're looking for a full-stack web developer who's as confident as they are capable, look no further. I'm the ferocious technical powerhouse you've been looking for.\r\n
\r\n
\r\n
FRONT END
\r\n
BACK END
\r\n
UI / UX
\r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n FRONT END\r\n
\r\n
\r\n
\r\n
HTML [ 90 ]
\r\n
\r\n
\r\n
\r\n
CSS [ 85 ]
\r\n
\r\n
\r\n
\r\n
JAVASCRIPT [ 80 ]
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n PROJECT 1\r\n
\r\n
\r\n \r\n \"\"\r\n \r\n
\r\n
\r\n\r\n\r\n
\r\n

\r\n [ PASSWORD GENERATOR ]\r\n

\r\n
    \r\n
  • Designed and coded a dynamic password generator using HTML, CSS, and JavaScript, ensuring a broad spectrum of \r\n password possibilities for enhanced security.
    • \r\n
  • Enhanced user experience with one-click copy-to-clipboard functionality and a real-time password strength indicator, \r\n providing valuable feedback for creating robust passwords.
    • \r\n
  • Empowered users with the flexibility to customize their passwords by selecting from uppercase, lowercase, numbers, and \r\n symbols, showcasing strong front-end development skills and a commitment to user-centric design.
    • \r\n
  • Used HTML, CSS, JavaScript
    • \r\n
\r\n
\r\n\r\n
\r\n VISIT ><\r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n PROJECT 2\r\n
\r\n
\r\n \r\n \"\"\r\n \r\n
\r\n
\r\n\r\n\r\n
\r\n

\r\n [ To Do App ]\r\n

\r\n
    \r\n
  • Developed a sleek To-Do app from scratch with functionality like add complete and delete task
    • \r\n
  • Implemented a seamless task-saving mechanism, allowing data retention in the browser to prevent loss upon page refresh.
    • \r\n
  • Used HTML, CSS, JavaScript
    • \r\n
\r\n
\r\n\r\n
\r\n VISIT ><\r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n PROJECT 3\r\n
\r\n
\r\n \r\n \"\"\r\n \r\n
\r\n
\r\n\r\n\r\n
\r\n

\r\n [ OLD PORTFOLIO ]\r\n

\r\n
    \r\n
  • Designed and Developed my Portfolio Website
    • \r\n
  • Used HTML, CSS, JAVASCRIPT, BOOTSTRAP
    • \r\n
  • Mastered How to host a website
    • \r\n
  • Learned basic Database Concept to Store User Data
    • \r\n
\r\n
\r\n\r\n
\r\n VISIT ><\r\n
\r\n \r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n

\r\n DESIGN &
DEVELOPED BY \r\n

\r\n
\r\n
\r\n

\r\n BHARGAV
TIBADIYA\r\n

\r\n
\r\n \r\n
\r\n

\r\n 2022-23
ALL RIGHTS RESERVED\r\n

\r\n
\r\n \r\n
\r\n
\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n \r\n\r\n\r\n" }, { "path": "resources/elements/Temp", "content": "TempFile\n" }, { "path": "resources/images/temp", "content": "TempText\n" }, { "path": "resources/temp", "content": "TempFile\n" }, { "path": "style.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');\r\n*\r\n{\r\nmargin: 0;\r\npadding: 0;\r\nbox-sizing: border-box;\r\ntransition: 0.5s all ease-in-out;\r\n}\r\n\r\nbody\r\n{\r\n color: white;\r\n font-family: 'Abel', sans-serif;\r\n}\r\n\r\n.container\r\n{\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n height: fit-content;\r\n /* padding: 10px; */\r\n /* overflow: scroll; */\r\n}\r\n\r\n.box\r\n{\r\n position: absolute;\r\n z-index: -2;\r\n background-color: black;\r\n /* border-radius: 50px; */\r\n width: 100%;\r\n height: fit-content;\r\n}\r\n\r\n\r\n.navbar\r\n{\r\n display: flex;\r\n /* flex-direction: row; */\r\n align-items: center;\r\n width: 100%;\r\n justify-content: space-between;\r\n padding: 40px;\r\n font-size: 16px;\r\n letter-spacing: 2px;\r\n}\r\n\r\n.nav-left\r\n{\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 33%;\r\n /* align-items: flex-start; */\r\n /* justify-content: space-around; */\r\n} \r\n\r\n\r\n.bg-img\r\n{\r\n width: 100%;\r\n height: 40vh;\r\n position: fixed;\r\n z-index: -1;\r\n display: flex;\r\n justify-content: end;\r\n /* align-items: center; */\r\n padding-right: 25px;\r\n}\r\n.bg-img img\r\n{\r\n\r\n min-width: 678px;\r\n max-width: 40%;\r\n max-height: 90vh;\r\n min-height: 800px;\r\n border-radius: 40px;\r\n z-index: -1;\r\n}\r\n\r\n.select-section\r\n{\r\n /* padding: 0px 25px 25px 25px; */\r\n width: 100%;\r\n /* position: absolute; */\r\n /* top: 40%; */\r\n}\r\n\r\n.select-box\r\n{\r\n margin: 40px;\r\n border-radius: 25px;\r\n border: 2px solid white;\r\n padding: 40px;\r\n}\r\n\r\n.full-stack\r\n{\r\n display: flex;\r\n width: 100%;\r\n justify-content: space-between;\r\n padding: 50px 0;\r\n}\r\n\r\n.full-stack h2 a\r\n{\r\n text-decoration: none;\r\n color: white;\r\n}\r\n\r\n.select\r\n{\r\n width: 100%;\r\n justify-content: space-between;\r\n display: flex;\r\n align-items: center;\r\n /* padding: 25px 0; */\r\n font-size: 156px;\r\n letter-spacing: 8px;\r\n}\r\n\r\n.intro-section,.f-end-section, .project-section\r\n{\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n.intro-box, .f-end-box, .project-box\r\n{\r\n width: 100% ;\r\n margin: 40px;\r\n border-radius: 25px;\r\n border: 4px solid white;\r\n padding: 40px;\r\n}\r\n\r\n.intro-star, .f-end-heading, .project-heading\r\n{\r\n font-size: 156px;\r\n width: 100%;\r\n}\r\n\r\n.intro-details\r\n{\r\n width: 100%;\r\n display: flex;\r\n}\r\n.intro-details-text\r\n{\r\n text-transform: uppercase;\r\n width: 50%;\r\n text-align: justify;\r\n}\r\n\r\n.intro-details-btn\r\n{\r\n width: 50%;\r\n display: flex;\r\n align-items:self-end;\r\n justify-content: center;\r\n}\r\n\r\n.intro-details-btn div\r\n{\r\n border: 1px solid white;\r\n padding: 25px 20px;\r\n border-radius: 40px;\r\n margin: 0px 20px;\r\n font-size: 24px;\r\n letter-spacing: 2px;\r\n}\r\n\r\n\r\n.f-end-graph\r\n{\r\n display: flex;\r\n flex-direction: column;\r\n width: 50%;\r\n /* background-color: aquamarine; */\r\n}\r\n\r\n.skill-html,.skill-css,.skill-bootstrap\r\n{\r\n margin: 10px;\r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n}\r\n\r\n.skill-name\r\n{\r\n width: 25%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\n\r\n.skill-per\r\n{\r\n width: 100%;\r\n display: flex;\r\n border: 1px solid white;\r\n padding: 2px;\r\n}\r\n\r\n.skill-per::after\r\n{\r\n content: \"*\";\r\n width: 90%;\r\n display: flex;\r\n background-color: red;\r\n}\r\n\r\n.skill-css::after\r\n{\r\n width: 80%;\r\n}\r\n\r\n.skill-bootstrap::after\r\n{\r\n width: 60%;\r\n}\r\n.visit-btn\r\n{\r\n width: 0;\r\n height: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.footer\r\n{\r\n width: 100%;\r\n display: flex;\r\n}\r\n\r\n.footer-box\r\n{\r\n width: 100% ;\r\n margin: 40px;\r\n border-radius: 25px;\r\n /* border: 3px solid red; */\r\n padding: 40px;\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n\r\n.project-heading\r\n{\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n\r\n.project-heading-name\r\n{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.project-heading img\r\n{\r\n width: 75%;\r\n}\r\n\r\n.project-description\r\n{\r\n text-transform: uppercase;\r\n}\r\n.project-description h2, .project-description ul li\r\n{\r\n padding: 15px 0;\r\n}\r\n\r\n.red\r\n{\r\n color: red;\r\n}\r\n\r\n@media screen and (max-width: 1500px) { \r\n .select\r\n {\r\n font-size: 96px;\r\n }\r\n\r\n .bg-img\r\n {\r\n padding-right: 0;\r\n }\r\n\r\n .select img\r\n {\r\n transform: scale(0.75);\r\n }\r\n\r\n .intro-details-btn div\r\n {\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 1300px){\r\n .intro-details-btn div\r\n {\r\n padding: 12px 10px;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 1100px){\r\n .box\r\n {\r\n font-size: 18px;\r\n /* border-radius: 25px; */\r\n }\r\n \r\n .navbar\r\n {\r\n font-size: 12px;\r\n padding: 20px;\r\n }\r\n \r\n .intro-details-btn \r\n {\r\n gap: 12px;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .intro-details-btn div\r\n {\r\n font-size: 12px;\r\n }\r\n \r\n .intro-star\r\n {\r\n margin-bottom: -50px ;\r\n }\r\n\r\n .select\r\n {\r\n font-size: 64px;\r\n }\r\n .select img\r\n {\r\n transform: scale(0.66);\r\n }\r\n\r\n .f-end-heading,.project-heading\r\n {\r\n font-size: 96px;\r\n }\r\n\r\n .f-end-graph\r\n {\r\n width: 100%;\r\n }\r\n\r\n .skill-name\r\n {\r\n width: 33%;\r\n }\r\n\r\n .project-heading img\r\n {\r\n transform: scale(0.75);\r\n }\r\n \r\n .bg-img\r\n {\r\n height: 50vh;\r\n position: absolute;\r\n justify-content: center;\r\n\r\n }\r\n\r\n .full-stack\r\n {\r\n padding: 25px 0; \r\n font-size: 12px;\r\n }\r\n \r\n}\r\n\r\n@media screen and (max-width: 900px){\r\n .select img, .project-heading div img \r\n {\r\n transition: 0.3s all ease;\r\n width: 0;\r\n }\r\n \r\n .navbar\r\n {\r\n transition: 0.3s all ease;\r\n justify-content: space-between;\r\n }\r\n\r\n .visit-btn\r\n {\r\n width: 100%;\r\n height: fit-content;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border: 1px solid white;\r\n padding: 15px;\r\n margin: 10px 0;\r\n border-radius: 50px;\r\n }\r\n\r\n .visit-btn:hover, .intro-details-btn div:hover\r\n {\r\n background-color: white;\r\n border: 1px solid black;\r\n border-radius: 10px;\r\n color: black;\r\n }\r\n\r\n .visit-btn:hover a\r\n {\r\n color: black;\r\n\r\n }\r\n\r\n .visit-btn a\r\n {\r\n text-decoration: none;\r\n color: white;\r\n font-size: 18px;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 700px){\r\n\r\n .full-stack,.navbar,.intro-details-text,.skill-name, .project-description,.footer-box\r\n {\r\n font-size: 17px;\r\n }\r\n\r\n .navbar \r\n {\r\n font-size: 10px;\r\n margin: 0;\r\n }\r\n .nav-left\r\n {\r\n gap: 20px;\r\n }\r\n\r\n .select,.f-end-heading,.project-heading\r\n {\r\n font-size: 48px;\r\n }\r\n\r\n .bg-img\r\n {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n /* align-items: center; */\r\n padding: 10px;\r\n gap: 0;\r\n }\r\n\r\n .bg-img img\r\n {\r\n /* min-width: 225px; */\r\n /* min-height: 266px; */\r\n min-width: 100%;\r\n min-height: 30vh;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 600px){\r\n .full-stack,.navbar,.intro-details-text,.skill-name, .project-description,.footer-box,.visit-btn a\r\n {\r\n font-size: 15px;\r\n }\r\n .intro-star\r\n {\r\n font-size: 128px;\r\n }\r\n\r\n .intro-details\r\n {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n }\r\n \r\n .intro-details-btn,.intro-details-text\r\n {\r\n width: 100%;\r\n }\r\n\r\n .full-stack h2,.navbar h2\r\n {\r\n font-size: 12px;\r\n }\r\n\r\n .intro-details-btn\r\n {\r\n flex-direction: row;\r\n }\r\n .intro-details-btn div\r\n {\r\n font-size: 14px;\r\n margin: 0;\r\n }\r\n\r\n .intro-box,.select-box,.project-box,.f-end-box\r\n {\r\n padding: 20px;\r\n margin: 20px;\r\n }\r\n\r\n .footer-box\r\n {\r\n padding: 20px;\r\n margin: 0;\r\n }\r\n\r\n .skill-html,.skill-css,.skill-bootstrap\r\n {\r\n margin: 5px;\r\n }\r\n\r\n .project-description h2, .project-description ul li\r\n {\r\n padding: 5px 0;\r\n }\r\n\r\n\r\n}\r\n\r\n\r\n@media screen and (max-width: 450px){\r\n .full-stack,.navbar,.intro-details-text,.skill-name, .project-description,.footer-box, .intro-details-btn div, .visit-btn a\r\n {\r\n font-size: 10px;\r\n }\r\n .intro-star\r\n {\r\n font-size: 96px;\r\n }\r\n \r\n .full-stack h2\r\n {\r\n font-size: 12px;\r\n }\r\n\r\n .select,.f-end-heading,.project-heading\r\n {\r\n font-size: 36px;\r\n }\r\n\r\n\r\n}\r\n\r\n@media screen and (max-width: 350px){\r\n \r\n .navbar,.footer-box\r\n {\r\n justify-content: space-between;\r\n }\r\n \r\n .full-stack,.navbar,.intro-details-text,.skill-name, .project-description,.footer-box, .intro-details-btn div,.visit-btn a\r\n {\r\n font-size: 8px;\r\n }\r\n .intro-star\r\n {\r\n font-size: 72px;\r\n }\r\n\r\n .intro-star\r\n {\r\n margin-bottom: 0;\r\n }\r\n\r\n .select,.f-end-heading,.project-heading\r\n {\r\n font-size: 28px;\r\n }\r\n\r\n\r\n}\r\n" } ]