Design and SEO for a single page dynamic website with AJAX

Question

I designed a website in which the whole site is contained within one page (index.php). Within the page, <section> tags define different parts of the site (home, contact, blog, etc.)
Navigation is achieved by buttons that are always visible, and when clicked use javascript to change the visibility of the sections, so that only one is shown at any time.
More specifically, this is done by using the hash in the URL and handling the hashchange event. This results in URLs such as www.site.com/#home (the default if no other hash is present) and www.site.com/#contact.
I want to know if this is a good design. It works, but I get the feeling there must be a better way to achieve the same thing? To clarify, I was aiming for the site that loaded all the main content once, so that there were no more page loads after the initial load, and moving between sections would be smoother.
On top of this, another problem is introduced concerning SEO. The site shows up in google, but if for example, a search query contains a term in a specific section, it still loads the default #home page when clicked, not the specific section the term was found in. How can I rectify this?
Finally, one of the sections is a blog section, which is the only section that does not load all at once, since by default it loads the latest post from a database. When a user selects a different post from a list (which in itself is loaded using AJAX), AJAX is used to fetch and display the new post, and pushState changes the history. Again, to give each post a unique URL that can be referenced externally, the menu changes the URL which is handled by javascript, resulting in URLs such as www.site.com/?blogPost=2#blog and www.site.com/?blogPost=1#blog.
These posts aren't seen by google at all. Using the Googlebot tool shows that the crawler sees the blog section as always empty, so none of the blog posts are indexed.
What can I change?

Answer 1

First, build the site normally and give a normal URL for each page and then let google index the page 
after that, progressively enhance the site with JS/Ajax.
When a link is followed, use JavaScript to transform the current page into the target page.
change the URL to the URL that would have been loaded if you were not using JavaScript Using pushstate 
Make sure you listen for history events so you can transform the page back when the back button is clicked.

This all results in a situation such as :

• User arrives at  /foo from Google
• /foo contains all the content for the /foo page
• User clicks the link to /bar
• JavaScript changes the content of the page to match what the user would have got from going to /bar directly and sets URL to /bar with pushState.