PageSourceSearch

https://idreesinc.com/about-graduation.html

html idreesinc.com collected 2026-09-24 18:59:56 UTC 63,231 bytes, 1,640 lines download raw bytes

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&amp;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&amp;ref=share&amp;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&amp;ref=share&amp;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&amp;ref_src=twsrc%5Etfw">#UNC</a> <a href="https://twitter.com/hashtag/Classof2020?src=hash&amp;ref_src=twsrc%5Etfw">#Classof2020</a> <a href="https://t.co/5sOpByZXcb">pic.twitter.com/5sOpByZXcb</a></p>&mdash; 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.