Deploying a single page portfolio page with Wordpress and the Bootstrap Framework

We recently moved to Des Moines, Iowa and my wife has been job hunting. She's had a portfolio online using Behance ProSite, and the predefined templates are visually good. But if you really need to curate your content, they don't offer any options for real markup, and you have to really fight the admin panel to make it look good.

My wife was really stuck on the idea of a single page site with a static header for navigation to each section. If you're thinking about doing this, just use Bootstrap. Their implementation of a Scroll Spy plugin is the easiest to implement that I've seen and like most grid frameworks it eliminates all the repeated word of setting up the page as fluid, non-fluid, multiple columns, etc. It's really a bit of overkill for a simpler site like this, but still pretty effective.

Also a bit of overkill is Wordpress to managing the content. All it's really being used is for adding posts with images to query in the template. No posts are actually being used and the blog isn't even rendered.

The actual portfolio section of the page is a custom JS slider I wrote from scratch. I opted for multiple sliders using a single viewport. Sections on the right are automatically created from posts with a given category, using attached images. Images are automatically resized to fit the slider and pop out into a lightbox.

The code's pretty sloppy and the server side portions are just in the template files and functions.php. At any rate, I have it hosted at Github and it might serve as a good example of something like this for someone else.

See my wife's site at ruaarnold.com and follow her on twitter.

Hooch

I wrote a microframework for PHP a while back because other PHP frameworks are usually too big and clumsy, and using vanilla PHP is obviously an excercise in pain sooner or later.

I've decided to throw it up on Github, and called it Hooch.

Here's the basic usage:

require_once 'Twig/Autoloader.php';
require_once 'hooch.php';

Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem('templates');
$twig = new Twig_Environment($loader, array('debug' => true,
    'strict_variables' => true));

// Assuming ../ is a non-publicly accessible path,
// put your DB info there.
$config = parse_ini_file("../config.ini", false);

// Instantiate the App class. Handles path routing and such.
$app = new App(true);

// Retrieve the base URL path from the config file.
// You must set this if you want anything to work at all.
// basePath should be equal to the base path of the URL.
// For example, if it's http://127.0.0.1/~test/, set basePath to
// /~test/
$app->basePath = $config['basePath'];

// These are things we will use in every template, more or less.
$twig->addGlobal('basePath', $basePath);

// Use a Preprocessor to implement authentication, etc.
// This is a bad example, but you get it. You're smart.
class AuthProcessor extends Preprocessor {
    public function test($path) {
        global $authenticated;
        return $authenticated;
    }
}
// If you're not using a preprocessor, omit this line.
$app->preprocess(new AuthProcessor());


// Handle the home page. True anonymous functions require
// PHP 5.3.0 and above.

$app->get('/', function($args) use ($twig) {
    $template = $twig->loadTemplate('home.html');
    return $template->render(array('someVal' => true));
});
// Look, even PHP can have moustaches!


// If you're on an older version of PHP:
function second_page($args) {
    global $twig;
    $template = $twig->loadTemplate('person.html');
    return $template->render(array('person' => $args['name']));
}

$app->get('/person/:name', second_page);

// Handle POST requests
// Here's an example of a redirect as well.
$app->post('/save', function ($args) use ($twig, $app) {
    if (isset($_POST['name'])) {
        $app->seeother('/person/' + $_POST['name']);
    } else {
        // Throw a 404.
        $app->notFound();
    }
});

// Need to return some JSON for an AJAX call?

$app->post('/saveAJAX', function ($args) use ($app) {
    return $app->apiSimple(function() use ($args) {
        return array(
            'test' => 1,
            'another-test' => 2
            );
    });
});


// And the thing that makes it all happen:
$app->serve();

You'll also need an .htaccess to redirect everything to your index.php file. This one works:

RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [L]