PortfolioThis is the "Self-reflexive" page about this website. I decided to build a portfolio so I can flex my skills to the world, demonstrate the software I have developed, and publish some tools that I need when I am working such as my Password Generator.
Also it is an opportunity to construct something with a bit of flair, have some fun, and push the boundaries of what I can do.
Philosophy
During my career I have focused on building well optimised websites that present data in a structured and dynamic way. It seemed fitting that I should do the same with this site, I am not sure I considered how big my portfolio should be, considering most portfolio's are only one or two pages, currently this one is running at over 60 pages.
The basic premise is to categorise all my skills and projects, write a very short page about each, and then link them together with a tagging system.
Logo & Navigation
I worked hard on a few elements that are reused throughout the website, in the template the logo is animated along with the burger menu. I wanted the menu itself to be a little different, and so I came up with the fan menu which opens out sequentially when opened. Each section has an icon and a colour to represent it.
Content Navigation
Cards are a good mechanism for presenting links to more content, for this site I wanted to use 3D flip cards, with a simple title and a logo or icon, which when hovered over, presents more information.
The animation sequencing took a while to get the feel right, but the effect is pleasing. Each card also has a colour to represent the section it links to.
Project Gallery
The main content pages of the site are to present the projects that I have done (The template of this page). Images of the project are important, but displaying screenshots can be a little dry, so I created an animated polaroid gallery to make the interaction more interesting.
The side menu displays links to all the skills, languages, software, and projects used to build the website that link to their specific page from where you can find other projects that use that thing.
Solari Board
One of the tasks that gives me enjoyment is optimisation. This starts from the ground up in writing efficient code that doesn't waste resources, all the way to compressing output code and images, and optimising transport.
For my portfolio as well as offering a testing platform for some of the tools I have developed, I wanted to show some of the inner workings of how this website has been optimised.
I also like trains, so I developed a Solari board, similar to the old mechanical split-flap departure boards you used to see at airports and railway stations to display metrics about the website, such as load times, memory usage, asset sizes, and compression stats. Just click the stats button floating in the bottom right hand corner of each page.