update purrsonality page

[thuyvyng]

i think we should just redesign the whole layout of this page

here are things i think we should do (please add if u agree disagree or have other thoughts), we can sep tickets but i think centralized place is good

• make the visualization bigger and cooler (maybe add headphones, full body, a bow, make it a little more detailed -- can be seperate ticket)
• be able to play music
• make the buttons look nicer (add pictures to top tracks)
• maybe we turn the short term medium term and long term into a drop down? they look cleaner in my opinion?
• i think we should update the cat characteristics/what audio features we use to analyze

its currently

• whiskers: song duration
• cat color: minor or major
• ears: danceable
• opacity: loud
• background gradient: energy levels
• tongue : tempo (The overall estimated tempo of a track in beats per minute (BPM). )

not used: -valence (A measure from 0.0 to 1.0 describing the musical positiveness conveyed by a track)

• speechiness ( Speechiness detects the presence of spoken words in a track. The more exclusively speech-like the recording (e.g. talk show, audio book, poetry), the closer to 1.0 the attribute value. Values above 0.66 describe tracks that are probably made entirely of spoken words. Values between 0.33 and 0.66 describe tracks that may contain both music and speech, either in sections or layered, including such cases as rap music. Values below 0.33 most likely represent music and other non-speech-like tracks. )
• instrumental: Predicts whether a track contains no vocals. "Ooh" and "aah" sounds are treated as instrumental in this context. Rap or spoken word tracks are clearly "vocal". The closer the instrumentalness value is to 1.0, the greater likelihood the track contains no vocal content. Values above 0.5 are intended to represent instrumental tracks, but confidence is higher as the value approaches 1.0.
• acousticness number A confidence measure from 0.0 to 1.0 of whether the track is acoustic. 1.0 represents high confidence the track is acoustic.

[thuyvyng]

idea 1:

[thuyvyng]

idea 2: like the above but move all the info and the times into the right scroll bar and make it scrollable idea 3: do something like that but move the time and info into the jumbotron idea 4: DOUBLE sidebar -- left side has like the controls and info and right side is like top songs and stuff

[thuyvyng]

idea 5:

so far this makes the most sense to me bc i like that the time buttons are above the songs, which is what really changes then we could add top artists underneath it kinda like musicScapes

-personally i prefer vertical list over the horizontal cards we had before bc its easier to read and more responsive

however im not quite sure where i wanna put the visualization tips yet part of me wants to put in the jumbotron, part of me wants to make like a giant button somewhere that explain the aspects of the cat when u click on it, part of me wants to create a nav bar and make it static

[thuyvyng]

[thuyvyng]

[thuyvyng]

i think we should add more distinctive changes to the cat -- more interestring, when i change the timespan my cat looks pretty similar

quicker ideas:

• add more cat colors
• maybe change the number of whiskers -- use mode (either 2 or 3 whiskers)
• add cat eyebrows / change eye color
• add cat cheeks!!

longer ideas:

random fixes to make cat look better:

• angles whiskers

[thuyvyng]

messed w cat a bit, dont think it should be too difficult to add cheeks / other stuff

[thuyvyng]

cat color change --- valence cheek color: loudness - really loud red, softer pink eye color: acoustic (maybe) whisker numver : major minor