1. Personal Website Final Project
By Teodora Lupu

2. Goal of the project
To provide a digital platform to present my portfolio outside of an academic resume
My priorities for the project:
To learn the Spotify API
To display my portfolio in a meaningful way
To build an aesthetically pleasing user interface
My main source of inspiration:

3. Project progress Dynamic HTML & Interactivity through jQuery
JSON Spotify API integrated
Extras:
3 jQuery plug ins used
JavaScript objects used

4. Plugins used in the website
For User Interface Design:
Justified Gallery:
Creates an elegant layout for image galleries
Parallax:
Creates cool scroll effect
FancyBox:
Allows images to pop up with description in gallery

5. Spotify APi API Link: https://developer.spotify.com/web-api/
JavaScript client-side wrapper:
Allows you to use Spotify API in JavaScript
How to use the API:
Sign up / register your app
Receive Secret Key
Key verifies your authorization to make queries to the API
Generate access token on serve side using secret key
Spotify adds this extra level of security to prevent programmers from revealing authentication code to client side, which would allow others to easily hack Spotify websites and use the API without authorization
Authentication:
Spotify provides 4 methods of authentication
I used ”client credentials”
allows you to get an access token by supplying client ID and secret key
Must be done on the server side

6. Demo About Page: Music Page: LinkedIn embedded! Parallax plug in
Design Page:
Justified Gallery plug in
FancyBox plug in
Parallax plug in
Media Page:
YouTube videos embedded to HTML!
Music Page:
Parallax plug in
Justified Gallery plug in
Dynamic HTML
Spotify API
Array of JavaScript objects
Filter by genre
Filter by playlist
Can click on playlist icons to view and play playlist!
Embedded Spotify follow button widget!

7. Code review Four HTML pages represent each of the pages in the website
External CSS file describes the general look of each of the pages
Layout
Font
Hover/click behavior of main nav
Justified gallery code in jQuery
Parallax code in embedded CSS and HTML

8. Code review: the fun stuff (Spotify API)
How it works:
PHP code on the server side uses client ID and secret key to generate access token
Access token is set on the client side in JavaScript
Now you can query the API for data that you need
spotifyApi.getUserPlaylists('tiuapa')
I use the query data to populate my array of JavaScript objects that contains information on each of the playlists
I use the array of JS objects to filter through the data
Image icons are generated using jQuery data and styled with CSS

9. Future Prospects Publish it! Improve the About page
Embed my actual resume to the About page using jQuery UI plug in
Decide on what to put in the main section
Improve the Media page
Add capabilities to follow my YouTube channel
Add more videos and use dynamic HTML drop downs to categorize them
Keep improving the UI!