└── public ├── about.html ├── contact.html ├── content.md ├── css └── style.css ├── images ├── bio.jpg ├── biodata.jpg ├── clients │ ├── a.jpg │ ├── b.jpg │ ├── c.jpg │ ├── d.jpg │ ├── e.jpg │ ├── f.jpg │ ├── g.jpg │ └── h.jpg ├── folio │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── hero.jpg ├── hero1.jpg ├── lazy1.jpg └── logo.png ├── index.html ├── index.js └── service.html /public/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About Page 8 | 15 | 16 | 17 | 18 | 19 | 61 | 62 | 65 |

66 |

67 |

68 |

69 |

70 |

71 |

my bio-data

72 |

73 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus 74 | natus eum quibusdam, blanditiis nobis dolor distinctio asperiores 75 | itaque voluptas nesciunt cum dolorum. Quidem sed id repellat facere 76 |

77 |
78 |

79 | itaque voluptas nesciunt cum dolorum. Quidem sed id repellat facere 80 | quod placeat praesentium. 81 |

82 | 83 |

84 |

85 |

Design

86 |

87 | 80% 88 |

89 |

90 |

91 |

HTML

92 |

93 | 99% 94 |

95 |

96 |

97 |

CSS

98 |

99 | 90% 100 |

101 |

102 |

103 |

JavaScript

104 |

105 | 80% 106 |

107 |

108 |

109 |

MERN

110 |

111 | 90% 112 |

113 |

114 |

115 | 116 |

117 | Downlaod CV 118 |

119 |

120 |

121 |

122 | 123 | 126 | 127 | 242 | 243 | 246 | 250 | 254 | 255 | 256 | 257 | 258 | -------------------------------------------------------------------------------- /public/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact Page 8 | 15 | 16 | 17 | 18 | 19 | 53 | 54 | 57 | 58 |

59 |

60 |

contact us

61 |

62 | 63 |

64 | 92 |

93 |

94 | 95 | 98 | 99 | 214 | 215 | 218 | 222 | 226 | 227 | 228 | 229 | 230 | -------------------------------------------------------------------------------- /public/content.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | :root { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@500;600;700&family=Poppins:wght@500;600;700;800&family=Rufina:wght@400;700&family=Work+Sans:wght@400;500&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | :root { 10 | --heading: rgb(0 10 45); 11 | --para: #777777; 12 | --para-tint: #e4e4e4; 13 | --third: #fff; 14 | --helper: #8490ff; 15 | --helper-tint: #f3f4ff; 16 | --bg: rgb(249 249 255); 17 | --gradient: linear-gradient(0deg, rgb(132 144 255) 0%, rgb(98 189 252) 100%); 18 | --shadpw: 0px 0px 20px 0px rgb(132 144 255 / 20%); 19 | } 20 | 21 | /* spacing 22 | desktop = 4.8rem */ 23 | 24 | html { 25 | font-size: 62.5%; 26 | font-family: "Work Sans", sans-serif; 27 | } 28 | 29 | body { 30 | overflow-x: hidden; 31 | } 32 | 33 | h1, 34 | h2, 35 | h3, 36 | h4 { 37 | font-family: "Rufina", serif; 38 | font-family: "Poppins", sans-serif; 39 | } 40 | 41 | h1 { 42 | color: var(--heading); 43 | font-size: 6rem; 44 | font-weight: 600; 45 | } 46 | 47 | p { 48 | color: var(--para); 49 | line-height: 1.6; 50 | font-size: 1.8rem; 51 | 52 | /* word-spacing: 0.1rem; */ 53 | } 54 | 55 | a { 56 | text-decoration: none; 57 | } 58 | 59 | li { 60 | list-style: none; 61 | } 62 | 63 | .btn { 64 | background: -webkit-linear-gradient( 65 | 0deg, 66 | rgb(132 144 255) 0%, 67 | rgb(98 189 252) 100% 68 | ); 69 | 70 | padding: 1.6rem 3.2rem; 71 | border: none; 72 | color: rgb(255 255 255); 73 | display: inline-block; 74 | font-size: 1.8rem; 75 | text-transform: uppercase; 76 | font-weight: 500; 77 | position: relative; 78 | -webkit-transition: all 0.3s ease 0s; 79 | -moz-transition: all 0.3s ease 0s; 80 | -o-transition: all 0.3s ease 0s; 81 | transition: all 0.3s ease 0s; 82 | cursor: pointer; 83 | position: relative; 84 | } 85 | 86 | .btn:hover { 87 | box-shadow: 0px 20px 20px 0px rgb(132 144 255 / 30%); 88 | color: rgb(255 255 255); 89 | } 90 | 91 | .section { 92 | padding: 9rem 0; 93 | } 94 | 95 | .container { 96 | max-width: 140rem; 97 | margin: 0 auto; 98 | } 99 | 100 | .grid { 101 | display: grid; 102 | gap: 9rem; 103 | } 104 | 105 | .grid-two-col { 106 | grid-template-columns: repeat(2, 1fr); 107 | } 108 | 109 | .grid-three-col { 110 | grid-template-columns: repeat(3, 1fr); 111 | } 112 | 113 | .grid-four-col { 114 | grid-template-columns: repeat(4, 1fr); 115 | } 116 | 117 | /* =========================================== 118 | Header Section Start 119 | ======================================= */ 120 | 121 | .header { 122 | padding: 0 4.8rem; 123 | height: 10rem; 124 | display: flex; 125 | justify-content: space-between; 126 | align-items: center; 127 | background: var(--bg); 128 | /* background-color: #e7f5ff; */ 129 | } 130 | 131 | .header .logo { 132 | /* width: 15%; */ 133 | height: 3rem; 134 | } 135 | 136 | .navbar-lists { 137 | display: flex; 138 | gap: 4.8rem; 139 | list-style: none; 140 | } 141 | 142 | .navbar-link:link, 143 | .navbar-link:visited { 144 | display: inline-block; 145 | text-decoration: none; 146 | font-size: 1.8rem; 147 | font-weight: 500; 148 | text-transform: uppercase; 149 | color: #212529; 150 | transition: all 0.3s; 151 | font-family: "Poppins", sans-serif; 152 | } 153 | 154 | .navbar-link:hover, 155 | .navbar-link:active { 156 | color: var(--helper); 157 | } 158 | 159 | .mobile-navbar-btn { 160 | /* by default for normal screen we want to hide */ 161 | display: none; 162 | background: transparent; 163 | cursor: pointer; 164 | border: none; 165 | } 166 | 167 | .mobile-nav-icon { 168 | width: 5rem; 169 | height: 5rem; 170 | color: #212529; 171 | } 172 | 173 | /* for desktop or mobile menu-outline one must be visible 174 | and we need to hide the close menu icon 175 | */ 176 | .mobile-nav-icon[name="close-outline"] { 177 | display: none; 178 | } 179 | 180 | /* sticky Navbar */ 181 | .sticky .header { 182 | position: fixed; 183 | top: 0; 184 | left: 0; 185 | height: 8rem; 186 | width: 100%; 187 | background-color: rgba(255, 255, 255, 1); 188 | box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1); 189 | z-index: 9999; 190 | padding-top: 0; 191 | padding-bottom: 0; 192 | } 193 | 194 | /* =========================================== 195 | Hero Section Start 196 | ======================================= */ 197 | 198 | .section-hero { 199 | background: var(--bg); 200 | } 201 | 202 | .section-hero-data { 203 | display: flex; 204 | flex-direction: column; 205 | justify-content: center; 206 | align-items: flex-start; 207 | } 208 | 209 | .hero-top-data { 210 | text-transform: uppercase; 211 | color: var(--heading); 212 | font-weight: 500; 213 | font-size: 1.5rem; 214 | color: var(--helper); 215 | } 216 | 217 | .hero-heading { 218 | text-transform: uppercase; 219 | font-weight: 700; 220 | font-size: 6.4rem; 221 | } 222 | 223 | .hero-para { 224 | margin-top: 1.5rem; 225 | margin-bottom: 5rem; 226 | max-width: 60rem; 227 | } 228 | 229 | .section-hero-image { 230 | display: flex; 231 | justify-content: center; 232 | align-items: center; 233 | } 234 | 235 | .hero-img { 236 | max-width: 80%; 237 | z-index: 1; 238 | } 239 | 240 | /* =========================================== 241 | Bio Data Section Start 242 | ======================================= */ 243 | 244 | .bio-image { 245 | display: flex; 246 | justify-content: center; 247 | align-items: center; 248 | } 249 | 250 | .bio-image img { 251 | display: inline-block; 252 | width: 80%; 253 | box-shadow: -2rem -2rem 0rem 0rem var(--helper); 254 | } 255 | 256 | .common-heading { 257 | font-size: 4.8rem; 258 | font-weight: 700; 259 | margin-bottom: 6rem; 260 | text-transform: capitalize; 261 | position: relative; 262 | } 263 | 264 | .common-heading::before { 265 | content: ""; 266 | position: absolute; 267 | top: 120%; 268 | left: 0; 269 | width: 1.5rem; 270 | height: 1.5rem; 271 | border-radius: 50%; 272 | background: var(--helper); 273 | } 274 | 275 | .common-heading::after { 276 | content: ""; 277 | position: absolute; 278 | top: 128%; 279 | left: 1.5rem; 280 | width: 30%; 281 | height: 0.3rem; 282 | background: var(--helper); 283 | } 284 | 285 | .bio-data-stats { 286 | padding: 6.4rem 0; 287 | display: flex; 288 | flex-direction: column; 289 | gap: 3rem; 290 | } 291 | 292 | h3 { 293 | font-size: 1.8rem; 294 | font-weight: 400; 295 | margin-bottom: 1rem; 296 | } 297 | 298 | .bio-progress-bar { 299 | width: 90%; 300 | height: 0.8rem; 301 | /* background: var(--para); */ 302 | background-color: rgb(233 236 239); 303 | border-radius: 10rem; 304 | position: relative; 305 | box-shadow: var(--shadpw); 306 | /* overflow: hidden; */ 307 | } 308 | 309 | .bio-progress-bar::before { 310 | content: ""; 311 | position: absolute; 312 | top: 0; 313 | left: 0; 314 | width: 80%; 315 | height: inherit; 316 | background: -webkit-linear-gradient( 317 | 0deg, 318 | rgb(132 144 255) 0%, 319 | rgb(98 189 252) 100% 320 | ); 321 | border-radius: 10rem; 322 | } 323 | 324 | /* to create the rectangle box */ 325 | .bio-progress-bar span { 326 | position: absolute; 327 | top: 1.8rem; 328 | left: 76%; 329 | width: 4rem; 330 | height: 2rem; 331 | background: var(--helper); 332 | color: var(--third); 333 | display: flex; 334 | justify-content: center; 335 | align-items: center; 336 | font-size: 1.2rem; 337 | border: none; 338 | outline: none; 339 | } 340 | 341 | /* to create the traingle or caret symbol */ 342 | .bio-progress-bar span::after { 343 | content: ""; 344 | position: absolute; 345 | top: -1.6rem; 346 | width: 0rem; 347 | height: 0rem; 348 | border: 0.8rem solid var(--helper); 349 | border-color: transparent; 350 | border-bottom-color: var(--helper); 351 | } 352 | 353 | /* =========================================== 354 | Section portfolio 355 | ======================================= */ 356 | 357 | .section-portfolio { 358 | background-color: var(--bg); 359 | } 360 | 361 | .section-portfolio p, 362 | .section-services p { 363 | max-width: 60rem; 364 | } 365 | 366 | .portfolio-images { 367 | gap: 3.2rem; 368 | margin-top: 6.4rem; 369 | } 370 | 371 | .img-ovelay { 372 | position: relative; 373 | overflow: hidden; 374 | } 375 | 376 | .portfolio-images img { 377 | width: 100%; 378 | border-radius: 7px; 379 | position: relative; 380 | overflow: hidden; 381 | } 382 | 383 | .img-ovelay .overlay { 384 | position: absolute; 385 | top: 0; 386 | left: 0; 387 | width: 100%; 388 | height: 100%; 389 | background: -webkit-linear-gradient( 390 | 0deg, 391 | rgb(132 144 255) 0%, 392 | rgb(98 189 252) 100% 393 | ); 394 | opacity: 0; 395 | color: var(--third); 396 | display: flex; 397 | justify-content: center; 398 | align-items: center; 399 | transform: translateY(100%); 400 | transition: all 0.3s linear; 401 | border-radius: 7px; 402 | /* box-shadow: inset 0 0 0 0.5rem var(--helper-tint); */ 403 | } 404 | 405 | .img-ovelay:hover > .overlay { 406 | opacity: 0.8; 407 | transform: translateY(0); 408 | cursor: pointer; 409 | } 410 | 411 | .img-ovelay .overlay .common-heading { 412 | margin: 0; 413 | color: var(--third); 414 | text-decoration: none; 415 | } 416 | 417 | /* =========================================== 418 | work data Section 419 | ======================================= */ 420 | .section-work-data { 421 | background: -webkit-linear-gradient( 422 | 0deg, 423 | rgb(132 144 255) 0%, 424 | rgb(98 189 252) 100% 425 | ); 426 | color: var(--third); 427 | text-align: center; 428 | } 429 | 430 | .common-numbers { 431 | font-size: 4.8rem; 432 | } 433 | 434 | .section-work-data p { 435 | color: var(--third); 436 | } 437 | 438 | /* =========================================== 439 | Services Section 440 | ======================================= */ 441 | 442 | .section-services p { 443 | max-width: 60rem; 444 | } 445 | 446 | .section-services .grid { 447 | margin-top: 10rem; 448 | row-gap: 10rem; 449 | } 450 | 451 | .service-box { 452 | text-align: center; 453 | box-shadow: var(--shadpw); 454 | border-radius: 5px; 455 | padding: 6.4rem 3.4rem; 456 | transition: all 0.2s linear; 457 | } 458 | 459 | .service-box:hover { 460 | transform: translateY(-3rem); 461 | } 462 | 463 | .serive-icon { 464 | width: 8rem; 465 | height: 8rem; 466 | background-color: rgb(144 172 209 / 20%); 467 | display: inline-block; 468 | border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%; 469 | padding: 1.4rem 1.8rem; 470 | position: relative; 471 | color: var(--heading); 472 | animation: water-wave 3s linear infinite; 473 | } 474 | 475 | .serive-icon::after { 476 | content: ""; 477 | position: absolute; 478 | top: 50%; 479 | left: 50%; 480 | transform: translate(-50%, -50%); 481 | border: 1px solid rgba(11, 15, 20, 0.9); 482 | width: 90%; 483 | height: 90%; 484 | border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%; 485 | background-color: transparent; 486 | animation: water-wave 5s linear infinite alternate; 487 | } 488 | 489 | @keyframes water-wave { 490 | 0% { 491 | border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%; 492 | } 493 | 50% { 494 | border-radius: 3% 97% 15% 85% / 72% 0% 100% 28%; 495 | } 496 | 100% { 497 | border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%; 498 | } 499 | } 500 | 501 | .service-box h3 { 502 | text-transform: capitalize; 503 | margin-top: 3rem; 504 | margin-bottom: 1rem; 505 | } 506 | 507 | /* =========================================== 508 | Resume Section 509 | ======================================= */ 510 | 511 | .section-resume { 512 | background: var(--bg); 513 | } 514 | 515 | .resume-img { 516 | display: flex; 517 | justify-content: center; 518 | align-items: center; 519 | } 520 | 521 | .resume-img img { 522 | width: 80%; 523 | box-shadow: -2rem 2rem 0 0 var(--helper); 524 | /* box-shadow: var(--shadpw) */ 525 | } 526 | 527 | .resume-para { 528 | font-size: 2.4rem; 529 | letter-spacing: 0; 530 | text-transform: capitalize; 531 | color: var(--heading); 532 | } 533 | 534 | .resume-data-subsection { 535 | display: flex; 536 | justify-content: space-between; 537 | align-items: center; 538 | gap: 4.8rem; 539 | margin-top: 4.4rem; 540 | padding-bottom: 2.4rem; 541 | border-bottom: 1px solid var(--para-tint); 542 | } 543 | 544 | .resume-data-left .grid { 545 | gap: 1.5rem; 546 | } 547 | 548 | .resume-data-left .grid p, 549 | .resume-data-right p { 550 | font-size: 1.4rem; 551 | display: flex; 552 | align-items: center; 553 | gap: 0.5rem; 554 | } 555 | 556 | .resume-data-right { 557 | display: flex; 558 | flex-direction: column; 559 | justify-content: center; 560 | align-items: flex-end; 561 | } 562 | 563 | .resume-data-right .resume-data-button { 564 | font-size: 1.3rem; 565 | text-transform: uppercase; 566 | color: var(--helper); 567 | padding: 0.3rem 0; 568 | min-width: 50%; 569 | background: #f3f4ff; 570 | border-radius: 10rem; 571 | justify-content: center; 572 | margin-bottom: 0.5rem; 573 | } 574 | 575 | .resume-data-bottom-subsection { 576 | margin-top: 4.8rem; 577 | } 578 | 579 | .resume-data-bottom-subsection .margin-small { 580 | margin-top: 1.8rem; 581 | } 582 | 583 | .resume-data-bottom-subsection .resume-data-button { 584 | width: 80%; 585 | } 586 | 587 | /* =========================================== 588 | Testimonial Swiper Queries Section 589 | ======================================= */ 590 | /* 591 | .section-testimonial { 592 | background-color: var(--bg); 593 | } */ 594 | 595 | .swiper { 596 | width: 100%; 597 | height: 100%; 598 | margin-top: 9rem; 599 | } 600 | 601 | .swiper-slide { 602 | text-align: center; 603 | font-size: 18px; 604 | /* background: #fff; */ 605 | 606 | /* Center slide text vertically */ 607 | flex-direction: column; 608 | display: -webkit-box; 609 | display: -ms-flexbox; 610 | display: -webkit-flex; 611 | display: flex; 612 | -webkit-box-pack: center; 613 | -ms-flex-pack: center; 614 | -webkit-justify-content: center; 615 | justify-content: center; 616 | -webkit-box-align: center; 617 | -ms-flex-align: center; 618 | -webkit-align-items: center; 619 | align-items: center; 620 | margin-bottom: 5rem; 621 | } 622 | 623 | .swiper-client-msg { 624 | padding: 5rem 8rem; 625 | background-color: var(--third); 626 | border-radius: 10px; 627 | text-align: left; 628 | box-shadow: var(--shadpw); 629 | position: relative; 630 | } 631 | 632 | .swiper-client-msg::before { 633 | content: ""; 634 | position: absolute; 635 | bottom: -10rem; 636 | left: 50%; 637 | transform: translateX(-50%); 638 | /* width: 5rem; 639 | height: 5rem; */ 640 | border: 5rem solid var(--third); 641 | border-color: transparent; 642 | border-top-color: var(--third); 643 | } 644 | 645 | .swiper-client-msg p::before { 646 | content: "\f10d"; 647 | display: inline-block; 648 | position: absolute; 649 | top: 0; 650 | left: 2rem; 651 | font-size: 5rem; 652 | font-family: "Font Awesome 6 Free"; 653 | font-weight: 900; 654 | color: #ced3ff; 655 | } 656 | 657 | .swiper-client-msg p::after { 658 | /* display: inline-block */ 659 | content: "\f10e"; 660 | position: absolute; 661 | bottom: 0%; 662 | right: 5%; 663 | 664 | font-size: 5rem; 665 | font-family: "Font Awesome 6 Free"; 666 | font-weight: 900; 667 | color: #ced3ff; 668 | } 669 | 670 | .swiper-slide img { 671 | display: block; 672 | width: 100%; 673 | height: 100%; 674 | object-fit: cover; 675 | } 676 | 677 | .swiper-client-data { 678 | align-items: center; 679 | justify-items: start; 680 | justify-content: start; 681 | gap: 1.4rem; 682 | margin-top: 3.2rem; 683 | } 684 | 685 | .swiper-client-data img { 686 | max-width: 10rem; 687 | height: 10rem; 688 | border-radius: 50%; 689 | border: 0.5rem solid #ced3ff; 690 | } 691 | 692 | .swiper-client-data p:first-child { 693 | font-weight: bold; 694 | color: var(--heading); 695 | } 696 | 697 | /* =========================================== 698 | freelancer Section 699 | ======================================= */ 700 | 701 | .section-freelancer { 702 | background-image: url("../images/folio/3.jpg"); 703 | background-repeat: no-repeat; 704 | background-size: 100%; 705 | text-align: center; 706 | position: relative; 707 | background-attachment: fixed; 708 | } 709 | 710 | .section-freelancer .overlay { 711 | content: ""; 712 | position: absolute; 713 | top: 0; 714 | left: 0; 715 | width: 100%; 716 | height: 100%; 717 | background-color: #3e64ff; 718 | opacity: 0.7; 719 | } 720 | 721 | .section-freelancer .container { 722 | position: relative; 723 | } 724 | 725 | .section-freelancer h2 { 726 | font-size: 5.4rem; 727 | } 728 | 729 | .section-freelancer h2 span { 730 | color: #a0f669; 731 | } 732 | 733 | .section-freelancer h2, 734 | .section-freelancer p { 735 | color: var(--third); 736 | margin-bottom: 1.8rem; 737 | } 738 | 739 | /* =========================================== 740 | contact Section 741 | ======================================= */ 742 | 743 | .section-contact-main { 744 | max-width: 70rem; 745 | margin: 0 auto; 746 | margin-top: 10rem; 747 | } 748 | 749 | .section-contact-main form { 750 | display: flex; 751 | flex-direction: column; 752 | gap: 3rem; 753 | } 754 | .section-contact-main .grid { 755 | gap: 2.4rem; 756 | } 757 | 758 | .section-contact-main input, 759 | textarea { 760 | padding: 1.5rem 2rem; 761 | border: 0.1rem solid #c9c9c9; 762 | border-radius: 5px; 763 | width: 100%; 764 | font-size: 1.6rem; 765 | font-family: "work sans"; 766 | } 767 | 768 | .section-contact-main textarea { 769 | height: 15rem; 770 | } 771 | 772 | /* ::placeholder { 773 | font-size: 1.6rem; 774 | font-family: "work sans"; 775 | } */ 776 | 777 | .section-contact-main input[type="submit"] { 778 | max-width: 30%; 779 | border: none; 780 | } 781 | 782 | /* =========================================== 783 | Footer Section 784 | ======================================= */ 785 | 786 | .section-footer { 787 | background: var(--heading); 788 | } 789 | 790 | .section-footer h3 { 791 | color: var(--third); 792 | margin-bottom: 4rem; 793 | } 794 | 795 | .f-about p { 796 | color: #adadad; 797 | } 798 | 799 | .f-links ul, 800 | .f-services ul, 801 | .f-address address { 802 | display: flex; 803 | flex-direction: column; 804 | gap: 1.8rem; 805 | justify-content: center; 806 | list-style: none; 807 | } 808 | 809 | .f-links li, 810 | .f-links a, 811 | .f-services li, 812 | .f-services a { 813 | font-size: 1.8rem; 814 | color: #adadad; 815 | text-transform: capitalize; 816 | } 817 | 818 | .f-links span, 819 | .f-services span, 820 | .f-address span { 821 | margin-right: 1rem; 822 | } 823 | 824 | .f-address p { 825 | font-style: normal; 826 | color: #adadad; 827 | } 828 | 829 | .f-social-icons { 830 | margin: 5rem 0; 831 | text-align: center; 832 | color: #adadad; 833 | } 834 | 835 | .f-social-icons .icons { 836 | width: 4rem; 837 | height: 4rem; 838 | background-color: rgb(144 172 209 / 20%); 839 | display: inline-block; 840 | padding: 1.4rem 1.8rem; 841 | position: relative; 842 | color: var(--heading); 843 | animation: water-wave 3s linear infinite; 844 | color: var(--third); 845 | } 846 | 847 | .f-credits p { 848 | text-align: center; 849 | color: #adadad; 850 | } 851 | 852 | footer a:hover { 853 | color: var(--third); 854 | } 855 | /* =========================================== 856 | Media Queries Section 857 | ======================================= */ 858 | 859 | @media (max-width: 94em) { 860 | .container { 861 | max-width: 130rem; 862 | } 863 | .navbar-lists { 864 | gap: 3.4rem; 865 | } 866 | } 867 | 868 | /* for widht below 1200px */ 869 | @media (max-width: 75em) { 870 | .container { 871 | max-width: 110rem; 872 | } 873 | .navbar-lists { 874 | gap: 3.4rem; 875 | } 876 | } 877 | 878 | /* media queries less then 980px */ 879 | @media (max-width: 980px) { 880 | /* to make all the container with same padding */ 881 | .container { 882 | padding: 0 3.2rem; 883 | } 884 | 885 | html { 886 | font-size: 56.25%; 887 | } 888 | 889 | /* when we are in 980px we need to show the menu open icon */ 890 | .mobile-navbar-btn { 891 | display: block; 892 | /* background-color: #212529; */ 893 | z-index: 99999; 894 | border: 3px solid #212529; 895 | color: #212529; 896 | } 897 | 898 | .header { 899 | position: relative; 900 | } 901 | 902 | .header .logo { 903 | width: 40%; 904 | /* height: 3.4rem; */ 905 | } 906 | 907 | .navbar { 908 | width: 100%; 909 | height: 100vh; 910 | background: #e7f5ff; 911 | position: absolute; 912 | top: 0; 913 | left: 0; 914 | display: flex; 915 | justify-content: center; 916 | align-items: center; 917 | transform: translateX(100%); 918 | transition: all 0.5s linear; 919 | opacity: 0; 920 | visibility: hidden; 921 | pointer-events: none; 922 | } 923 | 924 | .navbar-lists { 925 | flex-direction: column; 926 | align-items: center; 927 | } 928 | 929 | .navbar .navbar-lists .navbar-link:link, 930 | .navbar .navbar-lists .navbar-link:visited { 931 | color: #212529; 932 | font-size: 3.2rem; 933 | } 934 | 935 | .active .navbar { 936 | opacity: 1; 937 | visibility: visible; 938 | pointer-events: auto; 939 | transform: translateX(0); 940 | z-index: 9999; 941 | } 942 | 943 | .active .mobile-navbar-btn .mobile-nav-icon[name="close-outline"] { 944 | display: block; 945 | } 946 | 947 | .active .mobile-navbar-btn .mobile-nav-icon[name="menu-outline"] { 948 | display: none; 949 | } 950 | 951 | /* hero section */ 952 | 953 | .section-hero h1 { 954 | line-height: 1.05; 955 | } 956 | 957 | /* section bidoata */ 958 | .section-biodata .grid { 959 | gap: 3rem; 960 | } 961 | 962 | /* section work */ 963 | .section-work-data .common-numbers { 964 | font-size: 3.2rem; 965 | } 966 | 967 | /* services section */ 968 | 969 | .section-services .grid { 970 | gap: 6rem; 971 | } 972 | 973 | .section-services .grid-three-col { 974 | grid-template-columns: repeat(2, 1fr); 975 | } 976 | 977 | /* resume section */ 978 | .section-resume .grid-two-col { 979 | grid-template-columns: 1fr; 980 | } 981 | 982 | .section-resume .grid-two-col img { 983 | width: 50%; 984 | } 985 | .resume-img { 986 | grid-row: 2; 987 | transform: translateY(-2rem); 988 | } 989 | 990 | /* testimonial section */ 991 | .section-testimonial .grid-three-col { 992 | grid-template-columns: 2fr; 993 | } 994 | 995 | .section-footer .grid-four-col { 996 | grid-template-columns: 1fr 1fr; 997 | } 998 | } 999 | 1000 | /* Below 780px */ 1001 | @media (max-width: 780px) { 1002 | .container { 1003 | max-width: 720px; 1004 | } 1005 | /* hero section */ 1006 | .section-hero .grid-two-col { 1007 | grid-template-columns: 1fr; 1008 | } 1009 | 1010 | .section-hero-data { 1011 | align-items: center; 1012 | } 1013 | 1014 | .section-hero-data .hero-top-data { 1015 | /* align-self: flex-start; */ 1016 | } 1017 | 1018 | .hero-heading { 1019 | text-align: center; 1020 | } 1021 | .hero-para { 1022 | text-align: center; 1023 | margin-top: 2rem; 1024 | } 1025 | 1026 | .section-hero img { 1027 | width: 70%; 1028 | } 1029 | 1030 | /* work section */ 1031 | .section-portfolio .grid-three-col { 1032 | grid-template-columns: repeat(2, 1fr); 1033 | } 1034 | } 1035 | 1036 | /* Below 560px */ 1037 | @media (max-width: 35em) { 1038 | .header { 1039 | padding: 0 3.2rem; 1040 | } 1041 | 1042 | .header .logo { 1043 | width: 60%; 1044 | } 1045 | 1046 | /* secion .bio-data */ 1047 | 1048 | .section-biodata .grid-two-col { 1049 | grid-template-columns: 1fr; 1050 | } 1051 | 1052 | .section-biodata .bio-image { 1053 | grid-row: 2; 1054 | margin-top: 3.2rem; 1055 | } 1056 | 1057 | /* work section */ 1058 | .section-work-data .grid-four-col { 1059 | grid-template-columns: 1fr 1fr; 1060 | } 1061 | 1062 | /* services section */ 1063 | .section-services .grid-three-col { 1064 | grid-template-columns: 1fr; 1065 | } 1066 | } 1067 | -------------------------------------------------------------------------------- /public/images/bio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/bio.jpg -------------------------------------------------------------------------------- /public/images/biodata.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/biodata.jpg -------------------------------------------------------------------------------- /public/images/clients/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/clients/a.jpg -------------------------------------------------------------------------------- /public/images/clients/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/clients/b.jpg -------------------------------------------------------------------------------- /public/images/clients/c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/clients/c.jpg -------------------------------------------------------------------------------- /public/images/clients/d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/clients/d.jpg -------------------------------------------------------------------------------- /public/images/clients/e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/clients/e.jpg -------------------------------------------------------------------------------- /public/images/clients/f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/clients/f.jpg -------------------------------------------------------------------------------- /public/images/clients/g.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/clients/g.jpg -------------------------------------------------------------------------------- /public/images/clients/h.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/clients/h.jpg -------------------------------------------------------------------------------- /public/images/folio/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/1.jpg -------------------------------------------------------------------------------- /public/images/folio/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/2.jpg -------------------------------------------------------------------------------- /public/images/folio/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/3.jpg -------------------------------------------------------------------------------- /public/images/folio/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/4.jpg -------------------------------------------------------------------------------- /public/images/folio/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/5.jpg -------------------------------------------------------------------------------- /public/images/folio/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/6.jpg -------------------------------------------------------------------------------- /public/images/folio/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/7.jpg -------------------------------------------------------------------------------- /public/images/folio/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/8.jpg -------------------------------------------------------------------------------- /public/images/folio/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/folio/9.jpg -------------------------------------------------------------------------------- /public/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/hero.jpg -------------------------------------------------------------------------------- /public/images/hero1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/hero1.jpg -------------------------------------------------------------------------------- /public/images/lazy1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/lazy1.jpg -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thapatechnical/frontEndDevelopment/76cdf3c69a7232a82ef45169c58cb3f38fca1b0c/public/images/logo.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Thapa Portfolio 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 57 | 58 | 61 |

62 |

63 |

64 |

65 |

this is me

66 |

Thapa technical

67 |

68 | I'm vinod bahadur thapa. A Full stack Developer, youtuber and 69 | freelancer. A Full stack Developer, youtuber and freelancer. 70 |

71 |

72 | Hire Me 73 |

74 |

75 | 76 |

77 |

78 |

79 |

80 |

81 |

82 | 83 | 86 |

87 |

88 |

89 |

90 |

91 |

92 |

my bio-data

93 |

94 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus 95 | natus eum quibusdam, blanditiis nobis dolor distinctio asperiores 96 | itaque voluptas nesciunt cum dolorum. Quidem sed id repellat facere 97 |

98 |
99 |

100 | itaque voluptas nesciunt cum dolorum. Quidem sed id repellat facere 101 | quod placeat praesentium. 102 |

103 | 104 |

105 |

106 |

Design

107 |

108 | 80% 109 |

110 |

111 |

112 |

HTML

113 |

114 | 99% 115 |

116 |

117 |

118 |

CSS

119 |

120 | 90% 121 |

122 |

123 |

124 |

JavaScript

125 |

126 | 85% 127 |

128 |

129 |

130 |

MERN

131 |

132 | 70% 133 |

134 |

135 |

136 | 137 |

138 | Downlaod CV 139 |

140 |

141 |

142 |

143 | 144 | 147 |

148 |

149 |

Latest works

150 |

151 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem ex 152 | eos commodi provident tempore possimus, mollitia vero quas. 153 |

154 |

155 | 156 |

157 | 158 | 159 | 160 |

161 | 162 |

163 |

164 |

165 |

166 | Project 1 167 |

168 |

169 | 170 |

171 |

172 |

173 | Project 2 174 |

175 |

176 | 177 |

178 |

179 |

180 | Project 3 181 |

182 |

183 |

184 |

185 |

186 | Project 4 187 |

188 |

189 |

190 |

191 |

192 | Project 5 193 |

194 |

195 |

196 |

197 |

198 | Project 6 199 |

200 |

201 |

202 |

203 | 204 | 207 | 208 |

209 |

210 |

211 |

0

212 |

project completed

213 |

214 |

215 |

0+

216 |

Happy clients

217 |

218 |

219 |

0+

220 |

cups of coffee

221 |

222 |

223 |

0+

224 |

real professionals

225 |

226 |

227 |

228 | 229 | 232 |

233 |

234 |

Service Offers

235 |

236 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem ex 237 | dolores tempore possimus, mollitia vero quas 238 |

239 |

240 | 241 |

242 |

243 | 244 |

web Design

245 |

246 | “It is not because things are difficult that we do not dare; it is 247 | because we do not dare that they are difficult.” 248 |

249 |

250 | 251 |

252 | 253 |

web development

254 |

255 | “It is not because things are difficult that we do not dare; it is 256 | because we do not dare that they are difficult.” 257 |

258 |

259 | 260 |

261 | 262 |

photography

263 |

264 | “It is not because things are difficult that we do not dare; it is 265 | because we do not dare that they are difficult.” 266 |

267 |

268 | 269 |

270 | 271 |

clipping path

272 |

273 | “It is not because things are difficult that we do not dare; it is 274 | because we do not dare that they are difficult.” 275 |

276 |

277 |

278 | 279 |

apps interface

280 |

281 | “It is not because things are difficult that we do not dare; it is 282 | because we do not dare that they are difficult.” 283 |

284 |

285 |

286 | 287 |

graphic design

288 |

289 | “It is not because things are difficult that we do not dare; it is 290 | because we do not dare that they are difficult.” 291 |

292 |

293 |

294 |

295 | 296 | 299 |

300 |

301 | 302 |

303 |

308 |

309 | 310 | 311 |

312 |

resume

313 |

my work experience

314 | 315 |

316 |

317 |

Online educator on Youtuber

318 |

319 |

320 | ThapaTechnical, Inc. 321 |

322 |

323 | Pune, India 324 |

325 |

326 |

327 | 328 |

329 |

fulltime

330 |

331 | April 2018 - Present 333 |

334 |

335 |

336 | 337 | 338 |

339 |

340 |

Senior Front End Developer

341 |

342 |

343 | Facebook, Inc. 344 |

345 |

346 | San Francisco 347 |

348 |

349 |

350 | 351 |

352 |

fulltime

353 |

354 | November 2021 - 355 | Present 356 |

357 |

358 |

359 | 360 | 361 |

362 |

363 |

Senior Front End Developer

364 |

365 |

366 | Facebook, Inc. 367 |

368 |

369 | San Francisco 370 |

371 |

372 |

373 | 374 |

375 |

fulltime

376 |

377 | November 2021 - 378 | Present 379 |

380 |

381 |

382 | 383 | 384 |

385 |

386 |

Senior Front End Developer

387 |

388 |

389 | Facebook, Inc. 390 |

391 |

392 | San Francisco 393 |

394 |

395 |

396 | 397 |

398 |

fulltime

399 |

400 | November 2021 - 401 | Present 402 |

403 |

404 |

405 | 406 | 407 |

408 |

Education

409 | 410 | 411 |

412 |

413 |

Master in Computer Science

414 |

415 |

416 | Wadia College, Inc. 417 |

418 |

419 | Pune, MH 420 |

421 |

422 |

423 | 424 |

425 |

Masters

426 |

427 | May 2016 - 2018 429 |

430 |

431 |

432 | 433 | 434 |

435 |

436 |

Bachelor in Computer Science

437 |

438 |

439 | Wadia College, Inc. 440 |

441 |

442 | Pune, MH 443 |

444 |

445 |

446 | 447 |

448 |

Bachelor

449 |

450 | May 2012 - 2015 452 |

453 |

454 |

455 | 456 |

457 |

458 |

459 | 460 |

461 | 462 | 463 | 464 | 467 | 468 |

469 |

470 |

Happy Client works

471 |

472 | 473 | 474 |

475 |

476 |

477 | 478 |

479 |

Calvin: You know sometimes when I'm talking, my words can't keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice.

480 |

481 |

482 |

485 |

486 |

Vinod thapa

487 |

Entrepruner

488 |

489 |

490 |

491 | 492 |

493 | 494 |

495 |

Calvin: You know sometimes when I'm talking, my words can't keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice.

496 |

497 |

498 |

501 |

502 |

Vinod thapa

503 |

Entrepruner

504 |

505 |

506 |

507 | 508 |

509 | 510 |

511 |

Calvin: You know sometimes when I'm talking, my words can't keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice.

512 |

513 |

514 |

517 |

518 |

Vinod thapa

519 |

Entrepruner

520 |

521 |

522 |

523 | 524 |

525 | 526 |

527 |

Calvin: You know sometimes when I'm talking, my words can't keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice.

528 |

529 |

530 |

533 |

534 |

Vinod thapa

535 |

Entrepruner

536 |

537 |

538 |

539 | 540 |

541 | 542 |

543 |

Calvin: You know sometimes when I'm talking, my words can't keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice.

544 |

545 |

546 |

549 |

550 |

Vinod thapa

551 |

Entrepruner

552 |

553 |

554 |

555 | 556 |

557 | 558 |

559 |

Calvin: You know sometimes when I'm talking, my words can't keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice.

560 |

561 |

562 |

565 |

566 |

Vinod thapa

567 |

Entrepruner

568 |

569 |

570 |

571 | 572 |

573 | 574 |

575 |

Calvin: You know sometimes when I'm talking, my words can't keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice.

576 |

577 |

578 |

581 |

582 |

Vinod thapa

583 |

Entrepruner

584 |

585 |

586 |

587 | 588 |

589 | 590 |

591 |

Calvin: You know sometimes when I'm talking, my words can't keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice.

592 |

593 |

594 |

597 |

598 |

Vinod thapa

599 |

Entrepruner

600 |

601 |

602 |

603 | 604 | 605 |

606 |

607 |

608 | 609 |

610 | 611 | 614 | 615 |

616 |

617 |

618 |

I am available for freelancing

619 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum voluptates similique nulla vitae natus

620 | HIRE ME 621 |

622 |

623 | 624 | 627 | 628 |

629 |

630 |

contact us

631 |

632 | 633 |

634 | 651 |

652 |

653 | 654 | 657 | 658 | 728 | 729 | 730 | 731 | 734 | 738 | 742 | 743 | 744 | 745 | 746 | -------------------------------------------------------------------------------- /public/index.js: -------------------------------------------------------------------------------- 1 | // ======================================== 2 | // Responsive navigation 3 | // ======================================== 4 | const mobile_nav = document.querySelector(".mobile-navbar-btn"); 5 | const nav_header = document.querySelector(".header"); 6 | 7 | const toggleNavbar = () => { 8 | // alert("hi"); 9 | nav_header.classList.toggle("active"); 10 | }; 11 | 12 | mobile_nav.addEventListener("click", () => toggleNavbar()); 13 | 14 | // ======================================== 15 | // sticky navigation 16 | // ======================================== 17 | const sectionHero = document.querySelector(".section-hero"); 18 | 19 | const observer = new IntersectionObserver( 20 | (entries) => { 21 | const ent = entries[0]; 22 | console.log(ent); 23 | !ent.isIntersecting ? 24 | document.body.classList.add("sticky") : 25 | document.body.classList.remove("sticky"); 26 | }, { 27 | // viewport 28 | root: null, 29 | threshold: 0, 30 | rootMargin: "-100px", 31 | } 32 | ); 33 | // when the hero section end part reached then we need to show the sticky navigation 34 | observer.observe(sectionHero); 35 | 36 | // ======================================== 37 | // how to add media queries in JS 38 | // ======================================== 39 | function myFunction(widthSize) { 40 | if (widthSize.matches) { 41 | // If media query matches 42 | const swiper = new Swiper(".swiper", { 43 | slidesPerView: 1, 44 | spaceBetween: 30, 45 | autoplay: { 46 | delay: 2500, 47 | disableOnInteraction: false, 48 | }, 49 | 50 | pagination: { 51 | el: ".swiper-pagination", 52 | clickable: true, 53 | }, 54 | }); 55 | } else { 56 | const swiper = new Swiper(".swiper", { 57 | slidesPerView: 2, 58 | spaceBetween: 30, 59 | autoplay: { 60 | delay: 2500, 61 | disableOnInteraction: false, 62 | }, 63 | pagination: { 64 | el: ".swiper-pagination", 65 | clickable: true, 66 | }, 67 | }); 68 | } 69 | } 70 | 71 | const widthSize = window.matchMedia("(max-width: 780px)"); 72 | // Call listener function at run time 73 | myFunction(widthSize); 74 | // Attach listener function on state changes 75 | widthSize.addListener(myFunction); 76 | 77 | // ======================================== 78 | // scroll to top 79 | // ======================================== 80 | const footerElm = document.querySelector(".section-footer"); 81 | 82 | const scrollElement = document.createElement("div"); 83 | scrollElement.classList.add("scrollTop-style"); 84 | 85 | // I am adding the button element inside the div element 86 | scrollElement.innerHTML = ` `; 87 | 88 | // add to the bottom of the page 89 | footerElm.after(scrollElement); 90 | 91 | // deleting the dom element 92 | const scrollTop = () => { 93 | sectionHero.scrollIntoView({ behavior: "smooth" }); 94 | }; 95 | 96 | document.querySelector(".scroll-top").addEventListener("click", scrollTop); 97 | 98 | // get the data attributes 99 | 100 | // ======================================== 101 | // smooth scrolling 102 | // ======================================== 103 | 104 | const portfolioSection = document.querySelector(".section-portfolio"); 105 | const contactSection = document.querySelector(".section-contact"); 106 | 107 | document.querySelector(".portfolio-link").addEventListener("click", (e) => { 108 | e.preventDefault(); 109 | portfolioSection.scrollIntoView({ behavior: "smooth" }); 110 | }); 111 | 112 | document.querySelector(".hireme-btn").addEventListener("click", (e) => { 113 | e.preventDefault(); 114 | contactSection.scrollIntoView({ behavior: "smooth" }); 115 | }); 116 | 117 | // ======================================== 118 | // creating a portfolio tabbed component 119 | // ======================================== 120 | 121 | const port_btn = document.querySelector(".p-btns"); 122 | const p_btn = document.querySelectorAll(".p-btn"); 123 | const img_div = document.querySelectorAll(".img-ovelay"); 124 | 125 | port_btn.addEventListener("click", (e) => { 126 | // console.log(e.target); 127 | 128 | // we will get which child element was clicked 129 | const p_btn_clicked = e.target; 130 | console.log(p_btn_clicked); 131 | 132 | if (!p_btn_clicked.classList.contains("p-btn")) return; 133 | // always remove the classList first then add the class 134 | p_btn.forEach((curElem) => curElem.classList.remove("p-btn-active")); 135 | // img_div.forEach((curElem) => 136 | // curElem.classList.remove("portfolio-image-active") 137 | // ); 138 | 139 | p_btn_clicked.classList.add("p-btn-active"); 140 | 141 | // to find the p-img class number of the images using the btn data attribute number 142 | 143 | const btn_num = p_btn_clicked.dataset.btnNum; 144 | // console.log(btn_num); 145 | 146 | const img_active = document.querySelectorAll(`.p-btn--${btn_num}`); 147 | // console.log(img_active); 148 | 149 | img_div.forEach((curElem) => 150 | curElem.classList.add("portfolio-image-not-active") 151 | ); 152 | 153 | img_active.forEach((curElem) => 154 | curElem.classList.remove(`portfolio-image-not-active`) 155 | ); 156 | }); 157 | 158 | // ======================================== 159 | // lazy loading section 160 | // ======================================== 161 | const imgRef = document.querySelector("img[data-src]"); 162 | console.log(imgRef); 163 | 164 | const lazyImg = (entries) => { 165 | const [entry] = entries; 166 | if (!entry.isIntersecting) return; 167 | entry.target.src = imgRef.dataset.src; 168 | }; 169 | 170 | const imgObserver = new IntersectionObserver(lazyImg, { 171 | root: null, 172 | threshold: 0, 173 | // rootMargin: "100px", 174 | }); 175 | 176 | imgObserver.observe(imgRef); 177 | 178 | // ======================================== 179 | // animated counter number 180 | // ======================================== 181 | 182 | const workSection = document.querySelector(".section-work-data"); 183 | 184 | const workSectionObserve = (entries) => { 185 | const [entry] = entries; 186 | if (!entry.isIntersecting) return; 187 | console.log(entries); 188 | 189 | 190 | const counterNum = document.querySelectorAll(".counter-numbers"); 191 | // console.log(counterNum); 192 | const speed = 200; 193 | 194 | counterNum.forEach((curNumber) => { 195 | const updateNumber = () => { 196 | const targetNumber = parseInt(curNumber.dataset.number); 197 | // console.log(targetNumber); 198 | const initialNumber = parseInt(curNumber.innerText); 199 | // console.log(initialNumber); 200 | const incrementNumber = Math.trunc(targetNumber / speed); 201 | // i am adding the value to the main number 202 | // console.log(incrementNumber); 203 | 204 | if (initialNumber < targetNumber) { 205 | curNumber.innerText = `${initialNumber + incrementNumber}+`; 206 | setTimeout(updateNumber, 10); 207 | } else { 208 | curNumber.innerText = `${targetNumber}+`; 209 | } 210 | 211 | }; 212 | updateNumber(); 213 | }); 214 | }; 215 | 216 | const workSecObserver = new IntersectionObserver(workSectionObserve, { 217 | root: null, 218 | threshold: 0, 219 | }); 220 | 221 | workSecObserver.observe(workSection); -------------------------------------------------------------------------------- /public/service.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Service Page 8 | 15 | 16 | 17 | 18 | 19 | 53 | 54 | 57 |

58 |

59 |

Service Offers

60 |

61 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem ex 62 | dolores tempore possimus, mollitia vero quas 63 |

64 |

65 | 66 |

67 |

68 | 69 |

web Design

70 |

71 | “It is not because things are difficult that we do not dare; it is 72 | because we do not dare that they are difficult.” 73 |

74 |

75 | 76 |

77 | 78 |

web development

79 |

80 | “It is not because things are difficult that we do not dare; it is 81 | because we do not dare that they are difficult.” 82 |

83 |

84 | 85 |

86 | 87 |

photography

88 |

89 | “It is not because things are difficult that we do not dare; it is 90 | because we do not dare that they are difficult.” 91 |

92 |

93 | 94 |

95 | 96 |

clipping path

97 |

98 | “It is not because things are difficult that we do not dare; it is 99 | because we do not dare that they are difficult.” 100 |

101 |

102 |

103 | 104 |

apps interface

105 |

106 | “It is not because things are difficult that we do not dare; it is 107 | because we do not dare that they are difficult.” 108 |

109 |

110 |

111 | 112 |

graphic design

113 |

114 | “It is not because things are difficult that we do not dare; it is 115 | because we do not dare that they are difficult.” 116 |

117 |

118 |

119 |

120 | 121 | 124 | 125 | 240 | 241 | 244 | 248 | 252 | 253 | 254 | 255 | 256 | --------------------------------------------------------------------------------