├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── blog-4.jpg │ ├── hero-banner.jpg │ ├── portfolio-1.jpg │ ├── portfolio-2.jpg │ ├── portfolio-3.jpg │ ├── portfolio-4.jpg │ ├── portfolio-5.jpg │ ├── portfolio-6.jpg │ └── skills-bg.png └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images └── desktop.png └── style-guide.md /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/smith-portfolio) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/smith-portfolio?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/smith-portfolio?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 7 | [![YouTube Video Views](https://img.shields.io/youtube/views/BbCLWdF3Bnc?style=social)](https://youtu.be/BbCLWdF3Bnc) 8 | 9 |
10 |
11 | 12 |

Smith - Personal Portfolio Website

13 | 14 | Smith is a fully responsive personal portfolio website,
Responsive for all devices, build using HTML, CSS, and JavaScript. 15 | 16 | ➥ Live Demo 17 | 18 |
19 | 20 |
21 | 22 | ### Demo Screeshots 23 | 24 | ![Smith-portfolio Desktop Demo](./readme-images/desktop.png "Desktop Demo") 25 | 26 | ### Prerequisites 27 | 28 | Before you begin, ensure you have met the following requirements: 29 | 30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 31 | 32 | ### Run Locally 33 | 34 | To run **Smith-portfolio** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/smith-portfolio.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/smith-portfolio.git 46 | ``` 47 | 48 | ### Contact 49 | 50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 51 | 52 | ### License 53 | 54 | This project is **free to use** and does not contains any license. 55 | -------------------------------------------------------------------------------- /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 | --sonic-silver: hsl(0, 0%, 46%); 24 | --spanish-gray: hsl(0, 0%, 60%); 25 | --theme-color: hsl(10, 100%, 57%); 26 | --light-gray: hsl(0, 0%, 80%); 27 | --gray-x-11: hsl(0, 0%, 73%); 28 | --dim-gray: hsl(0, 0%, 44%); 29 | --cultured: hsl(0, 0%, 98%); 30 | --black_10: hsl(0, 0%, 0%, 0.1); 31 | --black_20: hsl(0, 0%, 0%, 0.2); 32 | --black_30: hsl(0, 0%, 0%, 0.3); 33 | --black_70: hsl(0, 0%, 0%, 0.7); 34 | --white_10: hsl(0, 0%, 100%, 0.1); 35 | --white: hsl(0, 0%, 100%); 36 | --black: hsl(0, 0%, 0%); 37 | 38 | /** 39 | * typography 40 | */ 41 | 42 | --ff-poppins: 'Poppins', sans-serif; 43 | --ff-mulish: 'Mulish', sans-serif; 44 | 45 | --fs-35: 3.5rem; 46 | --fs-30: 3rem; 47 | --fs-25: 2.5rem; 48 | --fs-18: 1.8rem; 49 | --fs-17: 1.7rem; 50 | --fs-13: 1.3rem; 51 | 52 | --fw-800: 800; 53 | --fw-700: 700; 54 | --fw-600: 600; 55 | --fw-500: 500; 56 | --fw-400: 400; 57 | 58 | /** 59 | * spacing 60 | */ 61 | 62 | --section-padding: 80px; 63 | 64 | /** 65 | * shadow 66 | */ 67 | 68 | --shadow: 0 0 20px hsla(0, 0%, 0%, 0.08); 69 | 70 | /** 71 | * radius 72 | */ 73 | 74 | --radius-10: 10px; 75 | --radius-8: 8px; 76 | 77 | /** 78 | * transition 79 | */ 80 | 81 | --transition: 0.25s ease; 82 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 83 | 84 | } 85 | 86 | 87 | 88 | 89 | 90 | /*-----------------------------------*\ 91 | #RESET 92 | \*-----------------------------------*/ 93 | 94 | *, 95 | *::before, 96 | *::after { 97 | margin: 0; 98 | padding: 0; 99 | box-sizing: border-box; 100 | } 101 | 102 | li { list-style: none; } 103 | 104 | a { 105 | text-decoration: none; 106 | color: inherit; 107 | } 108 | 109 | a, 110 | img, 111 | span, 112 | input, 113 | button, 114 | textarea, 115 | ion-icon { display: block; } 116 | 117 | img { height: auto; } 118 | 119 | input, 120 | button, 121 | textarea { 122 | background: none; 123 | border: none; 124 | font: inherit; 125 | } 126 | 127 | input, 128 | textarea { width: 100%; } 129 | 130 | button { cursor: pointer; } 131 | 132 | ion-icon { pointer-events: none; } 133 | 134 | address { font-style: normal; } 135 | 136 | html { 137 | font-family: var(--ff-mulish); 138 | font-size: 10px; 139 | scroll-behavior: smooth; 140 | } 141 | 142 | body { 143 | background-color: var(--white); 144 | color: var(--sonic-silver); 145 | font-size: 1.6rem; 146 | line-height: 1.75; 147 | letter-spacing: 0.2px; 148 | } 149 | 150 | :focus-visible { outline-offset: 4px; } 151 | 152 | ::placeholder { color: var(--dim-gray); } 153 | 154 | ::-webkit-scrollbar { 155 | width: 12px; 156 | height: 2px; 157 | } 158 | 159 | body::-webkit-scrollbar-track { background-color: var(--white); } 160 | 161 | body::-webkit-scrollbar-thumb { 162 | background-color: var(--spanish-gray); 163 | border: 3px solid var(--white); 164 | border-radius: 50px; 165 | } 166 | 167 | 168 | 169 | 170 | 171 | /*-----------------------------------*\ 172 | #REUSED STYLE 173 | \*-----------------------------------*/ 174 | 175 | .container { padding-inline: 30px; } 176 | 177 | .section { padding-block: var(--section-padding); } 178 | 179 | .img-holder { 180 | aspect-ratio: var(--width) / var(--height); 181 | background-color: var(--light-gray); 182 | overflow: hidden; 183 | } 184 | 185 | .has-before { 186 | position: relative; 187 | z-index: 1; 188 | } 189 | 190 | .has-before::before { 191 | position: absolute; 192 | content: ""; 193 | } 194 | 195 | .img-cover { 196 | width: 100%; 197 | height: 100%; 198 | object-fit: cover; 199 | } 200 | 201 | .section-subtitle { 202 | color: var(--theme-color); 203 | font-family: var(--ff-poppins); 204 | font-weight: var(--fw-500); 205 | margin-block-end: 6px; 206 | } 207 | 208 | .h1, 209 | .h2, 210 | .h3 { 211 | color: var(--black); 212 | font-family: var(--ff-poppins); 213 | } 214 | 215 | .h1 { font-size: var(--fs-30); } 216 | 217 | .h1, 218 | .h2 { 219 | font-weight: var(--fw-800); 220 | text-transform: uppercase; 221 | } 222 | 223 | .h2 { 224 | font-size: var(--fs-25); 225 | line-height: 1.2; 226 | } 227 | 228 | .h1, 229 | .h3 { line-height: 1.4; } 230 | 231 | .h3 { font-size: var(--fs-18); } 232 | 233 | .section-title { margin-block-end: 40px; } 234 | 235 | :is(.portfolio, .news) .section-title { margin-block-end: 60px; } 236 | 237 | .card { 238 | position: relative; 239 | overflow: hidden; 240 | border-radius: var(--radius-10); 241 | } 242 | 243 | .card-content { 244 | position: absolute; 245 | top: 10px; 246 | right: 10px; 247 | bottom: 10px; 248 | left: 10px; 249 | background-color: var(--white); 250 | border-radius: var(--radius-8); 251 | padding: 20px 25px; 252 | display: grid; 253 | align-content: flex-end; 254 | opacity: 0; 255 | transition: var(--transition); 256 | } 257 | 258 | .card:is(:hover, :focus-within, :active) .card-content { opacity: 1; } 259 | 260 | .card-content > ion-icon { 261 | position: absolute; 262 | top: 20px; 263 | right: 20px; 264 | color: var(--black); 265 | font-size: 40px; 266 | transform: rotate(-45deg); 267 | } 268 | 269 | .card-text { font-family: var(--ff-poppins); } 270 | 271 | .has-scrollbar { 272 | display: flex; 273 | gap: 20px; 274 | overflow-x: auto; 275 | padding-block-end: 30px; 276 | margin-block-end: -15px; 277 | scroll-snap-type: inline mandatory; 278 | } 279 | 280 | .scrollbar-item { 281 | min-width: 100%; 282 | scroll-snap-align: start; 283 | } 284 | 285 | .has-scrollbar::-webkit-scrollbar-track { background-color: var(--black_20); } 286 | 287 | .has-scrollbar::-webkit-scrollbar-thumb { background-color: var(--black_70); } 288 | 289 | .has-scrollbar::-webkit-scrollbar-button { width: calc(25% - 25px); } 290 | 291 | 292 | 293 | 294 | /*-----------------------------------*\ 295 | #HEADER 296 | \*-----------------------------------*/ 297 | 298 | .header { 299 | position: fixed; 300 | top: 0; 301 | left: 0; 302 | width: 100%; 303 | background-color: var(--white); 304 | padding-block: 15px; 305 | border-block-end: 1px solid var(--black_10); 306 | z-index: 4; 307 | } 308 | 309 | .header > .container { 310 | display: flex; 311 | justify-content: space-between; 312 | align-items: center; 313 | gap: 50px; 314 | } 315 | 316 | .logo { 317 | color: var(--black); 318 | font-family: var(--ff-poppins); 319 | font-size: 3.2rem; 320 | line-height: 0.9; 321 | font-weight: var(--fw-700); 322 | } 323 | 324 | .nav-toggle-btn .line { 325 | width: 30px; 326 | height: 2px; 327 | background-color: var(--black); 328 | transition: var(--transition); 329 | } 330 | 331 | .nav-toggle-btn .line:not(:last-child) { margin-block-end: 8px; } 332 | 333 | .nav-toggle-btn.active .line-1 { transform: translateY(10px) rotate(45deg); } 334 | 335 | .nav-toggle-btn.active .line-2 { 336 | transform: translateX(-100%); 337 | opacity: 0; 338 | } 339 | 340 | .nav-toggle-btn.active .line-3 { transform: translateY(-10px) rotate(-45deg); } 341 | 342 | .navbar { 343 | position: absolute; 344 | top: calc(100% + 1px); 345 | left: 0; 346 | width: 100%; 347 | background-color: var(--white); 348 | padding-inline: 30px; 349 | max-height: 0; 350 | overflow: hidden; 351 | visibility: hidden; 352 | transition: 0.3s var(--cubic-out); 353 | } 354 | 355 | .navbar.active { 356 | max-height: 250px; 357 | visibility: visible; 358 | transition-duration: 0.5s; 359 | } 360 | 361 | .navbar-list { margin-block: 25px; } 362 | 363 | .navbar-link { 364 | color: var(--black); 365 | font-family: var(--ff-poppins); 366 | font-weight: var(--fw-500); 367 | } 368 | 369 | 370 | 371 | 372 | 373 | /*-----------------------------------*\ 374 | #HERO 375 | \*-----------------------------------*/ 376 | 377 | .slide-down-btn { display: none; } 378 | 379 | .hero { 380 | background-color: var(--cultured); 381 | padding-block-start: calc(var(--section-padding) + 30px); 382 | } 383 | 384 | .hero-banner { 385 | margin-block-end: 60px; 386 | max-height: 500px; 387 | border-radius: var(--radius-10); 388 | margin-inline: auto; 389 | } 390 | 391 | .hero-title { margin-block: 10px 20px; } 392 | 393 | .hero-list { margin-block-end: 25px; } 394 | 395 | .hero-list .list-link { 396 | display: flex; 397 | justify-content: flex-start; 398 | align-items: center; 399 | gap: 12px; 400 | color: var(--black); 401 | font-size: var(--fs-17); 402 | padding-block: 6px; 403 | } 404 | 405 | .hero-list .list-link:is(:hover, :focus) { color: var(--theme-color); } 406 | 407 | .hero-list .list-link .span, 408 | .hero-list .list-link ion-icon { transition: var(--transition); } 409 | 410 | .hero-list .list-link:is(:hover, :focus) ion-icon { transform: rotate(-45deg); } 411 | 412 | .exp-list .list-item { 413 | display: flex; 414 | justify-content: flex-start; 415 | align-items: center; 416 | gap: 15px; 417 | font-family: var(--ff-poppins); 418 | line-height: 1.4; 419 | } 420 | 421 | .exp-list .list-item:not(:last-child) { margin-block-end: 15px; } 422 | 423 | .exp-list .strong { 424 | color: var(--black); 425 | font-size: var(--fs-35); 426 | font-weight: var(--fw-600); 427 | } 428 | 429 | .exp-list .span { font-size: var(--fs-13); } 430 | 431 | 432 | 433 | 434 | 435 | /*-----------------------------------*\ 436 | #SKILLS 437 | \*-----------------------------------*/ 438 | 439 | .skills-banner { display: none; } 440 | 441 | .skills { background-color: var(--black); } 442 | 443 | .skills .section-title { color: var(--white); } 444 | 445 | .skills .section-text { 446 | color: var(--gray-x-11); 447 | margin-block: 40px 45px; 448 | } 449 | 450 | .skills-item:not(:last-child) { margin-block-end: 25px; } 451 | 452 | .skills-list .wrapper { 453 | display: flex; 454 | justify-content: space-between; 455 | align-items: center; 456 | color: var(--white); 457 | font-family: var(--ff-poppins); 458 | margin-block-end: 10px; 459 | } 460 | 461 | .skill-title { 462 | font-size: unset; 463 | font-weight: unset; 464 | } 465 | 466 | .skills .progress-box { background-color: var(--white_10); } 467 | 468 | .skills .progress { 469 | background-color: var(--theme-color); 470 | height: 8px; 471 | } 472 | 473 | 474 | 475 | 476 | 477 | /*-----------------------------------*\ 478 | #TIMELINE 479 | \*-----------------------------------*/ 480 | 481 | .timeline-item { 482 | padding-block: 20px; 483 | font-size: var(--fs-18); 484 | display: grid; 485 | gap: 15px; 486 | } 487 | 488 | .timeline-item:not(:last-child) { border-block-end: 1px solid var(--black_10); } 489 | 490 | .timeline-item .item-period { font: unset; } 491 | 492 | .timeline-item .item-title { color: var(--black); } 493 | 494 | 495 | 496 | 497 | 498 | /*-----------------------------------*\ 499 | #PRICEING 500 | \*-----------------------------------*/ 501 | 502 | .pricing { background-color: var(--cultured); } 503 | 504 | .pricing .section-text { margin-block-end: 60px; } 505 | 506 | .pricing-list { 507 | display: grid; 508 | gap: 30px; 509 | } 510 | 511 | .pricing-card { 512 | --color: var(--black); 513 | --icon-color: var(--theme-color); 514 | 515 | background-color: var(--white); 516 | border-radius: var(--radius-10); 517 | box-shadow: var(--shadow); 518 | line-height: 1.2; 519 | padding: 30px; 520 | transition: var(--transition); 521 | } 522 | 523 | .pricing-card ion-icon { 524 | color: var(--icon-color); 525 | flex-shrink: 0; 526 | font-size: 25px; 527 | transition: var(--transition); 528 | } 529 | 530 | .pricing-card .card-title { 531 | color: var(--color); 532 | font: unset; 533 | font-family: var(--ff-poppins); 534 | margin-block: 14px 10px; 535 | transition: var(--transition); 536 | } 537 | 538 | .pricing-card .card-price { 539 | color: var(--color); 540 | font-family: var(--ff-poppins); 541 | transition: var(--transition); 542 | } 543 | 544 | .pricing-card:is(:hover, :focus-within) { 545 | background-color: var(--theme-color); 546 | --color: var(--white); 547 | --icon-color: var(--white); 548 | } 549 | 550 | 551 | 552 | 553 | 554 | /*-----------------------------------*\ 555 | #NEWS 556 | \*-----------------------------------*/ 557 | 558 | .news-card .card-text { margin-block-end: 5px; } 559 | 560 | 561 | 562 | 563 | 564 | /*-----------------------------------*\ 565 | #CONTACT 566 | \*-----------------------------------*/ 567 | 568 | .contact { background-color: var(--cultured); } 569 | 570 | .contact-list { margin-block: 40px 50px; } 571 | 572 | .contact-item:not(:last-child) { margin-block-end: 22px; } 573 | 574 | .contact-item { 575 | display: flex; 576 | align-items: center; 577 | gap: 12px; 578 | } 579 | 580 | .contact-item ion-icon { 581 | color: var(--theme-color); 582 | font-size: 22px; 583 | flex-shrink: 0; 584 | --ionicon-stroke-width: 25px; 585 | } 586 | 587 | .contact-link { 588 | color: var(--black); 589 | font-family: var(--ff-poppins); 590 | } 591 | 592 | .input-field { 593 | color: var(--black); 594 | font-family: var(--ff-poppins); 595 | font-size: var(--fs-13); 596 | letter-spacing: 1.4px; 597 | border: 1px solid var(--black_10); 598 | padding: 10px; 599 | margin-block-end: 30px; 600 | outline: none; 601 | transition: border var(--transition); 602 | } 603 | 604 | .input-field:focus { border-color: var(--black_30); } 605 | 606 | textarea.input-field { 607 | resize: vertical; 608 | min-height: 45px; 609 | height: 45px; 610 | max-height: 100px; 611 | } 612 | 613 | .submit-btn { 614 | background-color: var(--theme-color); 615 | color: var(--white); 616 | width: 100%; 617 | font-size: var(--fs-17); 618 | display: flex; 619 | justify-content: center; 620 | align-items: center; 621 | gap: 8px; 622 | padding: 8px 20px; 623 | transition: var(--transition); 624 | } 625 | 626 | .submit-btn:is(:hover, :focus) { background-color: var(--black); } 627 | 628 | .submit-btn ion-icon { transition: var(--transition); } 629 | 630 | .submit-btn:is(:hover, :focus) ion-icon { transform: rotate(-45deg); } 631 | 632 | 633 | 634 | 635 | 636 | /*-----------------------------------*\ 637 | #FOOTER 638 | \*-----------------------------------*/ 639 | 640 | .footer { 641 | background-color: var(--black); 642 | color: var(--white); 643 | text-align: center; 644 | padding-block: 30px; 645 | } 646 | 647 | .copyright { margin-block-end: 10px; } 648 | 649 | .copyright-link { display: inline-block; } 650 | 651 | .copyright-link:is(:hover, :focus) { text-decoration: underline; } 652 | 653 | .social-list { 654 | display: flex; 655 | justify-content: center; 656 | gap: 20px; 657 | } 658 | 659 | .social-link { font-size: 17px; } 660 | 661 | 662 | 663 | 664 | 665 | /*-----------------------------------*\ 666 | #MEDIA QUERIES 667 | \*-----------------------------------*/ 668 | 669 | /** 670 | * responsive for larger than 576px screen 671 | */ 672 | 673 | @media (min-width: 576px) { 674 | 675 | /** 676 | * REUSED STYLE 677 | */ 678 | 679 | .scrollbar-item { min-width: calc(50% - 20px); } 680 | 681 | 682 | 683 | /** 684 | * HERO 685 | */ 686 | 687 | .exp-list { 688 | display: flex; 689 | justify-content: flex-start; 690 | gap: 50px; 691 | } 692 | 693 | .exp-list .list-item:not(:last-child) { margin-block-end: 0; } 694 | 695 | 696 | 697 | /** 698 | * PRICING 699 | */ 700 | 701 | .pricing-card { 702 | display: flex; 703 | justify-content: flex-start; 704 | align-items: center; 705 | gap: 10px; 706 | } 707 | 708 | .pricing-card .card-title { 709 | margin-block: 0; 710 | margin-inline-end: auto; 711 | } 712 | 713 | } 714 | 715 | 716 | 717 | 718 | 719 | /** 720 | * responsive for larger than 768px screen 721 | */ 722 | 723 | @media (min-width: 768px) { 724 | 725 | /** 726 | * CUSTOM PROPERTY 727 | */ 728 | 729 | :root { 730 | 731 | /** 732 | * typography 733 | */ 734 | 735 | --fs-30: 3.5rem; 736 | --fs-25: 3rem; 737 | 738 | } 739 | 740 | 741 | 742 | /** 743 | * REUSED STYLE 744 | */ 745 | 746 | .h3 { --fs-18: 2rem; } 747 | 748 | .card-content { padding: 30px 35px; } 749 | 750 | .card-content > ion-icon { 751 | top: 30px; 752 | right: 30px; 753 | } 754 | 755 | 756 | 757 | /** 758 | * TIMELINE 759 | */ 760 | 761 | .timeline-item { 762 | grid-template-columns: repeat(3, 1fr); 763 | gap: 30px; 764 | } 765 | 766 | 767 | 768 | /** 769 | * PRICING, CONTACT 770 | */ 771 | 772 | .pricing-card, 773 | .contact-link { font-size: var(--fs-18); } 774 | 775 | 776 | 777 | /** 778 | * FOOTER 779 | */ 780 | 781 | .footer .container { 782 | display: flex; 783 | justify-content: space-between; 784 | align-items: center; 785 | } 786 | 787 | .copyright { margin-block-end: 0; } 788 | 789 | } 790 | 791 | 792 | 793 | 794 | 795 | /** 796 | * responsive for larger than 992px screen 797 | */ 798 | 799 | @media (min-width: 992px) { 800 | 801 | /** 802 | * CUSTOM PROPERTY 803 | */ 804 | 805 | :root { 806 | 807 | /** 808 | * typography 809 | */ 810 | 811 | --fs-35: 4.5rem; 812 | 813 | /** 814 | * spacing 815 | */ 816 | 817 | --section-padding: 120px; 818 | 819 | } 820 | 821 | 822 | 823 | /** 824 | * REUSED STYLE 825 | */ 826 | 827 | .container { padding-inline: 50px; } 828 | 829 | 830 | 831 | /** 832 | * HEADER 833 | */ 834 | 835 | .header { 836 | background-color: transparent; 837 | border-block-end: none; 838 | padding-block: 25px; 839 | transition: var(--transition); 840 | } 841 | 842 | .header.active { 843 | background-color: var(--white); 844 | padding-block: 20px; 845 | } 846 | 847 | .navbar, 848 | .navbar.active { 849 | all: unset; 850 | margin-inline-start: auto; 851 | transition: var(--transition); 852 | } 853 | 854 | .navbar { visibility: hidden; } 855 | 856 | .navbar.active { visibility: visible; } 857 | 858 | .navbar-list { 859 | display: flex; 860 | gap: 20px; 861 | margin-block: 0; 862 | } 863 | 864 | .navbar-link { 865 | opacity: 0; 866 | transform: translateX(20px); 867 | font-weight: var(--fw-400); 868 | transition: var(--transition); 869 | } 870 | 871 | .navbar.active .navbar-link { 872 | opacity: 1; 873 | transform: translateX(0); 874 | } 875 | 876 | .navbar-link:is(:hover, :focus) { color: var(--theme-color); } 877 | 878 | 879 | 880 | /** 881 | * HERO 882 | */ 883 | 884 | .hero { 885 | --section-padding: 70px; 886 | padding-block-start: calc(var(--section-padding) + 60px); 887 | min-height: 100vh; 888 | display: grid; 889 | align-items: center; 890 | } 891 | 892 | .hero .container { 893 | display: grid; 894 | grid-template-columns: 1fr 1fr; 895 | align-items: center; 896 | gap: 150px; 897 | } 898 | 899 | .hero-banner { 900 | order: 1; 901 | width: 250px; 902 | margin-inline: auto 80px; 903 | margin-block-end: 0; 904 | overflow: visible; 905 | transform: rotate(7deg); 906 | } 907 | 908 | .hero-banner .img-cover { border-radius: inherit; } 909 | 910 | .hero-banner::before { 911 | bottom: -40px; 912 | left: -95px; 913 | width: 90%; 914 | height: 100%; 915 | background-color: var(--theme-color); 916 | z-index: -1; 917 | transform: rotate(-15deg); 918 | border-radius: var(--radius-10); 919 | } 920 | 921 | .exp-list .span { --fs-13: 1.4rem; } 922 | 923 | .slide-down-btn { 924 | display: block; 925 | color: var(--black); 926 | font-size: 40px; 927 | max-width: max-content; 928 | margin-block-start: 40px; 929 | transition: var(--transition); 930 | animation: scrollDown 2s ease infinite; 931 | } 932 | 933 | .slide-down-btn:is(:hover, :focus) { color: var(--theme-color); } 934 | 935 | @keyframes scrollDown { 936 | 0% { transform: translateY(0); } 937 | 30% { transform: translateY(20px); } 938 | } 939 | 940 | 941 | 942 | /** 943 | * SKILLS 944 | */ 945 | 946 | .skills .container { 947 | position: relative; 948 | display: grid; 949 | grid-template-columns: 1fr 1fr; 950 | gap: 150px; 951 | } 952 | 953 | .skills-banner { 954 | display: block; 955 | position: absolute; 956 | top: 0; 957 | right: 50px; 958 | width: 410px; 959 | height: 620px; 960 | background-image: url('../images/portfolio-2.jpg'); 961 | background-repeat: no-repeat; 962 | background-size: contain; 963 | background-position: 105%; 964 | background-attachment: fixed; 965 | overflow: hidden; 966 | } 967 | 968 | 969 | 970 | /** 971 | * TIMELINE 972 | */ 973 | 974 | .timeline-item { padding-block: 30px; } 975 | 976 | 977 | 978 | /** 979 | * PRICING 980 | */ 981 | 982 | .pricing .container { 983 | position: relative; 984 | display: grid; 985 | grid-template-columns: 1fr 1fr; 986 | align-items: flex-start; 987 | gap: 200px; 988 | } 989 | 990 | .pricing-content { 991 | position: sticky; 992 | top: 120px; 993 | } 994 | 995 | .pricing .section-text { margin-block-end: 0; } 996 | 997 | 998 | 999 | /** 1000 | * CONTACT 1001 | */ 1002 | 1003 | .contact .container { 1004 | display: grid; 1005 | grid-template-columns: 1fr 1fr; 1006 | align-items: center; 1007 | gap: 200px; 1008 | } 1009 | 1010 | .contact-list { margin-block-end: 0; } 1011 | 1012 | } 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | /** 1019 | * responsive for larger than 1200px screen 1020 | */ 1021 | 1022 | @media (min-width: 1200px) { 1023 | 1024 | /** 1025 | * REUSED STYLE 1026 | */ 1027 | 1028 | .container { 1029 | max-width: 1170px; 1030 | width: 100%; 1031 | margin-inline: auto; 1032 | } 1033 | 1034 | .has-scrollbar { gap: 40px; } 1035 | 1036 | .scrollbar-item { min-width: calc(33.33% - 26.66px); } 1037 | 1038 | :is(.portfolio, .news) .section-title { margin-block-end: 80px; } 1039 | 1040 | 1041 | 1042 | /** 1043 | * HEADER 1044 | */ 1045 | 1046 | .header .container { max-width: unset; } 1047 | 1048 | 1049 | 1050 | /** 1051 | * HERO 1052 | */ 1053 | 1054 | .hero-banner { width: 275px; } 1055 | 1056 | } -------------------------------------------------------------------------------- /assets/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/blog-1.jpg -------------------------------------------------------------------------------- /assets/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/blog-2.jpg -------------------------------------------------------------------------------- /assets/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/blog-3.jpg -------------------------------------------------------------------------------- /assets/images/blog-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/blog-4.jpg -------------------------------------------------------------------------------- /assets/images/hero-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/hero-banner.jpg -------------------------------------------------------------------------------- /assets/images/portfolio-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/portfolio-1.jpg -------------------------------------------------------------------------------- /assets/images/portfolio-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/portfolio-2.jpg -------------------------------------------------------------------------------- /assets/images/portfolio-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/portfolio-3.jpg -------------------------------------------------------------------------------- /assets/images/portfolio-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/portfolio-4.jpg -------------------------------------------------------------------------------- /assets/images/portfolio-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/portfolio-5.jpg -------------------------------------------------------------------------------- /assets/images/portfolio-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/portfolio-6.jpg -------------------------------------------------------------------------------- /assets/images/skills-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/assets/images/skills-bg.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * add event on element 7 | */ 8 | 9 | const addEventOnElem = function (elem, type, callback) { 10 | if (elem.length > 1) { 11 | for (let i = 0; i < elem.length; i++) { 12 | elem[i].addEventListener(type, callback); 13 | } 14 | } else { 15 | elem.addEventListener(type, callback); 16 | } 17 | } 18 | 19 | 20 | 21 | /** 22 | * toggle navbar 23 | */ 24 | 25 | const navbar = document.querySelector("[data-navbar]"); 26 | const navLinks = document.querySelectorAll("[data-nav-link]"); 27 | const navToggler = document.querySelector("[data-nav-toggler]"); 28 | 29 | const toggleNavbar = function () { 30 | navbar.classList.toggle("active"); 31 | navToggler.classList.toggle("active"); 32 | } 33 | 34 | addEventOnElem(navToggler, "click", toggleNavbar); 35 | 36 | const closeNavbar = function () { 37 | navbar.classList.remove("active"); 38 | navToggler.classList.remove("active"); 39 | } 40 | 41 | addEventOnElem(navLinks, "click", closeNavbar); 42 | 43 | 44 | 45 | /** 46 | * header active 47 | */ 48 | 49 | const header = document.querySelector("[data-header]"); 50 | 51 | window.addEventListener("scroll", function () { 52 | if (window.scrollY > 100) { 53 | header.classList.add("active"); 54 | } else { 55 | header.classList.remove("active"); 56 | } 57 | }); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Smith - Creative Designer Based In UK 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 40 | 41 |
42 |
43 | 44 | 45 | 46 | 79 | 80 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 |
94 |
95 | 96 | 99 | 100 |
101 |
102 | 103 |
104 | Bernard Smith 105 |
106 | 107 |
108 | 109 |

Bernard Smith

110 | 111 |

Creative Designer Based In UK

112 | 113 | 140 | 141 |
    142 | 143 |
  • 144 | 10+ 145 | 146 | 147 | Years of
    148 | Experience 149 |     150 |
    • 151 | 152 |
  • 153 | 3K+ 154 | 155 | 156 | Happy
    157 | Customers 158 |     159 |
    • 160 | 161 |
162 | 163 | 164 | 165 | 166 | 167 |
168 | 169 |
170 |
171 | 172 | 173 | 174 | 175 | 176 | 179 | 180 |
181 |
182 | 183 |

Portfolio

184 | 185 |

Selected Works

186 | 187 | 316 | 317 |
318 |
319 | 320 | 321 | 322 | 323 | 324 | 327 | 328 |
330 |
331 | 332 |
333 | 334 |

Skills

335 | 336 |

Programming Skills

337 | 338 |

339 | For more than 20 years our experts have been accomplishing enough with modern Web Development, new 340 | generation web and 341 | app programming language. 342 |

343 | 344 |
    345 | 346 |
  • 347 |
    348 |

    HTML & CSS

    349 | 350 | 95% 351 |
    352 | 353 |
    354 |
    355 |
    356 |
    • 357 | 358 |
  • 359 |
    360 |

    JavaScript

    361 | 362 | 80% 363 |
    364 | 365 |
    366 |
    367 |
    368 |
    • 369 | 370 |
  • 371 |
    372 |

    WordPress

    373 | 374 | 90% 375 |
    376 | 377 |
    378 |
    379 |
    380 |
    • 381 | 382 |
383 | 384 |
385 | 386 |
387 | 388 |
389 |
390 | 391 | 392 | 393 | 394 | 395 | 398 | 399 |
400 |
401 | 402 |

Timeline

403 | 404 |

Working Period

405 | 406 |
    407 | 408 |
  • 409 | 410 |

    April, 2019 - Today

    411 | 412 |

    Head Designer & Co-founder

    413 | 414 |

    Alan Klein Design, London

    415 | 416 |
    • 417 | 418 |
  • 419 | 420 |

    September, 2018 - April, 2019

    421 | 422 |

    Creative Director & Senior Designer

    423 | 424 |

    Raxuna Poc, New York

    425 | 426 |
    • 427 | 428 |
  • 429 | 430 |

    October, 2015 - September, 2018

    431 | 432 |

    Head Designer

    433 | 434 |

    Arimana Co. Ltd, Amsterdam

    435 | 436 |
    • 437 | 438 |
  • 439 | 440 |

    July, 2012 - October, 2015

    441 | 442 |

    Senior UX & UI Designer

    443 | 444 |

    Baxdoro Design, London

    445 | 446 |
    • 447 | 448 |
  • 449 | 450 |

    March, 2010 - July, 2012

    451 | 452 |

    Junior UX Designer

    453 | 454 |

    Simono Design Group, London

    455 | 456 |
    • 457 | 458 |
459 | 460 |
461 |
462 | 463 | 464 | 465 | 466 | 467 | 470 | 471 |
472 |
473 | 474 |
475 | 476 |

Pricing

477 | 478 |

Service Prices

479 | 480 |

481 | For more than 20 years our experts have been accomplishing enough with modern Web Development, new 482 | generation web and 483 | app programming language. 484 |

485 | 486 |
487 | 488 |
    489 | 490 |
  • 491 |
    492 | 493 | 494 |

    WordPress Development

    495 | 496 | $500 497 |
    498 |
    • 499 | 500 |
  • 501 |
    502 | 503 | 504 |

    HTML Development

    505 | 506 | $400 507 |
    508 |
    • 509 | 510 |
  • 511 |
    512 | 513 | 514 |

    Content Writing

    515 | 516 | $300 517 |
    518 |
    • 519 | 520 |
  • 521 |
    522 | 523 | 524 |

    Brand Identity

    525 | 526 | $200 527 |
    528 |
    • 529 | 530 |
  • 531 |
    532 | 533 | 534 |

    PSD Design

    535 | 536 | $100 537 |
    538 |
    • 539 | 540 |
541 | 542 |
543 |
544 | 545 | 546 | 547 | 548 | 549 | 552 | 553 |
554 |
555 | 556 |

News

557 | 558 |

Latest News

559 | 560 | 647 | 648 |
649 |
650 | 651 | 652 | 653 | 654 | 655 | 658 | 659 |
660 |
661 | 662 |
663 | 664 |

Contact

665 | 666 |

Get In Touch

667 | 668 |

669 | Please fill out the form on this section to contact with me. Or call between 9:00 a.m. and 8:00 p.m. ET, 670 | Monday through 671 | Friday 672 |

673 | 674 |
    675 | 676 |
  • 677 | 678 | 679 |
    680 | 27 City Walls Rd, Clydebank, UK 681 |
    682 |
    • 683 | 684 |
  • 685 | 686 | 687 | +077 4269 1291 688 |
    • 689 | 690 |
  • 691 | 692 | 693 | smith@gmail.com 694 |
    • 695 | 696 |
  • 697 | 698 | 699 | www.domain.com 700 |
    • 701 | 702 |
703 | 704 |
705 | 706 |
707 | 708 | 709 | 710 | 712 | 713 | 714 | 715 | 720 | 721 |
722 | 723 |
724 |
725 | 726 |
727 |
728 | 729 | 730 | 731 | 732 | 733 | 736 | 737 | 780 | 781 | 782 | 783 | 784 | 785 | 788 | 789 | 790 | 793 | 794 | 795 | 796 | 797 | 798 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Smith - Creative Designer Based In UK 2 | 3 | 4 | 5 | #---------- HEADER ----------# 6 | 7 | Smith 8 | 9 | Home 10 | Portfolio 11 | Skills 12 | Timeline 13 | Price 14 | News 15 | Contact 16 | 17 | aria-label = toggle menu 18 | 19 | 20 | 21 | #---------- HERO ----------# 22 | 23 | alt = Bernard Smith 24 | 25 | Bernard Smith 26 | 27 | Creative Designer Based In UK 28 | 29 | Web Development 30 | 31 | 32 | Digital Marketing 33 | Graphic Design 34 | 35 | 10+ 36 | Years of 37 | Experience 38 | 39 | 3K+ 40 | Happy 41 | Customers 42 | 43 | aria-label = scroll down 44 | 45 | 46 | 47 | 48 | 49 | #---------- PORTFOLIO ----------# 50 | 51 | Portfolio 52 | 53 | Selected Works 54 | 55 | alt = Magic Art 56 | 57 | 58 | 59 | Magic Art 60 | Vimeo 61 | 62 | Bona Green 63 | Youtube 64 | 65 | Leo Dandora 66 | Soundcloud 67 | 68 | Folio Grasia 69 | Detail 70 | 71 | Viva Mercury 72 | Image 73 | 74 | Santa Onera 75 | Image 76 | 77 | 78 | 79 | 80 | 81 | #---------- SKILLS ----------# 82 | 83 | Skills 84 | 85 | Programming Skills 86 | 87 | For more than 20 years our experts have been accomplishing enough with modern Web Development, new generation web and app programming language. 88 | 89 | HTML & CSS 90 | 95% 91 | 92 | JavaScript 93 | 80% 94 | 95 | WordPress 96 | 90% 97 | 98 | 99 | 100 | #---------- HEADER ----------# 101 | 102 | Timeline 103 | 104 | Working Period 105 | 106 | April, 2019 - Today 107 | Head Designer & Co-founder 108 | Alan Klein Design, London 109 | 110 | September, 2018 - April, 2019 111 | Creative Director & Senior Designer 112 | Raxuna Poc, New York 113 | 114 | October, 2015 - September, 2018 115 | Head Designer 116 | Arimana Co. Ltd, Amsterdam 117 | 118 | July, 2012 - October, 2015 119 | Senior UX & UI Designer 120 | Baxdoro Design, London 121 | 122 | March, 2010 - July, 2012 123 | Junior UX Designer 124 | Simono Design Group, London 125 | 126 | 127 | 128 | #---------- PRICING ----------# 129 | 130 | Pricing 131 | 132 | Service Prices 133 | 134 | For more than 20 years our experts have been accomplishing enough with modern Web Development, new generation web and app programming language. 135 | 136 | 137 | WordPress Development 138 | $500 139 | 140 | 141 | HTML Development 142 | $400 143 | 144 | 145 | Content Writing 146 | $300 147 | 148 | 149 | Brand Identity 150 | $200 151 | 152 | 153 | PSD Design 154 | $100 155 | 156 | 157 | 158 | #---------- NEWS ----------# 159 | 160 | News 161 | 162 | Latest News 163 | 164 | alt = VS Code Gets New JavaScript Debugger 165 | 166 | September 02, 2022 167 | VS Code Gets New JavaScript Debugger 168 | 169 | alt = Javalin Framework for Kotlin and Java Updated 170 | 171 | August 17, 2022 172 | Javalin Framework for Kotlin and Java Updated 173 | 174 | alt = JavaScript Dominated Open Source in 2022 175 | 176 | July 05, 2022 177 | JavaScript Dominated Open Source in 2022 178 | 179 | atl = Perfecto Tests Progressive Web Apps 180 | 181 | April 22, 2022 182 | Perfecto Tests Progressive Web Apps 183 | 184 | 185 | 186 | #---------- CONTACT ----------# 187 | 188 | Contact 189 | 190 | Get In Touch 191 | 192 | Please fill out the form on this section to contact with me. Or call between 9:00 a.m. and 8:00 p.m. ET, Monday through Friday 193 | 194 | 195 | 27 City Walls Rd, Clydebank, UK 196 | 197 | 198 | +077 4269 1291 199 | 200 | 201 | smith@gmail.com 202 | 203 | 204 | www.domain.com 205 | 206 | placeholder = Name 207 | placeholder = Email 208 | placeholder = Message 209 | 210 | Submit 211 | 212 | 213 | 214 | 215 | 216 | #---------- FOOTER ----------# 217 | 218 | © 2022. All rights reserved by codewithsadee. 219 | 220 | 221 | 222 | 223 | 224 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/smith-portfolio/794f4ee872e35083c5f884299f83989393665bb2/readme-images/desktop.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 12 | ``` 13 | 14 | Ionicon 15 | 16 | ``` html 17 | 18 | 19 | ``` 20 | 21 | --- 22 | 23 | ## Colors 24 | 25 | ``` css 26 | --sonic-silver: hsl(0, 0%, 46%); 27 | --spanish-gray: hsl(0, 0%, 60%); 28 | --theme-color: hsl(10, 100%, 57%); 29 | --light-gray: hsl(0, 0%, 80%); 30 | --gray-x-11: hsl(0, 0%, 73%); 31 | --dim-gray: hsl(0, 0%, 44%); 32 | --cultured: hsl(0, 0%, 98%); 33 | --black_10: hsl(0, 0%, 0%, 0.1); 34 | --black_20: hsl(0, 0%, 0%, 0.2); 35 | --black_30: hsl(0, 0%, 0%, 0.3); 36 | --black_70: hsl(0, 0%, 0%, 0.7); 37 | --white_10: hsl(0, 0%, 100%, 0.1); 38 | --white: hsl(0, 0%, 100%); 39 | --black: hsl(0, 0%, 0%); 40 | ``` 41 | 42 | ## Typography 43 | 44 | ``` css 45 | --ff-poppins: 'Poppins', sans-serif; 46 | --ff-mulish: 'Mulish', sans-serif; 47 | 48 | --fs-35: 3.5rem; 49 | --fs-30: 3rem; 50 | --fs-25: 2.5rem; 51 | --fs-18: 1.8rem; 52 | --fs-17: 1.7rem; 53 | --fs-13: 1.3rem; 54 | 55 | --fw-800: 800; 56 | --fw-700: 700; 57 | --fw-600: 600; 58 | --fw-500: 500; 59 | --fw-400: 400; 60 | ``` 61 | 62 | ## Spacing 63 | 64 | ``` css 65 | --section-padding: 80px; 66 | ``` 67 | 68 | ## Shadow 69 | 70 | ``` css 71 | --shadow: 0 0 20px hsla(0, 0%, 0%, 0.08); 72 | ``` 73 | 74 | ## Border Radius 75 | 76 | ``` css 77 | --radius-10: 10px; 78 | --radius-8: 8px; 79 | ``` 80 | 81 | ## Transition 82 | 83 | ``` css 84 | --transition: 0.25s ease; 85 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 86 | ``` 87 | --------------------------------------------------------------------------------