├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── about-banner.png │ ├── adobe-xd.png │ ├── ajax.png │ ├── angular.png │ ├── bootstrap.png │ ├── clickup.png │ ├── command.png │ ├── css3.png │ ├── firebase.png │ ├── git.png │ ├── gulp.png │ ├── hero-banner-md.png │ ├── hero-banner-sm.png │ ├── hero-banner.png │ ├── html5.png │ ├── javascript.png │ ├── jquery.png │ ├── npm.png │ ├── photoshop.png │ ├── project-1.png │ ├── project-2.png │ ├── project-3.png │ ├── project-4.png │ ├── project-5.png │ ├── project-6.png │ ├── project-7.png │ ├── pugjs.png │ ├── react.png │ ├── sass.png │ ├── slack.png │ ├── stats-card_icon-1.png │ ├── stats-card_icon-2.png │ ├── stats-card_icon-3.png │ ├── trello.png │ ├── typescript.png │ ├── vs-code.png │ ├── vue.png │ └── webpack.png └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images ├── desktop.png └── project-logo.png └── style-guide.md /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |

Jack - Personal portfolio

6 | 7 | This website is fully responsive personal portfolio,
Responsive for all devices, built using HTML, CSS, and JavaScript. 8 | 9 | ➥ Live Demo 10 | 11 |
12 | 13 |
14 | 15 | ### Demo Screeshots 16 | 17 | ![Jack Portfolio Desktop Demo](./readme-images/desktop.png "Desktop Demo") 18 | 19 | This project is **free to use** and does not contains any license. 20 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | * style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | * #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --raw-seinna: hsl(24, 74%, 58%); 24 | --sizzling-sunrise: hsl(51, 95%, 54%); 25 | --scarlet: hsl(13, 96%, 47%); 26 | --black: hsl(0, 0%, 0%); 27 | --white: hsl(0, 0%, 100%); 28 | 29 | /** 30 | * typography 31 | */ 32 | 33 | --ff-saira-stencil-one: "Saira Stencil One", sans-serif; 34 | --ff-poppins: 'Poppins', sans-serif; 35 | --ff-roboto: 'Roboto', sans-serif; 36 | 37 | --fs-1: 2rem; 38 | --fs-2: calc(1.813rem + 1vw); 39 | --fs-3: calc(1.313rem + 1vw); 40 | --fs-4: 1.4rem; 41 | --fs-5: 1rem; 42 | --fs-6: 0.813rem; 43 | --fs-7: 0.75rem; 44 | 45 | --fw-400: 400; 46 | --fw-700: 700; 47 | 48 | /** 49 | * transition 50 | */ 51 | 52 | --transition-1: 0.25s ease-in-out; 53 | 54 | /** 55 | * spacing 56 | */ 57 | 58 | --section-padding: 80px; 59 | 60 | /** 61 | * radius 62 | */ 63 | 64 | --radius-4: 4px; 65 | --radius-12: 12px; 66 | 67 | } 68 | 69 | 70 | 71 | 72 | 73 | /*-----------------------------------*\ 74 | * #THEME COLORS 75 | \*-----------------------------------*/ 76 | 77 | body.dark_theme { 78 | 79 | --bg-primary: hsl(0, 0%, 12%); 80 | --bg-secondary: hsl(0, 0%, 19%); 81 | --color-primary: hsl(0, 0%, 100%); 82 | --color-secondary: hsl(0, 0%, 62%); 83 | --card-shadow: hsla(0, 0%, 0%, 0.4); 84 | --input-bg: hsl(0, 0%, 16%); 85 | 86 | --shadow-1: 10px 10px 40px var(--card-shadow); 87 | 88 | } 89 | 90 | body.light_theme { 91 | 92 | --bg-primary: hsl(0, 0%, 90%); 93 | --bg-secondary: hsl(0, 0%, 100%); 94 | --color-primary: hsl(0, 0%, 12%); 95 | --color-secondary: hsl(0, 0%, 37%); 96 | --card-shadow: hsla(0, 0%, 0%, 0.1); 97 | --input-bg: hsl(0, 0%, 93%); 98 | 99 | --shadow-1: 10px 10px 40px var(--card-shadow); 100 | 101 | } 102 | 103 | 104 | 105 | 106 | 107 | /*-----------------------------------*\ 108 | * #RESET 109 | \*-----------------------------------*/ 110 | 111 | *, *::before, *::after { 112 | margin: 0; 113 | padding: 0; 114 | box-sizing: border-box; 115 | } 116 | 117 | li { list-style: none; } 118 | 119 | a { text-decoration: none; } 120 | 121 | a, 122 | img, 123 | time, 124 | span, 125 | input, 126 | label, 127 | select, 128 | button, 129 | textarea, 130 | ion-icon { display: block; } 131 | 132 | input, 133 | button, 134 | select, 135 | textarea { 136 | background: none; 137 | border: none; 138 | font: inherit; 139 | } 140 | 141 | button, 142 | select { cursor: pointer; } 143 | 144 | input, 145 | textarea { width: 100%; } 146 | 147 | ion-icon { pointer-events: none; } 148 | 149 | :is(a, button, select) { 150 | outline-color: var(--scarlet); 151 | outline-offset: 3px; 152 | } 153 | 154 | ::selection { 155 | background: var(--color-primary); 156 | color: var(--bg-primary); 157 | } 158 | 159 | html { 160 | font-family: var(--ff-roboto); 161 | scroll-behavior: smooth; 162 | } 163 | 164 | body { 165 | background: var(--bg-primary); 166 | transition: var(--transition-1); 167 | } 168 | 169 | body.active { overflow: hidden; } 170 | 171 | 172 | 173 | 174 | 175 | /*-----------------------------------*\ 176 | * #REUSED STYLE 177 | \*-----------------------------------*/ 178 | 179 | .container { padding-inline: 10px; } 180 | 181 | .h1 { 182 | font-size: var(--fs-1); 183 | line-height: 1.2; 184 | font-weight: 400; 185 | } 186 | 187 | .h2, 188 | .h3, 189 | .h4 { 190 | color: var(--color-primary); 191 | font-family: var(--ff-poppins); 192 | line-height: 1.2; 193 | } 194 | 195 | .h2 { font-size: var(--fs-2); } 196 | 197 | .h3 { font-size: var(--fs-3); } 198 | 199 | .h4 { font-size: var(--fs-5); } 200 | 201 | .w-100 { width: 100%; } 202 | 203 | .btn { 204 | max-width: max-content; 205 | color: var(--color-primary); 206 | font-weight: var(--fw-700); 207 | text-transform: uppercase; 208 | letter-spacing: 0.5px; 209 | padding: 10px 25px; 210 | border: 1px solid transparent; 211 | border-radius: var(--radius-4); 212 | transition: var(--transition-1); 213 | } 214 | 215 | .btn-primary { border-color: var(--color-primary); } 216 | 217 | .btn-primary:is(:hover, :focus) { 218 | background: var(--color-primary); 219 | color: var(--bg-primary); 220 | } 221 | 222 | .btn-secondary { 223 | background: var(--raw-seinna); 224 | border-color: var(--raw-seinna); 225 | color: var(--black); 226 | } 227 | 228 | .btn-secondary:is(:hover, :focus) { --raw-seinna: hsl(24, 74%, 64%); } 229 | 230 | .section-subtitle { 231 | position: relative; 232 | color: var(--color-secondary); 233 | text-transform: uppercase; 234 | padding-bottom: 5px; 235 | margin-bottom: 20px; 236 | } 237 | 238 | .section-subtitle::after { 239 | content: ""; 240 | position: absolute; 241 | top: 100%; 242 | left: 0; 243 | width: 60px; 244 | height: 2px; 245 | background: var(--color-secondary); 246 | } 247 | 248 | .section-title { 249 | max-width: 350px; 250 | margin-bottom: 30px; 251 | } 252 | 253 | .section-text { 254 | color: var(--color-secondary); 255 | line-height: 1.8; 256 | margin-bottom: 30px; 257 | } 258 | 259 | .tooltip { 260 | position: absolute; 261 | top: -40px; 262 | background: var(--raw-seinna); 263 | min-width: max-content; 264 | color: var(--white); 265 | font-size: 15px; 266 | font-weight: var(--fw-700); 267 | padding: 5px 10px; 268 | border-radius: var(--radius-4); 269 | box-shadow: var(--shadow-1); 270 | transform: translateY(-10px); 271 | opacity: 0; 272 | pointer-events: none; 273 | transition: var(--transition-1); 274 | z-index: 1; 275 | } 276 | 277 | 278 | 279 | 280 | 281 | /*-----------------------------------*\ 282 | * #HEADER 283 | \*-----------------------------------*/ 284 | 285 | .header { 286 | padding-block: 15px; 287 | position: fixed; 288 | top: 0; 289 | left: 0; 290 | width: 100%; 291 | transition: var(--transition-1); 292 | z-index: 4; 293 | } 294 | 295 | .header.active { 296 | padding-block: 12px; 297 | background: var(--bg-secondary); 298 | box-shadow: var(--shadow-1); 299 | } 300 | 301 | .header .container { 302 | display: flex; 303 | justify-content: space-between; 304 | align-items: center; 305 | gap: 10px; 306 | } 307 | 308 | .logo { 309 | position: relative; 310 | min-width: 77px; 311 | z-index: 2; 312 | } 313 | 314 | .logo a { 315 | color: var(--color-primary); 316 | font-family: var(--ff-saira-stencil-one); 317 | } 318 | 319 | .logo span { 320 | display: inline-block; 321 | color: var(--raw-seinna); 322 | margin-left: 2px; 323 | } 324 | 325 | .navbar-actions { 326 | display: flex; 327 | align-items: center; 328 | gap: 15px; 329 | margin-left: auto; 330 | } 331 | 332 | .navbar-actions select { 333 | color: var(--color-primary); 334 | width: 45px; 335 | } 336 | 337 | .navbar-actions option { 338 | background: var(--bg-primary); 339 | color: var(--color-primary); 340 | } 341 | 342 | .theme-btn { 343 | padding: 4px; 344 | width: 48px; 345 | background: var(--bg-secondary); 346 | border-radius: 100px; 347 | transition: var(--transition-1); 348 | } 349 | 350 | .header.active .theme-btn { background: var(--bg-primary); } 351 | 352 | .theme-btn .icon { 353 | position: relative; 354 | left: 0; 355 | width: 20px; 356 | height: 20px; 357 | border-radius: 50px; 358 | box-shadow: inset 9px -6px var(--color-primary); 359 | transition: var(--transition-1); 360 | } 361 | 362 | .theme-btn.active .icon { 363 | left: 20px; 364 | box-shadow: inset 20px -20px var(--sizzling-sunrise); 365 | } 366 | 367 | .nav-toggle-btn { 368 | position: relative; 369 | transform: rotate(-55deg); 370 | transition: var(--transition-1); 371 | z-index: 2; 372 | } 373 | 374 | .nav-toggle-btn.active { transform: rotate(-45deg); } 375 | 376 | .nav-toggle-btn span { 377 | width: 20px; 378 | height: 2px; 379 | background: var(--color-primary); 380 | margin: 5px; 381 | transition: var(--transition-1); 382 | } 383 | 384 | .nav-toggle-btn :is(.one, .three) { width: 10px; } 385 | 386 | .nav-toggle-btn .one { 387 | margin-left: auto; 388 | transform-origin: left; 389 | } 390 | 391 | .nav-toggle-btn .three { transform-origin: right; } 392 | 393 | .nav-toggle-btn.active .one { transform: rotate(90deg) translateX(-3px); } 394 | 395 | .nav-toggle-btn.active .three { transform: rotate(90deg) translateX(3px); } 396 | 397 | .navbar { 398 | position: fixed; 399 | background: var(--bg-secondary); 400 | top: 100%; 401 | left: 0; 402 | width: 100%; 403 | height: 100%; 404 | display: grid; 405 | place-items: center; 406 | visibility: hidden; 407 | transition: 0.75s cubic-bezier(0.71, 0.01, 0.24, 0.99); 408 | transition-delay: 0.5s; 409 | z-index: 1; 410 | } 411 | 412 | .navbar.active { 413 | top: 0; 414 | visibility: visible; 415 | transition-delay: 0s; 416 | } 417 | 418 | .navbar-list > li { 419 | margin-block: 20px; 420 | padding-inline: 50px; 421 | overflow: hidden; 422 | } 423 | 424 | .navbar-link { 425 | position: relative; 426 | width: max-content; 427 | margin-inline: auto; 428 | color: var(--color-primary); 429 | font-family: var(--ff-poppins); 430 | font-size: var(--fs-1); 431 | padding: 10px; 432 | transform: translateY(50px); 433 | transition: 0.75s cubic-bezier(0.68, -0.55, 0.27, 2); 434 | } 435 | 436 | .navbar.active .navbar-link { 437 | transform: translateY(0); 438 | transition-delay: 0.5s; 439 | } 440 | 441 | .navbar-link::before { 442 | content: ""; 443 | position: absolute; 444 | top: 50%; 445 | transform: translateY(-50%); 446 | left: 0; 447 | height: 5px; 448 | width: 0; 449 | background: var(--raw-seinna); 450 | transition: var(--transition-1); 451 | } 452 | 453 | .navbar-link:is(:hover, :focus)::before { width: 100%; } 454 | 455 | 456 | 457 | 458 | 459 | /*-----------------------------------*\ 460 | * #HERO 461 | \*-----------------------------------*/ 462 | 463 | main { overflow-x: hidden; } 464 | 465 | .hero { 466 | min-height: 100vh; 467 | display: flex; 468 | flex-direction: column; 469 | justify-content: center; 470 | align-items: center; 471 | padding-top: 115px; 472 | margin-bottom: var(--section-padding); 473 | } 474 | 475 | .hero-banner { 476 | max-width: 500px; 477 | width: 125%; 478 | margin-bottom: 30px; 479 | } 480 | 481 | :is(.hero-social-list, .scroll-down) { display: none; } 482 | 483 | .hero-content { max-width: 450px; } 484 | 485 | .hero-title { 486 | text-align: center; 487 | margin-bottom: 30px; 488 | } 489 | 490 | .hero .btn-primary { margin-inline: auto; } 491 | 492 | 493 | 494 | 495 | 496 | /*-----------------------------------*\ 497 | * #STATS 498 | \*-----------------------------------*/ 499 | 500 | .stats { padding-block: var(--section-padding); } 501 | 502 | .stats-list { 503 | display: grid; 504 | gap: 30px; 505 | } 506 | 507 | .stats-card { 508 | background: var(--bg-secondary); 509 | display: flex; 510 | align-items: center; 511 | gap: 10px; 512 | padding: 25px; 513 | border-radius: var(--radius-12); 514 | box-shadow: var(--shadow-1); 515 | transition: var(--transition-1); 516 | } 517 | 518 | .stats-card:is(:hover, :focus) { transform: translateY(-5px); } 519 | 520 | .stats-card .card-icon { 521 | background: var(--raw-seinna); 522 | width: 60px; 523 | height: 60px; 524 | display: grid; 525 | place-items: center; 526 | border-radius: 50%; 527 | } 528 | 529 | .stats-card .card-icon img { 530 | width: 70%; 531 | filter: invert(1); 532 | } 533 | 534 | .stats-card .card-title { 535 | width: calc(100% - 95px); 536 | color: var(--raw-seinna); 537 | text-align: center; 538 | } 539 | 540 | .stats-card .card-title strong { 541 | display: block; 542 | color: var(--color-primary); 543 | font-size: initial; 544 | line-height: 1.3; 545 | margin-top: 5px; 546 | } 547 | 548 | .stats-card > ion-icon { color: var(--color-secondary); } 549 | 550 | 551 | 552 | 553 | 554 | /*-----------------------------------*\ 555 | * #ABOUT 556 | \*-----------------------------------*/ 557 | 558 | .about { padding-block: var(--section-padding); } 559 | 560 | .about-banner { 561 | max-width: 400px; 562 | margin-inline: auto; 563 | margin-bottom: 80px; 564 | } 565 | 566 | .about .btn { 567 | max-width: unset; 568 | width: 100%; 569 | } 570 | 571 | .about .btn-secondary { margin-bottom: 10px; } 572 | 573 | 574 | 575 | 576 | 577 | /*-----------------------------------*\ 578 | * #SKILLS 579 | \*-----------------------------------*/ 580 | 581 | .skills { padding-block: var(--section-padding); } 582 | 583 | .skills-content { margin-bottom: 50px; } 584 | 585 | .skills-toggle { 586 | background: var(--bg-secondary); 587 | position: relative; 588 | width: max-content; 589 | margin-inline: auto; 590 | display: flex; 591 | align-items: center; 592 | padding: 5px; 593 | border-radius: 100px; 594 | box-shadow: var(--shadow-1); 595 | z-index: 1; 596 | } 597 | 598 | .skills-toggle::before { 599 | content: ""; 600 | position: absolute; 601 | top: 5px; 602 | left: 5px; 603 | bottom: 5px; 604 | width: 93px; 605 | background: var(--raw-seinna); 606 | border-radius: 100px; 607 | transition: var(--transition-1); 608 | z-index: -1; 609 | } 610 | 611 | .skills-toggle.active::before { 612 | left: 98px; 613 | width: 94px; 614 | } 615 | 616 | .toggle-btn { 617 | color: var(--color-primary); 618 | font-family: var(--ff-poppins); 619 | padding: 5px 25px; 620 | transition: var(--transition-1); 621 | } 622 | 623 | .toggle-btn.active { color: var(--white); } 624 | 625 | .skills-box.active .skills-list, 626 | .skills-box .tools-list { display: none; } 627 | 628 | .skills-box .skills-list, 629 | .skills-box.active .tools-list { 630 | display: flex; 631 | flex-wrap: wrap; 632 | justify-content: center; 633 | align-items: center; 634 | gap: 15px; 635 | animation: fadeIn 0.5s ease-out forwards; 636 | } 637 | 638 | @keyframes fadeIn { 639 | 640 | 0% { opacity: 0; } 641 | 100% { opacity: 1; } 642 | 643 | } 644 | 645 | .skill-card { 646 | position: relative; 647 | background: var(--bg-secondary); 648 | width: 80px; 649 | height: 80px; 650 | display: grid; 651 | place-items: center; 652 | border-radius: var(--radius-12); 653 | box-shadow: var(--shadow-1); 654 | cursor: help; 655 | } 656 | 657 | .skill-card:hover .tooltip { 658 | transform: translateY(0); 659 | opacity: 1; 660 | } 661 | 662 | 663 | 664 | 665 | 666 | /*-----------------------------------*\ 667 | * #PROJECT 668 | \*-----------------------------------*/ 669 | 670 | .project { padding-block: var(--section-padding); } 671 | 672 | .project-list > li { margin-bottom: 25px; } 673 | 674 | .project-card { 675 | position: relative; 676 | overflow: hidden; 677 | border-radius: var(--radius-12); 678 | box-shadow: 2px 4px 6px hsla(0, 0%, 0%, 0.2); 679 | } 680 | 681 | .project-card::after { 682 | content: ""; 683 | position: absolute; 684 | inset: 0; 685 | border-radius: inherit; 686 | transition: var(--transition-1); 687 | } 688 | 689 | .project-card:is(:hover, :focus)::after { 690 | background: hsla(0, 0%, 100%, 0.1); 691 | backdrop-filter: blur(0.5px); 692 | } 693 | 694 | .project-card .card-content { 695 | position: absolute; 696 | bottom: 0; 697 | left: 0; 698 | width: 100%; 699 | padding: 20px; 700 | } 701 | 702 | .project-card .card-title { margin-bottom: 10px; } 703 | 704 | .project-card :is(.card-title, .publish-date) { 705 | background: var(--bg-primary); 706 | padding: 6px 12px; 707 | width: max-content; 708 | box-shadow: var(--shadow-1); 709 | transform: translateY(20px); 710 | opacity: 0; 711 | transition: var(--transition-1); 712 | } 713 | 714 | .project-card .publish-date { 715 | font-size: var(--fs-6); 716 | color: var(--color-primary); 717 | transition-delay: 0s; 718 | } 719 | 720 | .project-card:is(:hover, :focus) :is(.card-title, .publish-date) { 721 | transform: translateY(0); 722 | opacity: 1; 723 | } 724 | 725 | .project-card:is(:hover, :focus) .publish-date { transition-delay: 0.1s; } 726 | 727 | .load-more { 728 | font-size: var(--fs-4); 729 | color: var(--raw-seinna); 730 | text-decoration: underline; 731 | margin-inline: auto; 732 | } 733 | 734 | 735 | 736 | 737 | 738 | /*-----------------------------------*\ 739 | * #CONTACT 740 | \*-----------------------------------*/ 741 | 742 | .contact { padding-block: var(--section-padding); } 743 | 744 | .contact-content { margin-bottom: 50px; } 745 | 746 | .contact-list-item { 747 | display: flex; 748 | align-items: flex-start; 749 | gap: 15px; 750 | margin-bottom: 20px; 751 | } 752 | 753 | .contact-item-icon { 754 | font-size: 25px; 755 | color: var(--color-primary); 756 | } 757 | 758 | .contact-item-icon ion-icon { --ionicon-stroke-width: 40px; } 759 | 760 | .contact-item-title { margin-bottom: 10px; } 761 | 762 | .contact-list-item .contact-info { 763 | color: var(--color-secondary); 764 | font-style: normal; 765 | line-height: 1.6; 766 | transition: var(--transition-1); 767 | } 768 | 769 | .contact-info:not(address):is(:hover, :focus) { color: var(--color-primary); } 770 | 771 | .contac-social-list { 772 | display: flex; 773 | flex-wrap: wrap; 774 | justify-content: flex-start; 775 | align-items: center; 776 | gap: 15px; 777 | padding-inline: 40px; 778 | } 779 | 780 | .contact-social-link { 781 | position: relative; 782 | background: var(--color-primary); 783 | color: var(--bg-primary); 784 | width: 35px; 785 | height: 35px; 786 | display: grid; 787 | place-items: center; 788 | border-radius: 50%; 789 | transition: var(--transition-1); 790 | } 791 | 792 | .contact-social-link:is(:hover, :focus) { 793 | background: var(--raw-seinna); 794 | color: var(--white); 795 | } 796 | 797 | .contact-social-link:is(:hover, :focus) .tooltip { 798 | transform: translateY(0); 799 | opacity: 1; 800 | } 801 | 802 | .contact-form { 803 | background: var(--bg-secondary); 804 | padding: 20px; 805 | border-radius: var(--radius-12); 806 | box-shadow: var(--shadow-1); 807 | } 808 | 809 | .form-wrapper { margin-bottom: 25px; } 810 | 811 | .form-label { 812 | color: var(--color-primary); 813 | font-size: var(--fs-7); 814 | font-family: var(--ff-poppins); 815 | margin-bottom: 8px; 816 | margin-left: 5px; 817 | } 818 | 819 | .input-wrapper { position: relative; } 820 | 821 | .input-field { 822 | background: var(--input-bg); 823 | color: var(--raw-seinna); 824 | padding: 10px; 825 | padding-left: 40px; 826 | border-radius: var(--radius-12); 827 | transition: var(--transition-1); 828 | } 829 | 830 | .input-wrapper ion-icon { 831 | position: absolute; 832 | top: 10px; 833 | left: 10px; 834 | color: var(--color-secondary); 835 | font-size: 20px; 836 | transition: var(--transition-1); 837 | } 838 | 839 | textarea.input-field { 840 | min-height: 60px; 841 | height: 120px; 842 | max-height: 200px; 843 | resize: vertical; 844 | } 845 | 846 | .input-field:focus { outline: 1px solid; } 847 | 848 | .input-field:focus + ion-icon { color: var(--raw-seinna); } 849 | 850 | .contact .btn-primary { 851 | max-width: unset; 852 | width: 100%; 853 | background: var(--color-primary); 854 | color: var(--bg-primary); 855 | } 856 | 857 | 858 | 859 | 860 | 861 | /*-----------------------------------*\ 862 | * #FOOTER 863 | \*-----------------------------------*/ 864 | 865 | .footer { 866 | background: var(--bg-secondary); 867 | padding-block: 20px; 868 | text-align: center; 869 | box-shadow: var(--shadow-1); 870 | } 871 | 872 | .footer .logo { margin-bottom: 15px; } 873 | 874 | .copyright { 875 | color: var(--color-secondary); 876 | line-height: 1.6; 877 | } 878 | 879 | .copyright a { 880 | display: inline-block; 881 | color: var(--raw-seinna); 882 | } 883 | 884 | 885 | 886 | 887 | 888 | /*-----------------------------------*\ 889 | * #GO TO TOP 890 | \*-----------------------------------*/ 891 | 892 | .go-top { 893 | position: fixed; 894 | bottom: 25px; 895 | right: 25px; 896 | width: 45px; 897 | height: 45px; 898 | display: grid; 899 | place-items: center; 900 | font-size: 20px; 901 | color: var(--color-primary); 902 | border: 2px solid var(--color-primary); 903 | border-radius: 50%; 904 | opacity: 0; 905 | pointer-events: none; 906 | transform: translateY(10px); 907 | transition: var(--transition-1); 908 | z-index: 2; 909 | } 910 | 911 | .go-top.active { 912 | opacity: 1; 913 | pointer-events: all; 914 | transform: translateY(0); 915 | } 916 | 917 | 918 | 919 | 920 | 921 | /*-----------------------------------*\ 922 | * #MEDIA QUERIES 923 | \*-----------------------------------*/ 924 | 925 | /** 926 | * responsive for larger than 550px screen 927 | */ 928 | 929 | @media (min-width: 550px) { 930 | 931 | /** 932 | * REUSED STYLE 933 | */ 934 | 935 | .container { 936 | max-width: 550px; 937 | margin-inline: auto; 938 | } 939 | 940 | .section-title { max-width: 380px; } 941 | 942 | 943 | 944 | /** 945 | * PROJECT 946 | */ 947 | 948 | .project-list { 949 | column-count: 2; 950 | column-gap: 25px; 951 | } 952 | 953 | .project-list > li:first-child { column-span: all; } 954 | 955 | } 956 | 957 | 958 | 959 | 960 | 961 | /** 962 | * responsive for larger than 768px screen 963 | */ 964 | 965 | @media (min-width: 768px) { 966 | 967 | /** 968 | * REUSED STYLE 969 | */ 970 | 971 | .container { max-width: 720px; } 972 | 973 | .section-title { max-width: 430px; } 974 | 975 | 976 | 977 | /** 978 | * STATS 979 | */ 980 | 981 | .stats-list { grid-template-columns: 1fr 1fr; } 982 | 983 | 984 | 985 | /** 986 | * ABOUT 987 | */ 988 | 989 | .btn-group { 990 | display: flex; 991 | justify-content: flex-start; 992 | align-items: center; 993 | gap: 20px; 994 | } 995 | 996 | .about .btn { max-width: max-content; } 997 | 998 | .about .btn-secondary { margin-bottom: 0; } 999 | 1000 | 1001 | 1002 | /** 1003 | * CONTACT 1004 | */ 1005 | 1006 | .contact-form { 1007 | max-width: 450px; 1008 | margin-inline: auto; 1009 | } 1010 | 1011 | } 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | /** 1018 | * responsive for larger than 992px screen 1019 | */ 1020 | 1021 | @media (min-width: 992px) { 1022 | 1023 | /** 1024 | * CUSTOM PROPERTY 1025 | */ 1026 | 1027 | :root { 1028 | 1029 | /** 1030 | * typography 1031 | */ 1032 | 1033 | --fs-2: 3rem; 1034 | 1035 | /** 1036 | * spacing 1037 | */ 1038 | 1039 | --section-padding: 100px; 1040 | 1041 | } 1042 | 1043 | 1044 | 1045 | /** 1046 | * REUSED STYLE 1047 | */ 1048 | 1049 | .container { max-width: 980px; } 1050 | 1051 | .section-content { 1052 | position: relative; 1053 | padding-left: 40px; 1054 | } 1055 | 1056 | .section-subtitle { 1057 | position: absolute; 1058 | top: 0; 1059 | left: 0; 1060 | transform: rotate(0.75turn) translateX(-100%); 1061 | transform-origin: left top; 1062 | margin-bottom: 0; 1063 | } 1064 | 1065 | .section-subtitle::after { 1066 | top: 8px; 1067 | left: auto; 1068 | right: calc(100% + 20px); 1069 | } 1070 | 1071 | 1072 | 1073 | /** 1074 | * HEADER 1075 | */ 1076 | 1077 | .header { padding-block: 30px; } 1078 | 1079 | .header.active { padding-block: 15px; } 1080 | 1081 | .navbar-actions { 1082 | order: 1; 1083 | margin-left: 0; 1084 | } 1085 | 1086 | .nav-toggle-btn { display: none; } 1087 | 1088 | .navbar { all: unset; } 1089 | 1090 | .navbar-link { 1091 | transform: translateY(0); 1092 | font-size: unset; 1093 | padding-inline: 5px; 1094 | } 1095 | 1096 | .navbar-list > li { 1097 | margin: 0; 1098 | padding: 0; 1099 | overflow: visible; 1100 | } 1101 | 1102 | .navbar-list { 1103 | display: flex; 1104 | justify-content: center; 1105 | align-items: center; 1106 | gap: 20px; 1107 | } 1108 | 1109 | .navbar-link::before { height: 2px; } 1110 | 1111 | 1112 | 1113 | /** 1114 | * HERO 1115 | */ 1116 | 1117 | .hero { 1118 | position: relative; 1119 | padding-top: 0; 1120 | height: 100vh; 1121 | } 1122 | 1123 | .hero-banner { 1124 | max-width: unset; 1125 | height: 100%; 1126 | margin-bottom: 0; 1127 | } 1128 | 1129 | .hero img { 1130 | height: 100%; 1131 | width: auto; 1132 | margin-inline: auto; 1133 | } 1134 | 1135 | .hero-content { 1136 | --color-primary: var(--white); 1137 | 1138 | position: absolute; 1139 | top: 50%; 1140 | filter: drop-shadow(2px 4px 10px var(--black)); 1141 | } 1142 | 1143 | .hero .btn-primary:is(:hover, :focus) { color: hsl(0, 0%, 12%); } 1144 | 1145 | .hero-social-list { 1146 | display: block; 1147 | position: absolute; 1148 | bottom: 92px; 1149 | left: -30px; 1150 | } 1151 | 1152 | .hero-social-list::after { 1153 | content: ""; 1154 | position: absolute; 1155 | bottom: -40px; 1156 | left: 13px; 1157 | width: 2px; 1158 | height: 30px; 1159 | background: var(--color-secondary); 1160 | } 1161 | 1162 | .hero-social-link { 1163 | position: relative; 1164 | color: var(--color-secondary); 1165 | margin-block: 5px; 1166 | padding: 5px; 1167 | font-size: 18px; 1168 | transition: var(--transition-1); 1169 | } 1170 | 1171 | .hero-social-link:is(:hover, :focus) { color: var(--color-primary); } 1172 | 1173 | .hero-social-link .tooltip { 1174 | --trans-x: 10px; 1175 | 1176 | left: calc(100% + 10px); 1177 | top: 50%; 1178 | transform: translateY(-50%) translateX(var(--trans-x)); 1179 | } 1180 | 1181 | .hero-social-link:is(:hover, :focus) .tooltip { 1182 | --trans-x: 0; 1183 | opacity: 1; 1184 | } 1185 | 1186 | .scroll-down { 1187 | display: block; 1188 | position: absolute; 1189 | bottom: 80px; 1190 | right: -30px; 1191 | color: var(--color-secondary); 1192 | font-size: 1.125rem; 1193 | text-transform: uppercase; 1194 | transform: rotate(90deg); 1195 | transform-origin: top right; 1196 | } 1197 | 1198 | .scroll-down::after { 1199 | content: ""; 1200 | position: absolute; 1201 | top: 8px; 1202 | right: -50px; 1203 | width: 30px; 1204 | height: 2px; 1205 | background: var(--color-secondary); 1206 | } 1207 | 1208 | 1209 | 1210 | /** 1211 | * STATS 1212 | */ 1213 | 1214 | .stats-list { grid-template-columns: repeat(3, 1fr); } 1215 | 1216 | .stats-card { height: 100%; } 1217 | 1218 | 1219 | 1220 | 1221 | /** 1222 | * ABOUT 1223 | */ 1224 | 1225 | .about { 1226 | display: grid; 1227 | grid-template-columns: 1fr 1fr; 1228 | align-items: center; 1229 | gap: 30px; 1230 | } 1231 | 1232 | .about-banner { margin-bottom: 0; } 1233 | 1234 | 1235 | 1236 | 1237 | /** 1238 | * SKILLS 1239 | */ 1240 | 1241 | .skills { 1242 | display: grid; 1243 | grid-template-columns: 1fr 1fr; 1244 | align-items: center; 1245 | gap: 50px; 1246 | } 1247 | 1248 | .skills-content { margin-bottom: 0; } 1249 | 1250 | .skills-toggle { margin-inline: 0; } 1251 | 1252 | 1253 | 1254 | /** 1255 | * PROJECT 1256 | */ 1257 | 1258 | .project-list { column-count: 3; } 1259 | 1260 | .project-list > li:first-child { 1261 | column-span: unset; 1262 | margin: 25px; 1263 | margin-left: 0; 1264 | } 1265 | 1266 | 1267 | 1268 | /** 1269 | * CONTACT 1270 | */ 1271 | 1272 | .contact { 1273 | display: grid; 1274 | grid-template-columns: 1fr 1fr; 1275 | gap: 30px; 1276 | } 1277 | 1278 | .contact-content { margin-bottom: 0; } 1279 | 1280 | .contact-form { width: 100%; } 1281 | 1282 | .contact-list { margin-left: -40px; } 1283 | 1284 | 1285 | 1286 | /** 1287 | * FOOTER 1288 | */ 1289 | 1290 | .footer .container { 1291 | display: flex; 1292 | justify-content: space-between; 1293 | align-items: center; 1294 | } 1295 | 1296 | .footer .logo { margin-bottom: 0; } 1297 | 1298 | } 1299 | 1300 | 1301 | 1302 | 1303 | 1304 | /** 1305 | * responsive for larger than 1200px screen 1306 | */ 1307 | 1308 | @media (min-width: 1200px) { 1309 | 1310 | /** 1311 | * REUSED STYLE 1312 | */ 1313 | 1314 | .container { max-width: 1150px; } 1315 | 1316 | .section-title { max-width: 460px; } 1317 | 1318 | 1319 | 1320 | 1321 | /** 1322 | * HERO 1323 | */ 1324 | 1325 | .hero-social-list { left: -80px; } 1326 | 1327 | .scroll-down { right: -80px; } 1328 | 1329 | 1330 | 1331 | 1332 | /** 1333 | * ABOUT 1334 | */ 1335 | 1336 | .about-banner { max-width: 450px; } 1337 | 1338 | } -------------------------------------------------------------------------------- /assets/images/about-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/about-banner.png -------------------------------------------------------------------------------- /assets/images/adobe-xd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/adobe-xd.png -------------------------------------------------------------------------------- /assets/images/ajax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/ajax.png -------------------------------------------------------------------------------- /assets/images/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/angular.png -------------------------------------------------------------------------------- /assets/images/bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/bootstrap.png -------------------------------------------------------------------------------- /assets/images/clickup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/clickup.png -------------------------------------------------------------------------------- /assets/images/command.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/command.png -------------------------------------------------------------------------------- /assets/images/css3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/css3.png -------------------------------------------------------------------------------- /assets/images/firebase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/firebase.png -------------------------------------------------------------------------------- /assets/images/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/git.png -------------------------------------------------------------------------------- /assets/images/gulp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/gulp.png -------------------------------------------------------------------------------- /assets/images/hero-banner-md.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/hero-banner-md.png -------------------------------------------------------------------------------- /assets/images/hero-banner-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/hero-banner-sm.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/html5.png -------------------------------------------------------------------------------- /assets/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/javascript.png -------------------------------------------------------------------------------- /assets/images/jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/jquery.png -------------------------------------------------------------------------------- /assets/images/npm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/npm.png -------------------------------------------------------------------------------- /assets/images/photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/photoshop.png -------------------------------------------------------------------------------- /assets/images/project-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/project-1.png -------------------------------------------------------------------------------- /assets/images/project-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/project-2.png -------------------------------------------------------------------------------- /assets/images/project-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/project-3.png -------------------------------------------------------------------------------- /assets/images/project-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/project-4.png -------------------------------------------------------------------------------- /assets/images/project-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/project-5.png -------------------------------------------------------------------------------- /assets/images/project-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/project-6.png -------------------------------------------------------------------------------- /assets/images/project-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/project-7.png -------------------------------------------------------------------------------- /assets/images/pugjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/pugjs.png -------------------------------------------------------------------------------- /assets/images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/react.png -------------------------------------------------------------------------------- /assets/images/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/sass.png -------------------------------------------------------------------------------- /assets/images/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/slack.png -------------------------------------------------------------------------------- /assets/images/stats-card_icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/stats-card_icon-1.png -------------------------------------------------------------------------------- /assets/images/stats-card_icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/stats-card_icon-2.png -------------------------------------------------------------------------------- /assets/images/stats-card_icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/stats-card_icon-3.png -------------------------------------------------------------------------------- /assets/images/trello.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/trello.png -------------------------------------------------------------------------------- /assets/images/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/typescript.png -------------------------------------------------------------------------------- /assets/images/vs-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/vs-code.png -------------------------------------------------------------------------------- /assets/images/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/vue.png -------------------------------------------------------------------------------- /assets/images/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/assets/images/webpack.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * element toggle function 5 | */ 6 | 7 | const elemToggleFunc = function (elem) { elem.classList.toggle("active"); } 8 | 9 | 10 | 11 | /** 12 | * header sticky & go to top 13 | */ 14 | 15 | const header = document.querySelector("[data-header]"); 16 | const goTopBtn = document.querySelector("[data-go-top]"); 17 | 18 | window.addEventListener("scroll", function () { 19 | 20 | if (window.scrollY >= 10) { 21 | header.classList.add("active"); 22 | goTopBtn.classList.add("active"); 23 | } else { 24 | header.classList.remove("active"); 25 | goTopBtn.classList.remove("active"); 26 | } 27 | 28 | }); 29 | 30 | 31 | 32 | /** 33 | * navbar toggle 34 | */ 35 | 36 | const navToggleBtn = document.querySelector("[data-nav-toggle-btn]"); 37 | const navbar = document.querySelector("[data-navbar]"); 38 | 39 | navToggleBtn.addEventListener("click", function () { 40 | 41 | elemToggleFunc(navToggleBtn); 42 | elemToggleFunc(navbar); 43 | elemToggleFunc(document.body); 44 | 45 | }); 46 | 47 | 48 | 49 | /** 50 | * skills toggle 51 | */ 52 | 53 | const toggleBtnBox = document.querySelector("[data-toggle-box]"); 54 | const toggleBtns = document.querySelectorAll("[data-toggle-btn]"); 55 | const skillsBox = document.querySelector("[data-skills-box]"); 56 | 57 | for (let i = 0; i < toggleBtns.length; i++) { 58 | toggleBtns[i].addEventListener("click", function () { 59 | 60 | elemToggleFunc(toggleBtnBox); 61 | for (let i = 0; i < toggleBtns.length; i++) { elemToggleFunc(toggleBtns[i]); } 62 | elemToggleFunc(skillsBox); 63 | 64 | }); 65 | } 66 | 67 | 68 | 69 | /** 70 | * dark & light theme toggle 71 | */ 72 | 73 | const themeToggleBtn = document.querySelector("[data-theme-btn]"); 74 | 75 | themeToggleBtn.addEventListener("click", function () { 76 | 77 | elemToggleFunc(themeToggleBtn); 78 | 79 | if (themeToggleBtn.classList.contains("active")) { 80 | document.body.classList.remove("dark_theme"); 81 | document.body.classList.add("light_theme"); 82 | 83 | localStorage.setItem("theme", "light_theme"); 84 | } else { 85 | document.body.classList.add("dark_theme"); 86 | document.body.classList.remove("light_theme"); 87 | 88 | localStorage.setItem("theme", "dark_theme"); 89 | } 90 | 91 | }); 92 | 93 | /** 94 | * check & apply last time selected theme from localStorage 95 | */ 96 | 97 | if (localStorage.getItem("theme") === "light_theme") { 98 | themeToggleBtn.classList.add("active"); 99 | document.body.classList.remove("dark_theme"); 100 | document.body.classList.add("light_theme"); 101 | } else { 102 | themeToggleBtn.classList.remove("active"); 103 | document.body.classList.remove("light_theme"); 104 | document.body.classList.add("dark_theme"); 105 | } -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Responsive Personal portfolio Website 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 35 | 36 |
37 |
38 | 39 |

40 | Jack. 41 |

42 | 43 |
44 | 45 | 49 | 50 | 53 | 54 |
55 | 56 | 61 | 62 | 87 | 88 |
89 |
90 | 91 | 92 | 93 | 94 | 95 |
96 |
97 | 98 | 101 | 102 |
103 | 104 |
105 | 106 | 107 | 108 | 109 | A man in a blue shirt with a happy expression 111 | 112 | 113 |
114 | 115 |
116 | 117 |

We Design & Build Creative Products

118 | 119 | Get in touch 120 | 121 |
122 | 123 | 150 | 151 | 152 | 153 |
154 | 155 | 156 | 157 | 158 | 159 | 162 | 163 |
164 | 215 |
216 | 217 | 218 | 219 | 220 | 221 | 224 | 225 |
226 | 227 |
228 | A man in a alice blue shirt with a thinking expression 230 |
231 | 232 |
233 | 234 |

About me

235 | 236 |

Need a Creative Product? I can Help You!

237 | 238 |

239 | Hi! I’m Jack Reacher, and I’m a developer who has passion for building clean web applications with intuitive 240 | functionalities. I enjoy the process of turning ideas into reality using creative solutions. I’m always 241 | curious about 242 | learning new skills, tools, and concepts. In addition to working on various solo full stack projects, I have 243 | worked with 244 | creative teams, which involves daily stand-ups and communications, source control, and project management. 245 |

246 | 247 |
248 | 249 | 250 | 251 |
252 | 253 |
254 | 255 |
256 | 257 | 258 | 259 | 260 | 261 | 264 | 265 |
266 | 267 |
268 | 269 |

My skills

270 | 271 |

What My Programming Skills Included?

272 | 273 |

274 | I develop simple, intuitive and responsive user interface that helps users get things done with less effort 275 | and time 276 | with those technologies. 277 |

278 | 279 |
280 | 281 | 282 | 283 |
284 | 285 |
286 | 287 |
288 | 289 |
    290 | 291 |
  • 292 |
    293 |
    HTML5
    294 | 295 |
    296 | HTML5 logo 297 |
    298 |
    299 |
    • 300 | 301 |
  • 302 |
    303 |
    CSS3
    304 | 305 |
    306 | CSS3 logo 307 |
    308 |
    309 |
    • 310 | 311 |
  • 312 |
    313 |
    JavaScript
    314 | 315 |
    316 | JavaScript logo 317 |
    318 |
    319 |
    • 320 | 321 |
  • 322 |
    323 |
    TypeScript
    324 | 325 |
    326 | TypeScript logo 327 |
    328 |
    329 |
    • 330 | 331 |
  • 332 |
    333 |
    jQuery
    334 | 335 |
    336 | jQuery logo 337 |
    338 |
    339 |
    • 340 | 341 |
  • 342 |
    343 |
    Bootstrap
    344 | 345 |
    346 | Bootstrap logo 347 |
    348 |
    349 |
    • 350 | 351 |
  • 352 |
    353 |
    Angular
    354 | 355 |
    356 | Angular logo 357 |
    358 |
    359 |
    • 360 | 361 |
  • 362 |
    363 |
    React
    364 | 365 |
    366 | React logo 367 |
    368 |
    369 |
    • 370 | 371 |
  • 372 |
    373 |
    Vue
    374 | 375 |
    376 | Vue logo 377 |
    378 |
    379 |
    • 380 | 381 |
  • 382 |
    383 |
    Firebase
    384 | 385 |
    386 | Firebase logo 387 |
    388 |
    389 |
    • 390 | 391 |
  • 392 |
    393 |
    PugJs
    394 | 395 |
    396 | PugJs logo 397 |
    398 |
    399 |
    • 400 | 401 |
  • 402 |
    403 |
    SASS
    404 | 405 |
    406 | SASS logo 407 |
    408 |
    409 |
    • 410 | 411 |
412 | 413 |
    414 | 415 |
  • 416 |
    417 |
    Ajax
    418 | 419 |
    420 | Ajax logo 421 |
    422 |
    423 |
    • 424 | 425 |
  • 426 |
    427 |
    Gulp
    428 | 429 |
    430 | Gulp logo 431 |
    432 |
    433 |
    • 434 | 435 |
  • 436 |
    437 |
    Webpack
    438 | 439 |
    440 | Webpack logo 441 |
    442 |
    443 |
    • 444 | 445 |
  • 446 |
    447 |
    Git
    448 | 449 |
    450 | Git logo 451 |
    452 |
    453 |
    • 454 | 455 |
  • 456 |
    457 |
    Npm
    458 | 459 |
    460 | Npm logo 461 |
    462 |
    463 |
    • 464 | 465 |
  • 466 |
    467 |
    Command Line
    468 | 469 |
    470 | Command Line logo 471 |
    472 |
    473 |
    • 474 | 475 |
  • 476 |
    477 |
    VS Code
    478 | 479 |
    480 | VS Code logo 481 |
    482 |
    483 |
    • 484 | 485 |
  • 486 |
    487 |
    Trello
    488 | 489 |
    490 | Trello logo 491 |
    492 |
    493 |
    • 494 | 495 |
  • 496 |
    497 |
    ClickUp
    498 | 499 |
    500 | ClickUp logo 501 |
    502 |
    503 |
    • 504 | 505 |
  • 506 |
    507 |
    Slack
    508 | 509 |
    510 | Slack logo 511 |
    512 |
    513 |
    • 514 | 515 |
  • 516 |
    517 |
    Photoshop
    518 | 519 |
    520 | Photoshop logo 521 |
    522 |
    523 |
    • 524 | 525 |
  • 526 |
    527 |
    Adobe XD
    528 | 529 |
    530 | Adobe XD logo 531 |
    532 |
    533 |
    • 534 | 535 |
536 | 537 |
538 | 539 |
540 | 541 | 542 | 543 | 544 | 545 | 548 | 549 |
550 | 551 | 691 | 692 |
693 | 694 | 695 | 696 | 697 | 698 | 701 | 702 |
703 | 704 |
705 | 706 |

Contact

707 | 708 |

Have You Any Project? Please Drop a Message

709 | 710 |

711 | Get in touch and let me know how i can help. Fill out the form and i’ll be in touch as soon as possible. 712 |

713 | 714 | 803 | 804 |
805 | 806 |
807 | 808 |
809 | 810 | 811 | 812 |
813 | 814 | 815 | 816 | 817 | 818 |
819 | 820 |
821 | 822 |
823 | 824 | 825 | 826 |
827 | 828 | 830 | 831 | 832 | 833 |
834 | 835 |
836 | 837 |
838 | 839 | 840 | 841 |
842 | 843 | 844 | 845 | 846 | 847 |
848 | 849 |
850 | 851 |
852 | 853 | 854 | 855 |
856 | 857 | 859 | 860 | 861 | 862 |
863 | 864 |
865 | 866 | 867 | 868 |
869 | 870 |
871 | 872 |
873 |
874 | 875 | 876 | 877 | 878 | 879 | 882 | 883 | 898 | 899 | 900 | 901 | 902 | 903 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | 914 | 915 | 918 | 919 | 920 | 923 | 924 | 925 | 926 | 927 | 928 | 929 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Jack - personal portfolio 2 | 3 | # HEDER 4 | 5 | Jack. 6 | 7 | En 8 | Ar 9 | 10 | aria-label = Change Theme 11 | title = Change Theme 12 | 13 | aria-label = Toggle Menu 14 | title = Toggle Menu 15 | 16 | Home. 17 | About. 18 | Skills. 19 | Portfolio. 20 | Contact. 21 | 22 | 23 | 24 | # HERO 25 | 26 | alt = A man in a blue shirt with a happy expression 27 | 28 | We Design & Build Creative Products 29 | 30 | Get in touch 31 | 32 | 33 | Facebook 34 | 35 | 36 | Twitter 37 | 38 | 39 | Linkedin 40 | 41 | Scroll 42 | 43 | 44 | 45 | # STATS 46 | 47 | alt = Badge icon 48 | 49 | 12+ 50 | Years of Experience 51 | 52 | 53 | 54 | alt = Checkmark icon 55 | 56 | 230+ 57 | Completed Projects 58 | 59 | alt = Peoples rating icon 60 | 61 | 95+ 62 | Happy Clients 63 | 64 | 65 | 66 | # ABOUT 67 | 68 | alt = A man in a alice blue shirt with a thinking expression 69 | 70 | About me 71 | 72 | Need a Creative Product? I can Help You! 73 | 74 | Hi! I’m Jack Reacher, and I’m a developer who has passion for building clean web applications with intuitive functionalities. I enjoy the process of turning ideas into reality using creative solutions. I’m always curious about learning new skills, tools, and concepts. In addition to working on various solo full stack projects, I have worked with creative teams, which involves daily stand-ups and communications, source control, and project management. 75 | 76 | Hire me 77 | 78 | Download cv 79 | 80 | 81 | 82 | # SKILLS 83 | 84 | My skills 85 | 86 | What My Programming Skills Included? 87 | 88 | I develop simple, intuitive and responsive user interface that helps users get things done with less effort and time with those technologies. 89 | 90 | Skills 91 | Tools 92 | 93 | HTML5 94 | alt = HTML5 logo 95 | 96 | CSS3 97 | alt = CSS3 logo 98 | 99 | JavaScript 100 | alt = JavaScript logo 101 | 102 | TypeScript 103 | alt = TypeScript logo 104 | 105 | jQuery 106 | alt = jQuery logo 107 | 108 | Bootstrap 109 | alt = Bootstrap logo 110 | 111 | Angular 112 | alt = Angular logo 113 | 114 | React 115 | alt = React logo 116 | 117 | Vue 118 | alt = Vue logo 119 | 120 | Firebase 121 | alt = Firebase logo 122 | 123 | PugJs 124 | alt = PugJs logo 125 | 126 | SASS 127 | alt = SASS logo 128 | 129 | 130 | Ajax 131 | alt = Ajax logo 132 | 133 | Gulp 134 | alt = Gulp logo 135 | 136 | Webpack 137 | alt = Webpack logo 138 | 139 | Git 140 | alt = Git logo 141 | 142 | Npm 143 | alt = Npm logo 144 | 145 | Command Line 146 | alt = Command Line logo 147 | 148 | VS Code 149 | alt = VS Code logo 150 | 151 | Trello 152 | alt = Trello logo 153 | 154 | ClickUp 155 | alt = ClickUp logo 156 | 157 | Slack 158 | alt = Slack logo 159 | 160 | Photoshop 161 | alt = Photoshop logo 162 | 163 | Adobe XD 164 | alt = Adobe XD logo 165 | 166 | 167 | 168 | # WOKRS 169 | 170 | My Works 171 | 172 | See My Works Which Will Amaze You! 173 | 174 | We develop the best quality website that serves for the long-term. Well-documented, clean, easy and elegant interface helps any non-technical clients. 175 | 176 | alt = A macintosh on a yellow background. 177 | Lorem Ipsum Dolor 01 178 | April 2022 179 | 180 | alt = On a Blue background, a Wacom and a mouse. 181 | Lorem Ipsum Dolor 02 182 | 183 | alt = A Cassette tape on a mellow apricot background. 184 | Lorem Ipsum Dolor 03 185 | 186 | alt = Blue digital watch on a dark liver background. 187 | Lorem Ipsum Dolor 04 188 | 189 | alt = On a dark liver background, Airport luggage car carrying a luggage. 190 | Lorem Ipsum Dolor 05 191 | 192 | alt = On a yellow background, a digital watch and a glass. 193 | Lorem Ipsum Dolor 06 194 | 195 | alt = A fujifilm instant camera on a dark electric blue background. 196 | Lorem Ipsum Dolor 07 197 | 198 | Load more work 199 | 200 | 201 | 202 | # CONTACT 203 | 204 | Contact 205 | 206 | Have You Any Project? Please Drop a Message 207 | 208 | Get in touch and let me know how i can help. Fill out the form and i’ll be in touch as soon as possible. 209 | 210 | 211 | Address: 212 | 941 Saqrqorish Road, alandalos, grnata, wa 47122-4194 213 | 214 | 215 | Phone: 216 | (01) 234 567 789 217 | (09) 765 432 200 218 | 219 | 220 | Email: 221 | info@jack.com 222 | support@jack.com 223 | 224 | 225 | 226 | 227 | 228 | 229 | Name 230 | 231 | placeholder = e.g John Doe 232 | 233 | Email 234 | 235 | placeholder = e.g johndoe@mail.com 236 | 237 | Phone 238 | 239 | placeholder = Phone Number 240 | 241 | Message 242 | 243 | placeholder = Write message... 244 | 245 | Send 246 | 247 | 248 | 249 | # FOOTER 250 | 251 | Jack. 252 | 253 | © 2022 codewithsadee. All rights reserved 254 | 255 | 256 | 257 | # GO TO TOP 258 | 259 | title = Go to Top 260 | 261 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/readme-images/desktop.png -------------------------------------------------------------------------------- /readme-images/project-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/jack-portfolio/7278ae63ecb21f93effcb59772ab691ddfdb9a0a/readme-images/project-logo.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 13 | ``` 14 | 15 | Ionicon 16 | 17 | ``` html 18 | 19 | 20 | ``` 21 | 22 | --- 23 | 24 | ## Colors 25 | 26 | ``` css 27 | --raw-seinna: hsl(24, 74%, 58%); 28 | --sizzling-sunrise: hsl(51, 95%, 54%); 29 | --scarlet: hsl(13, 96%, 47%); 30 | --black: hsl(0, 0%, 0%); 31 | --white: hsl(0, 0%, 100%); 32 | ``` 33 | 34 | ## Typography 35 | 36 | ``` css 37 | --ff-saira-stencil-one: "Saira Stencil One", sans-serif; 38 | --ff-poppins: 'Poppins', sans-serif; 39 | --ff-roboto: 'Roboto', sans-serif; 40 | 41 | --fs-1: 2rem; 42 | --fs-2: calc(1.813rem + 1vw); 43 | --fs-3: calc(1.313rem + 1vw); 44 | --fs-4: 1.4rem; 45 | --fs-5: 1rem; 46 | --fs-6: 0.813rem; 47 | --fs-7: 0.75rem; 48 | 49 | --fw-400: 400; 50 | --fw-700: 700; 51 | ``` 52 | 53 | ## Transition 54 | 55 | ``` css 56 | --transition-1: 0.25s ease-in-out; 57 | ``` 58 | 59 | ## Spacing 60 | 61 | ``` css 62 | --section-padding: 80px; 63 | ``` 64 | 65 | ## Border radius 66 | 67 | ``` css 68 | --radius-4: 4px; 69 | --radius-12: 12px; 70 | ``` 71 | 72 | --- 73 | 74 | ## Theme Variables 75 | 76 | ### Dark Mode 77 | 78 | ``` css 79 | --bg-primary: hsl(0, 0%, 12%); 80 | --bg-secondary: hsl(0, 0%, 19%); 81 | --color-primary: hsl(0, 0%, 100%); 82 | --color-secondary: hsl(0, 0%, 62%); 83 | --card-shadow: hsla(0, 0%, 0%, 0.4); 84 | --input-bg: hsl(0, 0%, 16%); 85 | 86 | --shadow-1: 10px 10px 40px var(--card-shadow); 87 | ``` 88 | 89 | ### Light Mode 90 | 91 | ``` css 92 | --bg-primary: hsl(0, 0%, 90%); 93 | --bg-secondary: hsl(0, 0%, 100%); 94 | --color-primary: hsl(0, 0%, 12%); 95 | --color-secondary: hsl(0, 0%, 37%); 96 | --card-shadow: hsla(0, 0%, 0%, 0.1); 97 | --input-bg: hsl(0, 0%, 93%); 98 | 99 | --shadow-1: 10px 10px 40px var(--card-shadow); 100 | ``` 101 | --------------------------------------------------------------------------------