Clinton.io

A web portfolio creation platform written in PHP.

Project Information

History

This project was created for this portfolio, and was born out of frustration at existing portfolio builders. Not wanting to manually edit HTML files I opted to create a simple portfolio editor.

Description

Portfolios are common in creative industries, but not all designers and developers can create a robust web based solution due to resource or skill limitations. This portfolio software separates design and other concerns so that a low skilled HTML designer can easily implement their own custom design, as is common with portfolios, and still be able to utilise the power of a web application.

Using a templating engine all of the layout files can be restructured or redesigned with only very simple PHP being used, as is shown in the below code snippet:

<?php
foreach($categories as $category) { ?>
<div class="category">
	<div class="category-header">
		<a href="?category=<?=urlencode($category['name'])?>"><?=htmlspecialchars($category['name'])?></a>
	</div>
	<div class="category-body">
		<?php
		echo (!empty($category['projects']) ? '' : 'No projects in this category');
		
		for($x = 0; $x < count($category['projects']) && ($x < 2); $x++) { 
			$project = $category['projects'][$x];
		?>
		<div class="widget">
			<div class="widget-header">
				<div class="title">
					<a href="?project=<?=urlencode($project['title'])?>"><?=htmlspecialchars($project['title'])?></a>
				</div>
				<div class="year">
					<?=$project['daterange']?>
				</div>
				<div class="clear"><!-----></div>
			</div>
			
			<div class="widget-body">
				<div class="logo">
					<a href="<?=($project['location'] ?: './layout/img/empty.png')?>" rel="lightbox" title="Project Thumbnail">
						<img class="thumb" src="<?=($project['location'] ?: './layout/img/empty.png')?>" title="Project thumbnail" />	
					</a>
				</div>
				<div class="description">
					<?=$project['description']?>
				</div>
			</div>
		</div>
		
		<?php } ?>
		
		<div class="clear"><!-----></div>
	</div>
	<div class="category-footer">
		<a href="?category=<?=urlencode($category['name'])?>">View all (<?=count($category['projects'])?>) ... </a>
	</div>
</div> <!-- end category -->
<?php } ?>
The backend of the software allows for easy creation of projects, categories, and other fields that would be relevant to a portfolio. Custom fields can be added and the designer can easily hook into those. Besides the name used, the actual mechanisms behind this are hidden conveniently from the designer.

Features

  • Easy theme customisation
  • Create custom portfolio pages
  • Intuitive editor interface
  • In-page editing of content
  • Prepackaged installation script with almost no configuration required
  • HTML editor for project text
  • For software developers, code highlighting is automatic if the code is wrapped in a code, in a pre, tag.
  • Click and drag reordering of projects

Implementation Details

This software follows the Model-View-Controller paradigm and uses the following technologies:
  • PHP 5.4
  • MySQL 5
  • Lighttpd
  • Javascript
  • JQuery and JQuery UI 1.9
  • CleanPHP
  • HTML and CSS
Git is used for the source control.