alyh.github.io/work.html at master · alyh/alyh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,viewport-fit=cover">
    <meta name="description" content="A chronological list and description of select projects done by Aly Hassan.">
    <meta name="author" content="Aly Hassan">

    <title>Aly Hassan - Work and Projects</title>

    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
    <meta name="apple-mobile-web-app-title" content="Aly Hassan">
    <meta name="application-name" content="Aly Hassan">
    <meta name="msapplication-TileColor" content="#ffc40d">
    <meta name="theme-color" content="#ffffff">

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- style sheet -->
    <link href="css/main-style.css" rel="stylesheet">
    <link href="css/work-style.css" rel="stylesheet">
    <link href="css/floating-button.css" rel="stylesheet">

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-L0JELEKBDN"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-L0JELEKBDN');
    </script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-169015472-1"></script>

</head>

<body>
    <!-- Navigation -->
    <nav class="navbar fixed-top navbar-expand-sm navbar-light">
        <div class="container navbar-container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"><span class="d-sm-inline">aly hassan</span></a>
            </div>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">about</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="work.html">work</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="resume.html">resume</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Page Content -->
    <div class="container">
        <div class="intro container">
            <h1 class="name-header">work</h1>
            <h2 class="name-caption">a selection of personal, research, and school projects - shown chronologically</h2>
        </div>
        <a id="scroll-button" class="float">
            <p id="button-p" class="noselect">&darr;</p>
        </a>
    </div>


    <section class="cover work-cover">
        <div class="wrapper container"></div>
    </section>
    <section class="spacer-cover container">
         <div class="inner-spacer-container container"></div>
        <div class="wrapper container"></div>
    </section>
    <section id="p-cover" class="project-cover container">
        <div class="project container">
            <h1 id="item1" class="project-header">Bio-Inspired Adhesives for Human Skin</h1>
            <div class="row skill-row">
                <div class="col">
                    <span class="skill-badge">Design</span>
                    <span class="skill-badge">Image Processing</span>
                    <span class="skill-badge">MATLAB</span>
                    <span class="skill-badge">Mechanics</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 order-md-2 img-div"><img class="project-img" src="images/bioadhesives.svg"></div>
                <div class="col-md-8 order-md-1">
                    <h2 class="project-caption">Research on the adhesion mechanics of bio-inspired surfaces. Their detachment is captured and observed as it happens, allowing for a deeper insight into what enables higher adhesion.</h2>
                    <div class="read-more-div"><a class="read-more-link" href="project1.html">Keep Reading &rarr;</a></div>
                </div>
            </div>
            <!-- next project -->
            <h1 id="item2" class="project-header top-buffer">ParkFast</h1>
            <div class="row skill-row">
                <div class="col">
                    <span class="skill-badge">Machine Learning</span>
                    <span class="skill-badge">Python</span>
                    <span class="skill-badge">Computer Vision</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 order-md-2 img-div"><img class="project-img" src="images/park.svg"></div>
                <div class="col-md-8 order-md-1">
                    <h2 class="project-caption">Can we predict where and when a parking spot will free up? This team project couples a classification model with a computer vision model to find empty spots on the streets and in parking lots.</h2>
                    <div class="read-more-div"><a href="project2.html" class="read-more-link">Keep Reading &rarr;</a></div>
                </div>
            </div>
            <!-- end of project -->
            <!-- next project -->
            <h1 id="item3" class="project-header top-buffer">Erasable Printer Ink</h1>
            <div class="row skill-row">
                <div class="col">
                    <span class="skill-badge">Chemistry</span>
                    <span class="skill-badge">Design</span>
                    <span class="skill-badge">Materials Science</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 order-md-2 img-div"><img class="project-img" src="images/ink.svg"></div>
                <div class="col-md-8 order-md-1">
                    <h2 class="project-caption"><em>Thermochromism</em> is the change of colour in the presence of heat. Most heat-induced colour changing products change back when the heat is removed. In this thesis project, we design, print, and optimize a permanently erasable printer ink.</h2>
                    <div class="read-more-div"><a href="https://www.youtube.com/watch?v=m99IlxptmYU" class="read-more-link">Watch the demo on YouTube &rarr;</a></div>
                    <div class="read-more-div"><a href="files/ink-poster.pdf" class="read-more-link">Poster for the 2018 Capstone Design Symposium &rarr;</a></div>
                </div>
            </div>
            <!-- end of project -->
            <!-- next project -->
            <h1 id="item4" class="project-header top-buffer">Reactor Head for Gas Deposition</h1>
            <div class="row skill-row">
                <div class="col">
                    <span class="skill-badge">3D Printing</span>
                    <span class="skill-badge">ANSYS Fluent</span>
                    <span class="skill-badge">Design</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 order-md-2 img-div"><img class="project-img" src="images/gas.svg"></div>
                <div class="col-md-8 order-md-1">
                    <h2 class="project-caption">A re-imagined 3D-printed reactor head for gas deposition allows for rapid iteration and testing. The design of the gas pathways are modelled with ANSYS Fluent to achieve a uniform deposition. <br><br>Work done as part of a research scholarship with Professor Musselman at the University of Waterloo.</h2>
                    <div class="read-more-div"><a class="read-more-link" href="project3.html">Keep Reading &rarr;</a></div>
                </div>
            </div>
            <!-- end of project -->
            <!-- next project -->
            <h1 id="item5" class="project-header top-buffer">Cryo-Holder for TEMs</h1>
            <div class="row skill-row">
                <div class="col">
                    <span class="skill-badge">Design</span>
                    <span class="skill-badge">Heat Flow Simulations</span>
                    <span class="skill-badge">COMSOL</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 order-md-2 img-div"><img class="project-img" src="images/cryo.svg"></div>
                <div class="col-md-8 order-md-1">
                    <h2 class="project-caption">When you cool samples to cryogenic temperatures (&lt;130&deg;C), even black-body radiation can overheat things. The sample holder is designed to maximize cooling while minimizing vibrations.<br><br>Work done as part of a research scholarship with Professor Sciaini at the University of Waterloo.</h2>
                    <div class="read-more-div"><a href="files/cryo-poster.pdf" class="read-more-link">Poster for the 32nd Symposium on Chemical Physics &rarr;</a></div>
                </div>
            </div>
            <!-- end of project -->
            <!-- next project -->
            <h1 id="item6" class="project-header top-buffer">Cancer Dataset and Pathway Visualizations</h1>
            <div class="row skill-row">
                <div class="col">
                    <span class="skill-badge">Data Analysis</span>

                    <span class="skill-badge">JavaScript</span>
                    <span class="skill-badge">Visualizations</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 order-md-2 img-div"></div>
                <div class="col-md-8 order-md-1">
                    <h2 class="project-caption">Cancer donor datasets are visualized with JavaScript and biological pathways are mapped for simple navigation. <br><br>Work done as part of a co-op for the Ontario Institute for Cancer Research.</h2>
                    <div class="read-more-div"><a class="read-more-link" href="https://dcc.icgc.org/projects/history">Example Visualization Work &rarr;</a></div>
                    <div id="last-link" class="read-more-div"><a class="read-more-link" href="https://dcc.icgc.org/genesets/R-HSA-9014826/pathway-viewer">Example Pathway Mapping &rarr;</a></div>
                </div>
            </div>
            <!-- end of project -->
        </div>
        <div class="wrapper container"></div>
    </section>
        <section class="spacer-cover-2 container">
            <div class="inner-spacer-container-2 container"></div>
        <div class="container wrapper"></div>
    </section>
    <section class="other-cover">
        <div class="wrapper container justify-content-center">
            <div class="row justify-content-center">
                <div style="position:absolute;bottom:20px;">
                    <p class="text-center" style="color:white;font-weight: 300">
                        Copyright &copy; Aly Hassan <script>
                            document.write(new Date().getFullYear())

                        </script>
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- /.container -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script>
        function adjustHeight(e) {
            var e_last = document.getElementById("last-link");
            var last_position = e_last.getBoundingClientRect().top;
            var e_first = document.getElementById("item1");
            var first_position = e_first.getBoundingClientRect().top;


            var e_cover = document.getElementById("p-cover");
            var newheight = last_position - first_position + 250;

            e_cover.style.height = newheight + "px";
            //  console.log(newheight);
        }

        jQuery(document).ready(function($) {

            // Store the window width
            var windowWidth = $(window).width();

            // Resize Event
            $(window).resize(function() {

                // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
                if ($(window).width() != windowWidth) {

                    // Update the window width for next time
                    windowWidth = $(window).width();

                    adjustHeight();

                }

            });


            // scroll button
            var counter = 1;
            var i;
            var targets = [];
            for (i = 1; i < 7; i++) {
                targets[i - 1] = $("#item" + i).offset().top; //document.getElementById("item"+i).getBoundingClientRect().top;
            }

            jQuery("#scroll-button").click(function() {

                var scrollPos = $(window).scrollTop();
                var buffer = window.innerHeight * 0.2;

                // loop through all divs and see which one to scroll to
                var j;
                for (j = 1; j < 7; j++) {
                    if (scrollPos > (targets[j - 1] - buffer - 10)) {

                        if (j == 6) { // if we're at or past last div, go up
                            jQuery('#button-p').html('&darr;');
                            jQuery('html,body').animate({
                                    scrollTop: $("#item1").offset().top - buffer
                                },
                                'slow');
                            break;
                        }

                        continue; // too close to this div or passed it, keep going
                    } else {
                        // scroll to the next div
                        jQuery('html,body').animate({
                                scrollTop: $("#item" + j).offset().top - buffer
                            },
                            'slow');

                        if (j == 6) { // if it's the last div, show up arrow
                            jQuery('#button-p').html('&uarr;')
                        }

                        break;
                    }
                }
            });

        });

        window.addEventListener('load', adjustHeight);

    </script>

</body>

</html>