Interactive Resume
(Original resume format was created by Chris Coyier at CSS-Tricks.)
Demo at http://whatsupcory.github.io/GeoResume/
Phase 1 - Completed
Develop an interactive resume. Display a resume on the left hand side hovering over a world map.
The world map will have pins that corresponds to job positions. As a site user scrolls over different job positions in
the map will zoom to those locations. The site will also have a way to display portfolio of work from each position.
Also there needs to be a pop out business card with vcard capability.
Phase 2 - In Progress
Develop a php backend for the site that allows users to create their own subdomain (different domain) and import their LinkedIn job history information and create their own interactive resume.
Notice
I plan on coding this myself, but if you could teach me a few things or have ideas on how to improve it then you are welcome to contribute.
==============
- Quote bubbles for mini references
- Download PDF & GitHub buttons
- Added Jquery Fancybox image viewer
- Optional Basemaps: Mapbox or Stamen
- VCard/QRcode
- Shareaholic Sticky Note
- Linkedin integration for easy creation of new resume
- Slow Map Panning Option
- Add Foursquare history to the map
- Cover Page option with private links
==============
Install these files and personalize the information in index.html
HTML
index.html // Please signup and use your own mapbox.com account for the base map.
Resume_CoryMacVie.pdf // Export your own PDF from the docx provided.
Resume_CoryMacVie.docx // Provided to style your resume like the website.
CSS // Create CSS folder
style.css // Customize to your desired preference.
tooltip.css // Styles the pop up bubbles on mini references.
control.MiniMap.css // Styles the mini map in bottom right corner. Please use your own mapbox account.
JavaScript // Create JS Folder
tooltips.js // Controls the pop up bubbles on mini references.
control.minimap.js // Controls mini map.
Images // Create JS Folder
college.png
work.png
volunteer.png
pdf_icon.png
paperclip_sm.png
headshot1.jpg // Replace this with your own personal image. Make it professional.
github-logo.png // Please include this link for others.
Tips
- When setting "map.setView" in the html, off set the lat/long so they land right of the resume page. Make sure the zoom level is where you want it to be. Use testing.html to show you center coordinates on the page. Again use your own basemap from mapbox.
- When creating markers on your map, first lay them in mapbox.com to find the lat/long (they are arranged in reverse order long/lat).