├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── about-banner.jpg │ ├── absolute-image.jpg │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── hero-banner.jpg │ ├── hero-bg.jpg │ ├── portfolio-1.jpg │ ├── portfolio-2.jpg │ ├── portfolio-3.jpg │ ├── portfolio-4.jpg │ └── rotate-img.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/portfolio) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/portfolio?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/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/SAu7e09vXoQ?style=social)](https://youtu.be/SAu7e09vXoQ) 8 | 9 |
10 |
11 | 12 |

Personal Portfolio Website

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

Ethan Ward

41 | 42 | 43 | 47 | 48 | 81 | 82 |
83 |
84 | 85 | 86 | 87 | 88 | 89 |
90 |
91 | 92 | 95 | 96 |
97 |
98 | 99 |
100 | 101 | Ethan's Photo 103 | 104 |
105 |

12

106 | 107 |

Years of Success

108 |
109 | 110 |
111 |

800+

112 | 113 |

Projects Completed

114 |
115 | 116 |
117 | 118 |
119 | 120 | I'm developer from New York 122 | 123 |
124 | 125 |
126 | 127 |

128 | Hello I'm 129 | Ethan Ward Web Developer from New York 130 |

131 | 132 |

133 | Adipisicing elit. Neque nulla voluptatum eos repellat deserunt nesciunt tempore porro totam. 134 |

135 | 136 |
137 | Get a Quote 138 | 139 | About Me 140 |
141 | 142 |
143 | 144 |
145 |
146 | 147 | 148 | 149 | 150 | 151 | 154 | 155 |
156 |
157 | 158 |
159 | 160 | Ethan's Photo 162 | 163 | Ethan's Photo 165 | 166 |
167 | 168 |
169 | 170 |
171 | 172 |
173 | 174 |
175 | 176 |
177 | 178 |
179 | 180 |
181 | 182 |

I'm a Developer

183 | 184 |

I Develop Application that Help People

185 | 186 |

187 | Dliquip ex ea commo do conse namber onequa ute irure dolor in reprehenderit in voluptate velit esse cillum 188 | dolore eu 189 | fugiat nulla pariatu epteur sint occaecat cupidatat 190 |

191 | 192 |

193 | Krnon proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde 194 | omnis 195 |

196 | 197 | View Portfolio 198 | 199 |
200 | 201 |
202 |
203 | 204 | 205 | 206 | 207 | 208 | 211 | 212 |
213 |
214 | 215 |

Portfolio

216 | 217 |

My Amazing Works

218 | 219 |

220 | Dliquip ex ea commo do conse namber onequa ute irure dolor in reprehen derit in voluptate 221 |

222 | 223 | 298 | 299 |
300 |
301 | 302 | 303 | 304 | 305 | 306 | 309 | 310 |
311 |
312 | 313 |

My Skills

314 | 315 |

I Develop Skills Regularly

316 | 317 |

318 | Dliquip ex ea commo do conse namber onequa ute irure dolor in reprehen derit in voluptate 319 |

320 | 321 |
    322 | 323 |
  • 324 |
    325 |

    CSS

    326 | 327 | 95% 328 |
    329 | 330 |
    331 |
    332 |
    333 |
    • 334 | 335 |
  • 336 |
    337 |

    React

    338 | 339 | 75% 340 |
    341 | 342 |
    343 |
    344 |
    345 |
    • 346 | 347 |
  • 348 |
    349 |

    MongoDB

    350 | 351 | 90% 352 |
    353 | 354 |
    355 |
    356 |
    357 |
    • 358 | 359 |
  • 360 |
    361 |

    Python

    362 | 363 | 70% 364 |
    365 | 366 |
    367 |
    368 |
    369 |
    • 370 | 371 |
  • 372 |
    373 |

    PHP

    374 | 375 | 80% 376 |
    377 | 378 |
    379 |
    380 |
    381 |
    • 382 | 383 |
  • 384 |
    385 |

    JavaScript

    386 | 387 | 75% 388 |
    389 | 390 |
    391 |
    392 |
    393 |
    • 394 | 395 |
396 | 397 |
398 |
399 | 400 | 401 | 402 | 403 | 404 | 407 | 408 |
409 |
410 | 411 |
412 | 413 |

Don't be shy

414 | 415 |

Drop Me a Line

416 | 417 |
418 | 419 |
420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 |
430 | 431 |
    432 | 433 |
  • 434 | 435 |
    436 | 437 |
    438 | 439 |
    440 |

    Address

    441 | 442 |
    443 | 20, London, United Kingdom 444 |
    445 |
    446 | 447 |
    • 448 | 449 |
  • 450 | 451 |
    452 | 453 |
    454 | 455 |
    456 |

    Email

    457 | 458 | hello@ethan.com 459 |
    460 | 461 |
    • 462 | 463 |
  • 464 | 465 |
    466 | 467 |
    468 | 469 |
    470 |

    Phone

    471 | 472 | +123 456 7890 473 |
    474 | 475 |
    • 476 | 477 |
478 | 479 |
480 | 481 |
482 | 483 |
484 |
485 | 486 | 487 | 488 | 489 | 490 | 493 | 494 |
495 |
496 | 497 |

Latest News

498 | 499 |

Checkout My Recent Blogs

500 | 501 |

502 | Dliquip ex ea commo do conse namber onequa ute irure dolor in reprehen derit in voluptate 503 |

504 | 505 | 565 | 566 |
567 |
568 | 569 |
570 |
571 | 572 | 573 | 574 | 575 | 576 | 579 | 580 | 599 | 600 | 601 | 602 | 603 | 604 | 607 | 608 | BACK TOP 609 | 610 | 611 | 612 | 613 | 614 | 617 | 618 | 619 | 622 | 623 | 624 | 625 | 626 | 627 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Ethan Ward - Web Developer from New York 2 | 3 | 4 | 5 | #---------- HEADER ----------# 6 | 7 | Ethan Ward 8 | 9 | aria-label = Toggle Menu 10 | 11 | 12 | 13 | 14 | Home 15 | About 16 | Portfolio 17 | Skills 18 | Contact 19 | Blog 20 | 21 | Download CV 22 | 23 | 24 | 25 | #---------- HERO ----------# 26 | 27 | alt = Ethan's Photo 28 | 29 | 12 30 | Years of Success 31 | 32 | 800+ 33 | Projects Completed 34 | 35 | 36 | 37 | alt = I'm developer from New York 38 | 39 | Hello I'm 40 | 41 | Ethan Ward 42 | 43 | Web Developer from New York 44 | 45 | Adipisicing elit. Neque nulla voluptatum eos repellat deserunt nesciunt tempore porro totam. 46 | 47 | Get a Quote 48 | 49 | About Me 50 | 51 | 52 | 53 | #---------- ABOUT ----------# 54 | 55 | alt = Ethan's Photo 56 | 57 | alt = Ethan's Photo 58 | 59 | 60 | 61 | 62 | 63 | I'm a Developer 64 | 65 | I Develop Application that Help People 66 | 67 | Dliquip ex ea commo do conse namber onequa ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu epteur sint occaecat cupidatat 68 | 69 | Krnon proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis 70 | 71 | View Portfolio 72 | 73 | 74 | 75 | #---------- PORTFOLIO ----------# 76 | 77 | Portfolio 78 | 79 | My Amazing Works 80 | 81 | Dliquip ex ea commo do conse namber onequa ute irure dolor in reprehen derit in voluptate 82 | 83 | Youtube 84 | 85 | Web Application for Desiverse 86 | 87 | View Project 88 | 89 | 90 | Vimeo 91 | 92 | Soundcloud 93 | 94 | Details 95 | 96 | 97 | 98 | #---------- SKILLS ----------# 99 | 100 | My Skills 101 | 102 | I Develop Skills Regularly 103 | 104 | Dliquip ex ea commo do conse namber onequa ute irure dolor in reprehen derit in voluptate 105 | 106 | CSS 107 | 95% 108 | 109 | React 110 | 75% 111 | 112 | MongoDB 113 | 90% 114 | 115 | Python 116 | 70% 117 | 118 | PHP 119 | 80% 120 | 121 | JavaScript 122 | 75% 123 | 124 | 125 | 126 | #---------- CONTACT ----------# 127 | 128 | Don't be shy 129 | 130 | Drop Me a Line 131 | 132 | placeholder = Name 133 | 134 | placeholder = Email 135 | 136 | placeholder = Message 137 | 138 | Submit Message 139 | 140 | 141 | Address 142 | 20, London, United Kingdom 143 | 144 | 145 | Email 146 | hello@ethan.com 147 | 148 | 149 | Phone 150 | +123 456 7890 151 | 152 | 153 | 154 | #---------- BLOG ----------# 155 | 156 | Latest News 157 | 158 | Checkout My Recent Blogs 159 | 160 | Dliquip ex ea commo do conse namber onequa ute irure dolor in reprehen derit in voluptate 161 | 162 | alt = Jim Morisson Says when the musics over turn off the light 163 | 164 | Web Development 165 | 166 | Jim Morisson Says when the musics over turn off the light 167 | 168 | 169 | 170 | #---------- FOOTER ----------# 171 | 172 | © 2022 codewithsadee. All Rights Reseverd 173 | 174 | Terms & Condition 175 | Privacy Policy 176 | 177 | 178 | 179 | #---------- BACK TO TOP ----------# 180 | 181 | BACK TOP -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/portfolio/86c214890a84cb2ce5fd1e1c7ba19e55d6106a18/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 | 13 | ``` 14 | 15 | Ionicon 16 | 17 | ``` html 18 | 19 | 20 | ``` 21 | 22 | --- 23 | 24 | ## Colors 25 | 26 | ``` css 27 | --cadet-blue-crayola: hsl(240, 10%, 70%); 28 | --gold-web-golden: hsl(50, 100%, 54%); 29 | --vivid-sky-blue: hsl(196, 84%, 63%); 30 | --midnight-blue: hsl(231, 83%, 25%); 31 | --minion-yellow: hsl(50, 100%, 64%); 32 | --independence: hsl(225, 24%, 27%); 33 | --orange-soda: hsl(7, 96%, 61%); 34 | --space-cadet: hsl(243, 23%, 18%); 35 | --fiery-rose: hsl(353, 83%, 65%); 36 | --klein-blue: hsl(230, 80%, 39%); 37 | --bluetiful: hsl(222, 88%, 55%); 38 | --glaucous: hsl(230, 52%, 63%); 39 | --manatee: hsl(254, 7%, 65%); 40 | --rufous: hsl(2, 85%, 35%); 41 | --black: hsl(0, 0%, 0%); 42 | --white: hsl(0, 0%, 100%); 43 | ``` 44 | 45 | ## Typography 46 | 47 | ``` css 48 | --ff-open-sans: 'Open Sans', sans-serif; 49 | --ff-barlow: 'Barlow', sans-serif; 50 | --ff-poppins: 'Poppins', sans-serif; 51 | 52 | --fs-1: 3.5rem; 53 | --fs-2: 3rem; 54 | --fs-3: 2.4rem; 55 | --fs-4: 2rem; 56 | --fs-5: 1.8rem; 57 | --fs-6: 1.3rem; 58 | 59 | --fw-600: 600; 60 | --fw-700: 700; 61 | ``` 62 | 63 | ## Border Radius 64 | 65 | ``` css 66 | --radius-5: 5px; 67 | --radius-10: 10px; 68 | --radius-15: 15px; 69 | --radius-20: 20px; 70 | ``` 71 | 72 | ## Spacing 73 | 74 | ``` css 75 | --section-padding: 60px; 76 | ``` 77 | 78 | ## Shadow 79 | 80 | ``` css 81 | --shadow: 0 -5px 10px var(--manatee); 82 | ``` 83 | 84 | ## Transition 85 | 86 | ``` css 87 | --transition-1: 0.05s ease; 88 | --transition-2: 0.25s ease; 89 | --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02); 90 | ``` 91 | --------------------------------------------------------------------------------