My Portfolio: Vanilla PHP, for Fun, Promotion, and Performance
Tags: php, webdev, portfoliopage
Published: 2023-08-11 23:51:11

Its hard to believe that I have been developing website professionally for 25 years. I built my first website using Microsoft Frontpage in 1996, and got my first job building websites in the summer of 1998. Since then I have worked on countless web systems, and have been very lucky that most of them I developed from the ground up using vanilla code.

I have spent my career building systems, frameworks, and products and throughout all those project, have developed a passion for website performance.

I also consider myself a full stack developer: I did a degree in multimedia, and like working all areas of systems development such as planning, branding and identity, UX design, HTML, CSS, Javascript, databases, and server config.

## TL;DR

Check out my new portfolio at [Hexydec.com](https://hexydec.com).

{% cta https://hexydec.com %} Access My Portfolio{% endcta %}

{% youtube kPTIcEpQJRo %}

## Professional Handle

After university I ran my own freelancing business for 10 years, under the moniker _Hexydec_. I then took on my current role as Digital Experience Manager at SWGfL, a charity in the UK that works to help people reap the benefits of technology, free from harm.

Since my switch from freelancer to employee, the name _Hexydec_ has become my professional handle. 

## My Portfolio

This year will be my 9th year at the charity, most of my freelancing is long behind me, but I am still a hungry developer and work on my open source projects in my spare time.

The time just feels right to create a portfolio of my work to flex my skillz and improve my developer profile. It is a chance to demonstrate the software I have developed, and publish some tools that I need when I am working such as my [Password Generator](https://hexydec.com/apps/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 thought about 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 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 created](https://hexydec.com/projects/). 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 each project and link to their specific skill page from where you can find other projects that use that thing.

## Apps

Most of [my open source projects](https://hexydec.com/projects/) are [developed in PHP](https://hexydec.com/about/languages/php/), so whilst I can publish the code on GitHub, I cannot run the code for users to try out there.

The [apps section of my portfolio](https://hexydec.com/apps/) enables anyone to try out my code, such as [my minification tools](https://hexydec.com/apps/minify-html/), and [my User-Agent parser](https://hexydec.com/apps/user-agent-parser/). I also created some some other programs specifically for my portfolio, such as an [encoder/decoder](https://hexydec.com/apps/encoder/), [anagram solver](https://hexydec.com/apps/anagram/), and a [capital cities quiz](https://hexydec.com/apps/quiz/).

## Solari Board

One of the tasks that gives me enjoyment is [performance optimisation](https://hexydec.com/about/skills/performance/). 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](https://hexydec.com/apps/), 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.

## What do you think?

It has taken a year and a half, and 114 commits to get my portfolio up and running, and I now present it to the world. You can view my portfolio at [hexydec.com](https://hexydec.com/).

{% cta https://hexydec.com %}Access My Portfolio{% endcta %}

If you decide to have a look around, I would appreciate your comments and feedback, which you can leave below. Thanks!