Personal Website Final Project By Teodora Lupu

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: http://www.mountainphotography.com/

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

Plugins used in the website For User Interface Design: Justified Gallery: http://miromannino.github.io/Justified-Gallery/ Creates an elegant layout for image galleries Parallax: http://pixelcog.github.io/parallax.js/ Creates cool scroll effect FancyBox: http://fancybox.net/ Allows images to pop up with description in gallery

Spotify APi API Link: https://developer.spotify.com/web-api/ JavaScript client-side wrapper: https://github.com/jmperez/spotify-web-api-js 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

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!

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

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

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!