├── README.md ├── about.html ├── assets ├── css │ └── styles.css ├── img │ ├── Featured products.png │ ├── Featured products.svg │ ├── blogging.png │ ├── blogging.svg │ ├── education.png │ ├── education1.png │ ├── education2.png │ ├── eucation1.png │ ├── github__icon.png │ ├── image.jpg │ ├── image_.jpg │ ├── linkedin__icon.png │ ├── logo.png │ ├── logo1.png │ ├── logo2.png │ ├── mail__icon.png │ ├── portfolio.png │ ├── spotify.jpg │ ├── spotify.png │ ├── web_dev.svg │ ├── work1.jpg │ ├── work2.jpg │ └── work3.jpg ├── js │ └── main.js └── scss │ └── styles.scss ├── contact.html ├── index.html └── resume.pdf /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio with animations 2 | 3 | This project is a Portfolio, with 2 pages, the home page which give an overview about what you do and different project you've work on in the past or currently. 4 | The website is well designed with moderate animations 5 | 6 | ## Built With 7 | 8 | - Html 9 | - Css 10 | - JavaScript 11 | 12 | ## Live Demo 13 | 14 | [Live Demo Link](https://barakadanny.github.io/Portfolio-html-css-js-and-animations/index.html) 15 | 16 | ## Getting Started 17 | 18 | To run this project clone it with `git clone https://github.com/barakadanny/Portfolio-html-css-js-and-animations.git` 19 | then run from any browser of your choice 20 | 21 | To get a local copy up and running follow these simple example steps. 22 | 23 | ### Prerequisites 24 | 25 | - Browser eg. Chrome 26 | - Text Editor eg. Vs Code, Atom, Sublime text, etc. 27 | 28 | 👤 **Baraka Danny** 29 | 30 | - GitHub: [@barakadan](https://github.com/barakadanny) 31 | - LinkedIn: [danny baraka](https://www.linkedin.com/in/danny-baraka-589156169/) 32 | 33 | 34 | ## 🤝 Contributing 35 | 36 | Contributions, issues, and feature requests are welcome! 37 | 38 | Feel free to check the [issues page](https://github.com/barakadanny/capstone-project-1/issues). 39 | 40 | ## Show your support 41 | 42 | Give a ⭐️ if you like this project! 43 | 44 | ## Acknowledgments 45 | 46 | - Hat tip to anyone whose code was used 47 | - Inspiration 48 | - etc 49 | 50 | ## 📝 License 51 | 52 | This project is [MIT](./MIT.md) licensed. 53 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Baraka Danny || About 9 | 10 | 11 | 12 | 13 |
14 | 38 |
39 | 43 |
44 |
45 |
46 | 47 | DOWNLOAD RESUME 48 |
49 |

50 | I’m a hard working and dedicated front-end developer/user 51 | interface designer with a keen eye for detail, and a determination to deliver 52 | the very highest quality. I take great pride in my work, and I always try to 53 | better myself with every project I work on.

54 | I like designing, playing around with colors and everything related to 55 | human interaction.

56 | I am a multidisciplinary designer with challenge taste, I enjoy to 57 | meet new people and understand how they face day to day problems, 58 | this is one of the reasons why I ended up being a web developer 59 | and created interest to everything related to design (research, design 60 | thinking, design system, etc.). 61 | I see it as a chance to improve myself as a professional and put 62 | things in practice when I’m creating my solutions. 63 |

64 |
65 |
66 |

Skills

67 |

68 | • Front end development, • Agile development, • Project Management, • User experience,
69 | • intermediate knowledge of PHP and MySQL. 70 |

71 |
72 |
73 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 3 | /*===== VARIABLES CSS =====*/ 4 | :root { 5 | --header-height: 3rem; 6 | 7 | /*===== Colors =====*/ 8 | --first-color: #f6f4f1; 9 | --first-color-dark: #c1576a; 10 | --first-color-darken: #a83e51; 11 | --white-color: #333; 12 | 13 | /*===== Font and typography =====*/ 14 | --body-font: "Poppins", sans-serif; 15 | --big-font-size: 1rem; 16 | --normal-font-size: 0.938rem; 17 | 18 | /*===== z index =====*/ 19 | --z-fixed: 100; 20 | } 21 | 22 | @media screen and (min-width: 768px) { 23 | :root { 24 | --big-font-size: 5rem; 25 | --normal-font-size: 1rem; 26 | } 27 | } 28 | 29 | /*===== BASE =====*/ 30 | *, 31 | ::before, 32 | ::after { 33 | box-sizing: border-box; 34 | } 35 | .active { 36 | text-decoration: underline; 37 | color: #c1576a !important; 38 | } 39 | body { 40 | margin: var(--header-height) 0 0 0; 41 | padding: 0; 42 | font-family: var(--body-font); 43 | font-size: var(--normal-font-size); 44 | font-weight: 500; 45 | } 46 | 47 | h1, 48 | p, 49 | ul { 50 | margin: 0; 51 | } 52 | p { 53 | color: #333; 54 | } 55 | ul { 56 | padding: 0; 57 | list-style: none; 58 | } 59 | 60 | a { 61 | text-decoration: none; 62 | } 63 | 64 | img { 65 | max-width: 100%; 66 | height: auto; 67 | } 68 | 69 | /*===== LAYOUT =====*/ 70 | .bd-grid { 71 | max-width: 1024px; 72 | display: grid; 73 | grid-template-columns: 100%; 74 | column-gap: 2rem; 75 | width: calc(100% - 2rem); 76 | margin-left: 1rem; 77 | margin-right: 1rem; 78 | } 79 | 80 | .l-header { 81 | width: 100%; 82 | position: fixed; 83 | top: 0; 84 | left: 0; 85 | z-index: var(--z-fixed); 86 | background-color: var(--first-color); 87 | } 88 | 89 | /*===== NAV =====*/ 90 | .nav { 91 | height: var(--header-height); 92 | display: flex; 93 | justify-content: space-between; 94 | align-items: center; 95 | } 96 | 97 | @media screen and (max-width: 768px) { 98 | .nav__menu { 99 | position: fixed; 100 | top: 0; 101 | right: -100%; 102 | width: 70%; 103 | height: 100%; 104 | padding: 3.5rem 1.5rem 0; 105 | background: #f6f4f1; 106 | backdrop-filter: blur(10px); 107 | transition: 0.5s; 108 | } 109 | } 110 | @media screen and (max-width: 400px) { 111 | } 112 | 113 | .nav__close { 114 | position: absolute; 115 | top: 0.75rem; 116 | right: 1rem; 117 | font-size: 1.5rem; 118 | cursor: pointer; 119 | } 120 | 121 | .nav__item { 122 | margin-bottom: 2rem; 123 | } 124 | 125 | .nav__close, 126 | .nav__link, 127 | .nav__logo, 128 | .nav__toggle { 129 | color: var(--white-color); 130 | } 131 | 132 | .nav__link:hover { 133 | color: var(--first-color-dark); 134 | } 135 | 136 | .nav__toggle { 137 | font-size: 1.5rem; 138 | cursor: pointer; 139 | z-index: 100; 140 | } 141 | 142 | /*=== Show menu ===*/ 143 | .show { 144 | right: 0; 145 | } 146 | 147 | /*===== HOME =====*/ 148 | .home { 149 | background-color: var(--first-color); 150 | overflow: hidden; 151 | padding-top: 3.125rem; 152 | } 153 | 154 | .home__container { 155 | height: calc(80vh - var(--header-height)); 156 | grid-template-rows: repeat(2, max-content); 157 | row-gap: 1.5rem; 158 | } 159 | 160 | .home__img { 161 | position: relative; 162 | padding-top: 1.5rem; 163 | justify-self: center; 164 | width: 302px; 165 | height: 233px; 166 | } 167 | 168 | .home__img img { 169 | position: absolute; 170 | top: 0; 171 | left: 0; 172 | } 173 | 174 | .home__data { 175 | color: var(--white-color); 176 | } 177 | 178 | .home__title { 179 | font-size: 36px; 180 | line-height: 1.3; 181 | margin-bottom: 1rem; 182 | } 183 | 184 | .home__description { 185 | margin-bottom: 2.5rem; 186 | } 187 | /* ===== To use everywhere =====*/ 188 | .container { 189 | width: 70%; 190 | margin: 0px auto; 191 | } 192 | @media all and (max-width: 900px) { 193 | .container { 194 | width: 100%; 195 | margin: 0px auto; 196 | } 197 | } 198 | 199 | /* ===== WORK / PROJECT SECTION =====*/ 200 | .work-title { 201 | text-align: center; 202 | font-size: 22px; 203 | color: var(--white-color); 204 | } 205 | .work_img { 206 | max-width: 100%; 207 | display: block; 208 | height: auto; 209 | margin-bottom: 1.25rem; 210 | } 211 | .work__container .work_detail { 212 | color: rgba(51, 51, 51, 0.8); 213 | } 214 | .work { 215 | display: flex; 216 | flex-flow: row wrap; 217 | row-gap: 1.25rem; 218 | padding: 10px; 219 | /* justify-content: space-between; */ 220 | margin-top: 1.25rem; 221 | } 222 | .work__container { 223 | max-width: 60%; 224 | margin: 0 auto; 225 | padding: 20px; 226 | /* background: var(--first-color); */ 227 | } 228 | 229 | /* contact section start */ 230 | .contact { 231 | width: 100%; 232 | position: relative; 233 | padding: 10px 0; 234 | text-align: center; 235 | margin: 100px 0; 236 | } 237 | .contact__title { 238 | font-weight: 300; 239 | } 240 | .contact__content { 241 | width: 100%; 242 | } 243 | .contact__content-p { 244 | width: 40%; 245 | margin: 0 auto; 246 | margin-bottom: 15px; 247 | } 248 | .contact__content-icons { 249 | list-style: none; 250 | display: flex; 251 | flex-direction: row; 252 | background-color: rgba(242, 242, 242, 0.6); 253 | width: 40%; 254 | justify-content: space-around; 255 | margin: 0 auto; 256 | padding: 20px; 257 | color: rgba(242, 153, 74, 0.9); 258 | } 259 | .contact__content-icons li { 260 | position: relative; 261 | } 262 | .contact__content-icons li img { 263 | position: relative; 264 | top: 3px; 265 | width: 20px; 266 | height: 20px; 267 | } 268 | /* contact section end */ 269 | @media all and (max-width: 900px) { 270 | .home__data { 271 | background-color: rgba(236, 97, 91, 0.015); 272 | padding: 0 10px; 273 | } 274 | .work__container { 275 | max-width: 100%; 276 | margin: 0 auto; 277 | padding: 20px; 278 | } 279 | .contact__content-p { 280 | width: 80%; 281 | margin: 0 auto; 282 | margin-bottom: 15px; 283 | } 284 | .contact__content-icons { 285 | display: flex; 286 | flex-direction: column; 287 | background-color: rgba(242, 242, 242, 0.6); 288 | width: 80%; 289 | margin: 0 auto; 290 | padding: 20px; 291 | } 292 | .footer__icons { 293 | width: 20%; 294 | } 295 | /* .footer__content { 296 | background-color: tomato; 297 | } */ 298 | .about__details { 299 | flex-direction: column; 300 | } 301 | .resume { 302 | display: flex; 303 | flex-direction: column; 304 | margin-bottom: 20px; 305 | } 306 | .picture { 307 | max-width: 200px; 308 | height: auto; 309 | margin: 0 auto; 310 | margin-bottom: 10px; 311 | } 312 | .resume__download { 313 | padding: 10px 20px; 314 | width: 12.5rem; 315 | background: #c1576a; 316 | color: #f2f2f2; 317 | border: 1px solid #c1576a; 318 | transition: all 0.3s ease-in; 319 | margin: 0 auto; 320 | } 321 | .banner { 322 | width: 100%; 323 | height: 15vh !important; 324 | padding-top: 1.625rem !important; 325 | color: white; 326 | text-align: center; 327 | } 328 | } 329 | 330 | /* footer css start */ 331 | footer { 332 | width: 100%; 333 | position: relative; 334 | padding: 10px 0; 335 | padding-top: 20px; 336 | text-align: center; 337 | border-top: 2px solid rgb(51, 51, 51, 0.25); 338 | } 339 | .footer__icons { 340 | list-style: none; 341 | display: flex; 342 | flex-direction: row; 343 | width: 8%; 344 | justify-content: space-around; 345 | margin: 0 auto; 346 | margin-bottom: 20px; 347 | } 348 | .footer__icons li a img { 349 | width: 20px; 350 | height: 20px; 351 | } 352 | /* footer css end */ 353 | 354 | /* ===== About page =====*/ 355 | .banner { 356 | width: 100%; 357 | height: 30vh; 358 | padding-top: 6.625rem; 359 | background: #333; 360 | color: white; 361 | text-align: center; 362 | } 363 | .banner_desc { 364 | color: #c1576a; 365 | } 366 | .about__container { 367 | margin-top: 4rem; 368 | padding: 0 20px; 369 | margin-bottom: 4rem; 370 | } 371 | .about__details { 372 | display: flex; 373 | } 374 | .resume { 375 | flex: none; 376 | } 377 | .picture { 378 | max-width: 200px; 379 | height: auto; 380 | } 381 | .resume__download { 382 | display: flex; 383 | padding: 10px 20px; 384 | background: #c1576a; 385 | color: #f2f2f2; 386 | border: 1px solid #c1576a; 387 | transition: all 0.3s ease-in; 388 | } 389 | .resume__download:hover { 390 | background: transparent; 391 | color: #c1576a; 392 | } 393 | .about__details-p { 394 | padding-left: 2.5rem; 395 | } 396 | .abouts__skills { 397 | margin-top: 20px; 398 | color: #333; 399 | } 400 | 401 | /* ===== MEDIA QUERIES =====*/ 402 | @media screen and (min-width: 768px) { 403 | body { 404 | margin: 0; 405 | } 406 | 407 | .nav { 408 | height: calc(var(--header-height) + 1.5rem); 409 | } 410 | 411 | .nav__toggle, 412 | .nav__close { 413 | display: none; 414 | } 415 | 416 | .nav__list { 417 | display: flex; 418 | } 419 | 420 | .nav__item { 421 | margin-left: 3rem; 422 | margin-bottom: 0; 423 | } 424 | 425 | .home__container { 426 | height: 100vh; 427 | grid-template-columns: repeat(2, max-content); 428 | grid-template-rows: 1fr; 429 | row-gap: 0; 430 | align-items: center; 431 | justify-content: center; 432 | } 433 | 434 | .home__img { 435 | order: 1; 436 | width: 375px; 437 | height: 289px; 438 | } 439 | 440 | .home__img img { 441 | width: 375px; 442 | } 443 | } 444 | 445 | @media screen and (min-width: 1024px) { 446 | .bd-grid { 447 | margin-left: auto; 448 | margin-right: auto; 449 | } 450 | 451 | .home__container { 452 | justify-content: initial; 453 | column-gap: 4.5rem; 454 | } 455 | 456 | .home__img { 457 | width: 604px; 458 | height: 466px; 459 | } 460 | 461 | .home__img img { 462 | width: 604px; 463 | } 464 | } 465 | -------------------------------------------------------------------------------- /assets/img/Featured products.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/Featured products.png -------------------------------------------------------------------------------- /assets/img/Featured products.svg: -------------------------------------------------------------------------------- 1 | Featured products -------------------------------------------------------------------------------- /assets/img/blogging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/blogging.png -------------------------------------------------------------------------------- /assets/img/blogging.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 26 | 27 | 28 | 29 | 33 | 34 | 35 | 36 | 37 | 39 | 40 | 41 | 42 | 43 | 48 | 49 | 50 | 51 | 52 | 54 | 55 | 56 | 57 | 58 | 60 | 61 | 62 | 63 | 64 | 66 | 67 | 68 | 69 | 70 | 72 | 73 | 74 | 75 | 76 | 80 | 81 | 82 | 83 | 84 | 86 | 87 | 88 | 89 | 90 | 93 | 94 | 95 | 96 | 97 | 99 | 100 | 101 | 102 | 103 | 107 | 108 | 109 | 110 | 111 | 113 | 114 | 115 | 116 | 117 | 119 | 120 | 121 | 122 | 123 | 125 | 126 | 127 | 128 | 129 | 133 | 134 | 135 | 136 | 137 | 141 | 142 | 143 | 144 | 145 | 147 | 148 | 149 | 150 | 151 | 154 | 155 | 156 | 157 | 158 | 160 | 161 | 162 | 163 | 164 | 166 | 167 | 168 | 169 | 170 | 172 | 173 | 174 | 175 | 176 | 178 | 179 | 180 | 181 | 182 | 184 | 185 | 186 | 187 | 188 | 190 | 191 | 192 | 193 | 194 | 197 | 198 | 199 | 200 | 201 | 204 | 205 | 206 | 207 | 208 | 213 | 214 | 215 | 216 | 217 | 222 | 223 | 224 | 225 | 226 | 228 | 229 | 230 | 231 | 232 | 234 | 235 | 236 | 237 | 238 | 240 | 241 | 242 | 243 | 244 | 246 | 247 | 248 | 249 | 250 | 254 | 255 | 256 | 257 | 258 | 260 | 261 | 262 | 263 | 264 | 266 | 267 | 268 | 269 | 270 | 272 | 273 | 274 | 275 | 276 | 279 | 280 | 281 | 282 | 283 | 285 | 286 | 287 | 288 | 289 | 293 | 294 | 295 | 296 | 297 | 302 | 303 | 304 | 305 | 306 | 309 | 310 | 311 | 312 | 313 | 315 | 316 | 317 | 318 | 319 | 322 | 323 | 324 | 325 | 326 | 328 | 329 | 330 | 331 | 332 | 335 | 336 | 337 | 338 | 339 | 341 | 342 | 343 | 344 | 345 | 347 | 348 | 349 | 350 | 351 | 353 | 354 | 355 | 356 | 357 | 359 | 360 | 361 | 362 | 363 | 365 | 366 | 367 | 368 | 369 | 371 | 372 | 373 | 374 | 375 | 378 | 379 | 380 | 381 | 382 | 384 | 385 | 386 | 387 | 388 | 390 | 391 | 392 | 393 | 394 | 396 | 397 | 398 | 399 | 400 | 402 | 403 | 404 | 405 | 406 | 408 | 409 | 410 | 411 | 412 | 414 | 415 | 416 | 417 | 418 | 421 | 422 | 423 | 424 | 425 | 427 | 428 | 429 | 430 | 431 | 433 | 434 | 435 | 436 | 437 | 439 | 440 | 441 | 442 | 443 | 445 | 446 | 447 | 448 | 449 | 451 | 452 | 453 | 454 | 455 | 457 | 458 | 459 | 460 | 461 | 463 | 464 | 465 | 466 | 467 | 469 | 470 | 471 | 472 | 473 | 475 | 476 | 477 | 478 | 479 | 481 | 482 | 483 | 484 | 485 | 487 | 488 | 489 | 490 | 491 | 494 | 495 | 496 | 497 | 498 | 503 | 504 | 505 | 507 | 508 | 509 | 510 | 511 | 513 | 514 | 515 | 516 | 517 | 520 | 521 | 522 | 526 | 527 | 528 | 531 | 532 | 533 | 534 | 535 | 537 | 538 | 539 | 540 | 541 | 544 | 545 | 546 | 547 | 548 | 550 | 551 | 552 | 556 | 559 | 560 | 561 | 566 | 567 | 568 | 571 | 572 | 573 | 574 | 575 | 580 | 581 | 582 | 583 | 584 | 586 | 587 | 588 | 589 | 590 | 593 | 594 | 595 | 597 | 599 | 600 | 601 | 603 | 604 | 605 | 606 | 607 | 609 | 610 | 611 | 612 | 613 | 616 | 617 | 618 | 619 | 620 | 622 | 623 | 624 | 625 | 626 | 628 | 629 | 630 | 631 | 632 | 634 | 635 | 636 | 637 | 638 | 640 | 641 | 642 | 643 | 644 | 646 | 647 | 648 | 649 | 650 | 652 | 653 | 654 | 655 | 656 | 659 | 660 | 661 | 662 | 663 | 666 | 667 | 668 | 669 | 670 | 672 | 673 | 674 | 675 | 676 | 678 | 679 | 680 | 681 | 682 | 684 | 685 | 686 | 687 | 688 | 690 | 691 | 692 | 693 | 694 | 696 | 697 | 698 | 699 | 700 | 702 | 703 | 704 | 705 | 706 | 709 | 710 | 711 | 712 | 713 | 716 | 717 | 718 | 719 | 720 | 722 | 723 | 724 | 725 | 726 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 744 | 745 | 746 | 747 | 748 | 750 | 751 | 752 | 753 | 754 | 756 | 757 | 758 | 759 | 760 | 791 | 792 | 793 | 794 | 795 | 823 | 824 | 825 | 826 | 827 | 830 | 831 | 832 | 833 | 834 | 849 | 850 | 851 | 852 | 853 | 857 | 858 | 859 | 860 | 861 | 864 | 865 | 866 | 867 | 868 | 873 | 874 | 875 | 876 | 877 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 | 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 913 | 914 | 915 | 916 | 917 | 923 | 924 | 925 | 926 | 927 | 936 | 937 | 938 | 939 | 940 | 942 | 943 | 944 | 945 | 946 | 949 | 950 | 951 | 952 | 953 | 957 | 958 | 959 | 960 | 961 | 963 | 964 | 965 | 966 | 967 | 971 | 972 | 973 | 974 | 975 | 977 | 978 | 979 | 980 | 981 | 983 | 984 | 985 | 986 | 987 | 989 | 990 | 991 | 992 | 993 | 995 | 996 | 997 | 998 | 999 | 1001 | 1002 | 1003 | 1004 | 1005 | 1007 | 1008 | 1009 | 1010 | 1011 | 1014 | 1015 | 1016 | 1017 | 1018 | 1022 | 1023 | 1024 | 1025 | 1026 | 1029 | 1030 | 1031 | 1032 | 1033 | 1038 | 1039 | 1040 | 1041 | 1042 | 1044 | 1045 | 1046 | 1047 | 1048 | 1052 | 1053 | 1054 | 1055 | 1056 | 1059 | 1060 | 1061 | 1062 | 1063 | 1065 | 1066 | 1067 | 1068 | 1069 | 1071 | 1072 | 1073 | 1074 | 1075 | 1077 | 1078 | 1079 | 1080 | 1081 | 1083 | 1084 | 1085 | 1086 | 1087 | 1089 | 1090 | 1091 | 1092 | 1093 | 1095 | 1096 | 1097 | 1098 | 1099 | 1102 | 1103 | 1104 | 1105 | 1106 | 1108 | 1109 | 1110 | 1111 | 1112 | 1115 | 1116 | 1117 | 1118 | 1119 | 1123 | 1124 | 1125 | 1126 | 1127 | 1130 | 1131 | 1132 | 1133 | 1134 | 1137 | 1138 | 1139 | 1140 | 1141 | 1146 | 1147 | 1148 | 1149 | 1150 | 1152 | 1153 | 1154 | 1155 | 1156 | 1158 | 1159 | 1160 | 1161 | 1162 | 1164 | 1165 | 1166 | 1167 | 1168 | 1170 | 1171 | 1172 | 1173 | 1174 | 1176 | 1177 | 1178 | 1179 | 1180 | 1182 | 1183 | 1184 | 1185 | 1186 | 1188 | 1189 | 1190 | 1191 | 1192 | 1194 | 1195 | 1196 | 1197 | 1198 | 1201 | 1202 | 1203 | 1204 | 1205 | 1207 | 1208 | 1209 | 1210 | 1211 | 1213 | 1214 | 1215 | 1216 | 1217 | 1219 | 1220 | 1221 | 1222 | 1223 | 1229 | 1230 | 1231 | 1232 | 1233 | 1235 | 1236 | 1237 | 1238 | 1239 | 1241 | 1242 | 1243 | 1244 | 1245 | 1249 | 1250 | 1251 | 1252 | 1253 | 1255 | 1256 | 1257 | 1258 | 1259 | 1262 | 1263 | 1264 | 1265 | 1266 | 1269 | 1270 | 1271 | 1272 | 1273 | 1275 | 1276 | 1277 | 1284 | 1285 | 1286 | 1287 | 1288 | 1292 | 1293 | 1294 | 1295 | 1296 | 1298 | 1299 | 1300 | 1301 | 1302 | 1304 | 1305 | 1306 | 1307 | 1308 | 1310 | 1311 | 1312 | 1313 | 1314 | 1316 | 1317 | 1318 | 1319 | 1320 | 1322 | 1323 | 1324 | 1325 | 1326 | 1328 | 1329 | 1330 | 1331 | 1332 | 1334 | 1335 | 1336 | 1337 | 1338 | 1340 | 1341 | 1342 | 1343 | 1344 | 1346 | 1347 | 1348 | 1349 | 1350 | 1352 | 1353 | 1354 | 1356 | 1357 | 1358 | 1361 | 1362 | 1363 | 1364 | 1365 | 1367 | 1368 | 1369 | 1370 | 1371 | 1373 | 1374 | 1375 | 1376 | 1377 | 1380 | 1381 | 1382 | 1383 | 1384 | 1385 | 1386 | 1389 | 1391 | 1392 | 1393 | 1396 | 1397 | 1398 | 1402 | 1403 | 1404 | 1406 | 1407 | 1408 | 1409 | 1410 | 1412 | 1413 | 1414 | 1415 | 1416 | 1418 | 1419 | 1420 | 1421 | 1422 | 1425 | 1426 | 1427 | 1431 | 1432 | 1433 | 1436 | 1437 | 1438 | 1439 | 1440 | 1442 | 1443 | 1444 | 1445 | 1446 | 1449 | 1450 | 1451 | 1452 | 1453 | 1455 | 1456 | 1457 | 1462 | 1466 | 1467 | 1468 | 1474 | 1479 | 1480 | 1481 | 1483 | 1484 | 1485 | 1486 | 1487 | 1489 | 1490 | 1491 | 1492 | 1493 | 1495 | 1496 | 1497 | 1498 | 1499 | 1502 | 1503 | 1504 | 1505 | 1506 | 1508 | 1509 | 1510 | 1511 | 1512 | 1514 | 1515 | 1516 | 1517 | 1518 | 1520 | 1521 | 1522 | 1523 | 1524 | 1527 | 1528 | 1529 | 1530 | 1531 | 1533 | 1534 | 1535 | 1536 | 1537 | 1539 | 1540 | 1541 | 1542 | 1543 | 1545 | 1546 | 1547 | 1548 | 1549 | 1553 | 1554 | 1555 | 1556 | 1557 | 1559 | 1560 | 1561 | 1562 | 1563 | 1567 | 1568 | 1569 | 1570 | 1571 | 1574 | 1575 | 1576 | 1577 | 1578 | 1582 | 1583 | 1584 | 1585 | 1586 | 1589 | 1590 | 1591 | 1592 | 1593 | 1595 | 1596 | 1597 | 1598 | 1599 | 1601 | 1602 | 1603 | 1604 | 1605 | 1607 | 1608 | 1609 | 1610 | 1611 | 1613 | 1614 | 1615 | 1619 | 1621 | 1624 | 1626 | 1628 | 1629 | 1630 | -------------------------------------------------------------------------------- /assets/img/education.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/education.png -------------------------------------------------------------------------------- /assets/img/education1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/education1.png -------------------------------------------------------------------------------- /assets/img/education2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/education2.png -------------------------------------------------------------------------------- /assets/img/eucation1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/eucation1.png -------------------------------------------------------------------------------- /assets/img/github__icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/github__icon.png -------------------------------------------------------------------------------- /assets/img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/image.jpg -------------------------------------------------------------------------------- /assets/img/image_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/image_.jpg -------------------------------------------------------------------------------- /assets/img/linkedin__icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/linkedin__icon.png -------------------------------------------------------------------------------- /assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/logo.png -------------------------------------------------------------------------------- /assets/img/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/logo1.png -------------------------------------------------------------------------------- /assets/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/logo2.png -------------------------------------------------------------------------------- /assets/img/mail__icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/mail__icon.png -------------------------------------------------------------------------------- /assets/img/portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/portfolio.png -------------------------------------------------------------------------------- /assets/img/spotify.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/spotify.jpg -------------------------------------------------------------------------------- /assets/img/spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/spotify.png -------------------------------------------------------------------------------- /assets/img/work1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/work1.jpg -------------------------------------------------------------------------------- /assets/img/work2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/work2.jpg -------------------------------------------------------------------------------- /assets/img/work3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/assets/img/work3.jpg -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*===== MENU SHOW Y HIDDEN =====*/ 2 | const navMenu = document.getElementById('nav-menu'), 3 | toggleMenu = document.getElementById('nav-toggle'), 4 | closeMenu = document.getElementById('nav-close') 5 | const navItems = document.querySelectorAll('.nav__item') 6 | 7 | for(var i=0; i{ 19 | navMenu.classList.toggle('show') 20 | }) 21 | 22 | // HIDDEN 23 | closeMenu.addEventListener('click', ()=>{ 24 | navMenu.classList.remove('show') 25 | }) 26 | 27 | /*===== MOUSEMOVE HOME IMG =====*/ 28 | document.addEventListener('mousemove', move); 29 | function move(e){ 30 | this.querySelectorAll('.move').forEach(layer =>{ 31 | const speed = layer.getAttribute('data-speed') 32 | 33 | const x = (window.innerWidth - e.pageX*speed)/120 34 | const y = (window.innerHeight - e.pageY*speed)/120 35 | 36 | layer.style.transform = `translateX(${x}px) translateY(${y}px)` 37 | }) 38 | } 39 | 40 | /*===== GSAP ANIMATION =====*/ 41 | // NAV 42 | gsap.from('.nav__logo, .nav__toggle', {opacity: 0, duration: 1, delay:0.2, y: 10}) 43 | gsap.from('.nav__item', {opacity: 0, duration: 1, delay: 0.4, y: 30, stagger: 0.2,}) 44 | // HOME 45 | gsap.from('.home__title', {opacity: 0, duration: 1, delay:0.6, y: 30}) 46 | gsap.from('.home__description', {opacity: 0, duration: 1, delay:0.8, y: 30}) 47 | gsap.from('.home__img', {opacity: 0, duration: 1, delay:0.3, y: 30}) 48 | 49 | /*===== about page animation =====*/ 50 | gsap.from('.banner__title', {opacity: 0, duration: 1, delay:0.6, y:31}) 51 | gsap.from('.banner_desc', {opacity:0, duration: 1, delay: 0.3, y:10}) 52 | 53 | -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | 4 | /*===== VARIABLES CSS =====*/ 5 | :root{ 6 | --header-height: 3rem; 7 | 8 | /*===== Colors =====*/ 9 | --first-color: #FCA4A6; 10 | --first-color-dark: #C1576A; 11 | --first-color-darken: #A83E51; 12 | --white-color: #FCF8F8; 13 | 14 | /*===== Font and typography =====*/ 15 | --body-font: 'Poppins', sans-serif; 16 | --big-font-size: 2.5rem; 17 | --normal-font-size: .938rem; 18 | 19 | /*===== z index =====*/ 20 | --z-fixed: 100; 21 | } 22 | 23 | @media screen and (min-width: 768px){ 24 | :root{ 25 | --big-font-size: 5rem; 26 | --normal-font-size: 1rem; 27 | } 28 | } 29 | 30 | /*===== BASE =====*/ 31 | *,::before,::after{ 32 | box-sizing: border-box; 33 | } 34 | 35 | body{ 36 | margin: var(--header-height) 0 0 0; 37 | padding: 0; 38 | font-family: var(--body-font); 39 | font-size: var(--normal-font-size); 40 | font-weight: 500; 41 | } 42 | 43 | h1,p,ul{ 44 | margin: 0; 45 | } 46 | 47 | ul{ 48 | padding: 0; 49 | list-style: none; 50 | } 51 | 52 | a{ 53 | text-decoration: none; 54 | } 55 | 56 | img{ 57 | max-width: 100%; 58 | height: auto; 59 | } 60 | 61 | /*===== LAYOUT =====*/ 62 | .bd-grid{ 63 | max-width: 1024px; 64 | display: grid; 65 | grid-template-columns: 100%; 66 | column-gap: 2rem; 67 | width: calc(100% - 2rem); 68 | margin-left: 1rem; 69 | margin-right: 1rem; 70 | } 71 | .l-header{ 72 | width: 100%; 73 | position: fixed; 74 | top: 0; 75 | left: 0; 76 | z-index: var(--z-fixed); 77 | background-color: var(--first-color); 78 | } 79 | 80 | /*===== NAV =====*/ 81 | .nav{ 82 | height: var(--header-height); 83 | display: flex; 84 | justify-content: space-between; 85 | align-items: center; 86 | 87 | &__menu{ 88 | @media screen and (max-width: 768px){ 89 | position: fixed; 90 | top: 0; 91 | right: -100%; 92 | width: 70%; 93 | height: 100%; 94 | padding: 3.5rem 1.5rem 0; 95 | background: rgba(255, 255, 255, 0.3); 96 | backdrop-filter: blur(10px); 97 | transition: .5s; 98 | } 99 | } 100 | &__close{ 101 | position: absolute; 102 | top: .75rem; 103 | right: 1rem; 104 | font-size: 1.5rem; 105 | cursor: pointer; 106 | } 107 | &__item{ 108 | margin-bottom: 2rem; 109 | } 110 | 111 | &__close, &__link, &__logo, &__toggle{ 112 | color: var(--white-color); 113 | } 114 | &__link{ 115 | &:hover{ 116 | color: var(--first-color-dark); 117 | } 118 | } 119 | &__toggle{ 120 | font-size: 1.5rem; 121 | cursor: pointer; 122 | } 123 | } 124 | 125 | /*=== Show menu ===*/ 126 | .show{ 127 | right: 0; 128 | } 129 | 130 | /*===== HOME =====*/ 131 | .home{ 132 | background-color: var(--first-color); 133 | overflow: hidden; 134 | 135 | &__container{ 136 | height: calc(100vh - var(--header-height)); 137 | grid-template-rows: repeat(2, max-content); 138 | row-gap: 1.5rem; 139 | } 140 | &__img{ 141 | position: relative; 142 | padding-top: 1.5rem; 143 | justify-self: center; 144 | width: 302px; 145 | height: 233px; 146 | 147 | & img{ 148 | position: absolute; 149 | top: 0; 150 | left: 0; 151 | } 152 | } 153 | &__data{ 154 | color: var(--white-color); 155 | } 156 | &__title{ 157 | font-size: var(--big-font-size); 158 | line-height: 1.3; 159 | margin-bottom: 1rem; 160 | } 161 | &__description{ 162 | margin-bottom: 2.5rem; 163 | } 164 | 165 | &__button{ 166 | display: inline-block; 167 | background-color: var(--first-color-dark); 168 | color: var(--white-color); 169 | padding: 1.125rem 2rem; 170 | border-radius: .5rem; 171 | 172 | &:hover{ 173 | background-color: var(--first-color-darken); 174 | } 175 | } 176 | } 177 | 178 | /* ===== MEDIA QUERIES=====*/ 179 | @media screen and(min-width: 768px){ 180 | body{ 181 | margin: 0; 182 | } 183 | 184 | .nav{ 185 | height: calc(var(--header-height) + 1.5rem); 186 | 187 | &__toggle,&__close{ 188 | display: none; 189 | } 190 | &__list{ 191 | display: flex; 192 | } 193 | &__item{ 194 | margin-left: 3rem; 195 | margin-bottom: 0; 196 | } 197 | } 198 | 199 | .home{ 200 | &__container{ 201 | height: 100vh; 202 | grid-template-columns: repeat(2, max-content); 203 | grid-template-rows: 1fr; 204 | row-gap: 0; 205 | align-items: center; 206 | justify-content: center; 207 | } 208 | &__img{ 209 | order: 1; 210 | width: 375px; 211 | height: 289px; 212 | 213 | & img{ 214 | width: 375px; 215 | } 216 | } 217 | } 218 | } 219 | 220 | @media screen and(min-width: 1024px){ 221 | .bd-grid{ 222 | margin-left: auto; 223 | margin-right: auto; 224 | } 225 | 226 | .home{ 227 | &__container{ 228 | justify-content: initial; 229 | column-gap: 4.5rem; 230 | } 231 | &__img{ 232 | width: 604px; 233 | height: 466px; 234 | & img{ 235 | width: 604px; 236 | } 237 | } 238 | } 239 | } 240 | 241 | 242 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/contact.html -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Baraka Danny || Home 13 | 14 | 15 | 16 |
17 | 40 |
41 | 42 |
43 | 44 |
45 |
46 | 47 |
48 |

Hi there, I'm Danny

49 |

What your favorite website or product looks like?
do you have something 50 | on the internet?
do you want to improve a specifique product?
51 | I am a web developer and UI UX designer, Simple is class
I value simplicity in my works
52 | View my resume 53 |

54 | 55 |
56 |
57 | 58 | 59 |
60 |
61 |
62 | 63 | 64 |
65 |
66 |

Portfolio

67 | 68 |

I wanted to design my portfolio in a way to express some really importants value I have in my works; 69 | • simplicity, • attractiveness, • functionality and • satisfaction.   70 | As The Apple way mission says: Designing beautiful 71 | products that can be used by people across any age without 72 | being intimidated by the rigid complexities

73 |
74 |
75 |

Education template

76 | 77 |

for this open project, I designed the website with a friend. 78 | the idea behind this project was to simplify a complex educational website.
79 | “ Making the simple complicated is commonplace; making the complicated simple, 80 | awesomely simple, that's creativity. ” Charles Mingus.
81 | Click here to access the source code to this project

82 |
83 |
84 |

Spotify clone Design

85 | 86 |

This is a clone of Spotify made with Figma. 87 | Click here to access the project 88 |

89 |
90 |
91 | 92 |
93 | 94 |
95 |
96 |

Let’s Connect

97 |

98 | Interested in working together or looking to chat over coffee? 99 | Shoot me a message and let’s talk! 100 |

101 | 111 |
112 |
113 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barakadanny/Portfolio-html-css-js-and-animations/f52c7e44004fefb0e48df57830478b8f78f58105/resume.pdf --------------------------------------------------------------------------------