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.