PageSourceSearch

https://sarahshelleyuxportfolio.netlify.app/whooshmail

html sarahshelleyuxportfolio.netlify.app collected 2026-10-03 11:22:12 UTC 32,802 bytes, 537 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=5327c96f-d7b0-43ce-84be-80ccd99268f3
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <link href='https://d33wubrfki0l68.cloudfront.net/bundles/a163060dd332711de832e1a45942db07547d6325.css' rel='stylesheet'/>
10    
11    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
12    <title>Sarah Shelley - UX Designer/Developer</title>
13    <link rel="icon" href="./imgs/spiralLogo.png">
14    <link href="https://fonts.googleapis.com/css2?family=Aguafina+Script&family=Anton&family=Montserrat:wght@200&display=swap" rel="stylesheet">
15    <link href='https://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
16    <link href="https://fonts.googleapis.com/css2?family=Antic+Slab&family=Cardo&family=Codystar&family=Great+Vibes&family=Jacques+Francois+Shadow&family=Junge&family=Nanum+Myeongjo&family=Old+Standard+TT&family=Open+Sans+Condensed:wght@300&family=Playfair+Display:ital@1&family=Ruthie&family=Tenor+Sans&family=Vast+Shadow&display=swap" rel="stylesheet">
17    
18    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
19    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
20    
21    <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 65 bytes, lines 21-22
21
22<script async src="https://www.googletagmanager.com/gtag/js?id=
22UA-130596685-2
vendor: 13 bytes, line 22
22"></script>
23<script>
24  
vendor: 138 bytes, lines 24-28
24window.dataLayer = window.dataLayer || [];
25  function gtag(){dataLayer.push(arguments);}
26  gtag('js', new Date());
27
28  gtag('config', '
28UA-130596685-2
vendor: 5 bytes, line 28
28');
29</script>
29
30
31  </head>
32<body>
33    <header>
34      <nav>
35        <div class="hamburger">
36          <div class="line"></div>
37          <div class="line"></div>
38          <div class="line"></div>
39      </div>
40      <ul class="nav-links">
41          <a href='/'><li class="active" placeholder="">Sarah Shelley</li></a>
42          <a href='/about'><li class="active" onclick="$('html, body').animate({scrollTop: $('.container').offset().top}, 100);"   placeholder="">About</li></a>
43          <div class="dropdown">
44          <li class="active" id="work" onclick="$('html, body').animate({scrollTop: $('.container').offset().top}, 100);"   placeholder="">
45            Work
46            <ul>
47              <li class="active"><a class='pre' href='/work'>ShirtsByMike</a></li>
48              <li class="active"><a href='/lowestlane'>LowestLane</a></li>
49            </ul>
50          </li>
51        </div>
52          <a href="#links_2" class="toggle"><li class="active" placeholder="">Contact</li></a>
53        </ul>
54        <a href="https://www.behance.net/sarahshelleyuxdesign" target="_blank" class="fa fab fa-behance"></a>
55          <a href="https://www.linkedin.com/in/sarah-shelley-a50010160/" target="_blank" class="fa fa-linkedin"></a>
56          <a href="https://github.com/sargef" target="_blank" class="fa fa-github"></a>
57        </nav>
58      </header> 
59
60      <!-- Top container banner -->
61        <section class="container_1">
62        </section>
63              <div class="top_img" style="background-image:url('./imgs/wmMain_min2.jpg')" alt="Image of Sarah Shelleys mobile landing collage and water background">
64                <div class="ripples_text">WhooshMail - Email Campaign</div>
65          </div>
66        
67<!-- Case study 1 -->
68    <div class="container_wrapper_2" id="mikes">
69        <section class="container_case_list_1">
70            <div class="case_1">
71                <h1></h1>
72              <div class="block_1">
73                <ul>
74                    <li><pre>Client:   WhooshMail</pre></li>
75                    <li><pre>Role:      UX Designer</pre></li>
76                    <li><pre>Task:      Email Platform Redesign</pre></li>
77                </ul>
78              </div>
79
80            <div class="block_3" id="overview">
81                <h1>Overview</h1>
82               <p>
83                My task was to design two user flows for an email marketing campaign web app called WhooshMail. 
84                <br><br>
85                The two flows will include the same screens, but with two different user roles. The first role being the “Admin” role and will have the highest level of access while the second role, “Basic”, will only have access to a few features. 
86                <br><br>
87                WhooshMail is looking to improve the experience for both of these roles with their audience of small business owners and entrepreneurs.
88                </p> 
89            </div>
90
91            <div class="video-content">
92            <iframe secure="true" samesite="None" class="video" style="max-height:100%" style="max-width:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vQmgIK-8m8G07lgfYiz8plMcehwJ1B6STy-oP1fLDTRhvwWXnM_kETbEjAL8Ms_nwx0tvK0PQDQQAj9/embed?start=true&loop=true&delayms=1500" crossorigin="anonymous" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
93                Your browser does not support the video tag.
94            </iframe>
95          </div>
96
97          <div class="block_3" id="painpoints">
98            <h1>Pain Points</h1>
99          <ol>
100              <li>The process can be clunky and confusing</li>
101              <br>  
102              <li>There are a lot of competitors so we need to stay competitive and have similar features</li>
103              <br>  
104              <li>What features are accessible to each user role can be confusing</li>
105          </ol>
106         
107          <div class="scroll-animation revealedBox goRight">
108            <img class="frogy contentBox" src="https://d33wubrfki0l68.cloudfront.net/84385097c99bdeff0c12b9a265f7cde9fab679dd/a0055/imgs/cloud.png" alt="Photo of new website hero, cloud!" />
109          </div>
110        </div>
111
112        <div class="block_3" id="goals">
113            <h1>Goals</h1>
114            
115      <h5>Through improving the experience for our main user roles 
116        (admin and basic), we’d like to see an increase in user 
117        retention and also the number of campaigns sent. We would like to achieve the following;
118      </h5>
119          <ol>
120              <li>Increase the first month retention by 20%</li>
121              
122              <br>  
123              <li>Increase daily active users by 10%</li>
124              <br>  
125              <li>Increase campaigns sent by 20%</li>
126          </ol>
127        </div>
128            
129          <div class="block_3" id="affinity">
130            <h1>User Personas & Storyboards</h1>
131            <h3>Basic User - Jenny</h3>
132            <img class="jenny"src="https://d33wubrfki0l68.cloudfront.net/b7d125aa4fbb60ca4d0e1a6ef616af5c94f68641/8f8b9/imgs/jennycollage.jpg">
133
134            <h3>Admin User - Alice</h3>
135            <img class="jenny"src="https://d33wubrfki0l68.cloudfront.net/c3737ead29768e922816ca37bf22d84aad643666/659e3/imgs/alicecollage.jpg">
136        </div>
137
138        <div class="block_6" id="competative">
139            <h2>Competitive Analysis</h2>
140            <div class="block_6_content">
141                
142                <h1>MailChimp</h1>
143                <h3>Strengths</h3>
144                <ol>
145                    <li>Marketing Tips</li>
146                    <br>
147                    <li>Analytics</li>
148                    <br>
149                    <li>How to Instructions</li>
150                    <br>
151                </ol>
152                <h3>Weaknesses</h3>
153                <ol>
154                    <li>Sign up is everywhere, too much</li>
155                    <br>
156                    <li>Website is busy</li>
157                </ol>
158                <h1>Constant Contact</h1>
159                <h3>Strengths</h3>
160                <ol>
161                    <li>Simple layout</li>
162                    <br>
163                    <li>Help features & page</li>
164                    <br>
165                    <li>Downloadable guides</li>
166                </ol>
167                <h3>Weaknesses</h3>
168                <ol>
169                    <li>Only 2 pricing plans</li>
170                    <br>
171                    <li>Email templates hard to find</li>
172                </ol>
173                <h1>Mailer Lite</h1>
174                <h3>Strengths</h3>
175                <ol>
176                    <li>Simple layout</li>
177                    <br>
178                    <li>5 pricing plans</li>
179                    <br>
180                    <li>Guides and tutorials</li> 
181                    <br>   
182                </ol>
183                <h3>Weaknesses</h3>
184                <ol>
185                    <li>Too much content on the website</li>
186                </ol>
187            </div>
188
189           
190
191            <div class="block_7" id="summary">
192              <h1>Analysis Assumptions</h1>
193             <p>
194                I think users are interested in getting <span class="highlight">good value for money, competitive prices</span> for their plan based on being a first time user. They haven’t used the platform before so knowing if they are getting good value for money is based on assumption. 
195                <br><br>
196                I would assume that users would like to see an <span class="highlight">easy to navigate platform</span> with simple <span class="highlight">step by step instructions</span> on how to set up campaigns and automation.
197                <br><br>
198                I don’t think it’s a good idea to have too much content around the platform as this would easily become confusing and make users feel lost.
199                <br><br>
200                Users for this email platform would typically be through word of mouth and advertising, whether it be via ads, google or social media, users would definitely be comparing different platforms for this type of service so it is very important that the platform <sp
200an class="highlight">stay competitive</span> comparably to others offering the same service.
201                <br><br>
202                I would assume most users creating a campaign on this platform would be using a desktop/laptop to create their campaign as it is a lot easier than trying to use a mobile or iPad with so many features and attributes to set up. Internet speed would definitely be a major factor, so creating too much content would easily slow the process to an unreasonable level. Keeping the platform <span class="highlight">simple but effective</span> is a challenge but a really important factor.
203                <br><br>
204                Designing a platform that users feel comfortable and can complete a campaign quickly would be beneficial as by looking at current competition, this seems to be a challenge throughout.
205              </p> 
206          </div>
207
208                <div class="block_8">
209                    <h2>Sketches</h2>
210                    <h4>Basic User</h4>
211                    <div class="block_8_content">
212                      <div class="b_8_1">
213                        <img class="tshirt_sketch_1" src="https://d33wubrfki0l68.cloudfront.net/0c48a863f5d281e6f143ccb0d6dbddf1d9feed31/11b2c/imgs/emailbasicsketches2.jpg" alt="whooshMail Basic website sketches"/> 
214                      </div>
215                    </div>
216                </div>
217
218                <div class="block_8">
219                    <h2>Sketches</h2>
220                    <h4>Admin User</h4>
221                    <div class="block_8_content">
222                      <div class="b_8_1">
223                        <img class="tshirt_sketch_1" src="https://d33wubrfki0l68.cloudfront.net/0c48a863f5d281e6f143ccb0d6dbddf1d9feed31/2c2b8/imgs/emailadminsketches2.jpg" alt="whooshMail Admin website sketches"/> 
224                      </div>
225                    </div>
226                </div>
227
228                 <div class="block_7" id="summary">
229                     <h1>Sketches Approach</h1>
230                   <p>
231                    After completing the research on the layouts of the Email Campaigns on different platforms, i tried to replicate an easy to navigate layout. 
232                    <br><br>
233                    I tried sketching different simple designs with each of the screens needed with a minimalistic approach and subtle editing tools, including pop-outs in areas of detail and straight forward text descriptions.
234                    <br><br>
235                    I tried different alignment layouts deciding on both left and right for editing and centered for template choosing. I chose a basic layout for the Admin email campaign page with previous campaigns added below the available templates. I tried to add the ‘How to’ section on the basic email campaign at the top center of the page along with a video, description and photos of further steps. The templates for this page were added below so the user would have a clear idea of the steps needed from here before starting the process. 
236                    <br><br>
237                    I chose a familiar approach with the editing page with chosen templates in the center and editing tools on the right hand side of the page for the Admin version and the Basic version, i chose to add the editing tools on the left as well as a send section to be reviewed by admin. I also included this feature in the final page for the basic send email page so that the user could send it to admin to be reviewed before the final click to send.
238                    </p> 
239                </div> 
240<!--
241                <div class="block_3" id="overview">
242                    <h1>Tweaks to Wireframes</h1>
243                   <p>
244                    The layout of the sketches were modified a little due to size constraints and just generally looked more appealing with a little adjustment of areas. Most of the wireframes were kept the same as the sketches.
245                    <br><br>
246                    Designing the Analytics mockups were a little tricky, organising content in a way that is visually pleasing while providing all the needed content for the user. The designs dramatically changed from sketch to mockups as more details is naturally required for the medium fidelity designs. I think improving on adding a little more detailed outline in the sketches may be a good idea to help solve the fine detail layout when commencing the designs. This will be something that I will be concentrating on in the future.
247                    </p> 
248                </div> -->
249
250            
251                <div class="block_8" id="whoosh-wireframes">
252                    <h2>Wireframes</h2>
253                    <h4>Basic User</h4>
254                    <div class="block_8_content">
255                      <div class="b_8_1">
256                        <img class="whooshmail_wireframes_1" src="https://d33wubrfki0l68.cloudfront.net/fb7573c2ae838077d57bad6a6085206522301455/be197/imgs
256/emailbasicwireframes.jpg" alt="Collage photo of wireframes for basic user whooshmail"/> 
257                      </div>
258                    </div>
259                </div>
260
261                <div class="block_8" id="whoosh-wireframes">
262                    <h2>Wireframes</h2>
263                    <h4>Admin User</h4>
264                    <div class="block_8_content">
265                      <div class="b_8_1">
266                        <img class="whooshmail_wireframes_2" src="https://d33wubrfki0l68.cloudfront.net/c89aaf605db36fe3aa947df8cca174c72c3fc642/1790f/imgs/emailadminwireframes.jpg" alt="whooshMail photo of Admin User website wireframes"/> 
267                      </div>
268                    </div>
269                </div>
270
271                <div class="block_8">
272                    <!-- <h2>Wireframes</h2>
273                    <h4>Admin User</h4> -->
274                    <div class="block_8_content">
275                      <div class="b_8_1">
276                        <img class="whooshmail_wireframes_2" src="./imgs/Color&FontPallet.png" alt="whooshMail picture of color palette & typography"/> 
277                      </div>
278                    </div>
279                </div>
280
281                <div class="block_10" id="usability">
282                    <h1>Usability Testing</h1>
283                    <a href="https://www.figma.com/proto/C73kJYsZRsprxXLD9WRBbE/BasicEmailCampaignAndAnalytics?node-id=28%3A29&viewport=42%2C468%2C0.08094710111618042&scaling=min-zoom" crossorigin="anonymous" target="_blank"><h5 class="shrink"><span class="highlight">Link to Basic Prototype:</span> https://www.figma.com/proto/C73kJYsZRsprxXLD9WRBbE/BasicEmailCampaignAndAnalytics?node-id=28%3A29&viewport=42%2C468%2C0.08094710111618042&scaling=min-zoom</h5></a>
284                    
285                    <a href="https://www.figma.com/proto/x6XdsDKQ0e8GTYepHImfOv/EmailCampaignAndAnalytics?node-id=1%3A2&viewport=-1271%2C960%2C0.5&scaling=min-zoom" crossorigin="anonymous" target="_blank"><h5 class="shrink"><span class="highlight">Link to Admin Prototype:</span> https://www.figma.com/proto/x6XdsDKQ0e8GTYepHImfOv/EmailCampaignAndAnalytics?node-id=1%3A2&viewport=-1271%2C960%2C0.5&scaling=min-zoom</h5></a>
286                    <h4><span class="highlight">Tasks</span></h4>
287                  <h5>
288                    How would you create and edit an email marketing template?
289                    <br><br>
290                    How would you send the marketing template, once all required tasks are completed?
291                    <br><br>
292                    How would you find the Analytics page of the email campaign you just sent?
293                </h5>
294                <br>
295                <h4><span class="highlight">Questions for Participants</span></h4>
296                <h5>
297                    Can you tell me if there was anything in particular that you enjoyed through your navigation process?
298                    <br><br>
299                    Did you find anything frustrating at all? If so, why was that if you could please explain?
300                    <br><br>
301                    Do you have any other feedback for me?
302                  </h5>
303                  <br>
304                  
305              </div>
306
307            <div class="block_16" id="testanalysis">
308                <h2>Usability Test Analysis - Basic User</h2>
309                <h3>What went well?</h3>
310               <ul>
311                 <li><span class="highlight">Navigation</span> straight forward and <span class="highlight">easy to use.</span></li>
312                 <br>
313                 <li>Users understood well the layout and options available.</li>
314                 <br>
315                 <li>Users liked the layout design.</li>
316                 <br>
317                 <li>Participants could find their way to each requested section during the user test.</li>
318                 <br>
319                 <li>Structure makes it <span class="highlight">quick</span> to perform actions needed to the requested template completion.</li>
320               </ul>
321               <br>
322                  <h3>What needs to change?</h3>
323                  <ul>
324                    <li><span class="highlight">Button</span> Call to action <span class="highlight">descriptions</span> need changing.</li>
325                    <br>
326                    <li>Add a pop up for send admin <span class="highlight">email review feedback.</span></li>
327                    <br>
328                    <li><span class="highlight">‘Send test’ button</span> needs to be smaller in comparison to the ‘Send’ button and also location changed.</li>
329                    <br>
330                    <li><span class="highlight">Button locations</span> need to change within the layout.</li>
331                    <br>
332                    <li>A home page would be a nice feature for this user test</li>
333                  </ul> 
334            </div>
335
336            <div class="block_16" id="testanalysis">
337                <h2>Usability Test Analysis - Admin User</h2>
338                <h3>What went well?</h3>
339               <ul>
340                 <li><span class="highlight">Navigation</span> straight forward and easy to use</li>
341                 <br>
342                 <li>Users understood well the layout and options available</li>
343                 <br>
344                 <li>Users liked the layout design</li>
345                 <br>
346                 <li>Participants could find their way to each requested section during the user test</li>
347                 <br>
348                 <li>Structure makes it quick to perform actions needed to the requested template completion</li>
349               </ul>
350               <br>
351                  <h3>What needs to change?</h3>
352                  <ul>
353                    <li><span class="highlight">Button</span> Call to action <span class="highlight">descriptions</span> need changing</li>
354                    <br>
355                    <li><span class="highlight">More edit option</span> interactions included in final design</li>
356                    <br>
357                    <li><span class="highlight">‘Send test’ button</span> needs to be smaller in comparison to the ‘Send’ button</li>
358                    <br>
359                    <li><span class="highlight">Button locations</span> need to change within the layout</li>
360                  </ul> 
361            </div>
362
363                <div class="block_20" id="vids">
364                  <h3 id="no-back">Mockups - Basic User</h3>
365                      <video class="mock-vids"  controls poster="./imgs/BasicMockupsScreen.png">
366                        <source src="https://d33wubrfki0l68.cloudfront.net/49e8f870b7230f49cfea6f20060eb666822a3959/4506e/imgs/basicuservid.mp4" type="video/mp4">
367                      Your browser does not support the video tag.
368                      </video>
369                  </div>
370
371                  <div class="block_20" id="vids">
372                    <h3 id="no-back">Mockups - Admin User</h3>
373                        <video class="mock-vids" controls poster="./imgs/AdminMockupsScreen.png">
374                          <source src="https://d33wubrfki0l68.cloudfront.net/650697fe62fbe83bac67553a19059a4de6d6bdf4/0b472/imgs/adminmockupsvid.mp4" type="video/mp4">
375                        Your browser does not support the video tag.
376                        </video>
377                    </div>
378
379                <!-- <div class="block_16" id="learnings">
380                  <h2>Next Steps</h2>
381                  <p>
382                    The next steps would be to alter button sizes and labelling. Then add the edit functions to all edit titles on ‘Edit template page’. Once the full functioning elements were added, i would personally suggest another round of user testing to get it right. 
383                    <br><br>
384                    After this user testing was completed. Any adjustments noted and then the High Mockup design should commence. This would firstly involve adding the colour palette, pictures, diagrams, videos etc. 
385                    <br><br>
386                    A functioning search bar for templates would need to be added, thu
386s more template screens and interactions added.
387                    <br><br>
388                    A ‘Help’ section and ‘Create your own’ template pages and interactions would need to be added.
389                    <br><br>
390                    Secondly, the interactions should be completed and tested. Once testing was complete and all functions are working correctly, i would suggest giving the client a presentation, gathering any adjustment requests or changes from the client and bringing them back to adjust before handing them over to the development team.
391                  </p> 
392              </div>         -->
393                  
394            <div class="block_16" id="learnings">
395              <h2>Learnings</h2>
396            <p>
397              I learnt some very valuable lessons from this project including how to sufficiently use interactions to cater for all users using color interactions with the hover feature in figma. 
398              <br><br>
399              I also learnt from the user research that the high fidelity mockups can really take a big facelift compared with the medium fidelity mockups based on the feedback from users.
400              <br><br>
401              Placement of items is so important and i had not realised this until this stage in the assignment. Confusion is so easily caused by placing buttons and alike elements in the wrong sections or even not naming the buttons clearly enough that users would understand the functionality.
402              <br><br>
403            </p>
404            
405              <h3>What i would do differently next time?</h3>
406              I would not do too many things differently next time, except maybe spend more time making sure items are appropriately placed before the user test phase. 
407              <br><br>
408              I would also play around with font styles more in order to get the perfect styles that fit the personality of the brand.
409              <br><br>
410              I’d like to also learn how to add some more interactions during the medium fidelity mockup stage to gather a wider feedback from the participants within the user test phase.
411              </p> 
412          </div>
413
414        <div class="block_17">
415          <h3 class="other_cases">Other Case Studies</h3>
416          <div class="block_17_content">
417            <div class="b_17_1">
418          <h5>Shirts By Mike</h5>
419          <div onclick='location.href="work.html#mikes"' class="item">
420            <div class="feature_img_Container">
421              <img class="image vh-fix" src="https://d33wubrfki0l68.cloudfront.net/87b945e1441900232b8885f98b902ab0e8559484/bc80b/imgs/shirtb_min2.jpg" alt="Picture of Shirts by Mike Case Study Landing Page Design">
422                <div class="dtl">
423                    <h3>Case Study</h3>
424                    <p>T-shirt website; 'Shirts by Mike'. Company objectives included giving the website a fresh new design, Increase sales and launch a featured t-shirt of the month. </p>
425                    <a href='/work#mikes'>Read More</a>
426              </div>
427            </div>
428          </div>
429        </div>
430            <div class="b_17_1">
431              <h5>Lowest Lane</h5>
432              <div class="item" onclick='location.href="lowestlane.html"'>          
433                <div class="feature_img_Container">
434                    <img  class="image vh-fix" src="https://d33wubrfki0l68.cloudfront.net/0c9b093ffc8a9b46129582aee25b5ee123389d56/65f82/imgs/ppic_min2.jpg" alt="Picture of Email Marketing Campaign Case Study Landing Page Design">
435                    <div class="dtl">
436                        <h3>Case Study</h3>
437                        <p>Created for WhooshMail, An email Marketing Campaign. Company goals involved Increasing first month retention and campaigns sent by 20% ..</p>
438                        <a href='/lowestlane'>Read More</a>
439                  </div>
440                </div>
441              </div>   
442            </div>
443          </div>
444        </div>
445        </div>
446            </section>
447        </div>
448          <footer id="links_2">
449            <p class="links-byline_2">Let's Chat! Contact me via email below</p>
450            <a class="btn_2"onclick='location.href="mailto:[email protected]
450om"' href="#">[email protected]</a>
451          </footer>
452
453          
453<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
453
454          
454<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js" type="text/javascript"></script>
454
455          
455<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
455
456
457
458      
458<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
458
459      
459<script type="text/javascript">var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="https://i1155.photobucket.com/albums/p559/scrolltotop/arrow54.png" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:!1,shouldvisible:!1},scrollup:function(){this.cssfixedsupport||this.$control.css({opacity:0});var t=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);t="string"==typeof t&&1==jQuery("#"+t).length?jQuery("#"+t).offset().top:0,this.$body.animate({scrollTop:t},this.setting.scrollduration)},keepfixed:function(){var t=jQuery(window),o=t.scrollLeft()+t.width()-this.$control.width()-this.controlattrs.offsetx,s=t.scrollTop()+t.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:o+"px",top:s+"px"})},togglecontrol:function(){var t=jQuery(window).scrollTop();this.cssfixedsupport||this.keepfixed(),this.state.shouldvisible=t>=this.setting.startline?!0:!1,this.state.shouldvisible&&!this.state.isvisible?(this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]),this.state.isvisible=!0):0==this.state.shouldvisible&&this.state.isvisible&&(this.$control.stop().animate({opacity:0}
459,this.setting.fadeduration[1]),this.state.isvisible=!1)},init:function(){jQuery(document).ready(function(t){var o=scrolltotop,s=document.all;o.cssfixedsupport=!s||s&&"CSS1Compat"==document.compatMode&&window.XMLHttpRequest,o.$body=t(window.opera?"CSS1Compat"==document.compatMode?"html":"body":"html,body"),o.$control=t('<div id="topcontrol">'+o.controlHTML+"</div>").css({position:o.cssfixedsupport?"fixed":"absolute",bottom:o.controlattrs.offsety,right:o.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"Scroll to Top"}).click(function(){return o.scrollup(),!1}).appendTo("body"),document.all&&!window.XMLHttpRequest&&""!=o.$control.text()&&o.$control.css({width:o.$control.width()}),o.togglecontrol(),t('a[href="'+o.anchorkeyword+'"]').click(function(){return o.scrollup(),!1}),t(window).bind("scroll resize",function(t){o.togglecontrol()})})}};scrolltotop.init();</script>
459  
460      
460<script type="text/javascript" src="//use.typekit.net/rws3een.js"></script>
460
461      
461<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
461
462      
462<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
462
463      
463<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
463
464      
464<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
464
465      
465<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
465
466      
466<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/js/jquery.ripples.js"></script>
466 
467     
467<script>
468
469//Magnify heading text 
470$(".landing_body_text").hover(function(){
471       $(this).animate({fontSize: "32px"}, 300)
472   }, function() {
473      $(this).animate({fontSize: "20"}, 300)  
474   });
475
476//ripples
477   $(document).ready(function() {
478    try {
479        $('.top_img').ripples({
480            resolution: 256,
481            perturbance: 0.04
482        });
483    }
484    catch (e) {
485        $('.error').show().text(e);
486    }
487});
488
489//Navigation Hamburger control
490const hamburger = document.querySelector(".hamburger");
491const navLinks = document.querySelector(".nav-links");
492const links = document.querySelectorAll(".nav-links li");
493const contact = document.querySelector(".toggle");
494
495hamburger.addEventListener("click", () => {
496  navLinks.classList.toggle("open");
497  links.forEach(link => {
498    link.classList.toggle("fade");
499  });
500});
501
502contact.addEventListener("click", () => {
503  navLinks.classList.remove("open");
504  links.style.opacity = "1,!important";
505});
506
507// hamburger.addEventListener("touchend", () => {
508//   navLinks.classList.toggle("open");
509//   links.forEach(link => {
510//     link.classList.toggle("fade");
511//   });
512// });
513
514//Scroll to next sections
515// $(document).on("click", "#about", function () {
516//     window.scrollTo({
517//     top: 100,
518//     left: 100,
519//     behavior: 'smooth'
520//     });
521// });
522
523// Hover shadows for nav links
524$(document).ready(function(){
525					$(".active").on({
526
527						click: function(){
528              $(this).css("textShadow",'rgb(239,79,72) 7px -1px 2px');
529              $(this).css("font-size", "50px");
530						}  
531					});
532				});
533
534    
535</script>
535
536</body>
537</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.