1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>How I Raised $2,000 for Refugees by Putting a Billboard on my Grad Cap</title> 7 <link rel="stylesheet" href="/stylesheets/shared-stylesheet.css?1784751417929108605"> 8 <link rel="stylesheet" href="/stylesheets/article-stylesheet.css?1784751417929108605"> 9 <link rel="stylesheet" href="/stylesheets/graduation-cap-stylesheet.css?1784751417929108605"> 10 <meta name="viewport" content="width=device-width, initial-scale=1"> 11 12 13 <!-- Analytics --> 14<!-- Microsoft Clarity -->
15<script type="text/javascript"> 16 (function (c, l, a, r, i, t, y) { 17 c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) }; 18 t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i; 19 y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y); 20 })(window, document, "clarity", "script", "oz4zpzcp54"); 21</script>
21 22 23<!-- Google Analytics -->
vendor: 64 bytes, lines 23-24
23 24<script async src="https://www.googletagmanager.com/gtag/js?id=
24UA-45165086-3
vendor: 12 bytes, line 24
24"></script>
25<script> 26
vendor: 133 bytes, lines 26-29
26window.dataLayer = window.dataLayer || []; 27 function gtag() { dataLayer.push(arguments); } 28 gtag('js', new Date()); 29 gtag('config', '
29UA-45165086-3
vendor: 4 bytes, line 29
29');
30</script>
30 31</head> 32 33<body> 34 <style> 35 .scrolling-text-background { 36 position: fixed; 37 /* z-index: -1; */ 38 width: max-content; 39 height: 100vh; 40 overflow: hidden; 41 user-select: none; 42 } 43 44 .scrolling-text-container { 45 margin-left: -12.5%; 46 overflow: hidden; 47 transform-origin: 25% 230%; 48 transform: rotate(-25deg) translateY(-25%); 49 } 50 51 .scrolling-text-line { 52 display: flex; 53 flex-direction: row; 54 align-items: center; 55 gap: 100px; 56 } 57 58 .scrolling-text-section { 59 display: flex; 60 flex-direction: row; 61 align-items: center; 62 min-width: max-content; 63 gap: 100px; 64 will-change: transform; 65 } 66 67 .scrolling-text-section>span { 68 font-size: 130px; 69 white-space: nowrap; 70 overflow: hidden; 71 box-sizing: border-box; 72 font-family: var(--scroll-text-font), 'Inter', sans-serif; 73 font-weight: 700; 74 line-height: 1.2; 75 transform: translateX(0); 76 line-height: 1.2; 77 } 78 79 .scrolling-text-line:nth-child(even) .scrolling-text-section { 80 animation: scroll 240s linear infinite; 81 } 82 83 .scrolling-text-line:nth-child(odd) .scrolling-text-section { 84 animation: scroll-reversed 240s linear infinite; 85 } 86 87 .scrolling-text-visible { 88 opacity: 1; 89 transition: opacity 0.4s; 90 } 91 92 .scrolling-text-hidden { 93 opacity: 0.2; 94 transition: opacity 1s; 95 } 96 97 /* Remove all animations and motion effects for accessibility */ 98 @media (prefers-reduced-motion: reduce) { 99 .scrolling-text-section { 100 animation: none !important; 101 } 102 103 .scrolling-text-visible { 104 opacity: 0.2 !important 105 } 106 } 107</style> 108 109<div class="scrolling-text-background scrolling-text-hidden"> 110 <div class="scrolling-text-container"> 111 112 <div class="scrolling-text-line"> 113 114 <div class="scrolling-text-section"> 115 116 <span class="scrolling-text">Idrees</span> 117 118 <span class="scrolling-text">Idrees</span> 119 120 <span class="scrolling-text">Idrees</span> 121 122 <span class="scrolling-text">Idrees</span> 123 124 <span class="scrolling-text">Idrees</span> 125 126 <span class="scrolling-text">Idrees</span> 127 128 <span class="scrolling-text">Idrees</span> 129 130 <span class="scrolling-text">Idrees</span> 131 132 <span class="scrolling-text">Idrees</span> 133 134 <span class="scrolling-text">Idrees</span> 135 136 </div> 137 138 <div class="scrolling-text-section"> 139 140 <span class="scrolling-text">Idrees</span> 141 142 <span class="scrolling-text">Idrees</span> 143 144 <span class="scrolling-text">Idrees</span> 145 146 <span class="scrolling-text">Idrees</span> 147 148 <span class="scrolling-text">Idrees</span> 149 150 <span class="scrolling-text">Idrees</span> 151 152 <span class="scrolling-text">Idrees</span> 153 154 <span class="scrolling-text">Idrees</span> 155 156 <span class="scrolling-text">Idrees</span> 157 158 <span class="scrolling-text">Idrees</span> 159 160 </div> 161 162 </div> 163 <div class="scrolling-text-line"> 164 165 <div class="scrolling-text-section"> 166 167 <span class="scrolling-text">Hassan</span> 168 169 <span class="scrolling-text">Hassan</span> 170 171 <span class="scrolling-text">Hassan</span> 172 173 <span class="scrolling-text">Hassan</span> 174 175 <span class="scrolling-text">Hassan</span> 176 177 <span class="scrolling-text">Hassan</span> 178 179 <span class="scrolling-text">Hassan</span> 180 181 <span class="scrolling-text">Hassan</span> 182 183 <span class="scrolling-text">Hassan</span> 184 185 <span class="scrolling-text">Hassan</span> 186 187 </div> 188 189 <div class="scrolling-text-section"> 190 191 <span class="scrolling-text">Hassan</span> 192 193 <span class="scrolling-text">Hassan</span> 194 195 <span class="scrolling-text">Hassan</span> 196 197 <span class="scrolling-text">Hassan</span> 198 199 <span class="scrolling-text">Hassan</span> 200 201 <span class="scrolling-text">Hassan</span> 202 203 <span class="scrolling-text">Hassan</span> 204 205 <span class="scrolling-text">Hassan</span> 206 207 <span class="scrolling-text">Hassan</span> 208 209 <span class="scrolling-text">Hassan</span> 210 211 </div> 212 213 </div> 214 <div class="scrolling-text-line"> 215 216 <div class="scrolling-text-section"> 217
218 <span class="scrolling-text">Idrees</span> 219 220 <span class="scrolling-text">Idrees</span> 221 222 <span class="scrolling-text">Idrees</span> 223 224 <span class="scrolling-text">Idrees</span> 225 226 <span class="scrolling-text">Idrees</span> 227 228 <span class="scrolling-text">Idrees</span> 229 230 <span class="scrolling-text">Idrees</span> 231 232 <span class="scrolling-text">Idrees</span> 233 234 <span class="scrolling-text">Idrees</span> 235 236 <span class="scrolling-text">Idrees</span> 237 238 </div> 239 240 <div class="scrolling-text-section"> 241 242 <span class="scrolling-text">Idrees</span> 243 244 <span class="scrolling-text">Idrees</span> 245 246 <span class="scrolling-text">Idrees</span> 247 248 <span class="scrolling-text">Idrees</span> 249 250 <span class="scrolling-text">Idrees</span> 251 252 <span class="scrolling-text">Idrees</span> 253 254 <span class="scrolling-text">Idrees</span> 255 256 <span class="scrolling-text">Idrees</span> 257 258 <span class="scrolling-text">Idrees</span> 259 260 <span class="scrolling-text">Idrees</span> 261 262 </div> 263 264 </div> 265 <div class="scrolling-text-line"> 266 267 <div class="scrolling-text-section"> 268 269 <span class="scrolling-text">Hassan</span> 270 271 <span class="scrolling-text">Hassan</span> 272 273 <span class="scrolling-text">Hassan</span> 274 275 <span class="scrolling-text">Hassan</span> 276 277 <span class="scrolling-text">Hassan</span> 278 279 <span class="scrolling-text">Hassan</span> 280 281 <span class="scrolling-text">Hassan</span> 282 283 <span class="scrolling-text">Hassan</span> 284 285 <span class="scrolling-text">Hassan</span> 286 287 <span class="scrolling-text">Hassan</span> 288 289 </div> 290 291 <div class="scrolling-text-section"> 292 293 <span class="scrolling-text">Hassan</span> 294 295 <span class="scrolling-text">Hassan</span> 296 297 <span class="scrolling-text">Hassan</span> 298 299 <span class="scrolling-text">Hassan</span> 300 301 <span class="scrolling-text">Hassan</span> 302 303 <span class="scrolling-text">Hassan</span> 304 305 <span class="scrolling-text">Hassan</span> 306 307 <span class="scrolling-text">Hassan</span> 308 309 <span class="scrolling-text">Hassan</span> 310 311 <span class="scrolling-text">Hassan</span> 312 313 </div> 314 315 </div> 316 <div class="scrolling-text-line"> 317 318 <div class="scrolling-text-section"> 319 320 <span class="scrolling-text">Idrees</span> 321 322 <span class="scrolling-text">Idrees</span> 323 324 <span class="scrolling-text">Idrees</span> 325 326 <span class="scrolling-text">Idrees</span> 327 328 <span class="scrolling-text">Idrees</span> 329 330 <span class="scrolling-text">Idrees</span> 331 332 <span class="scrolling-text">Idrees</span> 333 334 <span class="scrolling-text">Idrees</span> 335 336 <span class="scrolling-text">Idrees</span> 337 338 <span class="scrolling-text">Idrees</span> 339 340 </div> 341 342 <div class="scrolling-text-section"> 343 344 <span class="scrolling-text">Idrees</span> 345 346 <span class="scrolling-text">Idrees</span> 347 348 <span class="scrolling-text">Idrees</span> 349 350 <span class="scrolling-text">Idrees</span> 351 352 <span class="scrolling-text">Idrees</span> 353 354 <span class="scrolling-text">Idrees</span> 355 356 <span class="scrolling-text">Idrees</span> 357 358 <span class="scrolling-text">Idrees</span> 359 360 <span class="scrolling-text">Idrees</span> 361 362 <span class="scrolling-text">Idrees</span> 363 364 </div> 365 366 </div> 367 <div class="scrolling-text-line"> 368 369 <div class="scrolling-text-section"> 370 371 <span class="scrolling-text">Hassan</span> 372 373 <span class="scrolling-text">Hassan</span> 374 375 <span class="scrolling-text">Hassan</span> 376 377 <span class="scrolling-text">Hassan</span> 378 379 <span class="scrolling-text">Hassan</span> 380 381 <span class="scrolling-text">Hassan</span> 382 383 <span class="scrolling-text">Hassan</span> 384 385 <span class="scrolling-text">Hassan</span> 386 387 <span class="scrolling-text">Hassan</span> 388
389 <span class="scrolling-text">Hassan</span> 390 391 </div> 392 393 <div class="scrolling-text-section"> 394 395 <span class="scrolling-text">Hassan</span> 396 397 <span class="scrolling-text">Hassan</span> 398 399 <span class="scrolling-text">Hassan</span> 400 401 <span class="scrolling-text">Hassan</span> 402 403 <span class="scrolling-text">Hassan</span> 404 405 <span class="scrolling-text">Hassan</span> 406 407 <span class="scrolling-text">Hassan</span> 408 409 <span class="scrolling-text">Hassan</span> 410 411 <span class="scrolling-text">Hassan</span> 412 413 <span class="scrolling-text">Hassan</span> 414 415 </div> 416 417 </div> 418 <div class="scrolling-text-line"> 419 420 <div class="scrolling-text-section"> 421 422 <span class="scrolling-text">Idrees</span> 423 424 <span class="scrolling-text">Idrees</span> 425 426 <span class="scrolling-text">Idrees</span> 427 428 <span class="scrolling-text">Idrees</span> 429 430 <span class="scrolling-text">Idrees</span> 431 432 <span class="scrolling-text">Idrees</span> 433 434 <span class="scrolling-text">Idrees</span> 435 436 <span class="scrolling-text">Idrees</span> 437 438 <span class="scrolling-text">Idrees</span> 439 440 <span class="scrolling-text">Idrees</span> 441 442 </div> 443 444 <div class="scrolling-text-section"> 445 446 <span class="scrolling-text">Idrees</span> 447 448 <span class="scrolling-text">Idrees</span> 449 450 <span class="scrolling-text">Idrees</span> 451 452 <span class="scrolling-text">Idrees</span> 453 454 <span class="scrolling-text">Idrees</span> 455 456 <span class="scrolling-text">Idrees</span> 457 458 <span class="scrolling-text">Idrees</span> 459 460 <span class="scrolling-text">Idrees</span> 461 462 <span class="scrolling-text">Idrees</span> 463 464 <span class="scrolling-text">Idrees</span> 465 466 </div> 467 468 </div> 469 <div class="scrolling-text-line"> 470 471 <div class="scrolling-text-section"> 472 473 <span class="scrolling-text">Hassan</span> 474 475 <span class="scrolling-text">Hassan</span> 476 477 <span class="scrolling-text">Hassan</span> 478 479 <span class="scrolling-text">Hassan</span> 480 481 <span class="scrolling-text">Hassan</span> 482 483 <span class="scrolling-text">Hassan</span> 484 485 <span class="scrolling-text">Hassan</span> 486 487 <span class="scrolling-text">Hassan</span> 488 489 <span class="scrolling-text">Hassan</span> 490 491 <span class="scrolling-text">Hassan</span> 492 493 </div> 494 495 <div class="scrolling-text-section"> 496 497 <span class="scrolling-text">Hassan</span> 498 499 <span class="scrolling-text">Hassan</span> 500 501 <span class="scrolling-text">Hassan</span> 502 503 <span class="scrolling-text">Hassan</span> 504 505 <span class="scrolling-text">Hassan</span> 506 507 <span class="scrolling-text">Hassan</span> 508 509 <span class="scrolling-text">Hassan</span> 510 511 <span class="scrolling-text">Hassan</span> 512 513 <span class="scrolling-text">Hassan</span> 514 515 <span class="scrolling-text">Hassan</span> 516 517 </div> 518 519 </div> 520 <div class="scrolling-text-line"> 521 522 <div class="scrolling-text-section"> 523 524 <span class="scrolling-text">Idrees</span> 525 526 <span class="scrolling-text">Idrees</span> 527 528 <span class="scrolling-text">Idrees</span> 529 530 <span class="scrolling-text">Idrees</span> 531 532 <span class="scrolling-text">Idrees</span> 533 534 <span class="scrolling-text">Idrees</span> 535 536 <span class="scrolling-text">Idrees</span> 537 538 <span class="scrolling-text">Idrees</span> 539 540 <span class="scrolling-text">Idrees</span> 541 542 <span class="scrolling-text">Idrees</span> 543 544 </div> 545 546 <div class="scrolling-text-section"> 547 548 <span class="scrolling-text">Idrees</span> 549 550 <span class="scrolling-text">Idrees</span> 551 552 <span class="scrolling-text">Idrees</span> 553 554 <span class="scrolling-text">Idrees</span> 555 556 <span class="scrolling-text">Idrees</span> 557 558 <span class="scrolling-text">Idrees</span> 559 560 <span class="scrolling-text">Idrees</span> 561
562 <span class="scrolling-text">Idrees</span> 563 564 <span class="scrolling-text">Idrees</span> 565 566 <span class="scrolling-text">Idrees</span> 567 568 </div> 569 570 </div> 571 <div class="scrolling-text-line"> 572 573 <div class="scrolling-text-section"> 574 575 <span class="scrolling-text">Hassan</span> 576 577 <span class="scrolling-text">Hassan</span> 578 579 <span class="scrolling-text">Hassan</span> 580 581 <span class="scrolling-text">Hassan</span> 582 583 <span class="scrolling-text">Hassan</span> 584 585 <span class="scrolling-text">Hassan</span> 586 587 <span class="scrolling-text">Hassan</span> 588 589 <span class="scrolling-text">Hassan</span> 590 591 <span class="scrolling-text">Hassan</span> 592 593 <span class="scrolling-text">Hassan</span> 594 595 </div> 596 597 <div class="scrolling-text-section"> 598 599 <span class="scrolling-text">Hassan</span> 600 601 <span class="scrolling-text">Hassan</span> 602 603 <span class="scrolling-text">Hassan</span> 604 605 <span class="scrolling-text">Hassan</span> 606 607 <span class="scrolling-text">Hassan</span> 608 609 <span class="scrolling-text">Hassan</span> 610 611 <span class="scrolling-text">Hassan</span> 612 613 <span class="scrolling-text">Hassan</span> 614 615 <span class="scrolling-text">Hassan</span> 616 617 <span class="scrolling-text">Hassan</span> 618 619 </div> 620 621 </div> 622 <div class="scrolling-text-line"> 623 624 <div class="scrolling-text-section"> 625 626 <span class="scrolling-text">Idrees</span> 627 628 <span class="scrolling-text">Idrees</span> 629 630 <span class="scrolling-text">Idrees</span> 631 632 <span class="scrolling-text">Idrees</span> 633 634 <span class="scrolling-text">Idrees</span> 635 636 <span class="scrolling-text">Idrees</span> 637 638 <span class="scrolling-text">Idrees</span> 639 640 <span class="scrolling-text">Idrees</span> 641 642 <span class="scrolling-text">Idrees</span> 643 644 <span class="scrolling-text">Idrees</span> 645 646 </div> 647 648 <div class="scrolling-text-section"> 649 650 <span class="scrolling-text">Idrees</span> 651 652 <span class="scrolling-text">Idrees</span> 653 654 <span class="scrolling-text">Idrees</span> 655 656 <span class="scrolling-text">Idrees</span> 657 658 <span class="scrolling-text">Idrees</span> 659 660 <span class="scrolling-text">Idrees</span> 661 662 <span class="scrolling-text">Idrees</span> 663 664 <span class="scrolling-text">Idrees</span> 665 666 <span class="scrolling-text">Idrees</span> 667 668 <span class="scrolling-text">Idrees</span> 669 670 </div> 671 672 </div> 673 <div class="scrolling-text-line"> 674 675 <div class="scrolling-text-section"> 676 677 <span class="scrolling-text">Hassan</span> 678 679 <span class="scrolling-text">Hassan</span> 680 681 <span class="scrolling-text">Hassan</span> 682 683 <span class="scrolling-text">Hassan</span> 684 685 <span class="scrolling-text">Hassan</span> 686 687 <span class="scrolling-text">Hassan</span> 688 689 <span class="scrolling-text">Hassan</span> 690 691 <span class="scrolling-text">Hassan</span> 692 693 <span class="scrolling-text">Hassan</span> 694 695 <span class="scrolling-text">Hassan</span> 696 697 </div> 698 699 <div class="scrolling-text-section"> 700 701 <span class="scrolling-text">Hassan</span> 702 703 <span class="scrolling-text">Hassan</span> 704 705 <span class="scrolling-text">Hassan</span> 706 707 <span class="scrolling-text">Hassan</span> 708 709 <span class="scrolling-text">Hassan</span> 710 711 <span class="scrolling-text">Hassan</span> 712 713 <span class="scrolling-text">Hassan</span> 714 715 <span class="scrolling-text">Hassan</span> 716 717 <span class="scrolling-text">Hassan</span> 718 719 <span class="scrolling-text">Hassan</span> 720 721 </div> 722 723 </div> 724 <div class="scrolling-text-line"> 725 726 <div class="scrolling-text-section"> 727 728 <span class="scrolling-text">Idrees</span> 729 730 <span class="scrolling-text">Idrees</span> 731 732 <span class="scrolling-text">Idrees</span> 733 734 <span class="scrolling-text">Idrees</span> 735
736 <span class="scrolling-text">Idrees</span> 737 738 <span class="scrolling-text">Idrees</span> 739 740 <span class="scrolling-text">Idrees</span> 741 742 <span class="scrolling-text">Idrees</span> 743 744 <span class="scrolling-text">Idrees</span> 745 746 <span class="scrolling-text">Idrees</span> 747 748 </div> 749 750 <div class="scrolling-text-section"> 751 752 <span class="scrolling-text">Idrees</span> 753 754 <span class="scrolling-text">Idrees</span> 755 756 <span class="scrolling-text">Idrees</span> 757 758 <span class="scrolling-text">Idrees</span> 759 760 <span class="scrolling-text">Idrees</span> 761 762 <span class="scrolling-text">Idrees</span> 763 764 <span class="scrolling-text">Idrees</span> 765 766 <span class="scrolling-text">Idrees</span> 767 768 <span class="scrolling-text">Idrees</span> 769 770 <span class="scrolling-text">Idrees</span> 771 772 </div> 773 774 </div> 775 <div class="scrolling-text-line"> 776 777 <div class="scrolling-text-section"> 778 779 <span class="scrolling-text">Hassan</span> 780 781 <span class="scrolling-text">Hassan</span> 782 783 <span class="scrolling-text">Hassan</span> 784 785 <span class="scrolling-text">Hassan</span> 786 787 <span class="scrolling-text">Hassan</span> 788 789 <span class="scrolling-text">Hassan</span> 790 791 <span class="scrolling-text">Hassan</span> 792 793 <span class="scrolling-text">Hassan</span> 794 795 <span class="scrolling-text">Hassan</span> 796 797 <span class="scrolling-text">Hassan</span> 798 799 </div> 800 801 <div class="scrolling-text-section"> 802 803 <span class="scrolling-text">Hassan</span> 804 805 <span class="scrolling-text">Hassan</span> 806 807 <span class="scrolling-text">Hassan</span> 808 809 <span class="scrolling-text">Hassan</span> 810 811 <span class="scrolling-text">Hassan</span> 812 813 <span class="scrolling-text">Hassan</span> 814 815 <span class="scrolling-text">Hassan</span> 816 817 <span class="scrolling-text">Hassan</span> 818 819 <span class="scrolling-text">Hassan</span> 820 821 <span class="scrolling-text">Hassan</span> 822 823 </div> 824 825 </div> 826 <div class="scrolling-text-line"> 827 828 <div class="scrolling-text-section"> 829 830 <span class="scrolling-text">Idrees</span> 831 832 <span class="scrolling-text">Idrees</span> 833 834 <span class="scrolling-text">Idrees</span> 835 836 <span class="scrolling-text">Idrees</span> 837 838 <span class="scrolling-text">Idrees</span> 839 840 <span class="scrolling-text">Idrees</span> 841 842 <span class="scrolling-text">Idrees</span> 843 844 <span class="scrolling-text">Idrees</span> 845 846 <span class="scrolling-text">Idrees</span> 847 848 <span class="scrolling-text">Idrees</span> 849 850 </div> 851 852 <div class="scrolling-text-section"> 853 854 <span class="scrolling-text">Idrees</span> 855 856 <span class="scrolling-text">Idrees</span> 857 858 <span class="scrolling-text">Idrees</span> 859 860 <span class="scrolling-text">Idrees</span> 861 862 <span class="scrolling-text">Idrees</span> 863 864 <span class="scrolling-text">Idrees</span> 865 866 <span class="scrolling-text">Idrees</span> 867 868 <span class="scrolling-text">Idrees</span> 869 870 <span class="scrolling-text">Idrees</span> 871 872 <span class="scrolling-text">Idrees</span> 873 874 </div> 875 876 </div> 877 <div class="scrolling-text-line"> 878 879 <div class="scrolling-text-section"> 880 881 <span class="scrolling-text">Hassan</span> 882 883 <span class="scrolling-text">Hassan</span> 884 885 <span class="scrolling-text">Hassan</span> 886 887 <span class="scrolling-text">Hassan</span> 888 889 <span class="scrolling-text">Hassan</span> 890 891 <span class="scrolling-text">Hassan</span> 892 893 <span class="scrolling-text">Hassan</span> 894 895 <span class="scrolling-text">Hassan</span> 896 897 <span class="scrolling-text">Hassan</span> 898 899 <span class="scrolling-text">Hassan</span> 900 901 </div> 902 903 <div class="scrolling-text-section"> 904 905 <span class="scrolling-text">Hassan</span> 906 907 <span class="scrolling-text">Hassan</span> 908
909 <span class="scrolling-text">Hassan</span> 910 911 <span class="scrolling-text">Hassan</span> 912 913 <span class="scrolling-text">Hassan</span> 914 915 <span class="scrolling-text">Hassan</span> 916 917 <span class="scrolling-text">Hassan</span> 918 919 <span class="scrolling-text">Hassan</span> 920 921 <span class="scrolling-text">Hassan</span> 922 923 <span class="scrolling-text">Hassan</span> 924 925 </div> 926 927 </div> 928 <div class="scrolling-text-line"> 929 930 <div class="scrolling-text-section"> 931 932 <span class="scrolling-text">Idrees</span> 933 934 <span class="scrolling-text">Idrees</span> 935 936 <span class="scrolling-text">Idrees</span> 937 938 <span class="scrolling-text">Idrees</span> 939 940 <span class="scrolling-text">Idrees</span> 941 942 <span class="scrolling-text">Idrees</span> 943 944 <span class="scrolling-text">Idrees</span> 945 946 <span class="scrolling-text">Idrees</span> 947 948 <span class="scrolling-text">Idrees</span> 949 950 <span class="scrolling-text">Idrees</span> 951 952 </div> 953 954 <div class="scrolling-text-section"> 955 956 <span class="scrolling-text">Idrees</span> 957 958 <span class="scrolling-text">Idrees</span> 959 960 <span class="scrolling-text">Idrees</span> 961 962 <span class="scrolling-text">Idrees</span> 963 964 <span class="scrolling-text">Idrees</span> 965 966 <span class="scrolling-text">Idrees</span> 967 968 <span class="scrolling-text">Idrees</span> 969 970 <span class="scrolling-text">Idrees</span> 971 972 <span class="scrolling-text">Idrees</span> 973 974 <span class="scrolling-text">Idrees</span> 975 976 </div> 977 978 </div> 979 <div class="scrolling-text-line"> 980 981 <div class="scrolling-text-section"> 982 983 <span class="scrolling-text">Hassan</span> 984 985 <span class="scrolling-text">Hassan</span> 986 987 <span class="scrolling-text">Hassan</span> 988 989 <span class="scrolling-text">Hassan</span> 990 991 <span class="scrolling-text">Hassan</span> 992 993 <span class="scrolling-text">Hassan</span> 994 995 <span class="scrolling-text">Hassan</span> 996 997 <span class="scrolling-text">Hassan</span> 998 999 <span class="scrolling-text">Hassan</span> 1000 1001 <span class="scrolling-text">Hassan</span> 1002 1003 </div> 1004 1005 <div class="scrolling-text-section"> 1006 1007 <span class="scrolling-text">Hassan</span> 1008 1009 <span class="scrolling-text">Hassan</span> 1010 1011 <span class="scrolling-text">Hassan</span> 1012 1013 <span class="scrolling-text">Hassan</span> 1014 1015 <span class="scrolling-text">Hassan</span> 1016 1017 <span class="scrolling-text">Hassan</span> 1018 1019 <span class="scrolling-text">Hassan</span> 1020 1021 <span class="scrolling-text">Hassan</span> 1022 1023 <span class="scrolling-text">Hassan</span> 1024 1025 <span class="scrolling-text">Hassan</span> 1026 1027 </div> 1028 1029 </div> 1030 <div class="scrolling-text-line"> 1031 1032 <div class="scrolling-text-section"> 1033 1034 <span class="scrolling-text">Idrees</span> 1035 1036 <span class="scrolling-text">Idrees</span> 1037 1038 <span class="scrolling-text">Idrees</span> 1039 1040 <span class="scrolling-text">Idrees</span> 1041 1042 <span class="scrolling-text">Idrees</span> 1043 1044 <span class="scrolling-text">Idrees</span> 1045 1046 <span class="scrolling-text">Idrees</span> 1047 1048 <span class="scrolling-text">Idrees</span> 1049 1050 <span class="scrolling-text">Idrees</span> 1051 1052 <span class="scrolling-text">Idrees</span> 1053 1054 </div> 1055 1056 <div class="scrolling-text-section"> 1057 1058 <span class="scrolling-text">Idrees</span> 1059 1060 <span class="scrolling-text">Idrees</span> 1061 1062 <span class="scrolling-text">Idrees</span> 1063 1064 <span class="scrolling-text">Idrees</span> 1065 1066 <span class="scrolling-text">Idrees</span> 1067 1068 <span class="scrolling-text">Idrees</span> 1069 1070 <span class="scrolling-text">Idrees</span> 1071 1072 <span class="scrolling-text">Idrees</span> 1073 1074 <span class="scrolling-text">Idrees</span> 1075 1076 <span class="scrolling-text">Idrees</span> 1077 1078 </div> 1079 1080 </div> 1081 <div class="scrolling-text-line"> 1082 1083 <div class="scrolling-text-section"> 1084
1085 <span class="scrolling-text">Hassan</span> 1086 1087 <span class="scrolling-text">Hassan</span> 1088 1089 <span class="scrolling-text">Hassan</span> 1090 1091 <span class="scrolling-text">Hassan</span> 1092 1093 <span class="scrolling-text">Hassan</span> 1094 1095 <span class="scrolling-text">Hassan</span> 1096 1097 <span class="scrolling-text">Hassan</span> 1098 1099 <span class="scrolling-text">Hassan</span> 1100 1101 <span class="scrolling-text">Hassan</span> 1102 1103 <span class="scrolling-text">Hassan</span> 1104 1105 </div> 1106 1107 <div class="scrolling-text-section"> 1108 1109 <span class="scrolling-text">Hassan</span> 1110 1111 <span class="scrolling-text">Hassan</span> 1112 1113 <span class="scrolling-text">Hassan</span> 1114 1115 <span class="scrolling-text">Hassan</span> 1116 1117 <span class="scrolling-text">Hassan</span> 1118 1119 <span class="scrolling-text">Hassan</span> 1120 1121 <span class="scrolling-text">Hassan</span> 1122 1123 <span class="scrolling-text">Hassan</span> 1124 1125 <span class="scrolling-text">Hassan</span> 1126 1127 <span class="scrolling-text">Hassan</span> 1128 1129 </div> 1130 1131 </div></div> 1132</div> 1133
1134<script> 1135 function shuffleInPlace(arr) { 1136 for (let i = arr.length - 1; i > 0; i--) { 1137 const j = Math.floor(Math.random() * (i + 1)); 1138 [arr[i], arr[j]] = [arr[j], arr[i]]; 1139 } 1140 return arr; 1141 } 1142 1143 document.addEventListener("DOMContentLoaded", () => { 1144 document.querySelectorAll(".scrolling-text-line").forEach(line => { 1145 const sections = line.querySelectorAll(".scrolling-text-section"); 1146 if (sections.length < 2) { 1147 console.error("Expected at least 2 sections per line"); 1148 return; 1149 } 1150 const projectNames = ["Monocraft", "PicoChat", "PlayBook", "Waypoint", "Pokétch", "Grad_Cap", "Mutable", "Animal_Crossing", "TetNet", "Celeste", "Idrees_Inc", "Eagle_Eye", "Miracode", "Stelline"]; 1151 const shuffled = shuffleInPlace([...projectNames]); 1152 1153 sections.forEach(section => { 1154 const spans = Array.from(section.querySelectorAll(".scrolling-text")); 1155 section.innerHTML = shuffled.map(w => `<span class="scrolling-text">${w}</span>`).join(""); 1156 }); 1157 }); 1158 }); 1159 1160 1161 1162 const colors = [ 1163 ['#030712', '#4ade80'], 1164 ['#0938fe', '#ffffff'], 1165 ['#cc0e5c', '#edecbe'], 1166 ['#1f2937', '#f43f5e'], 1167 ['#641f45', '#f5aaaa'], 1168 ['#f43f5e', '#fdfbcf'], 1169 ['#4915dc', '#fcffd6'], 1170 ['#217b76', '#a9ffcd'], 1171 ['#550f95', '#a7eeb7'], 1172 ['#706aa3', '#f4fdf9'], 1173 ['#690ccd', '#49feff'], 1174 ['#0721ee', '#8efaca'], 1175 ['#0b1927', '#efbafd'], 1176 ['#002c61', '#8fe5f0'], 1177 ['#000525', '#69b9e2'], 1178 ['#252577', '#74ee85'], 1179 ['#4e70d4', '#bbf8bf'], 1180 ['#562b6f', '#f2b97b'], 1181 ['#17a670', '#efffee'], 1182 ['#5299d3', '#fdfffd'], 1183 ['#2000b3', '#e3af78'], 1184 ['#007c55', '#c9e4b8'], 1185 ['#00425a', '#f9f9a3'], 1186 ]; 1187 1188 let index = 0; 1189 1190 // On background click, change colors 1191 document.querySelector('.scrolling-text-container').addEventListener('click', function () { 1192 index = (index + 1) % colors.length; 1193 document.documentElement.style.setProperty('--primary-color', colors[index][0]); 1194 document.documentElement.style.setProperty('--secondary-color', colors[index][1]); 1195 }); 1196 1197 document.documentElement.style.setProperty('--primary-color', colors[index][0]); 1198 document.documentElement.style.setProperty('--secondary-color', colors[index][1]); 1199</script>
1199 1200 <style> 1201 .logo { 1202 position: relative; 1203 background: url("/images/logo/logo-transparent.png") no-repeat scroll 0 0 transparent; 1204 background-size: 100% 100%; 1205 width: 225px; 1206 height: 225px; 1207 margin-top: 30px; 1208 transition: .2s; 1209 z-index: 2; 1210 filter: drop-shadow(0px 10px 20px rgba(241, 103, 85, 0.6)); 1211 transform: scale(1.007); 1212 } 1213 1214 .logo:hover { 1215 transform: scale(1.10); 1216 filter: drop-shadow(0px 10px 40px rgba(241, 103, 85, 0.5)); 1217 } 1218 1219 .navigation { 1220 width: 70%; 1221 max-width: min(var(--max-width), 430px); 1222 display: flex; 1223 flex-direction: row; 1224 justify-content: space-between; 1225 margin-top: 40px; 1226 color: white; 1227 } 1228 1229 .navigation-link { 1230 font-family: "IBM Plex Mono", monospace; 1231 font-size: 17px; 1232 font-weight: normal; 1233 text-decoration: none; 1234 color: inherit; 1235 z-index: 1; 1236 } 1237 1238 .navigation-link:hover { 1239 color: var(--secondary-color); 1240 } 1241 1242 @media screen and (max-width: 786px) and (orientation: portrait) { 1243 1244 html, 1245 body { 1246 overflow-x: hidden; 1247 } 1248 1249 .logo { 1250 width: 150px; 1251 height: 150px; 1252 margin-top: 20px; 1253 } 1254 1255 .navigation { 1256 width: 85%; 1257 } 1258 1259 .optional-navigation-link { 1260 display: none; 1261 } 1262 } 1263</style> 1264 1265<center> 1266 <a href="/index.html" title="Check out my other projects!"> 1267 <div class="logo"></div> 1268 </a> 1269 <div class="navigation"> 1270 <a class="navigation-link optional-navigation-link" href="/index.html">Home</a> 1271 <a class="navigation-link" href="/index.html#about-me">About Me</a> 1272 <a class="navigation-link" href="/index.html#my-projects">My Projects</a> 1273 <a class="navigation-link" href="/index.html#contact-me">Contact</a> 1274 </div> 1275</center> 1276 1277 <div class="container"> 1278 <article class="blur-backdrop"> 1279 <h1>How I Raised $2,000 for Refugees by Putting a Billboard on my Grad Cap</h1> 1280 <div class="byline"> 1281 <span>By Idrees Hassan</span> 1282 <div class="byline-date"> 1283 1284 <time class="date-created" datetime="2021-11-10">Created: Nov 10, 2021</time> 1285 1286 1287 <time class="date-updated" datetime="2021-11-22">Updated: Nov 22, 2021</time> 1288 1289 </div> 1290 </div> 1291 <center> 1292 1293 <img src="images/graduation/idrees-standing-with-cap.jpeg" /> 1294 1295 1296</center> 1297 1298<h2 id="whats-that-thing-youre-holding">Whatâs that thing youâre holding?</h2> 1299 1300<p>Hey, my name is Idrees Hassan and after a long delay due to COVID, I was finally able to graduate with the UNC Class of 2020 on October 10th, 2021. To celebrate, <strong>I created a grad cap with part of a billboard</strong> that can display anything you can think of! And to top it off <strong>I let anybody who donated to a charity supporting Afghan refugees submit their own designs to be shown off during the ceremony</strong>! After four weeks of fundraising, we raised over $2,000 and received dozens of submissions that I proudly wore on my head during graduation weekend! Check out this video I made about it:</p> 1301 1302<div class="youtube-container"> 1303 <iframe src="https://www.youtube-nocookie.com/embed/3Z0r3jslgyk" frameborder="0" allowfullscreen="" class="youtube"></iframe> 1304</div> 1305 1306<p>For about a month, I reached out to friends, family, and strangers on the internet asking for their help donating to refugees and decorating my grad cap. And let me tell you, making the hat was nowhere near as difficult as figuring out how to get the word out. But with their generous support, we were able to raise over double the original goal for charities supporting refugees!</p> 1307 1308<div id="progress-bar-container"> 1309 <div id="progress-bar-holder"> 1310 <div id="progress-bar-1000" class="progress-bar" style="width: calc(1000/2500*100%)" title="Original donation progress to $1,000"></div> 1311 <div id="progress-bar-1500" class="progress-bar" style="width: calc(1500/2500*100%)" title="New donation progress to $1,500"></div> 1312 <div id="progress-bar-2000" class="progress-bar" style="width: calc(2000/2500*100%)" title="Newer donation progress to $2,000"></div> 1313 <div id="progress-bar-2500" class="progress-bar" style="width: calc(2274/2500*100%)" title="Newest donation progress to $2,500"></div> 1314 </div> 1315 <div id="progress-bar-label"> 1316 <b>$2,274</b> raised of <strike>$1,000</strike> <strike>$1,500?</strike> <strike>2,000?!</strike> <br /> 1317 <!-- <b>5</b> people have donated<br/> 1318 <b>3</b> donations --> 1319 </div> 1320</div> 1321
1322<script> 1323 for (let element of document.getElementsByClassName("progress-bar")) { 1324 const observer = new IntersectionObserver(entries => { 1325 // Loop over the entries 1326 entries.forEach(entry => { 1327 // If the element is visible 1328 if (entry.isIntersecting) { 1329 // Add the animation class 1330 entry.target.style.animationName = "grow"; 1331 } 1332 }); 1333 }); 1334 1335 observer.observe(element); 1336 } 1337</script>
1337 1338 1339<p>Read on to see how it went, how I did it, and what I learned in the process!</p> 1340 1341<h2 id="how-did-it-go">How did it go!</h2> 1342 1343<p>It went way better than I expected! We raised $2,274 for Afghan refugees, received 33 submissions, and the project went off without a hitch during the whole ceremony and other events that weekend!</p> 1344 1345<center> 1346 1347 <img src="images/graduation/idrees-grad-cap-mum-miranda.jpg" /> 1348 1349 <p><i>Trust me, it's heavier than it looks</i></p> 1350 1351 1352</center> 1353 1354<p>The hardware held up, the battery remained above 50% the whole time, my software didnât let me down, and a billion bobby pins kept it all together on my head. For three days, I was able to rock a glowing graduation cap and finally graduate with the Class of 2020! Thank you for everyone who helped me with this project, and I hope this write-up can help anybody else who wants to do a project like this in the future.</p> 1355 1356<h2 id="what-sort-of-things-did-they-submit">What sort of things did they submit?</h2> 1357 1358<p>All sorts of things! Such low-res works of art asâ¦</p> 1359 1360<div class="submissions"> 1361 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/a-student.png" /> 1362 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/alif.png" /> 1363 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/basketball.png" /> 1364 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/brit.png" /> 1365 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/caterpillar.png" /> 1366 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/creo.png" /> 1367 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/derby-county-football-club.png" /> 1368 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/duke.png" /> 1369 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/heart.png" /> 1370 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/idrees-is-big.png" /> 1371 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/idreesinc-logo.png" /> 1372 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/love.png" /> 1373 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/mgenerx.png" /> 1374 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/minecraft-axolotl.png" /> 1375 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/obi-wan.png" /> 1376 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/octopi-hi.png" /> 1377 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/octopus.jpg" /> 1378 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/pink-yoshi.png" /> 1379 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/purple-stars.png" /> 1380 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/qr-code.png" /> 1381 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/rakkars.png" /> 1382 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/ram.png" /> 1383 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/regsource.png" /> 1384 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/rick-roll.png" /> 1385 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/rick.png" /> 1386 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/shrek.png" /> 1387 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/slime.png" /> 1388 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/smbc.png" /> 1389 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/sus.png" /> 1390 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/thanks-mum-dad.png" /> 1391 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/unc-womens-rugby.png" /> 1392 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/unc.png" /> 1393 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/uncle.png" /> 1394 <img class="submission-image" src="https://raw.githubusercontent.com/IdreesInc/Graduation-Cap-Submissions/main/designs/uwu.png" /> 1395</div> 1396 1397<p>To check out all of the submissions including messages too, <a href="https://github.com/IdreesInc/Graduation-Cap-Submissions" target="_blank">
1397click here</a>! Iâll be creating a video showing each and every design scrolling on my cap soon, so check back here or follow my <a href="https://twitter.com/IdreesInc" target="_blank">Twitter (@IdreesInc)</a> to be notified when Iâm done!</p> 1398 1399<h2 id="so-how-did-you-do-it">So how did you do it?</h2> 1400 1401<p>With blood, sweat, tears, and craft supplies!</p> 1402 1403<center> 1404 1405 <img src="images/graduation/matrix-raspberry-pi.jpg" /> 1406 1407 <p><i>A completely natural, not staged at all picture of my desk</i></p> 1408 1409 1410</center> 1411 1412<h3 id="the-hardware">The Hardware</h3> 1413 1414<ul> 1415 <li>A <a href="https://www.adafruit.com/product/3400" target="_blank">Raspberry Pi Zero W</a></li> 1416 <li><a href="https://www.adafruit.com/product/2822" target="_blank">Dual male headers</a></li> 1417 <li>An <a href="https://www.adafruit.com/product/1484" target="_blank">Adafruit 32x32 LED Matrix w/ 6mm pitch</a></li> 1418 <li>An <a href="https://www.adafruit.com/product/3211" target="_blank">Adafruit RGB Matrix Bonnet</a></li> 1419 <li>An overpriced graduation cap that I stole from my girlfriend</li> 1420 <li>A <a href="https://www.amazon.com/ROMOSS-20000mAh-Portable-External-Compatible/dp/B07WQF7HF3/" target="_blank">20,000 mAh portable battery</a></li> 1421 <li>A <a href="https://www.amazon.com/gp/product/B08V1HJWC8/ref=ppx_yo_dt_b_asin_title_o08_s00?ie=UTF8&psc=1" target="_blank">6ft USB to DC power cable</a></li> 1422 <li>Glittery UNC blue ribbon</li> 1423 <li>Double-sided tape for the ribbon</li> 1424 <li>A high-temperature hot glue gun</li> 1425 <li>So many bobby pins</li> 1426</ul> 1427 1428<p>And hereâs a general summary of how I built it:</p> 1429 1430<ol> 1431 <li>First, I soldered the headers onto the Raspberry Pi Zero W. This was necessary so that the LED Matrix Bonnet could attach to it, but not knowing how to solder made it way harder than
1431it shouldâve been (and I may have lead lungs now). I think Iâll just buy a Pi with pre-soldered headers in the future.</li> 1432 <li>Next, I popped the bonnet on, easy as pie!</li> 1433 <li>Then I stripped the screw connectors off of the power cable that came with the LED matrix and stuck the newly stripped wires into the bonnetâs screw terminals. Careful to make sure you get the polarity correct!</li> 1434 <li>To get the Pi and the cables to stay together nicely, I used some painterâs tape for cable management. It wasnât great, but it got the job done. Itâs important to make sure that the cables donât get in the way of the matrix standing on its pins.</li> 1435 <li>Since the matrix was going to be glued onto my cap, I made sure to mark where it would go with a pencil. Remember to make sure that the matrix display is in the orientation you want it before gluing, otherwise your images will be sideways/upside down.</li> 1436 <li>I removed the magnets from the matrixâs stand-off screws and hot glued them to where I marked on the cap. Again, you really want to be sure you measured and marked correctly, you only have one go at this. Hot glue sticks to the cheap polyester likeâ¦glue.</li> 1437 <li>With the magnets in place, the matrix can now be popped onto the cap with a satisfying magnetic snap! This allowed me to remove the matrix at will while keeping it on my cap firmly enough so that it wouldnât separate while walking around campus.</li> 1438 <li>To make things pretty, I attached a glittery UNC blue ribbon all around the edge of the matrix using double-sided tape. This hides all of the cables and adds some pizzazz. 7/8ths of an inch tape seemed to be the perfect size in my case.</li> 1439 <li>Now is the hard part. The cap is pretty heavy with the display on, so to keep it all stuck to my head I used bobby pins. I even had to avoid cutting my hair so that Iâd have enough for the bobby pins to attach tightly. I used about 12 bobby pins arranged into 6 âXâ shapes on my head. Luckily Miranda and my mum were there to teach me how itâs done. The bobby pins kept the cap stuck to my head pretty well (though I made an effort to not swing it around too much).</li> 1440</ol> 1441 1442<p>And thatâs it! I kept the massive battery pack in my jeans pocket and ran the USB to DC jack up to the bonnet on the Pi to keep it powered. On a full charge, it looks like my cap would get over 15 hours of battery life even on full brightness and while connected to my phoneâs hotspot. With this hardware and the software I wrote (see below), I was able to run the cap all weekend without issue.</p> 1443 1444<h3 id="the-software">The Software</h3> 1445 1446<p>The software side of the cap is split into two parts, the code that runs on the Raspberry Pi and the command and control center (which Iâve nicknamed the ârelayâ server).</p> 1447 1448<p>The Adafruit LED Matrix Bonnet makes it easy to display individual images on the LED matrix, so I started by using the compatible <a href="https://github.com/hzeller/rpi-rgb-led-matrix" target="_blank">rpi-rgb-led-matrix library</a>. This library uses C but has bindings for Python and C#, so I decided to embrace the snake and write the on-device code in Python 3.</p> 1449 1450<p>The on-device program controls what is displayed on the hat, whether it is an image or a message. It has <a href="https://github.com/IdreesInc/Graduation-Cap/blob/main/config.json" target="_blank">configurable options</a> for the length of time to display each image, the speed of text scrolling, and where to find the submissions to display. The submissions are stored in a separate folder that is a clone of <a href="https://github.com/IdreesInc/Graduation-Cap-Submissions" target="_blank">this</a> GitHub repository. The benefits of using a git repo are that I can easily update the submissions through a simple âgit pullâ as well as upload new submissions through a web browser if necessary. The program is setup to run on boot using crontab, so if a problem came up itâd be easy to restart by just unplugging the cap and plugging it back in.</p> 1451 1452<p>The relay server was my favorite idea. I realized that I needed some way to control the hat as I walked around campus all graduation weekend, and the changing IP address and inconsistent network connection would make it very difficult to maintain a connection between the server and the client. So instead, I wrote a <a href="https://github.com/IdreesInc/Graduation-Cap-Relay" target="_blank">Node.js relay server</a> that ran on my PC at home and acted as the middle-man between the web client and the Python grad cap program. Each process communicated via the ever-reliable <a href="https://socket.io/" target="_blank">Socket.IO</a> protocol which meant that I didnât have to worry about dropped connections or implementing my own retry logic. To get Socket.IO working with Python, I relied on the well-documented and easy-to-use <a href="https://python-socketio.readthedocs.io/en/latest/" target="_blank">python-socketio</a> library.</p> 1453 1454<p>To control the hat from my phone, the relay server runs a simple web server that provides a single-page control panel. When the grad cap connects to the relay server (usually via my phoneâs hotspot), the web client on my phone allows me to set the brightness and manually select the image to display. Given more time (I only started the web server about two days before graduation) Iâd have probably added the ability to display custom text and modify the time per design, but overall it was more than enough to keep me in control all weekend. One thing that I wasnât expecting was for my phoneâs hotspot to give out near the stadium due to thousands of studentâs and their families saturating the cell towers. Luckily my cap doesnât need WiFi to function and a quick power reboot removed any manual overrides I had set via my control panel.</p> 1455 1456<p>Since I couldnât be sure that nothing would go wrong with my cap, I installed <a href="https://ngrok.com/" target="_blank">ngrok</a> and setup the crontab to forward ssh on startup so that I could connect to the Raspberry Pi while on campus. I never ended up needing to use this as any problems that might have came up could be easily solved by unplugging and plugging the cap back in. I did test it while on campus just to see if it worked and was easily able to SSH through the ngrok tunnel from my phone.</p> 1457 1458<p>
1458Lastly on the software side, I created an <a href="https://github.com/IdreesInc/LED-Matrix-Editor" target="_blank">LED matrix web editor</a> that allows people to draw their own custom designs!</p> 1459 1460<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="KKqbgeL" data-user="idreesinc" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> 1461 <span>See the Pen <a href="https://codepen.io/idreesinc/pen/KKqbgeL"> 1462 LED Matrix Editor</a> by Idrees (<a href="https://codepen.io/idreesinc">@idreesinc</a>) 1463 on <a href="https://codepen.io">CodePen</a>.</span> 1464</p>
1465<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
1465 1466 1467<p>Features include a full drawing suite (so you can draw all the 32x32 art you desire), image importing with automatic downscaling, and the ability to export designs as images. This web app made it not only easy to draw your own designs but also allows you to get a better understanding of what your design might look like on my cap. A lot of the people who donated were strangers on the internet which meant they couldnât just stop by and see what their potential design might look like in-person. I tried to take out the guesswork by developing an editor as similar as possible to the actual LED matrix, and in practice I think it turned out pretty good.</p> 1468 1469<p>All programs developed for this project are open source and are available on GitHub, check them out and give âem a star if you like what you see!</p> 1470 1471<ul> 1472 <li><a href="https://github.com/IdreesInc/Graduation-Cap" target="_blank">Graduation Cap Driver</a></li> 1473 <li><a href="https://github.com/IdreesInc/Graduation-Cap-Relay" target="_blank">Relay Server</a></li> 1474 <li><a href="https://github.com/IdreesInc/LED-Matrix-Editor" target="_blank">LED Matrix Web Editor</a></li> 1475</ul> 1476 1477<p>And if youâd like to see how I struggled through each step of the software, check out my dev journal <a href="https://github.com/IdreesInc/Graduation-Cap/blob/main/dev-journal.md" target="_blank">here</a>!</p> 1478 1479<h2 id="what-i-learned-while-fundraising">What I learned while fundraising</h2> 1480 1481<p>God dang, fundraising is hard.</p> 1482 1483<p>Well okay, fundraising from family and friends was easy, but thatâs only because my family and friends are lovely people and care about this cause. But getting money from strangers, now <em>that</em> was where things got difficult. While overall I am very satisfied with the results, if I could do it all again I would definitely change a few things.</p> 1484 1485<p>First, I would not have introduced people to my project with such a long and detailed <a href="https://idreesinc.com/graduation/design-my-graduation-cap.html" target="_blank">web page</a>. I was focused on documenting my project thoroughly to make sure everything was clear and well-explained. But in the process of writing almost 2000 words, I actually made it <em>harder</em> for someone to quickly glance at my project and understand what is going on (and more importantly, how they could help). Two thirds of the way into my fundraising I wrote up an <a href="https://idreesinc.com/graduation/grad-cap-summary.html" target="_blank">elevator pitch</a> of sorts to quickly get my point across, and I wish I had done this first as it definitely got to the point faster.</p> 1486 1487<p>Second, I learned that âexposureâ does not directly lead to raising more money. My <a href="https://www.linkedin.com/posts/idrees-hassan_design-my-graduation-cap-help-afghan-refugees-activity-6848987353688760320-m4oG" target="_blank">LinkedIn post</a> received 1,400 views and 22 reactions, but no âconversionsâ as the marketing folk say. My first <a href="https://twitter.com/IdreesInc/status/1441489741346746377?s=20" target="_blank">tweet</a> did better with over 4,000 views and 351 âengagementsâ, but only a few people decided to donate after seeing that. What worked best was making posts that directly targeted a certain community that I thought might be interested in my project.</p> 1488 1489<p>The posts that succeeded were in fact the ones that I had never originally planned on making! On a whim, I decided to post to the <a href="https://www.reddit.com/r/UNC/comments/pyjnd7/im_decorating_my_graduation_cap_with_part_of_a/" target="_blank">UNC subreddit</a> with a pic of the UNC logo on my hat.</p> 1490 1491<center><iframe id="reddit-embed" src="https://www.redditmedia.com/r/UNC/comments/pyjnd7/im_decorating_my_graduation_cap_with_part_of_a/?ref_source=embed&ref=share&embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="border: none; width: 500px; max-width: 80vw; height: 500px; max-height: 80vw" scrolling="no"></iframe></center> 1492 1493<p>And while I only got a total of 89 upvotes, this was the first post that actually got strangers to start donating. It looks like the combination of being more casual and reaching out to people within my community w
1493as better for fundraising, especially since UNC students/faculty are more likely to support a cause that directly relates to UNC graduation. From that post, I was recommended to post to the Raspberry Pi subreddit.</p> 1494 1495<center><iframe id="reddit-embed" src="https://www.redditmedia.com/r/raspberry_pi/comments/q15g8s/im_decorating_my_graduation_cap_with_an_led/?ref_source=embed&ref=share&embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="border: none; width: 500px; max-width: 80vw; height: 500px; max-height: 80vw" scrolling="no"></iframe></center> 1496 1497<p>This post was way more popular with 1,900 upvotes and it reached the top of the âHotâ section in that subreddit for a couple of days. And again, I was able to get a few more submissions from people who wanted to support the cause. One fun thing about posting on the Raspberry Pi subreddit was that I was able to talk with people who were more interested in how my project worked rather than just what I was doing, which was great and one of the reasons I am writing this post-mortem now.</p> 1498 1499<p>I was also able to get some nice traction on Twitter by targeting communities I am passionate about. My <a href="https://twitter.com/IdreesInc/status/1441489741346746377?s=20" target="_blank">general tweets</a> did alright with the help of my family and friends, and I canât complain considering I made the account only a couple of months ago. But it was my tweets at particular people/groups that really gained momentum. I called these my âHail Maryâ tweets since I wasnât expecting them to get anywhere but I figured I might as well give it a go and see what happens. I tried tweeting at the <a href="https://twitter.com/IdreesInc/status/1442440128383766530?s=20" target="_blank">Zakat Foundation</a> with their logo on my cap and while that didnât take off (though they did reply!), I was inspired to tweet at some more accounts. I <a href="https://twitter.com/IdreesInc/status/1442806289965400065?s=20" target="_blank">tweeted at Adafruit</a> with a pic of their logo on the hat and didnât receive a reply or response. But a few days later (and only two days before my graduation), they posted about my cap <a href="https://blog.adafruit.com/2021/10/08/design-my-graduation-cap-help-afghan-refugees-piday-raspberrypi-raspberry_pi/" target="_blank">on their blog</a>!!! You would not believe how excited I was about that, especially since I got the idea for this project while scrolling their storefront and noticing that their LED matrixes were conveniently just the right size for a grad cap. This gave me the confidence to try tweeting at some other popular accounts like the author of SMBC, Zach Weinersmith, who I know cares about the refugee crisis. What I wasnât expecting was him to <a href="https://twitter.com/IdreesInc/status/1446507566620626944?s=20" target="_blank">retweet my tweet</a> and cause it to gain over 100 likes and almost 13,000 views!</p> 1500 1501<center><blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Shout out to <a href="https://twitter.com/ZachWeiner?ref_src=twsrc%5Etfw">@ZachWeiner</a> for always giving me a laugh before the daily slog to my 8AMs<a href="https://twitter.com/hashtag/UNC?src=hash&ref_src=twsrc%5Etfw">#UNC</a> <a href="https://twitter.com/hashtag/Classof2020?src=hash&ref_src=twsrc%5Etfw">#Classof2020</a> <a href="https://t.co/5sOpByZXcb">pic.twitter.com/5sOpByZXcb</a></p>— Idrees Hassan (@IdreesInc) <a href="https://twitter.com/IdreesInc/status/1446507566620626944?ref_src=twsrc%5Etfw">October 8, 2021</a></blockquote>
1501<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
1501 </center> 1502 1503<p>While Iâm not sure if this caused any more donations since I made that tweet so late in the game (the day before the ceremony), I was still super thrilled to get a shout-out from someone whose content I love.</p> 1504 1505<p>In summary, fundraising is a whole different ball game than just developing a project. Given the opportunity to do it all again, hereâs what I would change:</p> 1506 1507<ul> 1508 <li>Make the description of my project shorter</li> 1509 <li>Give myself more time for fundraising</li> 1510 <li>Take better photos of my project using a professional camera</li> 1511 <li>Post more about the projectâs development process</li> 1512 <li>Make more âlong shotâ posts</li> 1513</ul> 1514 1515<h2 id="conclusion">Conclusion</h2> 1516 1517<p>This was easily my favorite project I have ever made yet! The hardware was interesting, the software was fun, and I got the chance to help out a cause I truly believe in. It was also my most exhausting, with many dozens of hours spent after work planning, debugging edge cases, and learning how to be my own social media manager. Iâd like to thank my family and friends for their amazing help and for being such great test subjects. Iâd especially like to thank my girlfriend Miranda, without whom I would never have been able to complete this project. If you have any questions or comments, please feel free to use the comment section below!</p> 1518 1519<center> 1520 1521 <img src="images/graduation/idrees-miranda-graduation.jpg" /> 1522 1523 1524</center> 1525 1526 <br /> 1527 <p> 1528 Want to get in touch and talk about one of my projects, opportunities, or just feel like chatting? 1529 <br /> 1530 Feel free to comment below or email me at idrees@<span 1531 class="display-none">@example.com</span>idreesinc.com 1532 <br /> 1533 Check me out on Github: <a href="https://github.com/IdreesInc" target="_blank" 1534 rel="noopener noreferrer">https://github.com/IdreesInc</a> 1535 <br /> 1536 Reach out on LinkedIn: <a href="https://www.linkedin.com/in/idrees-hassan/" target="_blank" 1537 rel="noopener noreferrer">https://www.linkedin.com/in/idrees-hassan/</a> 1538 </p> 1539 <div id="disqus_thread"></div> 1540 <!-- Load-bearing break tag --> 1541 <br> 1542 </article> 1543 </div> 1544 <style> 1545 .contact-modal-container { 1546 display: flex; 1547 flex-direction: column; 1548 align-items: center; 1549 justify-content: center; 1550 } 1551 1552 .contact-modal { 1553 max-width: 580px; 1554 font-family: "IBM Plex Mono", monospace; 1555 font-size: 19px; 1556 font-weight: 600; 1557 display: flex; 1558 flex-direction: column; 1559 align-items: center; 1560 justify-content: center; 1561 padding: 25px 5%; 1562 margin: 7.5%; 1563 margin-top: 10px; 1564 margin-bottom: 40px; 1565 border-radius: 25px; 1566 } 1567 1568 .contact-modal span { 1569 margin-top: 4px; 1570 } 1571 1572 .contact-modal a { 1573 color: var(--secondary-color); 1574 text-decoration: underline; 1575 font-style: italic; 1576 font-weight: bold; 1577 } 1578 1579 @media screen and (max-width: 786px) and (orientation: portrait) { 1580 .contact-modal { 1581 align-items: flex-start; 1582 } 1583 1584 .contact-modal span { 1585 margin-top: 8px; 1586 } 1587 } 1588</style> 1589 1590<div class="contact-modal-container" id="contact-me"> 1591 <footer class="contact-modal blur-backdrop"> 1592 <span>Get in touch on <a href="https://www.linkedin.com/in/Idrees-Hassan/" rel="noopener noreferrer" 1593 target="_blank">LinkedIn</a>, <a href="https://bsky.app/profile/idreesinc.com" rel="noopener noreferrer" 1594 target="_blank">Bluesky</a>, or <a href="https://discord.gg/6yxE9prcNc" rel="noopener noreferrer" 1595 target="_blank">Discord</a></span> 1596 <span>Email me at: idrees@<span style="display:none;">@example.com</span>idreesinc.com</span> 1597 <span style="font-size: 14px; margin-top: 8px;"><a href="/privacy-policy.html">Privacy 1598 Policy</a> | Website made without AI</span> 1599 </footer> 1600</div> 1601
1602<script src="https://cdn.jsdelivr.net/gh/IdreesInc/Pocket-Bird@main/dist/web/birb.embed.js"></script>
1602 1603 1604<!-- <footer id="contact-me"> 1605 Want to get in touch and talk about one of my projects, opportunities, or just feel like chatting? 1606 <br /> 1607 Feel free to email me at: idrees@<span class="display-none">@example.com</span>idreesinc.com 1608 <br /> 1609 Check me out on <a href="https://github.com/IdreesInc" target="_blank" rel="noopener noreferrer">GitHub</a> 1610 <br /> 1611 Follow me on Twitter <a href="https://twitter.com/IdreesInc" target="_blank" rel="noopener noreferrer">@idreesinc</a> 1612 <br /> 1613 Or on Bluesky <a href="https://bsky.app/profile/idreesinc.com" target="_blank" rel="noopener noreferrer">@idreesinc.com</a> 1614 <br /> 1615 Mastodon works too <a rel="me" href="https://mastodon.social/@idreesinc">@[email protected]</a> 1616 <br /> 1617 Threads if you prefer <a href="https://www.threads.net/@idreesinc" target="_blank" rel="noopener noreferrer">@idreesinc</a> 1618 <br /> 1619 Watch my videos on <a href="https://www.youtube.com/channel/UCGcFjmCAOIA5RR2iloYlHaA" target="_blank" rel="noopener noreferrer">YouTube</a> 1620 <br /> 1621 Scroll through my Insta <a href="https://www.instagram.com/idreesinc/" target="_blank" rel="noopener noreferrer">@idreesinc</a> 1622 <br /> 1623 And reach out on <a href="https://www.linkedin.com/in/idrees-hassan/" target="_blank" rel="noopener noreferrer">LinkedIn</a> 1624 <br /> 1625 Copyright Idrees Hassan, All Rights Reserved | <a href="./privacy-policy.html">Privacy Policy</a> 1626</footer> --> 1627
1627<script> 1628 var disqus_config = function () { 1629 this.page.identifier = 'about-graduation'; 1630 }; 1631 (function () { 1632 var d = document, s = d.createElement('script'); 1633 s.src = 'https://idreesinc.disqus.com/embed.js'; 1634 s.setAttribute('data-timestamp', +new Date()); 1635 (d.head || d.body).appendChild(s); 1636 })(); 1637 </script>
1637 1638</body> 1639 1640</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.