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.
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.
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. 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 are developed in 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 enables anyone to try out my code, such as my minification tools, and my User-Agent parser. I also created some some other programs specifically for my portfolio, such as an encoder/decoder, anagram solver, and a capital cities quiz.
Solari Board
One of the tasks that gives me enjoyment is performance 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.
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.
If you decide to have a look around, I would appreciate your comments and feedback, which you can leave below. Thanks!
Top comments (3)
Very cool! Well done 👏
Cool stuff! I would be interested to see the technologies you you under the hood.
Just vanilla PHP. It uses a lightweight PHP framework I threw together for this and some other projects.
For the CSS it uses SCSS, JavaScript it uses rollup, all run with grunt.