├── .github └── workflows │ └── linters.yml ├── .gitignore ├── MIT.md ├── README.md ├── css ├── main.css └── popUp.css ├── images ├── Google Analytics Screenshot.png ├── Screenshot1.png ├── Screenshot2.png ├── Screenshot3.png ├── Screenshot4.png ├── angellist.svg ├── btn-img-pu1.png ├── btn-img-pu2.png ├── css.png ├── footer-bg-mobile.png ├── footer-bg-pc.png ├── github.svg ├── hamburger.png ├── header-bg-mobile.png ├── header-bg-pc.png ├── html.png ├── js.png ├── linkedin.svg ├── medium.svg ├── my-logo.png ├── project1.png ├── project1pu.png ├── project2.png ├── project3.png └── twitter.svg ├── index.html ├── js ├── formValidation.js ├── javascript.js ├── localStorage.js └── popUp.js ├── package-lock.json └── package.json /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-18.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # .gitignore 2 | node_modules/ -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2021, [Ranjeet Singh] 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this [APP TYPE] and associated documentation files, to deal in the [webpage] without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the [APP TYPE], and to permit persons to whom the [webpage] is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [webpage]. 6 | 7 | THE [webpage] IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE [webpage] OR THE USE OR OTHER DEALINGS IN THE [webpage]. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/thecodechaser-blueviolet) 2 | 3 | # Portfolio 4 | 5 | > The portfolio project is my personal portfolio website, Including my details, the previous project works, and a contact form. This website is completely responsive for mobile and desktop. 6 | 7 | ## Screenshots: 8 | 9 | ## Mobile 10 | 11 | ![screenshot](./images/Screenshot1.png) 12 | 13 | ![screenshot](./images/Screenshot2.png) 14 | 15 | ## Desktop 16 | 17 | ![screenshot](./images/Screenshot3.png) 18 | 19 | ![screenshot](./images/Screenshot4.png) 20 | 21 | Porject's features are added into seperate branch to keep main branch safe. 22 | 23 | ## Built With 24 | 25 | - HTML 26 | - CSS 27 | 28 | ## Online live link 29 | 30 | [Visit project online](https://thecodechaser.github.io/portfolio/) 31 | 32 | ## Getting Started 33 | 34 | To get a local copy up and running follow these simple example steps. 35 | 36 | ## Visit And Open Files 37 | 38 | [Visit Repo](https://github.com/thecodechaser/portfolio) 39 | 40 | ## Download Repo 41 | 42 | [Download Repo](https://github.com/thecodechaser/portfolio/archive/refs/heads/main.zip) 43 | 44 | ## Authors 45 | 46 | 👤 **Ranjeet Singh** 47 | 48 | - GitHub: [@githubhandle](https://github.com/thecodechaser) 49 | - Twitter: [@twitterhandle](https://twitter.com/thecodechaser) 50 | - LinkedIn: [LinkedIn](https://linkedin.com/in/thecodechaser) 51 | 52 | ## 🤝 Contributing 53 | 54 | Contributions, issues, and feature requests are welcome! 55 | 56 | Feel free to check the [issues page](https://github.com/thecodechaser/portfolio/issues). 57 | 58 | ## Show your support 59 | 60 | Give a ⭐️ if you like this project! 61 | 62 | ## Acknowledgments 63 | 64 | - Inspiration: Microverse 65 | 66 | ## 📝 License 67 | 68 | This project is [MIT](./MIT.md) licensed. 69 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /* main stylesheet */ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); 3 | 4 | body { 5 | font-family: "Poppins", sans-serif; 6 | margin: 0; 7 | } 8 | 9 | /* header-section */ 10 | 11 | header { 12 | position: fixed; 13 | width: 100%; 14 | background-color: white; 15 | } 16 | 17 | .header-nav { 18 | display: flex; 19 | } 20 | 21 | .nav-menu { 22 | display: none; 23 | } 24 | 25 | .logo-top { 26 | width: 150px; 27 | height: 40px; 28 | padding-left: 20px; 29 | } 30 | 31 | .menu-button { 32 | display: flex; 33 | align-items: center; 34 | width: 40px; 35 | height: 30px; 36 | cursor: pointer; 37 | padding-left: 150px; 38 | } 39 | 40 | .btn-open { 41 | position: absolute; 42 | margin-top: -10px; 43 | border: none; 44 | cursor: pointer; 45 | background: transparent; 46 | right: 20px; 47 | } 48 | 49 | .btn-open-img { 50 | height: 22px; 51 | } 52 | 53 | .btn-close { 54 | background: transparent; 55 | cursor: pointer; 56 | width: 40px; 57 | height: 50px; 58 | border: none; 59 | font-weight: lighter; 60 | font-size: 20px; 61 | color: #fff; 62 | margin-right: 20px; 63 | } 64 | 65 | .btn-open:hover { 66 | background: transparent; 67 | } 68 | 69 | .btn-close:hover { 70 | background: transparent; 71 | } 72 | 73 | .mobile-menu-container { 74 | position: absolute; 75 | top: 1px; 76 | left: 1px; 77 | height: 100vh; 78 | width: 100%; 79 | background-color: #6070ffde; 80 | display: none; 81 | backdrop-filter: blur(3px); 82 | } 83 | 84 | .btn-container-close { 85 | position: absolute; 86 | right: 5px; 87 | } 88 | 89 | .menu-list-items { 90 | margin-top: 70px; 91 | display: flex; 92 | flex-direction: column; 93 | margin-left: 30px; 94 | gap: 18px; 95 | } 96 | 97 | .menu-item2 { 98 | color: #fff; 99 | font-weight: 400; 100 | font-size: 28px; 101 | text-decoration: none; 102 | letter-spacing: 1px; 103 | } 104 | 105 | a:hover { 106 | color: blue; 107 | } 108 | 109 | /* hero-section */ 110 | 111 | .headline { 112 | background-image: url("../images/header-bg-mobile.png"); 113 | background-repeat: no-repeat; 114 | padding-left: 20px; 115 | padding-top: 40px; 116 | height: 80vh; 117 | } 118 | 119 | .main-heading { 120 | color: #091e42; 121 | font-style: normal; 122 | font-weight: bold; 123 | font-size: 40px; 124 | line-height: 52px; 125 | margin-top: 100px; 126 | } 127 | 128 | .details { 129 | color: #344563; 130 | font-style: normal; 131 | font-weight: normal; 132 | font-size: 16px; 133 | width: 100%; 134 | } 135 | 136 | .social-link-heading { 137 | color: #7f8cff; 138 | font-style: normal; 139 | font-weight: 500; 140 | font-size: 16px; 141 | line-height: 24px; 142 | } 143 | 144 | .social-link-icons { 145 | display: flex; 146 | align-items: baseline; 147 | } 148 | 149 | ul { 150 | padding: 0; 151 | margin: 0; 152 | list-style-type: none; 153 | } 154 | 155 | .social-links { 156 | padding-left: 20px; 157 | } 158 | 159 | /* project-section */ 160 | 161 | .projects { 162 | display: grid; 163 | padding-left: 20px; 164 | grid-gap: 50px; 165 | } 166 | 167 | .project { 168 | display: flex; 169 | flex-direction: column; 170 | background: #fff; 171 | margin: 44px 20px; 172 | box-sizing: border-box; 173 | border-radius: 16px; 174 | } 175 | 176 | .project.one, 177 | .project.two, 178 | .project.three { 179 | border: 1px solid #dfe1e6; 180 | } 181 | 182 | .snapshoot.body1 { 183 | display: flex; 184 | justify-content: center; 185 | align-items: center; 186 | height: 220px; 187 | background-color: #eab676; 188 | } 189 | 190 | .snapshoot.body2 { 191 | display: flex; 192 | justify-content: center; 193 | align-items: center; 194 | height: 220px; 195 | background-color: #e28743; 196 | } 197 | 198 | .project.snapshoot { 199 | height: 160px; 200 | } 201 | 202 | .project.snapshoot.last { 203 | height: 210px; 204 | } 205 | 206 | .project.name { 207 | color: #172b4d; 208 | font-size: 20px; 209 | margin-bottom: 1px; 210 | } 211 | 212 | .devs { 213 | display: flex; 214 | align-items: baseline; 215 | } 216 | 217 | .dev.name { 218 | color: #344563; 219 | font-size: 13px; 220 | font-weight: 500; 221 | } 222 | 223 | .dev.info { 224 | color: #7a869a; 225 | font-weight: 600; 226 | font-size: 13px; 227 | padding-left: 20px; 228 | } 229 | 230 | .project.info { 231 | font-size: 16px; 232 | color: #344563; 233 | } 234 | 235 | .project-langs { 236 | display: flex; 237 | align-items: baseline; 238 | gap: 20px; 239 | color: #6070ff; 240 | } 241 | 242 | .lang.name { 243 | font-size: 15px; 244 | padding-left: 10px; 245 | background-color: #ebebff; 246 | text-align: center; 247 | width: 80px; 248 | } 249 | 250 | .project-link { 251 | color: #396df2; 252 | font-style: normal; 253 | text-align: center; 254 | font-weight: 500; 255 | font-size: 18px; 256 | text-decoration: none; 257 | border: 1.5px solid #396df2; 258 | width: 130px; 259 | padding-top: 10px; 260 | height: 40px; 261 | border-radius: 12px; 262 | } 263 | 264 | /* about-myself-section */ 265 | 266 | .about { 267 | padding-left: 20px; 268 | padding-top: 40px; 269 | display: flex; 270 | flex-direction: column; 271 | } 272 | 273 | .resume-button { 274 | border: 1.5px solid #396df2; 275 | color: #396df2; 276 | font-size: 19px; 277 | text-align: center; 278 | margin-top: 15px; 279 | cursor: pointer; 280 | border-radius: 12px; 281 | width: 180px; 282 | height: 50px; 283 | } 284 | 285 | .project-button { 286 | border: 1.5px solid #396df2; 287 | color: #396df2; 288 | font-size: 19px; 289 | text-align: center; 290 | margin-top: 15px; 291 | cursor: pointer; 292 | border-radius: 12px; 293 | width: 140px; 294 | height: 50px; 295 | } 296 | 297 | button:hover { 298 | background-color: #6070ff; 299 | color: white; 300 | } 301 | 302 | button:visited { 303 | background-color: #2230d2; 304 | color: white; 305 | } 306 | 307 | button:disabled { 308 | background-color: #e5e5e5; 309 | color: #5e6c84; 310 | } 311 | 312 | .list-items { 313 | color: #000; 314 | padding-top: 40px; 315 | font-style: normal; 316 | font-weight: 500; 317 | font-size: 20px; 318 | line-height: 24px; 319 | } 320 | 321 | .lang-container { 322 | display: flex; 323 | gap: 15px; 324 | margin-top: 20px; 325 | } 326 | 327 | .lang-name-tech { 328 | font-weight: 500; 329 | font-size: 15px; 330 | line-height: 20px; 331 | color: #253858; 332 | } 333 | 334 | .arrow { 335 | border: solid #acb7c3; 336 | border-width: 0 3px 3px 0; 337 | display: inline-block; 338 | padding: 3px; 339 | } 340 | 341 | .right { 342 | transform: rotate(-45deg); 343 | -webkit-transform: rotate(-45deg); 344 | } 345 | 346 | /* footer-section */ 347 | 348 | .contact-form { 349 | margin-top: 12px; 350 | border-radius: 50px 0 0 0; 351 | display: flex; 352 | flex-direction: column; 353 | padding: 80px 24px; 354 | align-items: center; 355 | background-color: #6070ff; 356 | background-image: url("../images/footer-bg-mobile.png"); 357 | background-repeat: no-repeat; 358 | background-size: cover; 359 | background-position: center; 360 | } 361 | 362 | .contact-form-info h2 { 363 | font-style: normal; 364 | font-weight: bold; 365 | font-size: 40px; 366 | line-height: 52px; 367 | text-align: center; 368 | color: #fff; 369 | } 370 | 371 | .contact-form-info p { 372 | font-style: normal; 373 | font-weight: normal; 374 | font-size: 20px; 375 | line-height: 28px; 376 | color: #ebebff; 377 | text-align: center; 378 | } 379 | 380 | .contact-form input, 381 | textarea { 382 | width: 285px; 383 | margin-top: 18px; 384 | padding: 15px 16px; 385 | border-radius: 8px; 386 | border: none; 387 | } 388 | 389 | .contact-form .contact-button { 390 | border: 1.5px solid #396df2; 391 | color: #396df2; 392 | font-size: 19px; 393 | text-align: center; 394 | margin-top: 30px; 395 | cursor: pointer; 396 | border-radius: 12px; 397 | width: 180px; 398 | height: 50px; 399 | } 400 | 401 | .contact-form .contact-button:hover { 402 | background-color: #6070ff; 403 | color: #fff; 404 | border: 1px solid #fff; 405 | } 406 | 407 | .contact-form .contact-button:visited { 408 | background-color: #2230d2; 409 | color: white; 410 | } 411 | 412 | .contact-form .contact-button:disabled { 413 | background-color: #e5e5e5; 414 | color: #5e6c84; 415 | } 416 | 417 | .validation-msg { 418 | margin-top: 2px; 419 | color: white; 420 | font-size: 16px; 421 | height: 30px; 422 | } 423 | 424 | .bottom-line { 425 | width: 134px; 426 | height: 5px; 427 | bottom: 8px; 428 | background: #0d151e; 429 | border-radius: 10px; 430 | margin-top: 50px; 431 | } 432 | 433 | /* Desktop Style */ 434 | 435 | @media (min-width: 992px) { 436 | html, 437 | body { 438 | max-width: 100%; 439 | overflow-x: hidden; 440 | } 441 | 442 | /* header-section */ 443 | 444 | .header-nav { 445 | display: flex; 446 | } 447 | 448 | .nav-menu { 449 | padding-left: 550px; 450 | display: flex; 451 | gap: 10px; 452 | } 453 | 454 | .menu-item { 455 | color: #344563; 456 | font-weight: 500; 457 | font-size: 15px; 458 | text-decoration: none; 459 | } 460 | 461 | .mobile-nav-container { 462 | display: none; 463 | } 464 | 465 | .mobile-menu-container { 466 | display: none; 467 | } 468 | 469 | /* hero-section */ 470 | 471 | .headline { 472 | background-image: url("../images/header-bg-pc.png"); 473 | background-repeat: no-repeat; 474 | margin: 0 30px; 475 | background-size: cover; 476 | background-position: center; 477 | width: 90vw; 478 | } 479 | 480 | .headline-box { 481 | display: flex; 482 | flex-direction: column; 483 | width: 100%; 484 | padding: 134px 130px; 485 | } 486 | 487 | .main-heading { 488 | font-size: 48px; 489 | } 490 | 491 | .details { 492 | font-size: 20px; 493 | width: 80%; 494 | } 495 | 496 | /* project-section */ 497 | 498 | .projects { 499 | grid-gap: 50px; 500 | width: 90vw; 501 | } 502 | 503 | .project { 504 | flex-direction: row; 505 | justify-content: space-evenly; 506 | gap: 30px; 507 | } 508 | 509 | .snapshoot.body1, 510 | .snapshoot.body2 { 511 | width: 480px; 512 | height: 400px; 513 | background-color: white; 514 | padding-top: 25px; 515 | } 516 | 517 | .project.snapshoot { 518 | width: 480px; 519 | height: 400px; 520 | padding: 0; 521 | margin: 0; 522 | } 523 | 524 | .project.snapshoot.last { 525 | width: 480px; 526 | height: 400px; 527 | padding: 0; 528 | margin: 0; 529 | } 530 | 531 | .project-details { 532 | width: 480px; 533 | height: 400px; 534 | padding-top: 25px; 535 | display: flex; 536 | flex-direction: column; 537 | align-items: baseline; 538 | } 539 | 540 | .snapshoot.body2.bodyOrder { 541 | order: 2; 542 | } 543 | 544 | .project-details.detailOrder { 545 | order: 1; 546 | } 547 | 548 | .project.name { 549 | font-weight: bold; 550 | font-size: 40px; 551 | color: #091e42; 552 | } 553 | 554 | .dev.name { 555 | font-size: 18px; 556 | } 557 | 558 | .dev.info { 559 | color: #6b778c; 560 | font-size: 18px; 561 | } 562 | 563 | .project.info { 564 | width: 450px; 565 | } 566 | 567 | /* about-myself-section */ 568 | 569 | .about { 570 | flex-direction: row; 571 | margin: 100px 140px; 572 | gap: 60px; 573 | width: 90vw; 574 | } 575 | 576 | .about-section { 577 | width: 40%; 578 | } 579 | 580 | .lang-details { 581 | display: flex; 582 | gap: 70px; 583 | } 584 | 585 | .lang-container img { 586 | width: 55px; 587 | height: 55px; 588 | } 589 | 590 | .lang-container { 591 | display: flex; 592 | flex-direction: column; 593 | } 594 | 595 | /* footer-section */ 596 | 597 | .contact-form { 598 | width: 90vw; 599 | border-radius: 100px 0 0 0; 600 | display: flex; 601 | flex-direction: column; 602 | padding: 50px 80px 50px 80px; 603 | background-image: url("../images/footer-bg-pc.png"); 604 | background-repeat: no-repeat; 605 | background-size: cover; 606 | background-position: center; 607 | } 608 | 609 | .contact-form-info { 610 | width: 45%; 611 | } 612 | 613 | form { 614 | display: flex; 615 | flex-direction: column; 616 | } 617 | 618 | .contact-form input, 619 | textarea { 620 | width: 400px; 621 | margin-top: 18px; 622 | padding: 15px 16px; 623 | border-radius: 8px; 624 | border: none; 625 | } 626 | 627 | .contact-button { 628 | margin-left: 130px; 629 | } 630 | 631 | .error-msg { 632 | text-align: center; 633 | } 634 | 635 | .bottom-line { 636 | display: none; 637 | } 638 | 639 | /* Animations and transitions */ 640 | 641 | button { 642 | transition: background-color 2s; 643 | cursor: pointer; 644 | } 645 | 646 | button:hover { 647 | background-color: #6070ff; 648 | } 649 | 650 | .logo-top { 651 | padding-left: 100px; 652 | transition: transform 3s; 653 | transition: 1s ease-in-out; 654 | } 655 | 656 | .logo-top:hover { 657 | transform: rotate(360deg); 658 | } 659 | 660 | .snapshoot img:hover { 661 | cursor: pointer; 662 | transition: 1s ease-in-out; 663 | transform: scale(1.04); 664 | } 665 | 666 | .register-info { 667 | transition: transform 3s; 668 | } 669 | 670 | .register-info:hover { 671 | transform: translate(25px); 672 | } 673 | } 674 | -------------------------------------------------------------------------------- /css/popUp.css: -------------------------------------------------------------------------------- 1 | /* pop-up styles */ 2 | 3 | .popup-container { 4 | display: none; 5 | position: fixed; 6 | z-index: 1; 7 | overflow: auto; 8 | top: 0; 9 | left: 0; 10 | width: 100%; 11 | height: 100%; 12 | background-color: #c1c7d0e5; 13 | backdrop-filter: blur(2px); 14 | } 15 | 16 | .main-pu-container { 17 | margin: 40px 16px; 18 | background-color: white; 19 | border-radius: 16px; 20 | } 21 | 22 | .content-container { 23 | display: flex; 24 | flex-direction: column; 25 | margin: 10px 10px; 26 | } 27 | 28 | .heading-btn { 29 | display: flex; 30 | } 31 | 32 | .project-title-pu { 33 | color: #172b4d; 34 | font-weight: bold; 35 | font-size: 32px; 36 | line-height: 44px; 37 | margin-bottom: 10px; 38 | } 39 | 40 | .close-btn-pu { 41 | position: absolute; 42 | right: 0; 43 | top: 50px; 44 | background: transparent; 45 | cursor: pointer; 46 | width: 40px; 47 | height: 50px; 48 | border: none; 49 | font-weight: lighter; 50 | font-size: 20px; 51 | margin-right: 20px; 52 | } 53 | 54 | .devs-pu { 55 | display: flex; 56 | list-style-type: none; 57 | gap: 10px; 58 | } 59 | 60 | .dev-pu { 61 | font-style: normal; 62 | font-weight: 600; 63 | font-size: 13px; 64 | line-height: 16px; 65 | color: #344563; 66 | } 67 | 68 | .dev-pu2 { 69 | font-style: normal; 70 | font-weight: 600; 71 | font-size: 13px; 72 | line-height: 16px; 73 | color: #7a869a; 74 | } 75 | 76 | .project-img-pu { 77 | width: 100%; 78 | height: 100%; 79 | margin-top: 15px; 80 | } 81 | 82 | .project-info-pu { 83 | font-weight: normal; 84 | font-size: 15px; 85 | line-height: 24px; 86 | color: #344563; 87 | margin-top: 10px; 88 | } 89 | 90 | .tags-pu { 91 | display: flex; 92 | list-style-type: none; 93 | align-items: baseline; 94 | color: #6070ff; 95 | } 96 | 97 | .tag-pu { 98 | font-size: 15px; 99 | background-color: #ebebff; 100 | width: 80px; 101 | } 102 | 103 | .btn-container-pu { 104 | display: flex; 105 | margin-bottom: 20px; 106 | margin-top: 20px; 107 | } 108 | 109 | .btn-pu { 110 | color: #396df2; 111 | font-style: normal; 112 | text-align: center; 113 | font-weight: 500; 114 | font-size: 18px; 115 | text-decoration: none; 116 | border: 1.5px solid #396df2; 117 | width: 140px; 118 | margin-top: 15px; 119 | height: 50px; 120 | border-radius: 12px; 121 | } 122 | 123 | .btn-img-pu { 124 | margin-left: 10px; 125 | } 126 | 127 | .btn-pu.t { 128 | margin-left: 20px; 129 | } 130 | 131 | /* desktop pop-up styles */ 132 | 133 | @media (min-width: 992px) { 134 | .main-pu-container { 135 | margin: 40px 75px 40px 25px; 136 | } 137 | 138 | .project-title-pu { 139 | font-size: 40px; 140 | } 141 | 142 | .close-btn-pu { 143 | right: 60px; 144 | } 145 | 146 | .dev-pu { 147 | font-size: 14px; 148 | } 149 | 150 | .dev-pu2 { 151 | font-size: 14px; 152 | } 153 | 154 | .conatiner-pc-pu { 155 | display: flex; 156 | margin-top: 10px; 157 | justify-content: space-between; 158 | } 159 | 160 | .img-container-pu { 161 | background-color: #e5e5e5; 162 | height: 500px; 163 | margin-top: 25px; 164 | border-radius: 5px; 165 | } 166 | 167 | .project-img-pu { 168 | margin: 0 60px; 169 | width: 90%; 170 | height: 100%; 171 | } 172 | 173 | .content-container { 174 | margin: 1px 60px; 175 | } 176 | 177 | .project-info-pu { 178 | width: 75%; 179 | font-size: 17px; 180 | } 181 | 182 | .project-info-pu2 { 183 | margin-top: 10px; 184 | } 185 | 186 | .tags-pu { 187 | margin-left: 22px; 188 | } 189 | 190 | .tag-pu { 191 | font-size: 17px; 192 | } 193 | 194 | .btn-pu { 195 | margin-left: 20px; 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /images/Google Analytics Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/Google Analytics Screenshot.png -------------------------------------------------------------------------------- /images/Screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/Screenshot1.png -------------------------------------------------------------------------------- /images/Screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/Screenshot2.png -------------------------------------------------------------------------------- /images/Screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/Screenshot3.png -------------------------------------------------------------------------------- /images/Screenshot4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/Screenshot4.png -------------------------------------------------------------------------------- /images/angellist.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/btn-img-pu1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/btn-img-pu1.png -------------------------------------------------------------------------------- /images/btn-img-pu2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/btn-img-pu2.png -------------------------------------------------------------------------------- /images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/css.png -------------------------------------------------------------------------------- /images/footer-bg-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/footer-bg-mobile.png -------------------------------------------------------------------------------- /images/footer-bg-pc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/footer-bg-pc.png -------------------------------------------------------------------------------- /images/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/hamburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/hamburger.png -------------------------------------------------------------------------------- /images/header-bg-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/header-bg-mobile.png -------------------------------------------------------------------------------- /images/header-bg-pc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/header-bg-pc.png -------------------------------------------------------------------------------- /images/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/html.png -------------------------------------------------------------------------------- /images/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/js.png -------------------------------------------------------------------------------- /images/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/medium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/my-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/my-logo.png -------------------------------------------------------------------------------- /images/project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/project1.png -------------------------------------------------------------------------------- /images/project1pu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/project1pu.png -------------------------------------------------------------------------------- /images/project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/project2.png -------------------------------------------------------------------------------- /images/project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodechaser/portfolio/eda7ad0558d537d9499651e0b1302171aebdac86/images/project3.png -------------------------------------------------------------------------------- /images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | Portfolio 22 | 23 | 24 | 25 | 26 |
27 |
28 | My-Logo 29 | 54 |
55 |
56 |
57 | 58 |
59 |
60 |

I’m Ranjeet
Glad to see you!

61 |

62 | I’m a software developer! I can help you build a product , feature 63 | or website Look through some of my work and experience! If you like 64 | what you see and have a project you need coded, don’t hestiate to 65 | contact me. 66 |

67 | 68 | 87 |
88 |
89 | 90 |
91 |
92 |
93 |
94 |
95 | project one 96 |
97 |
98 |

Tonic

99 |
100 |

RANJEET

101 |

• Back End Dev • 2021

102 |
103 |

104 | A daily selection of privately personalized reads; no accounts or 105 | sign-ups required. 106 |

107 |
    108 |
  • html
    • 109 |
  • css
    • 110 |
  • javascript
    • 111 |
112 | 113 |
114 |
115 | 116 |
117 |
118 | project one 119 |
120 |
121 |

Multi-Post Stories

122 |
123 |

RANJEET

124 |

• Back End Dev • 2021

125 |
126 |

127 | Copy Experimental content creation feature that allows users to 128 | add to an existing story over the course. 129 |

130 |
    131 |
  • html
    • 132 |
  • css
    • 133 |
  • javascript
    • 134 |
135 | 136 |
137 |
138 |
139 |
140 | project one 141 |
142 |
143 |

Facebook 360

144 |
145 |

RANJEET

146 |

• Back End Dev • 2021

147 |
148 |

149 | Exploring the future of media in Facebook's first Virtual Reality 150 | app; a place to discover and enjoy 360 photos. 151 |

152 |
    153 |
  • html
    • 154 |
  • css
    • 155 |
  • javascript
    • 156 |
157 | 158 |
159 |
160 |
161 | 162 |
163 |
164 |

About
Myself

165 |

166 | Hello I’m a software developer! I can help you build a product , 167 | feature or website Look through some of my work and experience! If 168 | you like what you see and have a project you need coded, don’t 169 | hestiate to contact me. 170 |

171 | 172 | 191 | 192 |
193 |
194 |
Langguages
195 |
196 |
197 | language name 198 |

JavaScript

199 |
200 |
201 | language name 202 |

HTML

203 |
204 |
205 | language name 206 |

CSS

207 |
208 |
209 |
Frameworks
210 |
Skills
211 |
212 |
213 |
214 | 215 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | -------------------------------------------------------------------------------- /js/formValidation.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('.form-element'); 2 | const message = 'Email must contain only lower case characters'; 3 | 4 | function showMessage(input, message) { 5 | const msg = document.querySelector('.validation-msg'); 6 | msg.innerHTML = `

${message}

`; 7 | } 8 | 9 | function validateEmail(input) { 10 | const value = input.toLowerCase(); 11 | if (value.localeCompare(input) === 0) { 12 | return true; 13 | } 14 | return false; 15 | } 16 | 17 | form.addEventListener('submit', (event) => { 18 | const msg = document.querySelector('.validation-msg'); 19 | event.preventDefault(); 20 | const input = form.elements[1]; 21 | const emailValid = validateEmail(input.value); 22 | if (emailValid) { 23 | msg.remove(); 24 | form.submit(); 25 | form.reset(); 26 | } else { 27 | showMessage(input, message, false); 28 | } 29 | }); 30 | -------------------------------------------------------------------------------- /js/javascript.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector('.btn-open'); 2 | const button2 = document.querySelector('.btn-close'); 3 | const menuItems = document.querySelectorAll('.menu-item2'); 4 | 5 | function display() { 6 | const menuContainer = document.querySelector('.mobile-menu-container'); 7 | menuContainer.style.display = 'block'; 8 | const buttonContainer = document.querySelector('.btn-container-open'); 9 | buttonContainer.style.display = 'none'; 10 | } 11 | 12 | function display2() { 13 | const menuContainer = document.querySelector('.mobile-menu-container'); 14 | menuContainer.style.display = 'none'; 15 | const buttonContainer = document.querySelector('.btn-container-open'); 16 | buttonContainer.style.display = 'block'; 17 | } 18 | 19 | button.addEventListener('click', display); 20 | button2.addEventListener('click', display2); 21 | 22 | menuItems.forEach((item) => { 23 | item.addEventListener('click', display2); 24 | }); 25 | -------------------------------------------------------------------------------- /js/localStorage.js: -------------------------------------------------------------------------------- 1 | const name1 = document.querySelector('#name'); 2 | const email1 = document.querySelector('#email'); 3 | const message1 = document.querySelector('#msg'); 4 | 5 | const storeValues = (name1, email1, message1) => { 6 | const dataObject = JSON.stringify({ name1, email1, message1 }); 7 | localStorage.setItem('dataObject', dataObject); 8 | }; 9 | 10 | function populateStorage() { 11 | const formValues = JSON.parse(localStorage.getItem('dataObject')); 12 | if (formValues) { 13 | name1.value = formValues.name1; 14 | email1.value = formValues.email1; 15 | message1.value = formValues.message1; 16 | } 17 | } 18 | 19 | function getValues() { 20 | name1.addEventListener('input', () => storeValues(name1.value, email1.value, message1.value)); 21 | email1.addEventListener('input', () => storeValues(name1.value, email1.value, message1.value)); 22 | message1.addEventListener('input', () => storeValues(name1.value, email1.value, message1.value)); 23 | } 24 | 25 | populateStorage(); 26 | getValues(); 27 | -------------------------------------------------------------------------------- /js/popUp.js: -------------------------------------------------------------------------------- 1 | const projects = [ 2 | { 3 | title: 'Tonic', 4 | devs: ['Ranjeet', ' • backend', ' • 2021'], 5 | description: 6 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 7 | tags: ['html', 'css', 'javascript'], 8 | image: 'images/project1pu.png', 9 | liveVersion: 'See Live', 10 | sourceLink: 'See Source', 11 | btnImg1: 'images/btn-img-pu1.png', 12 | btnImg2: 'images/btn-img-pu2.png', 13 | }, 14 | 15 | { 16 | title: 'Multi-Post Stories', 17 | devs: ['Ranjeet', ' • backend', ' • 2021'], 18 | description: 19 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 20 | tags: ['html', 'css', 'javascript'], 21 | image: 'images/project2.png', 22 | liveVersion: 'See Live', 23 | sourceLink: 'See Source', 24 | btnImg1: 'images/btn-img-pu1.png', 25 | btnImg2: 'images/btn-img-pu2.png', 26 | }, 27 | 28 | { 29 | title: 'Facebook 360', 30 | devs: ['Ranjeet', ' • backend', ' • 2021'], 31 | description: 32 | "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 33 | tags: ['html', 'css', 'javascript'], 34 | image: 'images/project3.png', 35 | liveVersion: 'See Live', 36 | sourceLink: 'See Source', 37 | btnImg1: 'images/btn-img-pu1.png', 38 | btnImg2: 'images/btn-img-pu2.png', 39 | }, 40 | ]; 41 | 42 | const buttonOne = document.querySelector('.project-button.one'); 43 | const buttonTwo = document.querySelector('.project-button.two'); 44 | const buttonThree = document.querySelector('.project-button.three'); 45 | 46 | function close() { 47 | const container = document.querySelector('.popup-container'); 48 | container.style.display = 'none'; 49 | } 50 | 51 | function open(index) { 52 | const { 53 | title, 54 | devs, 55 | description, 56 | tags, 57 | image, 58 | liveVersion, 59 | sourceLink, 60 | btnImg1, 61 | btnImg2, 62 | } = projects[index]; 63 | const dev1 = devs[0]; 64 | const dev2 = devs[1]; 65 | const dev3 = devs[2]; 66 | const tags1 = tags[0]; 67 | const tags2 = tags[1]; 68 | const tags3 = tags[2]; 69 | const container = document.querySelector('.popup-container'); 70 | container.innerHTML = ` 71 |
72 |
73 |
74 |

${title}

75 | 76 |
77 | 82 |
83 | 84 |
85 |
86 |

${description}

87 |
88 |
    89 |
  • ${tags1}
    • 90 |
  • ${tags2}
    • 91 |
  • ${tags3}
    • 92 |
93 |
94 | 95 | 96 |
97 |
98 |
99 |
100 |
101 | 102 | `; 103 | container.style.display = 'block'; 104 | const buttonClose = document.querySelector('.close-btn-pu'); 105 | buttonClose.addEventListener('click', close); 106 | } 107 | 108 | buttonOne.addEventListener('click', () => { 109 | open(0); 110 | }); 111 | buttonTwo.addEventListener('click', () => { 112 | open(1); 113 | }); 114 | buttonThree.addEventListener('click', () => { 115 | open(2); 116 | }); 117 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "babel-eslint": "^10.1.0", 4 | "eslint": "^7.32.0", 5 | "eslint-config-airbnb-base": "^14.2.1", 6 | "eslint-plugin-import": "^2.25.4", 7 | "stylelint": "^13.13.1", 8 | "stylelint-config-standard": "^21.0.0", 9 | "stylelint-csstree-validator": "^1.9.0", 10 | "stylelint-scss": "^3.21.0" 11 | } 12 | } 13 | --------------------------------------------------------------------------------