Portfolio, showcase and blog
- Case study by John
- October 14th, 2010
Freshly Minted is my own personal website, which showcases the past work I've done (see: this page!), the services I offer, a contact point, and a blog where I can write about anything (although in this case it's most likely going to be technical posts and personal opinion).
Objectives of the project
The site has been created to act as an online presence for myself, and as described above had to contain several complementary features:
- A blog
- A portfolio (split into relevant sections)
- A contact point (listing methods of contact)
- RSS feeds
- Gallery system
- About / services I offer pages
These primary feature requirements influenced the decisions made during the development of the site including the languages and frameworks used to produce it.
As well as having to achieve these functional requirements, there were several important non-functional requirements for the completed site. It had to be aesthetically appealing and (or) impressive, as it is essentially acting as a showcase for my skills as a web developer. Additionally, the navigation structure had to be simple to understand and logical.
How does it work?
The site utilises Django as the framework which powers the content on the site. A MySQL database is used to store data for the site, managed by the Django framework. Several plugins for Django have been added to the site to enhance functionality, including django-tagging (a tagging system used by the blog and the portfolio), and the Python Imaging Library (a Python library allowing for advanced image manipulation).
The blog and portfolio system share common elements (the portfolio is essentially a simplified blog), and were developed in a similar way. Common elements include titles, dates of publication, tags, related galleries, the body text, and so on. When published, an additional process records the published date and time of both blog posts, portfolio items (and anything in the future that may be added). I've titled this the 'stream', which allows me to access a timeline of all published items of all types in chronological order, filtered by type. This is particularly useful for other features such as the RSS feeds (which are offered in blog-only, portfolio-only, and a combination of both).
Additionally, both the blog and the portfolio can be associated with albums from the gallery. Gallery albums are created independently, and can contain an unlimited number of photos (or images). When uploaded, images are resized into several different sizes and stored in the filesystem. Galleries currently don't have their own permanent links, but appear on portfolio items and blog posts which have been associated with them.
The design and aesthetics
The website uses HTML5 elements and CSS3 elements to render the site. This is limited in certain browsers (especially Internet Explorer), although in those cases it only renders without certain CSS3 dependent elements and effects, and renders the layout correctly.
The layout is consistent throughout the website, with a common header and footer on every page, and a fixed layout on all pages, usually with a left hand column and right hand column. Textual elements use standard sizing and spacing.
The design of the site is enhanced by using colour sparingly but effectively, concentrating on five main colours; white, black, green, blue, and yellow. Black-on-white is used for most text on the site (notably not comments on the blog). The sky has been added prominently to the front page of the website, and appears (in a cropped version) on all other pages on the site. The clouds scroll sideways slowly by use of a jQuery plugin. The logo and the sunrays are both transparent PNGs, floating above the scrolling clouds.
Third party plugins
I have developed a website with custom features specific to my needs. However, I have also implemented several third party plugins and services. Instead of writing my own commenting system for blog posts, I opted to use Disqus comments (which allows seamless logins using Facebook, Twitter, or OpenID). I chose Disqus because it is free, very customisable, allows simple login system for commenters, and easily moderated using both a web interface and a mobile app.
I have also opted to use Google Apps to manage the email system for the site (all email addresses on the site are powered by Google Apps). This gives me all the standard features of Gmail, including spam protection, labels, filtering, mobile apps, and more, instead of having to manage a mail server with fewer features myself.
If you'd like more information about this site, you can get in touch with me at any time!