Month: November 2017

This week I added some finishing touches on the site and worked on my presentation. There is minimal left to do and I will be in Cambridge next week for the Capstone weekend.

This week was busy at work so I wasn’t able to get as much done as I would have liked, but all of my svgs and scroll based animations are done. I have also added resources to some of the bolded text as was posed by my peer reviewers. I finished my intro video, though currently it doesn’t want to render properly. And I have added a select dropdown for the states section, for smaller windows.

At this point I need to make sure I have all of my content up. I need to make sure any bugs are resolved. I also need to finish up my presentation and poster. So hopefully everything goes well and I’m all wrapped up this coming week.

---

This week I have nearly finished all of my svg design, scroll based animations and have done some reconstruction on the site.

I have finished my svg design for my understanding depression page and now only have a couple of svgs to create for the coping page.

I also decided to make all of the info stack (I originally had them in two columns on desktop), since this allows people to better absorb and focus on each particular factoid.

I have also moved the about page into the footer, since it does not actually talk about the site, but describes the site’s creation which it was brought to my attention both in feedback with jen and peer review can be confusing for the intended audience of the site.

I have also reorganized my Nutrition page, because I realized many people wont scroll down to the game and will miss a large part of that page. The game is now at the top with a call to individuals to first use the information on the page before playing the game.

I have also changed the format of the top performing foods table, so that now each nutrient is presented as a button, and the table only appear after a button has been clicked.

I have also added some notifications for users, if they are in an non optimal browsing environment for the site.

I have also continued completion of the introductory video. At this point I need to make sure I have all of my content up. I need to finish my last 1-3 svgs. I need to check compatibility again. And I need to make sure any bugs are resolved. I also need to finish up my presentation and poster.

 

---

This week I put up a bunch of and worked on svgs for the scroll based animated infographics. I had planned on using Snap.js but found it not as useful as I had thought it would be and ended up switching to AOS library. I now have scroll based animations on my infographics and just need to add some more imagery.

I have put together and have complete functionality going on my get help page, with an interactive svg map that allows the user to click on individual states and see resources for them. A modal pops up on click and the state remains highlighted until the modal is closed. It was tricky coding for the special cases of the complex states functioning as a unit and handling modal closing on x button and clicking out of the window.

The positive affirmations page is all done, though I do want to add another version for mobile since I found out that the P5.js webgl smooshes down and doesn’t scale gracefully like say Create.js. I now have randomized quotes, no duplicates on the stage, that switch out a few at a time periodically and rotate slowly. I acknowledge that there is some friction to reading when the shapes are flipped, but I like the idea that this could keep an individual in the space longer to read the text. Also the texture painting does not paint the text in all the same direction on the blocks. I also added a large sphere of planes in around the block space that twinkle to make it feel like a starry night.

I also made some aesthetic changes, that make me like the ambiance of the site much better, like not having the header be fixed, making the background a soft gradient, removing the background on the footer, and adding a little svg as a divider above the footer.