PageSourceSearch

https://sarahshelleyuxportfolio.netlify.app/lowestlane

html sarahshelleyuxportfolio.netlify.app collected 2026-10-03 11:22:11 UTC 31,002 bytes, 550 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/c8af725f88d2441d0a325afc84fdd06eea84db4d.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    
13    <title>Sarah Shelley - UX Designer/Developer</title>
14    <link rel="icon" href="./imgs/spiralLogo.png">
15    <link href="https://fonts.googleapis.com/css2?family=Aguafina+Script&family=Anton&family=Montserrat:wght@200&display=swap" rel="stylesheet">
16    <link href='https://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
17    <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">
18    
19    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
20    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
21    
22    <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 65 bytes, lines 22-23
22
23<script async src="https://www.googletagmanager.com/gtag/js?id=
23UA-130596685-2
vendor: 13 bytes, line 23
23"></script>
24<script>
25  
vendor: 138 bytes, lines 25-29
25window.dataLayer = window.dataLayer || [];
26  function gtag(){dataLayer.push(arguments);}
27  gtag('js', new Date());
28
29  gtag('config', '
29UA-130596685-2
vendor: 5 bytes, line 29
29');
30</script>
30
31
32  </head>
33<body>
34    <header>
35      <nav>
36        <div class="hamburger">
37          <div class="line"></div>
38          <div class="line"></div>
39          <div class="line"></div>
40      </div>
41      <ul class="nav-links">
42          <a href='/'><li class="active" placeholder="">Sarah Shelley</li></a>
43          <a href='/about'><li class="active" onclick="$('html, body').animate({scrollTop: $('.container').offset().top}, 100);"   placeholder="">About</li></a>
44          <div class="dropdown">
45          <li class="active" id="work" onclick="$('html, body').animate({scrollTop: $('.container').offset().top}, 100);"   placeholder="">
46            Work
47            <ul>
48              <li class="active"><a class='pre' href='/work'>ShirtsByMike</a></li>
49              <li class="active"><a href='/whooshmail'>WhooshMail</a></li>
50            </ul>
51          </li>
52        </div>
53          <a href="#links_2" class="toggle"><li class="active" placeholder="">Contact</li></a>
54        </ul>
55        <a href="https://www.behance.net/sarahshelleyuxdesign" target="_blank" class="fa fab fa-behance"></a>
56          <a href="https://www.linkedin.com/in/sarah-shelley-a50010160/" target="_blank" class="fa fa-linkedin"></a>
57          <a href="https://github.com/sargef" target="_blank" class="fa fa-github"></a>
58        </nav>
59      </header> 
60
61      <!-- Top container banner -->
62        <section class="container_1">
63        </section>
64              <div class="top_img" style="background-image:url('./imgs/ppic_min2.jpg')" alt="Image of Sarah Shelleys mobile landing collage and water background">
65                <div class="ripples_text">Lowest Lane - Super Store</div>
66          </div>
67        
68<!-- Case study 1 -->
69    <div class="container_wrapper_2" id="mikes">
70        <section class="container_case_list_1">
71            <div class="case_1">
72                <h1></h1>
73              <div class="block_1">
74                <ul>
75                    <li><pre>Client:   Lowest Lane</pre></li>
76                    <li><pre>Role:      UX Designer</pre></li>
77                    <li><pre>Task:      Mobile App Design</pre></li>
78                </ul>
79              </div>
80
81            <div class="block_3" id="overview">
82                <h1>Overview</h1>
83               <p>
84                The goal of this case study was to produce a prototype of a <span class="highlight">grocery shopping app</span> which addresses pain points to grocery shoppers and helps to combat these pain points.
85                <br><br>
86                Initial research by interviewing participants is conducted in order to get an idea of the majority of pain points that users face.
87                </p> 
88            </div>
89
90            <div class="video-content">
91            <video style="max-width: 100%" style="max-height: 100%" controls poster="./imgs/groceryResearch.png">
92              <source src="https://d33wubrfki0l68.cloudfront.net/0e12807e2cc01d52f26de1e7e1f5a37864bab38e/5e9fa/imgs/groceryresearch.mp4" type="video/mp4">
93            Your browser does not support the video tag.
94            </video>
95          </div>
96
97            <div class="block_3" id="painpoints">
98                <h1>Approach</h1>
99              <p>
100                
101                  In trying to determine an approach to my grocery shopping app, i needed to include <span class="highlight">conducting interviews</span> with a group of users who will most likely use this app or benefit from the app.
102                  <br><br> 
103                  I want to discover the types of customers they are, by asking questions about how their normal days activities would pan out also by asking about their hobbies. <br>
104                  This information will help me better understand their main goals when doing shopping or reasons for shopping at a store or via an app.
105                  <br><br>
106                  In conducting these interviews, i am aiming to discover what their goals are that would benefit from the app and <span class="highlight">pain points</span> they have from shopping in order to use this information to structure the app to suit their needs.
107                  <br><br>
108
109                  <h1>Target Audience</h1>
110
111                  I aim to find different age brackets in order to cover a wider audience but not specifically. 
112                  <br><br>
113                  The target audience in my opinion is very broad in age bracket but begins to close when the words <strong><em>‘tech savvy shopping’</em></strong> is targeted. 
114                  <br><br>
115                  The app will most likely be used by those that already use technology to do shopping or those that like the idea of modern technology and also do the shopping for their household already.
116                  <br><br>
117                  I have decided to filter out candidates by using a <span class="highlight">short survey first</span> to target my intended audience via social media, then select a group to survey based on the variety of the audience, for example, different age brackets and times they shop per week.
118                  <br><br>
119                  I want to capture as many different answers as possible to filter out the most obvious pain points when shopping and hope to capture shopping pleasers for my next part of the process of my shopping app design.
120                  </p>
121             
122              <div class="scroll-animation revealedBox goRight">
123                <img class="frogy contentBox" src="https://d33wubrfki0l68.cloudfront.net/b50af18a8f241d092105b673fe379d44bb4729fa/cc771/imgs/herolady.png" alt="Photo of designed website hero, Hero lady!" style="width:340px;height:480px;"/>
124              </div>
125            </div>
126
127            <div class="block_3" id="goals">
128              <h1>Link to Survey</h1>
129              
130        <h5>
131          <a href="https://surveyfrontend38.herokuapp.com/join_course_survey" crossorigin="anonymous" target="_blank">https://surveyfrontend38.herokuapp.com/join_course_survey</a>
132        </h5>
133          </div>
134            
135          <div class="block_3" id="affinity">
136            <h1>Affinity Diagram</h1>
137            <img src="https://d33wubrfki0l68.cloudfront.net/0d72016ebbf5e884fd5d9a7fa6ad2644bc0a0f39/9d3aa/imgs/shopping-affinity-diagram.png">
138        </div>
139
140            <div class="block_4" id="problemanalysis">
141                <h1>User Research Analysis</h1>
142               <p>
143                After completing the research phase and looking over the affinity diagram. I discovered that participants and potential users to the grocery shopping app found the following issues within their current grocery shopping experiences;  
144                <br><br>
145                <p></p>
146                <ol>
147                  <li class="no_animate"><span class="highlight">Finding products</span> is an issue.</li>
148                  <br>
149                  <li class="no_animate">Not only are <span class="highlight">product sizes</span> of the same product <span class="highlight">
149not grouped together</span> in most shopping apps sizing of products against any type of chart is missing.</li>
150                  <br>
151                  </ol>
152                <p>In bringing the product size variety to the same page, this knocks out two pain points. It will show a difference in product size against one another and also stops the unnecessary scrolling to find the correct size.
153                </p>
154                <br>
155                <ol>
156                  <li class="no_animate"><span class="highlight">Meal pairing</span> is also something that a couple of users wished that shopping apps contained.</li>
157                  <br>
158                  </ol>
159                  <p>
160                 Being able to find a meal that they want to cook and then have the items for that meal provided within the same page to add to the shopping cart.
161                </p>
162                <ol>
163                  <li class="no_animate"><span class="highlight">Delivery substitutes</span> was an issue amongst participants.</li>
164                  <br>
165                  </ol>
166                  <p>
167                 <span class="highlight">Creating a substitute messenger feature</span> within the app prior to delivery to confirm that customers are happy with their substitutes picked out for them before they are delivered.
168                <br><br>
169                This could be designed so that there is a <span class="highlight">snapshot or list of items</span> that were substituted <span class="highlight">sent to the customer prior to delivery.</span> <br><br>Giving the customer a time limit to reply if they are ok with it. 
170                <br><br>The customer would know ahead of time that this snapshot will be sent if needed, so they are still given the control of what is going to be the delivered end result.
171              <br><br>
172              </p>
173                I imagine this could bring in some time constraints to the store and may result in a new problem if customers were to decline on the substituted product. 
174                <br><br>
175                To save that time constraint, <span class="highlight">if customers decline the substitution, then a full refund</span> of the item could be a good way to finalise a decline result. Giving customers 30 mins to reply with their decision could be an option also. <br>
176                <br>This would give the customer power over what their final delivered products would be, taking away the pain point and frustration they feel of getting items that were not previously consented to. 
177              <br><br>
178                Substitution is a nice feature that current grocery apps have, but because Quality is so important to the users, the quality checking and final decision should lay in the hands of the customer.
179                </p> 
180            </div>
181
182            <div class="block_7" id="summary">
183              <h1>Solution for Design</h1>
184             <p>
185              I plan to make the <span class="highlight">product sizes in one page.</span> For instance, Coca-cola. Instead of finding a 6 pack of Coca-cola, then deciding after finding the product, that i want to buy a 12 pack. I can scroll down the same page to find it. Not have to go back and search through every soft drink product again. 
186              <br><br>
187              For the <span class="highlight">meal pairing,</span> i plan to make products available for purchase within the meal recipe page. This would include a <span class="highlight">calender</span> where users can choose which day of the week they want to have that meal and at the end of the saving meals to the calender. They can print off a meal planner for the week, while also having all of their ingredients conveniently added to the shopping cart. 
188              <br><br>
189              For <span class="highlight">delivery,</span> i plan to make a feature within the app for <span class="highlight">substitute confirmation,</span> sent to the customer prior to delivery but featuring a time limit for reply. 
190              <br><br>
191              If a reply is not received within a half hour time limit, <span class="highlight">customers opt in for a refund</span> at the time of signing up to the app on this occasion. They will also have the option to change their mind within their settings to opt out of a refund, thus accepting the substitute picked for them, if the reply time expires. 
192              </p> 
193          </div>
194            
195                <div class="block_8">
196                    <h2>Sketches</h2>
197                    <div class="block_8_content">
198                      <div class="b_8_1">
199                        <img class="tshirt_sketch_1" src="https://d33wubrfki0l68.cloudfront.net/8ba8deb7acf50904b04b1198c1b4606ba84f4574/3e627/imgs/grocerysketchescollage.jpg" alt="T-shirt webite desktop sketches"/> 
200                      </div>
201                    </div>
202                </div>
203
204                <div class="block_20">
205                  <h3>Wireframes</h3>
206                      <div id="drag-container">
207                        <div id="spin-container">
208                          <!-- Add your images (or video) here -->
209                          
210                          <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/bb6aa1128b773f54fde29fde45b7df5e3e29e435/6fe29/imgs/homescreenloggin2.jpg"  alt="">
211                          <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/01f628ed2b72554dbb4aac24895154c6e80c19c4/cc5f8/imgs/signup2.jpg"  alt="">
212                          <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/33d85b21f9
212045a9014ac8fbe2f984a69d7daa559/5ef3f/imgs/settings2.jpg"  alt="">
213                          <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/ac4dbf7d9c5ec03c2b349a1732f3e0c553a40ac9/0ecb7/imgs/productpagehome2.jpg"  alt="">
214                          <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/d54a31140f943b2d6c8732224a3f744e244b3ddd/3e185/imgs/productisle2.jpg"  alt="">
215                          <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/79f6ecba354fc551ea4f94afe4b4c3e24edd2c73/db343/imgs/productdetail2.jpg"  alt="">
216                          <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/d034f2cc40a7ffb6a08e87851cf6b6b5794b1ef2/16376/imgs/mealplanner2.jpg"  alt="">
217                          <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/a9e306d4b0846e7e2e0417f7a7165fc675d27339/eb637/imgs/homescreen2.jpg"  alt="">
218                      
219                          <!-- Example add video  -->
220                          <!-- <video controls autoplay="autoplay" loop>
221                            <source src="./imgs/groceryResearch.mp4" type="video/mp4">
222                          </video> -->
223                      
224                          <!-- Text at center of ground -->
225                        </div>
226                        <div id="ground"></div>
227                      </div>
228                    </div>
229                  
230
231              <div class="block_10">
232                <h1>Usability Testing</h1>
233                <a href="https://www.figma.com/proto/ZvznI61OQwGO4pXsOO7Wj5/GroceryApp?node-id=5%3A124&scaling=contain" crossorigin="anonymous" target="_blank"><h5 class="shrink"><span class="highlight">Link to Prototype:</span> https://www.figma.com/proto/ZvznI61OQwGO4pXsOO7Wj5/GroceryApp?node-id=5%3A124&scaling=contain</h5></a>
234                <h4><span class="highlight">Tasks</span></h4>
235              <h5>
236                How would you create an account?
237                <br><br>
238                How would you add a grocery item to the shopping cart?
239                <br><br>
240                How would you find a recipe and add a recipe item to your cart?
241            </h5>
242            <br>
243            <h4><span class="highlight">Questions for Participants</span></h4>
244            <h5>
245              Did you find the app easy to use?
246              <br><br>
247              What parts were most enjoyable to use?
248              <br><br>
249              Did you find the app frustrating to use in any areas? If so, why?
250              <br><br>
251              Do you have any other feedback?
252              </h5>
253              <br>
254              
255          </div>
256
257        <div class="block_16" id="testanalysis">
258          <h2>Usability Test Analysis</h2>
259          <h3>What went well?</h3>
260         <ul>
261           <li>The <span class="highlight">Navigation</span> was <span class="highlight">simple</span> to use.</li>
262           <br>
263           <li>The <span class="highlight">Meal Planner</span> section was <span class="highlight">enjoyable</span> to find</li>
264           <br>
265           <li><span class="highlight">Sizing choice</span> on the one page was appreciated</li>
266         </ul>
267         <br>
268            <h3>What needs to change?</h3>
269            <ul>
270              <li>The <span class="highlight">naming of the ‘Select Sizing’</span> in product section needs to change to ‘Choose’ to be more familiar.</li>
271              <br>
272              <li>Change <span class="highlight">layout of Signup page</span></li>
273              <br>
274              <li><span class="highlight">Meal Planner</span> could potentially be <span class="highlight">changed to ‘Recipes’</span></li>
275              <br>
276              <li><span class="highlight">Better explanation on the substitution ‘opt in’</span> with maybe a ‘more…’ section with a better and more detailed description.</li>
277            </ul> 
278      </div>
279
280  <div class="block_16" id="learnings">
281    <h2>Learnings</h2>
282   <p>
283    Overall i think the app was a success in the design. Users found it easy to navigate through in general and found the features useful. 
284    <br><br>
285      There is still a little work to be done in refining the extra needed elements such as ‘opt in’ extended description and also the change of button label for the ‘Select Sizing’ on the product page. Possibly also change the ‘Meal Planner’ to ‘Recipes’.
286    <br><br>
287      The next steps for the grocery app should be to add a fully functional product cart, product selections and Delivery setup. 
288      <br><br>
289      The app should also have a choice before adding items to cart of choosing either, ‘Delivery’ or ‘Pick up’. This could then navigate to Delivery times/options for the Delivery option and Pick up date/time for the Pick up option.
290      <br><br>
291      The Grocery app has all that it needs to gain user insights in the current pain points as gathered from the initial user reseach as it is and the next steps would be a fully functional prototype with all screens included. 
292      <br><br>
293      This i suggest, would also need to be user tested again once it was  completed/refined before sending the design to the Developer team to begin product development.
294    </p> 
295</div>
296
297<div class="block_17">
298  <h3 class="other_cases">Other Case Studies</h3>
299  <div class="block_17_content">
300    <div class="b_17_1">
301  <h5>Shirts By Mike</h5>
302  <div onclick='location.href="work.html#mikes"' class="item">
303    <div class="feature_img_Container">
304      <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">
305        <div class="dtl">
306            <h3>Case Study</h3>
307            <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>
308            <a href='/work#mikes'>Read More</a>
309      </div>
310    </div>
311  </div>
312</div>
313    <div class="b_17_1">
314      <h5>WhooshMail</h5>
315      <div class="item" onclick='location.href="whooshmail.html"'>          
316        <div class="feature_img_Container">
317            <img  class="image vh-fix" src="https://d33wubrfki0l68.cloudfront.net/68d48f8f44e29f21480c84064fa7d5b661f3aa0e/f2a92/imgs/wmmain_min2.jpg" alt="Picture of Email Marketing Campaign Case Study Landing Page Design">
318            <div class="dtl">
319                <h3>Case Study</h3>
320                <p>Created for WhooshMail, An email Marketing Campaign. Company goals involved Increasing first month retention and campaigns sent by 20% ..</p>
321                <a href='/whooshmail'>Read More</a>
322          </div>
323        </div>
324      </div>   
325    </div>
326  </div>
327</div>
328
329
330        </div>
331            </section>
332</div>
333          <footer id="links_2">
334            <p class="links-byline_2">Let's Chat! Contact me via email below</p>
335            <a class="btn_2"onclick='location.href="mailto:[email protected]
335om"' href="#">[email protected]</a>
336          </footer>
337
338          
338<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
338
339          
339<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js" type="text/javascript"></script>
339
340          
340<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
340
341      
342      
342<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
342
343      
343<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}
343,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>
343
344      
344<script type="text/javascript" src="//use.typekit.net/rws3een.js"></script>
344
345      
345<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
345
346      
346<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
346
347      
347<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
347
348      
348<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
348
349      
349<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
349
350      
350<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/js/jquery.ripples.js"></script>
350 
351     
351<script>
352
353//Navigation Hamburger control
354const hamburger = document.querySelector(".hamburger");
355const navLinks = document.querySelector(".nav-links");
356const links = document.querySelectorAll(".nav-links li");
357const contact = document.querySelector(".toggle");
358
359hamburger.addEventListener("click", () => {
360  navLinks.classList.toggle("open");
361  links.forEach(link => {
362    link.classList.toggle("fade");
363  });
364});
365
366contact.addEventListener("click", () => {
367  navLinks.classList.remove("open");
368  links.style.opacity = "1,!important";
369});
370
371// hamburger.addEventListener("touchend", () => {
372//   navLinks.classList.toggle("open");
373//   links.forEach(link => {
374//     link.classList.toggle("fade");
375//   });
376// });
377
378
379//Magnify heading text 
380$(".landing_body_text").hover(function(){
381       $(this).animate({fontSize: "32px"}, 300)
382   }, function() {
383      $(this).animate({fontSize: "20"}, 300)  
384   });
385
386//ripples
387   $(document).ready(function() {
388    try {
389        $('.top_img').ripples({
390            resolution: 256,
391            perturbance: 0.04
392        });
393    }
394    catch (e) {
395        $('.error').show().text(e);
396    }
397});
398
399
400// You can change global variables here:
401var radius = 240; // how big of the radius
402var autoRotate = true; // auto rotate or not
403var rotateSpeed = -60; // unit: seconds/360 degrees
404var imgWidth = 120; // width of images (unit: px)
405var imgHeight = 170; // height of images (unit: px)
406
407// Link of background music - set 'null' if you dont want to play background music
408var bgMusicURL = 'https://api.soundcloud.com/tracks/143041228/stream?client_id=587aa2d384f7333a886010d5f52f302a';
409var bgMusicControls = true; // Show UI music control
410
411/*
412     NOTE:
413       + imgWidth, imgHeight will work for video
414       + if imgWidth, imgHeight too small, play/pause button in <video> will be hidden
415       + Music link are taken from: https://hoangtran0410.github.io/Visualyze-design-your-own-/?theme=HauMaster&playlist=1&song=1&background=28
416       + Custom from code in tiktok video  https://www.facebook.com/J2TEAM.ManhTuan/videos/1353367338135935/
417*/
418
419
420// ===================== start =======================
421// animation start after 1000 miliseconds
422setTimeout(init, 1000);
423
424var odrag = document.getElementById('drag-container');
425var ospin = document.getElementById('spin-container');
426var aImg = ospin.getElementsByTagName('img');
427var aVid = ospin.getElementsByTagName('video');
428var aEle = [...aImg, ...aVid]; // combine 2 arrays
429
430// Size of images
431ospin.style.width = imgWidth + "px";
432ospin.style.height = imgHeight + "px";
433
434// Size of ground - depend on radius
435var ground = document.getElementById('ground');
436ground.style.width = radius * 3 + "px";
437ground.style.height = radius * 3 + "px";
438
439function init(delayTime) {
440  for (var i = 0; i < aEle.length; i++) {
441    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
442    aEle[i].style.transition = "transform 1s";
443    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
444  }
445}
446
447function applyTranform(obj) {
448  // Constrain the angle of camera (between 0 and 180)
449  if(tY > 180) tY = 180;
450  if(tY < 0) tY = 0;
451
452  // Apply the angle
453  obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
454}
455
456function playSpin(yes) {
457  ospin.style.animationPlayState = (yes?'running':'paused');
458}
459
460var sX, sY, nX, nY, desX = 0,
461    desY = 0,
462    tX = 0,
463    tY = 10;
464
465// auto spin
466if (autoRotate) {
467  var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
468  ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
469}
470
471// add background music
472// if (bgMusicURL) {
473//   document.getElementById('music-container').innerHTML += `
474// <audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>    
475// <p>If you are reading this, it is because your browser does not support the audio element.</p>
476// </audio>
477// `;
478// }
479
480// setup events
481document.onpointerdown = function (e) {
482  clearInterval(odrag.timer);
483  e = e || window.event;
484  var sX = e.clientX,
485      sY = e.clientY;
486
487  this.onpointermove = function (e) {
488    e = e || window.event;
489    var nX = e.clientX,
490        nY = e.clientY;
491    desX = nX - sX;
492    desY = nY - sY;
493    tX += desX * 0.1;
494    tY += desY * 0.1;
495    applyTranform(odrag);
496    sX = nX;
497    sY = nY;
498  };
499
500  this.onpointerup = function (e) {
501    odrag.timer = setInterval(function () {
502      desX *= 0.95;
503      desY *= 0.95;
504      tX += desX * 0.1;
505      tY += desY * 0.1;
506      applyTranform(odrag);
507      playSpin(false);
508      if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
509        clearInterval(odrag.timer);
510        playSpin(true);
511      }
512    }, 17);
513    this.onpointermove = this.onpointerup = null;
514  };
515
516  return false;
517};
518
519document.onmousewheel = function(e) {
520  e = e || window.event;
521  var d = e.wheelDelta / 20 || -e.detail;
522  radius += d;
523  init(1);
524};
525
526
527//Scroll to next sections
528// $(document).on("click", "#about", function () {
529//     window.scrollTo({
530//     top: 100,
531//     left: 100,
532//     behavior: 'smooth'
533//     });
534// });
535
536// Hover shadows for nav links
537$(document).ready(function(){
538					$(".active").on({
539
540						click: function(){
541              $(this).css("textShadow",'rgb(239,79,72) 7px -1px 2px');
542              $(this).css("font-size", "50px");
543						}  
544					});
545				});
546
547    
548</script>
548
549</body>
550</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.