Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/justinharringa/frontend-nanodegree-resume

Javascript version of my resume
https://github.com/justinharringa/frontend-nanodegree-resume

Last synced: 7 days ago
JSON representation

Javascript version of my resume

Awesome Lists containing this project

README 

        
## What is this project about?

This project is part of a Udacity course where I built a responsive resume.



## How do I run it?

Simply open up index.html in a browser. :)



## How do I complete this project?



1. Go to the [Javascript Basics course](https://www.udacity.com/course/ud804) and select "View Course Materials."

2. Go through the videos and assignments in this course to learn the JavaScript necessary to build your resume.

3. Review your work against the Project Rubric (on the next page).

4. When you are satisfied with your project, submit it according to the Submission Instructions on the next page.



### By the end:

Your resume will look something like this

![](http://i.imgur.com/pWU1Xbl.png)



And your repository will include the following files:



* **index.html**: The main HTML document. Contains links to all of the CSS and JS resources needed to render the resume, including resumeBuilder.js.

* **js/helper.js**: Contains helper code needed to format the resume and build the map. It also has a few function shells for additional functionality. More on helper.js further down.

* **js/resumeBuilder.js**: This file is empty. You should write your code here.

* **js/jQuery.js**: The jQuery library.

* **css/style.css**: Contains all of the CSS needed to style the page.

* **README.md**: 

The GitHub readme file.

* and some images in the images directory.



## Your starting point...

### js/helper.js

Within helper.js, you’ll find a large collection of strings containing snippets of HTML. Within many snippets, you’ll find placeholder data in the form of `%data%` or `%contact%`.



Each string has a title that describes how it should be used. For instance, `HTMLworkStart` should be the first `
` in the Work section of the resume. `HTMLschoolLocation` contains a `%data%` placeholder which should be replaced with the location of one of your schools.



### Your process:

The resume has four distinct sections: work, education, projects and a header with biographical information. You’ll need to:



1. Build four JSON objects, each one representing a different resume section. The objects that you create need to follow the schema below exactly. Property names are case-sensitive. Make sure your JSON objects are formatted correctly using JSONlint.com.



* `bio` contains:

        

            name : string

            role : string

            contacts : an object with

                  mobile: string

                  email: string 

                  github: string

                  twitter: string 

                  location: string

            welcomeMessage: string 

            skills: array of strings

            biopic: url

            display: function taking no parameters



* `education` contains:

      

            schools: array of objects with

                 name: string

                 location: string

                 degree: string

                 majors: array of strings

                 dates: integer (graduation date)

                 url: string

            onlineCourses: array with

                 title: string

                 school: string

                 date: integer (date finished)

                 url: string

            display: function taking no parameters



* `work` contains

          

            jobs: array of objects with

                 employer: string 

                 title: string 

                 location: string 

                 dates: string (works with a hyphen between them)

                 description: string 

            display: function taking no parameters



* `projects` contains:



            projects: array of objects with

                  title: string 

                  dates: string (works with a hyphen between them)

                  description: string

                  images: array with string urls

            display: function taking no parameters



2. Iterate through each JSON object and append its information to index.html in the correct section.

 * First off, you’ll be using jQuery’s `selector.append()` and `selector.prepend()` functions to modify index.html. `selector.append()` makes an element appear at the end of a selected section. `selector.prepend()` makes an element appear at the beginning of a selected section.

   * Pay close attention to the ids of the `
`s in index.html and the HTML snippets in helper.js. They’ll be very useful as jQuery selectors for `selector.append()` and `selector.prepend()`

* You’ll also be using the JavaScript method `string.replace(old, new)` to swap out all the placeholder text (e.g. `%data%`) for data from your resume JSON objects.

* Here’s an example of some code that would add the location of one your companies to the page:

   * `var formattedLocation = HTMLworkLocation.replace("%data%", work.jobs[job].location);`

   * `$(".work-entry:last").append(formattedLocation);`

 * Use the mockup at the page of this document as a guide for the order in which you should append elements to the page.

3. The resume includes an interactive map. Do the following to add it. 

 * In resumeBuilder.js, append the googleMap string to `
`.

 * In index.html, uncomment the Google script element: ``

 * In helper.js, at the bottom of the file, uncomment code to initialize map and set fitBounds.

4. All of your code for adding elements to the resume should be within functions. And all of your functions should be encapsulated within the same objects containing your resume data. For instance, your functions for appending work experience elements to the page should be found within the same object containing data about your work experience.

5. Your resume should also `console.log()` information about click locations. On line 90 in helper.js, you’ll find a jQuery onclick handler that you’ll need to modify to work with the `logClicks(x,y)` function above it.

6. It’s possible to make additional information show up when you click on the pins in the map. Check out line 174 in helper.js and the Google Maps API to get started.