├── README.md ├── assets ├── css │ ├── style.css │ └── swiper-bundle.min.css ├── img │ ├── Mrinmoy_abstract_CSS.jpg │ ├── Mrinmoy_abstract_HTML.jpg │ ├── about.jpg │ ├── blender.png │ ├── blob.svg │ ├── css.png │ ├── favicon_edited.png │ ├── html.png │ ├── illustrator.png │ ├── javascript.png │ ├── node.png │ ├── perfil.png │ ├── php.png │ ├── portfolio1.jpg │ ├── portfolio2.jpg │ ├── portfolio3.jpg │ ├── project.png │ ├── ps.png │ ├── python.png │ ├── react.png │ └── sql.png ├── js │ ├── main.js │ └── swiper-bundle.min.js └── pdf │ ├── Mrinmoy_abstract_CSS.pdf │ ├── Mrinmoy_abstract_HTML.pdf │ └── mrinmoy-cv.pdf ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | > ## Responsive Portfolio Website Mrinmoy 2 | 3 | 4 | - Responsive Personal Portfolio Website Using HTML CSS & JavaScript 5 | - Smooth scrolling in each section. 6 | - Includes a light and dark mode. 7 | - Developed first with the Mobile First methodology, then for desktop. 8 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 9 | - Thank You for visiting😀 10 | 11 | > ## Preview: 12 | ![Preview.png](https://github.com/MRINMOY662/Modern-Portfolio-Website-Template/blob/main/preview.png) 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*==================== GOOGLE FONTS ====================*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 3 | 4 | /*==================== VARIABLES CSS ====================*/ 5 | :root { 6 | --header-height: 3rem; 7 | 8 | /*========== Colors ==========*/ 9 | /* Change favorite color */ 10 | --hue-color: 225; 11 | /*Purple 250 - Green 142 - Blue 230 - Pink 340*/ 12 | 13 | /* HSL color mode */ 14 | --first-color: hsl(var(--hue-color), 69%, 61%); 15 | --first-color-second: hsl(var(--hue-color), 69%, 61%); 16 | --first-color-alt: hsl(var(--hue-color), 57%, 53%); 17 | --first-color-lighter: hsl(var(--hue-color), 92%, 85%); 18 | --title-color: hsl(var(--hue-color), 8%, 15%); 19 | --text-color: hsl(var(--hue-color), 8%, 45%); 20 | --text-color-light: hsl(var(--hue-color), 8%, 65%); 21 | --input-color: hsl(var(--hue-color), 70%, 96%); 22 | --body-color: hsl(var(--hue-color), 60%, 99%); 23 | --container-color: #fff; 24 | --scroll-bar-color: hsl(var(--hue-color), 12%, 90%); 25 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%); 26 | 27 | /*========== Font and typography ==========*/ 28 | --body-font: 'Poppins', sans-serif; 29 | 30 | /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */ 31 | --big-font-size: 2rem; 32 | --h1-font-size: 1.5rem; 33 | --h2-font-size: 1.25rem; 34 | --h3-font-size: 1.125rem; 35 | --normal-font-size: .938rem; 36 | --small-font-size: .813rem; 37 | --smaller-font-size: .75rem; 38 | 39 | /*========== Font weight ==========*/ 40 | --font-medium: 500; 41 | --font-semi-bold: 600; 42 | 43 | /*========== Margenes Bottom ==========*/ 44 | /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */ 45 | --mb-0-25: .25rem; 46 | --mb-0-5: .5rem; 47 | --mb-0-75: .75rem; 48 | --mb-1: 1rem; 49 | --mb-1-5: 1.5rem; 50 | --mb-2: 2rem; 51 | --mb-2-5: 2.5rem; 52 | --mb-3: 3rem; 53 | 54 | /*========== z index ==========*/ 55 | --z-tooltip: 10; 56 | --z-fixed: 100; 57 | --z-modal: 1000; 58 | } 59 | 60 | /* Font size for large devices */ 61 | @media screen and (min-width: 968px) { 62 | :root { 63 | --big-font-size: 3rem; 64 | --h1-font-size: 2.25rem; 65 | --h2-font-size: 1.5rem; 66 | --h3-font-size: 1.25rem; 67 | --normal-font-size: 1rem; 68 | --small-font-size: .875rem; 69 | --smaller-font-size: .813rem; 70 | } 71 | } 72 | 73 | /*========== Variables Dark theme ==========*/ 74 | body.dark-theme { 75 | /* HSL color mode */ 76 | --first-color-second: hsl(var(--hue-color), 30%, 8%); 77 | --title-color: hsl(var(--hue-color), 8%, 95%); 78 | --text-color: hsl(var(--hue-color), 8%, 75%); 79 | 80 | --input-color: hsl(var(--hue-color), 29%, 16%); 81 | --body-color: hsl(var(--hue-color), 28%, 12%); 82 | --container-color: hsl(var(--hue-color), 29%, 16%); 83 | --scroll-bar-color: hsl(var(--hue-color), 12%, 48%); 84 | --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%); 85 | } 86 | 87 | /*========== Button Dark/Light ==========*/ 88 | .nav__btns { 89 | display: flex; 90 | align-items: center; 91 | } 92 | 93 | .change-theme { 94 | font-size: 1.25rem; 95 | color: var(--title-color); 96 | margin-right: var(--mb-1); 97 | cursor: pointer; 98 | } 99 | 100 | .change-theme:hover { 101 | color: var(--first-color); 102 | } 103 | 104 | 105 | 106 | 107 | /*==================== BASE ====================*/ 108 | * { 109 | box-sizing: border-box; 110 | padding: 0; 111 | margin: 0; 112 | } 113 | 114 | html { 115 | scroll-behavior: smooth; 116 | } 117 | 118 | body { 119 | margin: 0 0 var(--header-height) 0; 120 | font-family: var(--body-font); 121 | font-size: var(--normal-font-size); 122 | background-color: var(--body-color); 123 | color: var(--text-color); 124 | } 125 | 126 | h1, 127 | h2, 128 | h3, 129 | h4 { 130 | color: var(--title-color); 131 | font-weight: var(--font-semi-bold); 132 | } 133 | 134 | ul { 135 | list-style: none; 136 | } 137 | 138 | a { 139 | text-decoration: none; 140 | } 141 | 142 | img { 143 | max-width: 100%; 144 | height: auto; 145 | } 146 | 147 | /*==================== REUSABLE CSS CLASSES ====================*/ 148 | .section { 149 | padding: 2rem 0 4rem; 150 | } 151 | 152 | .section__title { 153 | font-size: var(--h1-font-size); 154 | color: var(--title-color); 155 | } 156 | 157 | .section__subtitle { 158 | display: block; 159 | font-size: var(--small-font-size); 160 | margin-bottom: var(--mb-3); 161 | } 162 | 163 | .section__title, 164 | .section__subtitle { 165 | text-align: center; 166 | } 167 | 168 | /*==================== LAYOUT ====================*/ 169 | .container { 170 | max-width: 768px; 171 | margin-left: var(--mb-1-5); 172 | margin-right: var(--mb-1-5); 173 | } 174 | 175 | .grid { 176 | display: grid; 177 | gap: 1.5rem; 178 | } 179 | 180 | .header { 181 | width: 100%; 182 | position: fixed; 183 | bottom: 0; 184 | left: 0; 185 | z-index: var(--z-fixed); 186 | background-color: var(--body-color); 187 | } 188 | 189 | /*==================== NAV ====================*/ 190 | .nav { 191 | max-width: 968px; 192 | height: var(--header-height); 193 | display: flex; 194 | justify-content: space-between; 195 | align-items: center; 196 | } 197 | 198 | .nav__logo, 199 | .nav__toggle { 200 | color: var(--title-color); 201 | font-weight: var(--font-medium); 202 | } 203 | 204 | .nav__logo:hover { 205 | color: var(--first-color); 206 | } 207 | 208 | .nav__toggle { 209 | font-size: 1.1rem; 210 | cursor: pointer; 211 | 212 | } 213 | 214 | .nav__toggle:hover { 215 | color: var(--first-color); 216 | } 217 | 218 | @media screen and (max-width:767px) { 219 | .nav__menu { 220 | position: fixed; 221 | bottom: -100%; 222 | width: 100%; 223 | background-color: var(--body-color); 224 | padding: 2rem 1.5rem 4rem; 225 | box-shadow: 0 -1px 4px rgba(0, 0, 0, .15); 226 | border-radius: 1.5rem 1.5rem 0 0; 227 | transition: .3s; 228 | } 229 | } 230 | 231 | .nav__list { 232 | grid-template-columns: repeat(3, 1fr); 233 | gap: 2rem; 234 | } 235 | 236 | .nav__link { 237 | display: flex; 238 | flex-direction: column; 239 | align-items: center; 240 | font-size: var(--small-font-size); 241 | color: var(--title-color); 242 | font-weight: var(--font-medium); 243 | } 244 | 245 | .nav__link:hover { 246 | color: var(--first-color); 247 | } 248 | 249 | .nav__icon { 250 | font-size: 1.2rem; 251 | } 252 | 253 | .nav__close { 254 | position: absolute; 255 | right: 1.3rem; 256 | bottom: .5rem; 257 | font-size: 1.5rem; 258 | cursor: pointer; 259 | color: var(--first-color); 260 | } 261 | 262 | .nav__close:hover { 263 | color: var(--first-color-alt); 264 | } 265 | 266 | /* show menu */ 267 | .show-menu { 268 | bottom: 0; 269 | } 270 | 271 | /* Active link */ 272 | .active-link { 273 | color: var(--first-color); 274 | } 275 | 276 | /* Change background header */ 277 | .scroll-header { 278 | box-shadow: 0 -1px 4px rgba(0, 0, 0, .15); 279 | } 280 | 281 | /*==================== HOME ====================*/ 282 | .home__container { 283 | gap: 1rem; 284 | } 285 | 286 | .home__content { 287 | grid-template-columns: .5fr 3fr; 288 | padding-top: 3.5rem; 289 | align-items: center; 290 | } 291 | 292 | .home__social { 293 | display: grid; 294 | grid-template-columns: max-content; 295 | row-gap: 1rem; 296 | } 297 | 298 | .home__social-icon { 299 | font-size: 1.25rem; 300 | color: var(--first-color); 301 | } 302 | 303 | .home__social-icon:hover { 304 | color: var(--first-color-alt); 305 | transform: translateY(-.25rem); 306 | transition: 1.5s; 307 | } 308 | 309 | .home__blob { 310 | width: 200px; 311 | fill: var(--first-color); 312 | } 313 | 314 | .home__blob-img { 315 | width: 170px; 316 | } 317 | 318 | .home__data { 319 | grid-column: 1/3; 320 | } 321 | 322 | .home__title { 323 | font-size: var(--big-font-size); 324 | } 325 | 326 | .home__subtitle { 327 | font-size: var(--h3-font-size); 328 | color: var(--text-color); 329 | font-weight: var(--font-medium); 330 | margin-bottom: var(--mb-0-75); 331 | } 332 | 333 | .home__description { 334 | margin-bottom: var(--mb-2); 335 | } 336 | 337 | .home__scroll-button { 338 | color: var(--first-color); 339 | transition: .3s; 340 | } 341 | 342 | .home__scroll-button:hover { 343 | transform: translateY(0.25rem) 344 | } 345 | 346 | .home__scroll-mouse { 347 | font-size: 2rem; 348 | } 349 | 350 | .home__scroll-name { 351 | font-size: var(--small-font-size); 352 | color: var(--title-color); 353 | font-weight: var(--font-medium); 354 | margin-right: var(--mb-0-25); 355 | } 356 | 357 | .home__scroll-arrow { 358 | font-size: 1.25rem; 359 | } 360 | 361 | /*==================== BUTTONS ====================*/ 362 | .button { 363 | display: inline-block; 364 | background-color: var(--first-color); 365 | color: #fff; 366 | padding: 1rem; 367 | border-radius: .5rem; 368 | font-weight: var(--font-medium); 369 | } 370 | 371 | .button:hover { 372 | background-color: var(--first-color-alt); 373 | } 374 | 375 | .button__icon { 376 | font-size: 1.25rem; 377 | margin-left: var(--mb-0-5); 378 | transition: .3s; 379 | } 380 | 381 | .button--white { 382 | background-color: #fff; 383 | color: var(--first-color); 384 | } 385 | 386 | .button--white:hover { 387 | background-color: #fff; 388 | } 389 | 390 | .button--flex { 391 | display: inline-flex; 392 | align-items: center; 393 | } 394 | 395 | .button--small { 396 | padding: .75rem 1rem; 397 | } 398 | 399 | .button--link { 400 | padding: 0; 401 | background: transparent; 402 | color: var(--first-color); 403 | } 404 | 405 | .button--link:hover { 406 | background-color: transparent; 407 | color: var(--first-color); 408 | } 409 | 410 | /*==================== ABOUT ====================*/ 411 | .about__img { 412 | width: 200px; 413 | border-radius: .5rem; 414 | justify-self: center; 415 | align-self: center; 416 | } 417 | 418 | .about__description { 419 | text-align: center; 420 | margin-bottom: var(--mb-2-5); 421 | } 422 | 423 | .about_info { 424 | display: flex; 425 | justify-content: space-evenly; 426 | margin-bottom: var(--mb-2-5); 427 | } 428 | 429 | .about__info-title { 430 | font-size: var(--h2-font-size); 431 | font-weight: var(--font-semi-bold); 432 | color: var(--title-color); 433 | } 434 | 435 | .about__info-name { 436 | font-size: var(--smaller-font-size); 437 | } 438 | 439 | .about__info-title, 440 | .about__info-name { 441 | display: block; 442 | text-align: center; 443 | } 444 | 445 | .about__buttons { 446 | display: flex; 447 | justify-content: center; 448 | } 449 | 450 | /*==================== SKILLS ====================*/ 451 | .skills__container { 452 | row-gap: 0; 453 | } 454 | 455 | .skills__header { 456 | display: flex; 457 | align-items: center; 458 | margin-bottom: var(--mb-2-5); 459 | cursor: pointer; 460 | } 461 | 462 | .skills__icon, 463 | .skills__arrow { 464 | font-size: 2rem; 465 | color: var(--first-color); 466 | } 467 | 468 | .skills__icon { 469 | margin-right: var(--mb-0-75); 470 | } 471 | 472 | .skills__title { 473 | font-size: var(--h3-font-size); 474 | } 475 | 476 | .skills__subtitle { 477 | font-size: var(--small-font-size); 478 | color: var(--text-color-light); 479 | } 480 | 481 | .skills__arrow { 482 | margin-left: auto; 483 | transition: .4s; 484 | } 485 | 486 | .skills__list { 487 | row-gap: 1.5rem; 488 | padding-left: 2.7rem; 489 | } 490 | 491 | .skills__titles { 492 | display: flex; 493 | justify-content: space-between; 494 | margin-bottom: var(--mb-0-5); 495 | } 496 | 497 | .skills__name { 498 | font-size: var(--normal-font-size); 499 | font-weight: var(--font-medium); 500 | } 501 | 502 | 503 | .skills__bar, 504 | .skills__percentage { 505 | height: 5px; 506 | border-radius: .25rem; 507 | } 508 | 509 | .skills__bar { 510 | background-color: var(--first-color-lighter); 511 | } 512 | 513 | .skills__percentage { 514 | display: block; 515 | background-color: var(--first-color); 516 | } 517 | 518 | .skills__html { 519 | width: 90%; 520 | } 521 | 522 | .skills__css { 523 | width: 70%; 524 | } 525 | 526 | .skills__js { 527 | width: 60%; 528 | } 529 | 530 | .skills__react { 531 | width: 40%; 532 | } 533 | 534 | .skills__php { 535 | width: 90%; 536 | } 537 | 538 | .skills__mysql { 539 | width: 72%; 540 | } 541 | 542 | .skills__node { 543 | width: 58%; 544 | } 545 | 546 | .skills__python { 547 | width: 94%; 548 | } 549 | 550 | .skills__blender { 551 | width: 50%; 552 | } 553 | 554 | .skills__photoshop { 555 | width: 42%; 556 | } 557 | 558 | .skills__adobeillustrator { 559 | width: 62%; 560 | } 561 | 562 | .skills__close .skills__list { 563 | height: 0; 564 | overflow: hidden; 565 | } 566 | 567 | .skills__open .skills__list { 568 | height: max-content; 569 | margin-bottom: var(--mb-2-5); 570 | } 571 | 572 | .skills__open .skills__arrow { 573 | transform: rotate(-180deg); 574 | } 575 | 576 | /*==================== QUALIFICATION ====================*/ 577 | 578 | 579 | /*==================== SERVICES ====================*/ 580 | .services__container { 581 | gap: 1.5rem; 582 | grid-template-columns: repeat(2, 1fr); 583 | } 584 | 585 | .services__content { 586 | position: relative; 587 | background-color: var(--container-color); 588 | padding: 3.5rem .5rem 1.25rem 1.5rem; 589 | border-radius: .25rem; 590 | box-shadow: 0 2px 4px rgba(0, 0, 0, .15); 591 | transition: .3s; 592 | } 593 | 594 | .services:hover { 595 | box-shadow: 0 4px 8px rgba(0, 0, 0, .15); 596 | } 597 | 598 | .services__icon { 599 | display: block; 600 | font-size: 1.5rem; 601 | color: var(--first-color); 602 | margin-bottom: var(--mb-1); 603 | } 604 | 605 | .services__title { 606 | font-size: var(--h3-font-size); 607 | margin-bottom: var(--mb-1); 608 | font-weight: var(--font-medium); 609 | } 610 | 611 | .services__button { 612 | cursor: pointer; 613 | font-size: var(--small-font-size); 614 | } 615 | 616 | .services__button:hover .button__icon { 617 | transform: translateX(.25rem); 618 | } 619 | 620 | .services__modal { 621 | position: fixed; 622 | top: 0; 623 | left: 0; 624 | right: 0; 625 | bottom: 0; 626 | background-color: rgba(0, 0, 0, .5); 627 | display: flex; 628 | align-items: center; 629 | justify-content: center; 630 | padding: 0 1rem; 631 | z-index: var(--z-modal); 632 | opacity: 0; 633 | visibility: hidden; 634 | transition: .3s; 635 | } 636 | 637 | .services__modal-content { 638 | position: relative; 639 | background-color: var(--container-color); 640 | padding: 1.5rem; 641 | border-radius: .5rem; 642 | } 643 | 644 | .services__modal-services { 645 | row-gap: 1rem; 646 | } 647 | 648 | .service__modal-service { 649 | display: flex; 650 | } 651 | 652 | .services__modal-title { 653 | font-size: var(--h3-font-size); 654 | font-weight: var(--font-medium); 655 | margin-bottom: var(--mb-1-5); 656 | } 657 | 658 | .services__modal-close { 659 | position: absolute; 660 | top: 1rem; 661 | right: 1rem; 662 | font-size: 1.5rem; 663 | color: var(--first-color); 664 | cursor: pointer; 665 | } 666 | 667 | .services__modal-icon { 668 | color: var(--first-color); 669 | margin-right: var(--mb-0-25); 670 | } 671 | 672 | /* Active Modal */ 673 | .active-modal { 674 | opacity: 1; 675 | visibility: visible; 676 | } 677 | 678 | /*==================== PORTFOLIO ====================*/ 679 | .portfolio__container { 680 | overflow: initial; 681 | } 682 | 683 | .portfolio__content { 684 | padding: 0 1.5rem; 685 | } 686 | 687 | .portfolio__img { 688 | width: 265px; 689 | border-radius: .5rem; 690 | justify-self: center; 691 | } 692 | 693 | .portfolio__title { 694 | font-size: var(--h3-font-size); 695 | margin-bottom: var(--mb-0-5); 696 | } 697 | 698 | .portfolio__description { 699 | margin-bottom: var(--mb-0-75); 700 | } 701 | 702 | .portfolio__button:hover .button__icon { 703 | transform: translateX(.25rem); 704 | } 705 | 706 | .swiper-button-prev::after, 707 | .swiper-button-next::after { 708 | content: ''; 709 | } 710 | 711 | .swiper-portfolio-icon { 712 | font-size: 2rem; 713 | color: var(--first-color); 714 | } 715 | 716 | .swiper-button-prev { 717 | left: -.5rem; 718 | } 719 | 720 | .swiper-button-next { 721 | right: -.5rem; 722 | } 723 | 724 | .swiper-container-horizontal>.swiper-pagination-bullets { 725 | bottom: -2.5rem; 726 | } 727 | 728 | .swiper-pagination-bullet-active { 729 | background-color: var(--first-color); 730 | } 731 | 732 | .swiper-button-prev, 733 | .swiper-button-next, 734 | .swiper-pagination-bullet { 735 | outline: none; 736 | } 737 | 738 | /*==================== PROJECT IN MIND ====================*/ 739 | .project { 740 | text-align: center; 741 | } 742 | 743 | .project__bg { 744 | background-color: var(--first-color-second); 745 | padding-top: 3rem; 746 | } 747 | 748 | .project__title { 749 | font-size: var(--h2-font-size); 750 | margin-bottom: var(--mb-0-75); 751 | } 752 | 753 | .project__description { 754 | margin-bottom: var(--mb-1-5); 755 | } 756 | 757 | .project__title, 758 | .project__description { 759 | color: #fff; 760 | } 761 | 762 | .project__img { 763 | width: 232px; 764 | justify-self: center; 765 | } 766 | 767 | 768 | 769 | /*==================== TESTIMONIAL ====================*/ 770 | .testimonial__data, 771 | .testimonial__header { 772 | display: flex; 773 | } 774 | 775 | .testimonial__data { 776 | justify-content: space-between; 777 | margin-bottom: var(--mb-1); 778 | } 779 | 780 | .testimonial__img { 781 | width: 60px; 782 | height: 60px; 783 | border-radius: 50%; 784 | margin-right: var(--mb-0-75); 785 | } 786 | 787 | .testimonial__name { 788 | font-size: var(--h3-font-size); 789 | font-weight: var(--font-medium); 790 | } 791 | 792 | .testimonial__client { 793 | font-size: var(--small-font-size); 794 | color: var(--text-color-light); 795 | } 796 | 797 | .testimonial__description { 798 | margin-bottom: var(--mb-2-5); 799 | } 800 | 801 | .swiper-container .swiper-pagination-testimonial { 802 | bottom: 0; 803 | } 804 | 805 | 806 | /*==================== CONTACT ME ====================*/ 807 | .contact__container { 808 | row-gap: 3rem; 809 | } 810 | 811 | .contact__information { 812 | display: flex; 813 | margin-bottom: var(--mb-2); 814 | } 815 | 816 | .contact__icon { 817 | font-size: 2rem; 818 | color: var(--first-color); 819 | margin-right: var(--mb-0-75); 820 | } 821 | 822 | .contact__title { 823 | font-size: var(--h3-font-size); 824 | font-weight: var(--font-medium); 825 | } 826 | 827 | .contact__subtitle { 828 | font-size: var(--small-font-size); 829 | color: var(--text-color-light); 830 | } 831 | 832 | .contact__content { 833 | background-color: var(--input-color); 834 | border-radius: .5rem; 835 | padding: .75rem 1rem .25rem; 836 | } 837 | 838 | .contact__label { 839 | font-size: var(--smaller-font-size); 840 | color: var(--title-color); 841 | } 842 | 843 | .contact__input { 844 | width: 100%; 845 | background-color: var(--input-color); 846 | color: var(--text-color); 847 | font-family: var(--body-font); 848 | font-size: var(--normal-font-size); 849 | border: none; 850 | outline: none; 851 | padding: .25rem .5rem .5rem 0; 852 | } 853 | 854 | /*==================== FOOTER ====================*/ 855 | .footer { 856 | padding-top: 2rem; 857 | } 858 | 859 | .footer__container { 860 | row-gap: 3.5rem; 861 | } 862 | 863 | .footer__bg { 864 | background-color: var(--first-color); 865 | padding: 2rem 0 3rem; 866 | } 867 | 868 | .footer__title { 869 | font-size: var(--h1-font-size); 870 | margin-bottom: var(--mb-0-25); 871 | } 872 | 873 | .footer__subtitle { 874 | font-size: var(--small-font-size); 875 | } 876 | 877 | .footer__links { 878 | display: flex; 879 | flex-direction: column; 880 | row-gap: 1.5rem; 881 | } 882 | 883 | .footer__link:hover { 884 | color: var(--first-color-lighter); 885 | } 886 | 887 | .footer__social { 888 | font-size: 1.25rem; 889 | margin-right: var(--mb-1-5); 890 | } 891 | 892 | footer .footer__social a:hover { 893 | color: var(--first-color-lighter); 894 | } 895 | 896 | .footer__copy { 897 | font-size: var(--smaller-font-size); 898 | text-align: center; 899 | color: var(--text-color-light); 900 | margin-top: var(--mb-3); 901 | } 902 | 903 | .footer__title, 904 | .footer__subtitle, 905 | .footer__link, 906 | .footer__social { 907 | color: #fff; 908 | } 909 | 910 | 911 | /*========== SCROLL UP ==========*/ 912 | .scrollup { 913 | position: fixed; 914 | right: 1rem; 915 | bottom: -20%; 916 | background-color: var(--first-color); 917 | opacity: .8; 918 | padding: 0 .3rem; 919 | border-radius: .4rem; 920 | z-index: var(--z-tooltip); 921 | transition: .4s; 922 | } 923 | 924 | .scrollup:hover { 925 | background-color: var(--first-color-alt); 926 | } 927 | 928 | .scrollup__icon { 929 | font-size: 1.5rem; 930 | color: #fff; 931 | } 932 | 933 | 934 | 935 | /* Show scroll */ 936 | .show-scroll { 937 | bottom: 5rem; 938 | } 939 | 940 | /*========== SCROLL BAR ==========*/ 941 | ::-webkit-scrollbar { 942 | width: 0.6rem; 943 | background-color: var(--scroll-bar-color); 944 | border-radius: .5rem; 945 | } 946 | 947 | ::-webkit-scrollbar-thumb { 948 | background-color: var(--scroll-thumb-color); 949 | border-radius: .5rem; 950 | } 951 | 952 | ::-webkit-scrollbar-thumb:hover { 953 | background-color: var(--text-color-light); 954 | } 955 | 956 | /*==================== MEDIA QUERIES ====================*/ 957 | /* For small devices */ 958 | @media screen and (max-width: 350px) { 959 | .container { 960 | margin-left: var(--mb-1); 961 | margin-right: var(--mb-1); 962 | } 963 | 964 | .nav__menu { 965 | padding: 2rem .25rem 4rem; 966 | } 967 | 968 | .nav__list { 969 | column-gap: 0; 970 | } 971 | 972 | .home__content { 973 | grid-template-columns: .25fr 3fr; 974 | } 975 | 976 | .home__blob { 977 | width: 180px; 978 | } 979 | 980 | .skills__title { 981 | font-size: var(--normal-font-size); 982 | } 983 | 984 | .services__container { 985 | grid-template-columns: max-content; 986 | justify-content: center; 987 | } 988 | 989 | .services__content { 990 | padding-right: 3.5rem; 991 | } 992 | 993 | .services__modal { 994 | padding: 0 .5rem; 995 | } 996 | 997 | .project__img { 998 | width: 200px; 999 | } 1000 | 1001 | .swiper-error{ 1002 | visibility: hidden; 1003 | } 1004 | 1005 | .testimonial__data, 1006 | .testimonial__header { 1007 | flex-direction: column; 1008 | align-items: center; 1009 | } 1010 | 1011 | .testimonial__img { 1012 | margin-right: 0; 1013 | margin-bottom: var(--mb-0-25); 1014 | } 1015 | 1016 | .testimonial__data, 1017 | .testimonial__description { 1018 | text-align: center; 1019 | } 1020 | } 1021 | 1022 | /* For medium devices */ 1023 | @media screen and (min-width: 568px) { 1024 | .home__content { 1025 | grid-template-columns: max-content 1fr 1fr; 1026 | } 1027 | 1028 | .home__data { 1029 | grid-column: initial; 1030 | } 1031 | 1032 | .home__img { 1033 | order: 1; 1034 | justify-self: center; 1035 | } 1036 | 1037 | .about__container, 1038 | .skills__container, 1039 | .portfolio__content, 1040 | .project__container, 1041 | .contact__container, 1042 | .footer__container { 1043 | grid-template-columns: repeat(2, 1fr); 1044 | } 1045 | } 1046 | 1047 | @media screen and (min-width: 768px) { 1048 | .container { 1049 | margin-left: auto; 1050 | margin-right: auto; 1051 | } 1052 | 1053 | body { 1054 | margin: 0; 1055 | } 1056 | 1057 | .section { 1058 | padding: 6rem 0 2rem; 1059 | } 1060 | 1061 | .section__subtitle { 1062 | margin-bottom: 4rem; 1063 | } 1064 | 1065 | .header { 1066 | top: 0; 1067 | bottom: initial; 1068 | } 1069 | 1070 | .header, 1071 | .main, 1072 | .footer__container { 1073 | padding: 0 1rem; 1074 | } 1075 | 1076 | .nav { 1077 | height: calc(var(--header-height) + 1.5rem); 1078 | column-gap: 1rem; 1079 | } 1080 | 1081 | .nav__icon, 1082 | .nav__close, 1083 | .nav__toggle { 1084 | display: none; 1085 | } 1086 | 1087 | .nav__list { 1088 | display: flex; 1089 | column-gap: 2rem; 1090 | } 1091 | 1092 | .nav__menu { 1093 | margin-left: auto; 1094 | } 1095 | 1096 | .change-theme { 1097 | margin: 0; 1098 | } 1099 | 1100 | .home__container { 1101 | row-gap: 5rem; 1102 | } 1103 | 1104 | .home__content { 1105 | padding-top: 5.5rem; 1106 | column-gap: 2rem; 1107 | } 1108 | 1109 | .home__blob { 1110 | padding-top: 5.5rem; 1111 | } 1112 | 1113 | .home { 1114 | display: block; 1115 | } 1116 | 1117 | .home__scroll-button { 1118 | margin-left: 3rem; 1119 | } 1120 | 1121 | .about__container { 1122 | column-gap: 5rem; 1123 | } 1124 | 1125 | .about__img { 1126 | width: 350px; 1127 | } 1128 | 1129 | .about__description { 1130 | text-align: initial; 1131 | } 1132 | 1133 | .about__info { 1134 | justify-content: space-between; 1135 | } 1136 | 1137 | .about__buttons { 1138 | justify-content: initial; 1139 | } 1140 | 1141 | .services__container { 1142 | grid-template-columns: repeat(3, 218px); 1143 | justify-content: center; 1144 | } 1145 | 1146 | .services__icon { 1147 | font-size: 2rem; 1148 | } 1149 | 1150 | .services__content { 1151 | padding: 6rem 0 2rem 2.5rem; 1152 | } 1153 | 1154 | .services__modal-content { 1155 | width: 450px; 1156 | } 1157 | 1158 | .swiper-error{ 1159 | visibility: hidden; 1160 | } 1161 | 1162 | .portfolio__img { 1163 | width: 320px; 1164 | } 1165 | 1166 | .portfolio__content { 1167 | align-items: center; 1168 | } 1169 | 1170 | .project { 1171 | text-align: initial; 1172 | } 1173 | 1174 | .project__bg { 1175 | background: none; 1176 | } 1177 | 1178 | .project__container { 1179 | background-color: var(--first-color-second); 1180 | border-radius: 1rem; 1181 | padding: 3rem 2.5rem 0; 1182 | grid-template-columns: 1fr max-content; 1183 | column-gap: 3rem; 1184 | } 1185 | 1186 | .project__data { 1187 | padding-top: .8rem; 1188 | } 1189 | 1190 | .footer__container { 1191 | grid-template-columns: repeat(3, 1fr); 1192 | } 1193 | 1194 | .footer__bg { 1195 | padding: 3rem 0 3.5rem; 1196 | } 1197 | 1198 | .footer__links { 1199 | flex-direction: row; 1200 | column-gap: 2rem; 1201 | } 1202 | 1203 | .footer__socials { 1204 | justify-self: flex-end; 1205 | } 1206 | 1207 | .footer__copy { 1208 | margin-top: 4.5rem; 1209 | } 1210 | } 1211 | 1212 | 1213 | 1214 | /* For large devices */ 1215 | @media screen and (min-width: 1024px) { 1216 | 1217 | .header, 1218 | .main, 1219 | .footer__container { 1220 | padding: 0; 1221 | } 1222 | 1223 | .home__blob { 1224 | width: 320px; 1225 | } 1226 | 1227 | .home__social { 1228 | transform: translateX(-6rem); 1229 | } 1230 | 1231 | .services__container { 1232 | grid-template-columns: repeat(3, 238px); 1233 | } 1234 | 1235 | .swiper-error{ 1236 | visibility: visible; 1237 | } 1238 | 1239 | .portfolio__content { 1240 | column-gap: 5rem; 1241 | } 1242 | 1243 | .swiper-portfolio-icon { 1244 | font-size: 3.5rem; 1245 | } 1246 | 1247 | .swiper-button-prev { 1248 | left: -3.5rem; 1249 | } 1250 | 1251 | .swiper-button-next { 1252 | right: -3.5rem; 1253 | } 1254 | 1255 | .swiper-container-horizontal>.swiper-pagination-bullets { 1256 | bottom: -4.5rem; 1257 | } 1258 | 1259 | .contact__form { 1260 | width: 460px; 1261 | } 1262 | 1263 | .contact__inputs { 1264 | grid-template-columns: repeat(2, 1fr); 1265 | } 1266 | } 1267 | 1268 | /*==================== Waving hand ====================*/ 1269 | .wave { 1270 | animation-name: wave-animation; 1271 | /* Refers to the name of your @keyframes element below */ 1272 | animation-duration: 2.5s; 1273 | /* Change to speed up or slow down */ 1274 | animation-iteration-count: infinite; 1275 | /* Never stop waving :) */ 1276 | transform-origin: 70% 70%; 1277 | /* Pivot around the bottom-left palm */ 1278 | display: inline-block; 1279 | } 1280 | 1281 | @keyframes wave-animation { 1282 | 0% { 1283 | transform: rotate(0.0deg) 1284 | } 1285 | 1286 | 10% { 1287 | transform: rotate(14.0deg) 1288 | } 1289 | 1290 | /* The following five values can be played with to make the waving more or less extreme */ 1291 | 20% { 1292 | transform: rotate(-8.0deg) 1293 | } 1294 | 1295 | 30% { 1296 | transform: rotate(14.0deg) 1297 | } 1298 | 1299 | 40% { 1300 | transform: rotate(-4.0deg) 1301 | } 1302 | 1303 | 50% { 1304 | transform: rotate(10.0deg) 1305 | } 1306 | 1307 | 60% { 1308 | transform: rotate(0.0deg) 1309 | } 1310 | 1311 | /* Reset for the last half to pause */ 1312 | 100% { 1313 | transform: rotate(0.0deg) 1314 | } 1315 | } 1316 | 1317 | /*==================== Skills logo ====================*/ 1318 | .skills__logo:hover{ 1319 | transform: translateY(-.25rem); 1320 | transition: 1s; 1321 | } 1322 | -------------------------------------------------------------------------------- /assets/css/swiper-bundle.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 6.5.8 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * https://swiperjs.com 5 | * 6 | * Copyright 2014-2021 Vladimir Kharlampidi 7 | * 8 | * Released under the MIT License 9 | * 10 | * Released on: April 23, 2021 11 | */ 12 | 13 | @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} -------------------------------------------------------------------------------- /assets/img/Mrinmoy_abstract_CSS.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/Mrinmoy_abstract_CSS.jpg -------------------------------------------------------------------------------- /assets/img/Mrinmoy_abstract_HTML.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/Mrinmoy_abstract_HTML.jpg -------------------------------------------------------------------------------- /assets/img/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/about.jpg -------------------------------------------------------------------------------- /assets/img/blender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/blender.png -------------------------------------------------------------------------------- /assets/img/blob.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/css.png -------------------------------------------------------------------------------- /assets/img/favicon_edited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/favicon_edited.png -------------------------------------------------------------------------------- /assets/img/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/html.png -------------------------------------------------------------------------------- /assets/img/illustrator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/illustrator.png -------------------------------------------------------------------------------- /assets/img/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/javascript.png -------------------------------------------------------------------------------- /assets/img/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/node.png -------------------------------------------------------------------------------- /assets/img/perfil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/perfil.png -------------------------------------------------------------------------------- /assets/img/php.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/php.png -------------------------------------------------------------------------------- /assets/img/portfolio1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/portfolio1.jpg -------------------------------------------------------------------------------- /assets/img/portfolio2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/portfolio2.jpg -------------------------------------------------------------------------------- /assets/img/portfolio3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/portfolio3.jpg -------------------------------------------------------------------------------- /assets/img/project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/project.png -------------------------------------------------------------------------------- /assets/img/ps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/ps.png -------------------------------------------------------------------------------- /assets/img/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/python.png -------------------------------------------------------------------------------- /assets/img/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/react.png -------------------------------------------------------------------------------- /assets/img/sql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/img/sql.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*==================== MENU SHOW Y HIDDEN ====================*/ 2 | const navMenu = document.getElementById('nav-menu'), 3 | navToggle = document.getElementById('nav-toggle'), 4 | navClose = document.getElementById('nav-close') 5 | /*===== MENU SHOW =====*/ 6 | /* Validate if constant exists */ 7 | if (navToggle) { 8 | navToggle.addEventListener('click', () => { 9 | navMenu.classList.add('show-menu') 10 | }) 11 | } 12 | 13 | /*===== MENU HIDDEN =====*/ 14 | /* Validate if constant exists */ 15 | if (navClose) { 16 | navClose.addEventListener('click', () => { 17 | navMenu.classList.remove('show-menu') 18 | }) 19 | } 20 | 21 | /*==================== REMOVE MENU MOBILE ====================*/ 22 | const navLink = document.querySelectorAll('.nav__link') 23 | 24 | function linkAction() { 25 | const navMenu = document.getElementById('nav-menu') 26 | // When we click on each nav__link, we remove the show-menu class 27 | navMenu.classList.remove('show-menu') 28 | } 29 | navLink.forEach(n => n.addEventListener('click', linkAction)) 30 | /*==================== ACCORDION SKILLS ====================*/ 31 | const skillsContent = document.getElementsByClassName('skills__content'), 32 | skillsHeader = document.querySelectorAll('.skills__header') 33 | 34 | function toggleSkills() { 35 | let itemClass = this.parentNode.className 36 | 37 | for (i = 0; i < skillsContent.length; i++) { 38 | skillsContent[i].className = 'skills__content skills__close' 39 | } 40 | if (itemClass === 'skills__content skills__close') { 41 | this.parentNode.className = 'skills__content skills__open' 42 | } 43 | } 44 | 45 | skillsHeader.forEach((el) => { 46 | el.addEventListener('click', toggleSkills) 47 | }) 48 | 49 | /*==================== QUALIFICATION TABS ====================*/ 50 | 51 | 52 | /*==================== SERVICES MODAL ====================*/ 53 | const modalViews = document.querySelectorAll('.services__modal'), 54 | modalBtns = document.querySelectorAll('.services__button'), 55 | modalCloses = document.querySelectorAll('.services__modal-close') 56 | 57 | let modal = function (modalClick) { 58 | modalViews[modalClick].classList.add('active-modal') 59 | } 60 | 61 | modalBtns.forEach((modalBtn, i) => { 62 | modalBtn.addEventListener('click', () => { 63 | modal(i) 64 | }) 65 | }) 66 | 67 | modalCloses.forEach((modalClose) => { 68 | modalClose.addEventListener('click', () => { 69 | modalViews.forEach((modalView) => { 70 | modalView.classList.remove('active-modal') 71 | }) 72 | }) 73 | }) 74 | /*==================== PORTFOLIO SWIPER ====================*/ 75 | let swiperPortfolio = new Swiper('.portfolio__container', { 76 | cssMode: true, 77 | loop: true, 78 | 79 | navigation: { 80 | nextEl: '.swiper-button-next', 81 | prevEl: '.swiper-button-prev', 82 | }, 83 | pagination: { 84 | el: '.swiper-pagination', 85 | clickable: true, 86 | }, 87 | }); 88 | 89 | /*==================== TESTIMONIAL ====================*/ 90 | let swiperTestimonial = new Swiper('.testimonial__container', { 91 | loop: true, 92 | grabCursor: true, 93 | spaceBetween: 48, 94 | 95 | 96 | pagination: { 97 | el: '.swiper-pagination', 98 | clickable: true, 99 | dynamicBullets: true, 100 | }, 101 | breakpoints:{ 102 | 568:{ 103 | slidesPerview: 2, 104 | } 105 | } 106 | }); 107 | 108 | /*==================== SCROLL SECTIONS ACTIVE LINK ====================*/ 109 | const sections = document.querySelectorAll('section[id]') 110 | 111 | function scrollActive(){ 112 | const scrollY = window.pageYOffset 113 | 114 | sections.forEach(current =>{ 115 | const sectionHeight = current.offsetHeight 116 | const sectionTop = current.offsetTop - 50; 117 | sectionId = current.getAttribute('id') 118 | 119 | if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ 120 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') 121 | }else{ 122 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') 123 | } 124 | }) 125 | } 126 | window.addEventListener('scroll', scrollActive) 127 | 128 | /*==================== CHANGE BACKGROUND HEADER ====================*/ 129 | function scrollHeader(){ 130 | const nav = document.getElementById('header') 131 | // When the scroll is greater than 200 viewport height, add the scroll-header class to the header tag 132 | if(this.scrollY >= 80) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header') 133 | } 134 | window.addEventListener('scroll', scrollHeader) 135 | 136 | 137 | /*==================== SHOW SCROLL UP ====================*/ 138 | function scrollUp(){ 139 | const scrollUp = document.getElementById('scroll-up'); 140 | // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class 141 | if(this.scrollY >= 560) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll') 142 | } 143 | window.addEventListener('scroll', scrollUp) 144 | 145 | 146 | /*==================== DARK LIGHT THEME ====================*/ 147 | const themeButton = document.getElementById('theme-button') 148 | const darkTheme = 'dark-theme' 149 | const iconTheme = 'uil-sun' 150 | 151 | // Previously selected topic (if user selected) 152 | const selectedTheme = localStorage.getItem('selected-theme') 153 | const selectedIcon = localStorage.getItem('selected-icon') 154 | 155 | // We obtain the current theme that the interface has by validating the dark-theme class 156 | const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' 157 | const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun' 158 | 159 | // We validate if the user previously chose a topic 160 | if (selectedTheme) { 161 | // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark 162 | document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) 163 | themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme) 164 | } 165 | 166 | // Activate / deactivate the theme manually with the button 167 | themeButton.addEventListener('click', () => { 168 | // Add or remove the dark / icon theme 169 | document.body.classList.toggle(darkTheme) 170 | themeButton.classList.toggle(iconTheme) 171 | // We save the theme and the current icon that the user chose 172 | localStorage.setItem('selected-theme', getCurrentTheme()) 173 | localStorage.setItem('selected-icon', getCurrentIcon()) 174 | }) -------------------------------------------------------------------------------- /assets/pdf/Mrinmoy_abstract_CSS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/pdf/Mrinmoy_abstract_CSS.pdf -------------------------------------------------------------------------------- /assets/pdf/Mrinmoy_abstract_HTML.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/pdf/Mrinmoy_abstract_HTML.pdf -------------------------------------------------------------------------------- /assets/pdf/mrinmoy-cv.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/assets/pdf/mrinmoy-cv.pdf -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Mrinmoy Deka 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 87 | 88 | 89 |
90 | 91 |
92 |
93 |
94 | 106 | 107 |
108 | 110 | 111 | 115 | 116 | 117 | 121 | 122 | 123 | 124 | 125 |
126 | 127 |
128 |

Hi!👋, I'm Mrinmoy

129 |

130 | and I'm 131 |

132 |

133 | High level experience in web design and development knowledge, producing quality work. 134 |

135 | 136 | Contact Me 137 | 138 |
139 |
140 | 141 |
142 | 143 | 144 | Scroll down 145 | 146 | 147 |
148 |
149 |
150 | 151 | 152 |
153 |

About Me

154 | My Introduction 155 | 156 |
157 | 158 | 159 |
160 |

161 | Hi I'm Mrinmoy Deka. I'm 15 years old. When I have free time, it's 162 | great to indulge in some of my favorite hobbies like study Maths & Science and exploring 163 | different kinds of new technology.
164 | 165 | I'm a full-stack developer. I have learnt HTML, CSS, JS and Python. I am interested in 166 | working on projects with an open-source focus. 167 |

168 | 169 |
170 |
171 | 02+ 172 | Years
173 | experience 174 |
175 |
176 | 20+ 177 | Completed
178 | project 179 |
180 |
181 | 24/7 182 | Online
183 | support 184 |
185 |
186 | 187 |
188 | 189 | Download CV 190 | 191 |
192 |
193 |
194 |
195 | 196 | 197 |
198 |

Skills

199 | My technical level 200 | 201 |
202 |
203 | 204 |
205 |
206 | 207 | 208 |
209 |

Frontend developer

210 | More then 2 years 211 |
212 | 213 | 214 |
215 | 216 |
217 |
218 |
219 |

HTML

221 | 90% 222 |
223 |
224 | 225 |
226 |
227 |
228 |
229 |

CSS

231 | 70% 232 |
233 |
234 | 235 |
236 |
237 |
238 |
239 |

JavaScript

241 | 242 | 60% 243 |
244 |
245 | 246 |
247 |
248 |
249 |
250 |

React

252 | 40% 253 |
254 |
255 | 256 |
257 |
258 |
259 |
260 | 261 | 262 |
263 |
264 | 265 | 266 |
267 |

Backend developer

268 | More then 1 years 269 |
270 | 271 | 272 |
273 | 274 |
275 |
276 |
277 |

PHP

279 | 90% 280 |
281 |
282 | 283 |
284 |
285 |
286 |
287 |

MySQL

289 | 72% 290 |
291 |
292 | 293 |
294 |
295 |
296 |
297 |

Node Js

299 | 300 | 58% 301 |
302 |
303 | 304 |
305 |
306 |
307 |
308 |

Python

310 | 94% 311 |
312 |
313 | 314 |
315 |
316 |
317 |
318 |
319 | 320 |
321 | 322 |
323 |
324 | 325 | 326 |
327 |

Designer

328 | More then 1/2 years 329 |
330 | 331 | 332 |
333 | 334 |
335 |
336 |
337 |

Blender

339 | 50% 340 |
341 |
342 | 343 |
344 |
345 |
346 |
347 |

Adobe Photoshop

349 | 42% 350 |
351 |
352 | 353 |
354 |
355 | 356 |
357 |
358 |

Adobe Illustrator 360 |

361 | 62% 362 |
363 |
364 | 365 |
366 |
367 |
368 |
369 |
370 |
371 | 372 | 373 | 374 |
375 | 376 | 377 |
378 |

My Certificates

379 | By Programming Hub 380 | Scroll or slide here to see next>>> 381 | 382 |
383 |
384 | 385 |
386 | 387 | 388 |
389 |

HTML Certificate

390 | 392 | Preview 393 | 394 | 395 |
396 |
397 | 398 |
399 | 400 | 401 |
402 |

CSS Certificate

403 | 405 | Preview 406 | 407 | 408 |
409 |
410 | 411 |
412 | 413 | 414 |
415 |

Services

416 | What I offer 417 | 418 |
419 | 420 |
421 |
422 | 423 |

Ui/Ux
Designer

424 |
425 | 426 | 427 | View More 428 | 429 | 430 | 431 |
432 |
433 |

Ui/Ux
Designer

434 | 435 | 436 |
    437 |
  • 438 | 439 |

    I develop the user interface.

    440 |
    • 441 |
  • 442 | 443 |

    Web page development.

    444 |
    • 445 |
  • 446 | 447 |

    I create ux element interactions.

    448 |
    • 449 |
  • 450 | 451 |

    I position your company brand.

    452 |
    • 453 |
454 |
455 |
456 |
457 | 458 | 459 |
460 |
461 | 462 |

Frontend
Developer

463 |
464 | 465 | 466 | View More 467 | 468 | 469 | 470 |
471 |
472 |

Frontend
Developer

473 | 474 | 475 |
    476 |
  • 477 | 478 |

    I develop the user interface.

    479 |
    • 480 |
  • 481 | 482 |

    Web page development.

    483 |
    • 484 |
  • 485 | 486 |

    I create ux element interactions.

    487 |
    • 488 |
  • 489 | 490 |

    I position your company brand.

    491 |
    • 492 |
493 |
494 |
495 |
496 | 497 | 498 |
499 |
500 | 501 |

Branding
Designer

502 |
503 | 504 | 505 | View More 506 | 507 | 508 | 509 |
510 |
511 |

Branding
Designer

512 | 513 | 514 |
    515 |
  • 516 | 517 |

    I develop the user interface.

    518 |
    • 519 |
  • 520 | 521 |

    Web page development.

    522 |
    • 523 |
  • 524 | 525 |

    I create ux element interactions.

    526 |
    • 527 |
  • 528 | 529 |

    I position your company brand.

    530 |
    • 531 |
532 |
533 |
534 |
535 |
536 |
537 | 538 | 539 |
540 |

Portfolio

541 | Most recent work 542 | 543 |
544 |
545 | 546 |
547 | 548 | 549 |
550 |

Modern Website

551 |

Website adaptable to all devices, with ui components and 552 | animated interactions.

553 | 554 | Demo 555 | 556 | 557 |
558 |
559 | 560 |
561 | 562 | 563 |
564 |

Brand Design

565 |

Website adaptable to all devices, with ui components and 566 | animated interactions.

567 | 568 | Demo 569 | 570 | 571 |
572 |
573 | 574 |
575 | 576 | 577 |
578 |

Online Store

579 |

Website adaptable to all devices, with ui components and 580 | animated interactions.

581 | 582 | Demo 583 | 584 | 585 |
586 |
587 |
588 | 589 | 590 | 591 |
592 | 593 |
594 |
595 | 596 |
597 | 598 | 599 |
600 |
601 |
602 | 603 | 604 |
605 |
606 |
607 |
608 |

You have a new project

609 |

Contact me now on your new project.

610 | 611 | Contact Me 612 | 613 | 614 |
615 | 616 | 617 |
618 |
619 |
620 | 621 | 622 |
623 |

Testimonial

624 | My client saying 625 | Slide here to see next>>> 626 | 627 |
628 |
629 | 630 | 631 |
632 |
633 |
634 | 635 | 636 |
637 |

Name1

638 | Client 639 |
640 |
641 |
642 |

643 | I get a good impression, I carry out my project with all the possible quality and attention 644 | and support 24 hours a day.

645 |
646 | 647 |
648 |
649 |
650 | 651 | 652 |
653 |

Name2

654 | Client 655 |
656 |
657 |
658 |

659 | It's always a pleasure to work with Mrinmoy, he brings 100% to each project and gets work 660 | done when 661 | it's needed the most.

662 |
663 | 664 |
665 |
666 |
667 | 668 | 669 |
670 |

Brian Cox

671 | Client 672 |
673 |
674 |
675 |

676 | He's a good programmer, I carry out my project with all the possible quality.

677 |
678 | 679 |
680 |
681 |
682 | 683 | 684 |
685 |

Name3

686 | Client 687 |
688 |
689 |
690 |

691 | He's an amazing web developer, he has a deep understanding about his sphere, and delivers 692 | great result.

693 |
694 |
695 | 696 | 697 |
698 |
699 |
700 | 701 | 702 |
703 |

Contact Me

704 | Get in touch 705 | 706 |
707 |
708 |
709 | 710 | 711 |
712 |

Email

713 | cosmosmrinmoy@gmail.com 714 |
715 |
716 |
717 | 718 |
719 |

Github

720 | https://github.com/MRINMOY662 721 |
722 |
723 |
724 | 725 |
727 |
728 |
729 | 730 | 731 |
732 |
733 | 734 | 735 |
736 |
737 |
738 | 739 | 740 |
741 |
742 | 743 | 744 |
745 | 746 |
747 | 751 | 752 |
753 |
754 |
755 |
756 |
757 | 758 | 759 | 797 | 798 | 799 | 800 |
803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 825 | 826 | 827 | 828 | 834 | 835 | 836 | 837 | 838 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrinmoy-hex/Modern-Portfolio-Website-Template/f6ee152eaf75e67509a281aedd595c9a9f236810/preview.png --------------------------------------------------------------------------------