AJAXing a WordPress custom theme

Question

I'm trying to make a custom theme for my girlfriend's cooking and baking blog. I would like to make it so that there are no page refreshes when blog post thumbnail link is clicked. Instead I want the blog post content to be dynamically loaded with ajax into an article with id="main-content" inside the home.php, and I would also like to enable deep linking for individual posts. Here is what the site will kinda look like(still not finished): http://natalija.co.nf/ Each category has a slider inside which 3 thumbnail links to posts will be displayed and the section with the article inside which the posts should load will be displayed at the bottom of the page, just before the footer. Here is the code for my home.php and single.php pages:

home.php

<?php get_header(); ?>
<?php
$args = array(
    'orderby' => 'id',
    'order' => 'ASC',
    'hide_empty' => '0',
    'exclude' => '1'
);
$categories = get_categories($args);
foreach($categories as $category) {
    ?>

    <section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
        <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
            <h1><?php echo $category->name; ?></h1>
            <div class="wrapper">
                <ul class="slider">

                <?php
                    $args = array (
                        'post_status' => 'publish',
                        'category_name' => $category->slug,
                        'nopaging' => true,
                    );
                    $custom_query = new WP_Query( $args );

                    if ( $custom_query->have_posts() ) {
                        while ( $custom_query->have_posts() ) {
                            $custom_query->the_post();

                                // begin your slider loops in here
                                ?>

                                    <li class="slide">
                                        <a href="<?php echo get_permalink(); ?>">
                                            <?php the_post_thumbnail(); ?>
                                            <div class="bubble">
                                                <h5><?php echo get_the_title(); ?></h5>
                                            </div>
                                        </a>
                                    </li>

                    <?php } // end $custom_query loop

                    } else {
                        // no posts found
                    }

                    // reset the postdata
                    wp_reset_postdata();
                ?>

                </ul>
                <img class="previous" src="wp-content/themes/Natalija/images/arrow-transparent.png" alt="random" data-stellar-ratio="1.7">
                <img class="next" src="wp-content/themes/Natalija/images/arrow-transparent.png" alt="random" data-stellar-ratio="1.7">
            </div>
        </article>
    </section>
<?php
} // end $categories loop
?>
<section>
            <article id="main-content">

            </article>
        </section>
<?php get_footer(); ?>

single.php

    <div class="post-wrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

        <h1><?php the_title(); ?></h1>

        <?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>

        <div class="entry">

            <?php the_content(); ?>

            <?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>

            <?php the_tags( 'Tags: ', ', ', ''); ?>

        </div>

        <?php edit_post_link('Edit this entry','','.'); ?>

    </div>

<?php comments_template(); ?>

<?php endwhile; endif; ?>
</div>

I tried following a few online tutorials on ajax but I just couldn't pull it off. Can anyone help me out with this?