-
Notifications
You must be signed in to change notification settings - Fork 1
/
InterMSA-Website.html
217 lines (211 loc) · 14.8 KB
/
InterMSA-Website.html
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
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="InterMSA Website Description">
<link rel="icon" type="image/png" href="icons/favicon.ico"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.typekit.net/mpp0mgy.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="project.css">
<title>Ali Haider | InterMSA Website</title>
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"></span>
<a href="index.html" class="navbar-brand">
Ali Haider
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="index.html#AboutMe" class="nav-link m-2 menu-item nav-active">About</a>
</li>
<li class="nav-item">
<a href="index.html#Experience" class="nav-link m-2 menu-item">Experience</a>
</li>
<li class="nav-item">
<a href="index.html#Projects" class="nav-link m-2 menu-item">Projects</a>
</li>
<li class="nav-item">
<a href="index.html#Contact" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid header">
<div class="row">
<div class="col-12 center-flex title">
<h1>InterMSA Website</h1>
</div>
</div>
<div class="row">
<div class="offset-lg-1 col-lg-10">
<div class="row synopsis">
<div class="col-lg-4">
<h2><u>Client</u></h2>
<h5 class="d-lg-none">InterMSA</h5>
</div>
<div class="col-lg-4">
<h2><u>Date</u></h2>
<h5 class="d-lg-none">December 2020 - February 2021</h5>
</div>
<div class="col-lg-4">
<h2><u>Type</u></h2>
<h5 class="d-lg-none">Website</h5>
</div>
</div>
<div class="row" style="margin-top: 2vh;">
<div class="col-lg-4 center-flex d-none d-lg-block">
<h5>InterMSA</h5>
</div>
<div class="col-lg-4 center-flex d-none d-lg-block">
<h5>December 2020 - February 2020</h5>
</div>
<div class="col-lg-4 center-flex d-none d-lg-block">
<h5>Website</h5>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid project">
<div class="row d-none d-lg-block">
<div class="col-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-xl-6 center-flex project-text">
<h2>Description</h2>
<p>InterMSA is an organization that works to synergize Muslim Student Associations in order to foster community growth, develop lifelong bonds, and enable Muslims to attain new levels of excellence. Through the services InterMSA provides, tomorrow’s leaders are given the opportunity to engage in professional, spiritual, and leadership initiatives to transform them into catalysts of change within their communities. As an entity, InterMSA is dedicated to establishing and maintaining MSA unity among universities.</p>
</div>
<div class="col-xl-6 center-flex">
<img src="images/InterMSA Description.png" alt="InterMSA Description">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-xl-6 center-flex project-text">
<h2>Problem</h2>
<p>As a newer organization, InterMSA was in need of a way to effectively brand themselves and showcase their services. Many ideas were suggested and implemented - such as social media platforms, mailing lists, and referral-based advertising - but none were able to provide a consistent and organized method of disseminating information. Rather, many of the primary offerings of the InterMSA were left to remain lost and inaccessible to the public, making it increasingly difficult for the organization to gain much needed momentum.</p>
</div>
<div class="col-xl-6 center-flex">
<img src="images/InterMSA Problem.png" alt="InterMSA Problem">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-xl-6 center-flex project-text">
<h2>Approach</h2>
<p>After much discussion with the board, it was finally decided that a website would be the best approach to address the requirements of the InterMSA. Familiar with my experiences from other similar projects, the InterMSA board contracted my services to create a fully immersive web platform. Using modern frameworks and design principles encapsulated within Angular and Material Design, I was quickly able to prototype a project that exceeded their expectations. The finished product was hosted using Amazon solutions, with budgeting in mind to meet the needs of a new organization.</p>
</div>
<div class="col-xl-6 center-flex">
<img src="images/InterMSA Approach.png" alt="InterMSA Approach">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-xl-6 center-flex project-text">
<h2>Outcome</h2>
<p>As a result, the InterMSA now has a single platform that is capable of providing a clean and informative interface that presents the offerings of the organization. Additionally, many of the logistical processes have also been formalized, including member registration, event feedback collection, and handling of incoming business or Non-Profit inquires. Overall, the website has been an effective asset in driving the growth and mobility of the InterMSA.</p>
</div>
<div class="col-xl-6 center-flex">
<img src="images/InterMSA Outcome.png" alt="InterMSA Outcome">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row d-lg-none">
<div class="col-12">
<div class="mobile-section">
<h2>Description</h2>
<p>InterMSA is an organization that works to synergize Muslim Student Associations in order to foster community growth, develop lifelong bonds, and enable Muslims to attain new levels of excellence. Through the services InterMSA provides, tomorrow’s leaders are given the opportunity to engage in professional, spiritual, and leadership initiatives to transform them into catalysts of change within their communities. As an entity, InterMSA is dedicated to establishing and maintaining MSA unity among universities.</p>
<img src="images/InterMSA Description.png" alt="InterMSA Description">
</div>
<div class="mobile-section">
<h2>Problem</h2>
<p>As a newer organization, InterMSA was in need of a way to effectively brand themselves and showcase their services. Many ideas were suggested and implemented - such as social media platforms, mailing lists, and referral-based advertising - but none were able to provide a consistent and organized method of disseminating information. Rather, many of the primary offerings of the InterMSA were left to remain lost and inaccessible to the public, making it increasingly difficult for the organization to gain much needed momentum.</p>
<img src="images/InterMSA Problem.png" alt="InterMSA Problem">
</div>
<div class="mobile-section">
<h2>Approach</h2>
<p>After much discussion with the board, it was finally decided that a website would be the best approach to address the requirements of the InterMSA. Familiar with my experiences from other similar projects, the InterMSA board contracted my services to create a fully immersive web platform. Using modern frameworks and design principles encapsulated within Angular and Material Design, I was quickly able to prototype a project that exceeded their expectations. The finished product was hosted using Amazon solutions, with budgeting in mind to meet the needs of a new organization.</p>
<img src="images/InterMSA Approach.png" alt="InterMSA Approach">
</div>
<div class="mobile-section">
<h2>Outcome</h2>
<p>As a result, the InterMSA now has a single platform that is capable of providing a clean and informative interface that presents the offerings of the organization. Additionally, many of the logistical processes have also been formalized, including member registration, event feedback collection, and handling of incoming business or Non-Profit inquires. Overall, the website has been an effective asset in driving the growth and mobility of the InterMSA.</p>
<img src="images/InterMSA Outcome.png" alt="InterMSA Outcome">
</div>
</div>
</div>
</div>
<div class="container-fluid demo">
<div class="row">
<div class="col-xl-6 offset-xl-3 col-md-8 offset-md-2 col-10 offset-1 center-flex">
<h1>Demo</h1>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/Qmdpshj26jw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h4><a href="https://intermsa.com" target="_blank">Project Page</a></h4>
</div>
</div>
</div>
<div class="container-fluid footer">
<div class="row" style="height: 100%;">
<div class="col-lg-4 col-12 center-flex d-none d-lg-block">
© Syed Ali Haider 2021
</div>
<div class="col-lg-4 col-12 center-flex" style="height: 100%;">
<a class="center-flex" target="_blank" href="https://www.linkedin.com/in/syed-a-haider/" rel="noopener">
<img src="icons/linkedin.svg" alt="Linkedin Logo">
</a>
<a class="center-flex" target="_blank" href="https://github.com/syedahaider97" rel="noopener">
<img href src="icons/github.svg" alt="Github Logo">
</a>
</div>
<div class="col-lg-4 col-12 center-flex d-lg-none">
© Syed Ali Haider 2021
</div>
<div class="col-lg-4 col-12 location center-flex">
<a href="https://www.google.com/maps/place/Harrison,+NJ" target="_blank">Harrison, NJ</a>
</div>
</div>
</div>
<img id="ScrollToTop" onclick="topFunction()" src=icons/up-arrow.svg alt="Up Arrow">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="global.js"></script>
<script>
$('.carousel').carousel({
interval: false
})
</script>
</body>
</html>