├── .DS_Store ├── images ├── .DS_Store ├── stack │ ├── CSS.png │ ├── HTML.png │ ├── React.png │ ├── Express.png │ ├── Tailwind.png │ ├── NextJsCircle.png │ ├── MaterialUI.svg │ ├── ChartJs.svg │ ├── Git.svg │ ├── Typescript.svg │ ├── Github.svg │ ├── Bootstrap.svg │ ├── Javascript.svg │ ├── Vercel.svg │ ├── Redux.svg │ ├── Graphql.svg │ ├── Docker.svg │ ├── MongoDB.svg │ ├── Next.svg │ ├── Saas.svg │ ├── Bash.svg │ ├── NodeJs.svg │ └── K8s.svg ├── userAsset │ ├── circle.png │ ├── cube.png │ ├── dots.png │ ├── plus.png │ ├── NavLogo.webp │ ├── zigzags.png │ ├── UserImage.jpg │ └── blob vector.png └── projects │ ├── Project1.png │ ├── Project2.png │ ├── Project3.png │ └── Project4.png ├── README.md ├── styles.css └── index.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/.DS_Store -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/.DS_Store -------------------------------------------------------------------------------- /images/stack/CSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/stack/CSS.png -------------------------------------------------------------------------------- /images/stack/HTML.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/stack/HTML.png -------------------------------------------------------------------------------- /images/stack/React.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/stack/React.png -------------------------------------------------------------------------------- /images/stack/Express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/stack/Express.png -------------------------------------------------------------------------------- /images/stack/Tailwind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/stack/Tailwind.png -------------------------------------------------------------------------------- /images/userAsset/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/userAsset/circle.png -------------------------------------------------------------------------------- /images/userAsset/cube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/userAsset/cube.png -------------------------------------------------------------------------------- /images/userAsset/dots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/userAsset/dots.png -------------------------------------------------------------------------------- /images/userAsset/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/userAsset/plus.png -------------------------------------------------------------------------------- /images/projects/Project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/projects/Project1.png -------------------------------------------------------------------------------- /images/projects/Project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/projects/Project2.png -------------------------------------------------------------------------------- /images/projects/Project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/projects/Project3.png -------------------------------------------------------------------------------- /images/projects/Project4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/projects/Project4.png -------------------------------------------------------------------------------- /images/stack/NextJsCircle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/stack/NextJsCircle.png -------------------------------------------------------------------------------- /images/userAsset/NavLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/userAsset/NavLogo.webp -------------------------------------------------------------------------------- /images/userAsset/zigzags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/userAsset/zigzags.png -------------------------------------------------------------------------------- /images/userAsset/UserImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/userAsset/UserImage.jpg -------------------------------------------------------------------------------- /images/userAsset/blob vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumitkandpal3/Portfolio/HEAD/images/userAsset/blob vector.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio 2 | 3 | This is my Portfolio which i created using HTML and CSS. 4 | 5 | You can visit my portfolio Click Here 6 | -------------------------------------------------------------------------------- /images/stack/MaterialUI.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/stack/ChartJs.svg: -------------------------------------------------------------------------------- 1 | Artboard 6 -------------------------------------------------------------------------------- /images/stack/Git.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | git 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/stack/Typescript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/stack/Github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | github 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/stack/Bootstrap.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/stack/Javascript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | javascript 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/stack/Vercel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 15 | 16 | -------------------------------------------------------------------------------- /images/stack/Redux.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/stack/Graphql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/stack/Docker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/stack/MongoDB.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | mongodb 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/stack/Next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | next-black 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /images/stack/Saas.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /images/stack/Bash.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/stack/NodeJs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | /* box-sizing: border-box; */ 7 | font-family: "Be Vietnam Pro", sans-serif; 8 | } 9 | :root { 10 | --bgOrange: #e84949; 11 | } 12 | 13 | #wrappper { 14 | height: 100vh; 15 | overflow-y: auto; 16 | overflow-x: hidden; 17 | } 18 | 19 | .container { 20 | width: 1200px; 21 | margin: 0 auto; 22 | } 23 | 24 | .navbar { 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | 29 | padding-top: 1rem; 30 | } 31 | 32 | .logo { 33 | width: 80px; 34 | } 35 | 36 | .logo-container { 37 | display: flex; 38 | justify-content: baseline; 39 | align-items: center; 40 | } 41 | 42 | .logo-text { 43 | margin-left: -1.2rem; 44 | font-size: 28px; 45 | } 46 | 47 | .nav-item { 48 | display: flex; 49 | gap: 2rem; 50 | padding: 0 4rem; 51 | } 52 | 53 | .nav-item div { 54 | font-size: 20px; 55 | font-weight: 500; 56 | cursor: pointer; 57 | } 58 | 59 | .nav-item div a { 60 | color: black; 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | } 66 | 67 | .nav-item div:hover { 68 | transition: 0.8s; 69 | font-weight: bold; 70 | } 71 | 72 | .hero-section { 73 | position: relative; 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | 78 | gap: 5rem; 79 | margin: 4rem auto; 80 | padding: 0 1rem; 81 | padding-bottom: 8rem; 82 | } 83 | 84 | .faded-text { 85 | user-select: none; 86 | font-size: 7em; 87 | color: rgb(231, 231, 231); 88 | 89 | bottom: -16%; 90 | left: -5%; 91 | font-weight: bold; 92 | transition: all 3s; 93 | } 94 | 95 | .hero-section-left { 96 | display: flex; 97 | flex-direction: column; 98 | justify-content: center; 99 | gap: 2rem; 100 | } 101 | 102 | .hero-section-head { 103 | font-size: 35px; 104 | color: #343d68; 105 | font-weight: 500; 106 | } 107 | .role { 108 | color: #4e45d5; 109 | font-weight: 800; 110 | } 111 | 112 | .hero-section-sub-heading { 113 | font-size: 45px; 114 | line-height: 45px; 115 | } 116 | 117 | .hero-section-description { 118 | margin-top: 1rem; 119 | width: 70%; 120 | font-weight: 500; 121 | } 122 | 123 | .btn-pink { 124 | width: fit-content; 125 | background-color: #e84949; 126 | padding: 0.8rem 2.3rem; 127 | color: white; 128 | font-size: 18px; 129 | box-shadow: 5px 5px 7px 0px #0000003f; 130 | position: relative; 131 | z-index: 1; 132 | } 133 | .btn-pink:hover { 134 | color: #e84949; 135 | font-weight: 700; 136 | } 137 | .btn-pink::before { 138 | content: ""; 139 | background-color: #fff; 140 | position: absolute; 141 | top: 0; 142 | left: 0; 143 | bottom: 0; 144 | right: 0; 145 | transform: scaleX(0); 146 | transform-origin: left; 147 | transition: all 0.5s; 148 | z-index: -1; 149 | } 150 | 151 | .btn-pink:hover::before { 152 | cursor: pointer; 153 | transform: scaleX(1); 154 | } 155 | 156 | .hero-section-right { 157 | position: relative; 158 | } 159 | .absolute { 160 | position: absolute; 161 | } 162 | .user-image { 163 | padding: 2.5rem; 164 | filter: grayscale(1); 165 | transition: all 1s; 166 | animation: scaleImage 5s linear infinite; 167 | } 168 | 169 | .user-image img { 170 | width: 350px; 171 | height: 400px; 172 | z-index: -9; 173 | } 174 | 175 | @keyframes scaleImage { 176 | 0% { 177 | filter: grayscale(0); 178 | transform: scale(1); 179 | } 180 | 181 | 50% { 182 | transform: scale(1.1); 183 | filter: grayscale(1); 184 | 185 | box-shadow: 3px 3px 10px black; 186 | } 187 | 188 | 100% { 189 | transform: scale(1); 190 | filter: grayscale(0); 191 | } 192 | } 193 | 194 | .icon-dots { 195 | z-index: 9; 196 | bottom: -1rem; 197 | right: 0; 198 | animation-name: dotsAnimation; 199 | animation-duration: 5s; 200 | animation-iteration-count: infinite; 201 | } 202 | 203 | @keyframes dotsAnimation { 204 | 0% { 205 | transform: translateY(0px); 206 | } 207 | 208 | 50% { 209 | transform: translateY(-15px); 210 | } 211 | 212 | 100% { 213 | transform: translateY(0px); 214 | } 215 | } 216 | 217 | .icon-cube { 218 | z-index: 9; 219 | top: -0.8rem; 220 | right: 1em; 221 | animation-name: cubeRotate; 222 | animation-duration: 3s; 223 | animation-iteration-count: infinite; 224 | } 225 | 226 | @keyframes cubeRotate { 227 | 0% { 228 | transform: rotateY(0deg) translateY(0px); 229 | } 230 | 231 | 50% { 232 | transform: rotateY(180deg) translateY(-12px); 233 | } 234 | 235 | 100% { 236 | transform: rotateY(360deg) translateY(0px); 237 | } 238 | } 239 | 240 | .icon-circle { 241 | z-index: 9; 242 | left: 0; 243 | bottom: 0; 244 | animation-name: shakeEffect; 245 | animation-duration: 6s; 246 | animation-timing-function: linear; 247 | animation-iteration-count: infinite; 248 | } 249 | @keyframes shakeEffect { 250 | 50% { 251 | left: 5%; 252 | bottom: 10%; 253 | } 254 | } 255 | 256 | .icon-zigzag { 257 | z-index: 9; 258 | top: 1.5em; 259 | left: -0.3em; 260 | animation: zigzagAnimation 5s ease-in infinite; 261 | } 262 | 263 | @keyframes zigzagAnimation { 264 | 50% { 265 | left: 5%; 266 | top: 2%; 267 | } 268 | } 269 | .icon-plus { 270 | z-index: 9; 271 | top: -0.8rem; 272 | left: 50%; 273 | animation: shakeEffectPlus 5s ease-in infinite; 274 | } 275 | 276 | @keyframes shakeEffectPlus { 277 | 50% { 278 | top: 3%; 279 | left: 48%; 280 | } 281 | } 282 | 283 | .project-section { 284 | background-color: rgb(231, 231, 231); 285 | margin-top: 4rem; 286 | } 287 | 288 | .page-header { 289 | color: var(--bgOrange); 290 | font-size: 90px; 291 | text-align: center; 292 | padding-top: 30px; 293 | } 294 | 295 | .project-container { 296 | max-width: 1200px; 297 | margin: 0 auto; 298 | padding: 3rem 0; 299 | 300 | display: flex; 301 | flex-direction: column; 302 | gap: 120px; 303 | } 304 | 305 | .project-card { 306 | width: 80%; 307 | height: 550px; 308 | background-image: url(./images/projects/Project1.png); 309 | background-size: cover; 310 | position: relative; 311 | box-shadow: 0px 0px 40px #1f1f1f; 312 | } 313 | 314 | .project-card::after { 315 | content: ""; 316 | position: absolute; 317 | top: 0; 318 | left: 0; 319 | bottom: 0; 320 | right: 0; 321 | background-color: #1f1f1f9a; 322 | z-index: 0; 323 | /* transform: scaleX(1); */ 324 | } 325 | 326 | .project-card::before { 327 | content: ""; 328 | position: absolute; 329 | top: 0; 330 | left: 0; 331 | bottom: 0; 332 | right: 0; 333 | background: linear-gradient(45deg, #343d68, #343d68be, #343d687c); 334 | transform: scaleX(0); 335 | transform-origin: left; 336 | transition: all 0.4s; 337 | z-index: 1; 338 | } 339 | 340 | .project-card:hover::before { 341 | transform: scaleX(1); 342 | } 343 | 344 | .project-number { 345 | position: absolute; 346 | font-size: 200px; 347 | font-weight: 600; 348 | color: white; 349 | z-index: 10; 350 | /* display: none; */ 351 | opacity: 0; 352 | } 353 | 354 | .project-card:hover .project-number { 355 | /* display:block; */ 356 | opacity: 1; 357 | } 358 | 359 | .project-number-right { 360 | right: -40px; 361 | top: -45px; 362 | } 363 | 364 | .project-number-left { 365 | left: -40px; 366 | top: -45px; 367 | } 368 | 369 | .project-content { 370 | position: absolute; 371 | display: flex; 372 | flex-direction: column; 373 | color: white; 374 | padding: 2em; 375 | bottom: 20%; 376 | z-index: 5; 377 | gap: 1em; 378 | transition: all 0.4s; 379 | } 380 | 381 | .project-content-left { 382 | left: 10%; 383 | } 384 | 385 | .project-content-right { 386 | right: 10%; 387 | } 388 | 389 | .project-skills-container { 390 | width: 60%; 391 | display: flex; 392 | gap: 10px; 393 | flex-wrap: wrap; 394 | } 395 | 396 | .project-skill { 397 | width: 40px; 398 | } 399 | 400 | .project-heading { 401 | font-size: 50px; 402 | font-weight: bold; 403 | line-height: 3rem; 404 | } 405 | 406 | .project-subHeading { 407 | width: 70%; 408 | font-size: 16px; 409 | font-style: italic; 410 | } 411 | 412 | .btn-group { 413 | display: flex; 414 | gap: 0.9rem; 415 | align-items: center; 416 | } 417 | 418 | .icon { 419 | cursor: pointer; 420 | color: white; 421 | font-size: 35px; 422 | transition: all 0.4s; 423 | } 424 | 425 | .icon:hover { 426 | color: var(--bgOrange); 427 | } 428 | 429 | .project-card:hover .project-content { 430 | transform: scale(1.1); 431 | } 432 | 433 | #project1 { 434 | background-image: url(./images/projects/Project1.png); 435 | } 436 | 437 | #project2 { 438 | margin-left: 120px; 439 | background-image: url(./images/projects/Project2.png); 440 | } 441 | 442 | #project3 { 443 | background-image: url(./images/projects/Project3.png); 444 | } 445 | 446 | #project4 { 447 | margin-left: 120px; 448 | background-image: url(./images/projects/Project4.png); 449 | } 450 | 451 | .skills-container { 452 | position: relative; 453 | display: flex; 454 | padding: 5rem; 455 | margin: 10rem auto; 456 | gap: 30px; 457 | } 458 | 459 | .skill-container-left { 460 | width: 50%; 461 | display: flex; 462 | flex-direction: column; 463 | } 464 | 465 | .skill-container-right { 466 | display: flex; 467 | flex-wrap: wrap; 468 | width: 50%; 469 | position: relative; 470 | gap: 2rem; 471 | justify-content: center; 472 | } 473 | 474 | .skill-fade-text { 475 | position: absolute; 476 | font-size: 15em; 477 | font-style: bold; 478 | color: rgb(231, 231, 231); 479 | bottom: -34.5%; 480 | right: 1%; 481 | user-select: none; 482 | overflow-y: hidden; 483 | } 484 | 485 | .blob-style { 486 | position: absolute; 487 | top: 50%; 488 | left: 50%; 489 | z-index: -5; 490 | transform: translate(-50%, -50%); 491 | animation: blobAnimate 3s linear infinite; 492 | } 493 | 494 | @keyframes blobAnimate { 495 | 50% { 496 | top: 54%; 497 | left: 46%; 498 | } 499 | } 500 | 501 | .skills-logo { 502 | width: 90px; 503 | transition: all 0.5s; 504 | } 505 | 506 | .skills-logo:hover { 507 | transform: scale(1.2); 508 | } 509 | 510 | .skill-heading { 511 | font-size: 50px; 512 | font-style: bold; 513 | color: var(--bgOrange); 514 | line-height: 50px; 515 | } 516 | 517 | .caps { 518 | font-size: 90px; 519 | } 520 | 521 | .skill-subHeading { 522 | margin-top: 1rem; 523 | width: 85%; 524 | text-align: justify; 525 | } 526 | 527 | .skill-subHeading p { 528 | margin: 15px 0; 529 | } 530 | 531 | .contactus-form-container { 532 | width: 100%; 533 | background-color: rgb(231, 231, 231); 534 | } 535 | 536 | .contactus-heading { 537 | font-size: 5em; 538 | color: var(--bgOrange); 539 | padding-top: 2rem; 540 | } 541 | 542 | .contactus-sub-heading { 543 | font-size: 3rem; 544 | color: #343d68aa; 545 | text-transform: capitalize; 546 | } 547 | 548 | .contactus-form-container { 549 | margin-top: 25px; 550 | display: flex; 551 | align-items: center; 552 | justify-content: center; 553 | } 554 | 555 | .form { 556 | display: flex; 557 | flex-direction: column; 558 | gap: 30px; 559 | width: 70%; 560 | margin: 2rem 5rem; 561 | } 562 | 563 | .formfield-container { 564 | width: 100%; 565 | } 566 | 567 | .formfield { 568 | width: 100%; 569 | height: 42px; 570 | padding: 0 2rem; 571 | font-size: 18px; 572 | border-radius: 5px; 573 | box-shadow: 2px 2px 10px #1f1f1f; 574 | font-weight: 500; 575 | border: none; 576 | margin-top: 27px; 577 | } 578 | 579 | .formfield-textarea { 580 | height: auto; 581 | padding-top: 1rem; 582 | } 583 | 584 | #submit-btn { 585 | border: none; 586 | font-size: 1.4rem; 587 | margin: 1rem 0; 588 | } 589 | 590 | #submit-btn:hover { 591 | scale: 0.9; 592 | } 593 | 594 | .submit-icon { 595 | padding: 0 1rem; 596 | font-size: 1.5rem; 597 | } 598 | 599 | footer { 600 | position: relative; 601 | margin-top: -1px; 602 | background-color: #343d68; 603 | padding: 5rem; 604 | } 605 | 606 | .footer-wrapper { 607 | display: flex; 608 | gap: 1rem; 609 | padding: 1.2rem; 610 | justify-content: space-between; 611 | align-items: center; 612 | } 613 | 614 | .footer-faded-text { 615 | position: absolute; 616 | left: 0; 617 | bottom: 0; 618 | color: #535c87; 619 | user-select: none; 620 | font-size: 5em; 621 | } 622 | 623 | .link-wrapper { 624 | display: flex; 625 | gap: 1.2rem; 626 | } 627 | 628 | .link-wrapper div a { 629 | color: white; 630 | text-decoration: none; 631 | transition: all 0.6s; 632 | } 633 | 634 | .link-wrapper div a:hover { 635 | color: var(--bgOrange); 636 | } 637 | 638 | .icon-wrapper { 639 | display: flex; 640 | gap: 1rem; 641 | } 642 | 643 | /* Resposiveness */ 644 | 645 | @media (max-width: 1300px) { 646 | .page-header { 647 | padding-top: 30px; 648 | color: var(--bgOrange); 649 | text-align: center; 650 | font-size: 40px; 651 | } 652 | .project-container { 653 | padding: 5px; 654 | margin: 10px; 655 | gap: 60px; 656 | } 657 | .project-card { 658 | width: 100%; 659 | height: 300px; 660 | } 661 | .project-card { 662 | background-size: cover; 663 | background-position: center; 664 | } 665 | .project-content { 666 | scale: 0.5; 667 | bottom: 0; 668 | left: 0; 669 | right: 0; 670 | top: 0; 671 | } 672 | .project-content-left { 673 | left: 0; 674 | } 675 | .project-heading { 676 | font-size: 40px; 677 | width: 100%; 678 | } 679 | .project-sub-heading { 680 | width: 100%; 681 | } 682 | #project2 { 683 | margin-left: 0; 684 | } 685 | #project4 { 686 | margin-left: 0; 687 | } 688 | .project-skill-container { 689 | width: 100%; 690 | } 691 | .project-skill { 692 | width: 35px; 693 | } 694 | .project-card:hover .project-number { 695 | display: none; 696 | } 697 | .project-card:hover .project-content { 698 | scale: 0.55; 699 | } 700 | .faded-text { 701 | margin-left: 6rem; 702 | } 703 | } 704 | 705 | @media (max-width: 500px) { 706 | .hero-section { 707 | display: block; 708 | } 709 | .user-image { 710 | display: block; 711 | width: 60vw; 712 | height: 60vh; 713 | } 714 | .user-image img { 715 | display: block; 716 | width: 60vw; 717 | height: 60vh; 718 | } 719 | } 720 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Portfolio Website 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 |
umit Kandpal
16 |
17 | 18 |
19 |
Projects
20 |
Skills
21 |
Contact Me
22 |
23 |
24 | 25 |
26 |
Sumit Kandpal
27 |
28 |
Hi! Sumit Kandpal
29 | 30 |
31 | I am a 32 |
33 | 34 |
35 | I'm a software developer and here is my portfolio website. Here 36 | you'll learn about my journey as a software developer. 37 |
38 | 39 |
Hire Me
40 | 41 |
42 | 43 |
44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 |
64 |
65 | 66 |
67 |

Projects

68 | 69 |
70 |
71 |
01
72 |
73 |
74 | 79 | 84 | 89 | 94 | 99 | 104 | 109 | 114 | 119 | 124 |
125 | 126 |

Spotify Clone

127 | 128 |

129 | A platform to listen music.Spotify is a digital music streaming 130 | service that gives you access to millions of songs, podcasts, 131 | and videos from artists all over the world. 132 |

133 | 134 |
135 |
Read More
136 | 140 | 141 | 142 | 143 | 144 | 145 |
146 |
147 |
148 | 149 |
150 |
02
151 |
152 |
153 | 158 | 163 | 168 | 173 | 178 | 183 | 188 |
189 |

Razorpay Clone

190 |

191 | Razorpay is a platform that enables businesses to accept, 192 | process, and disburse payments. 193 |

194 |
195 |
Read More
196 | 197 | 198 | 199 | 200 | 201 | 202 |
203 |
204 |
205 | 206 |
207 |
03
208 |
209 |
210 | 215 | 220 | 225 | 230 | 235 | 240 | 245 | 250 | 255 | 260 |
261 | 262 |

Modern Chair

263 | 264 |

265 | A chair which change it's colour along with it's background. 266 |

267 | 268 |
269 |
Read More
270 | 274 | 275 | 276 | 277 | 278 | 279 |
280 |
281 |
282 | 283 |
284 |
04
285 |
286 |
287 | 292 | 297 | 302 | 307 | 312 | 317 | 322 |
323 |

Discord Clone

324 |

325 | Discord is an instant messaging and VoIP social platform. Users 326 | have the ability to communicate with each other. 327 |

328 |
329 |
Read More
330 | 334 | 335 | 336 | 337 | 338 | 339 |
340 |
341 |
342 | 343 | 344 | 345 |
346 |
347 | 348 |
349 |
Skills
350 | 351 |
352 |

353 | Me and 354 |
355 | MyTech Stack 356 |

357 | 358 |
359 |

360 | Hi Everyone My name is Sumit Kandpal I am a Full Stack Web 361 | Developer. 362 |

363 |

364 | I expand and utilize my learning skills and knowledge to develop 365 | many websites. 366 |

367 |

368 | My primary language is English,and I am proficient in 369 | understanding and generating text in English. My language 370 | capabilities extend to other languages as well. 371 |

372 |
373 |
374 | 375 |
376 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 |
403 |
404 | 405 |
406 |
407 |

Contact me

408 | 409 |

410 | Questions, thoughts, or just want to say hello? 411 |

412 | 413 |
414 |
415 |
416 | 423 | 424 | 431 | 432 | 439 | 440 | 448 |
449 | 450 |
451 | 456 |
457 |
458 |
459 |
460 |
461 | 462 | 505 |
506 | 507 | 508 | 512 | 527 | 528 | 529 | -------------------------------------------------------------------------------- /images/stack/K8s.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------