I created this site in response to a project task for my Diploma in Software Development, Feb-Aug 2017. My intention is to make this live document evolve as I do, recording my output and growth as a developer.
This site was created under the brief that it is a display piece and entry point for prospective employers to my work. The "hero" photo I chose as representative of my professional approach and fun-loving, affable demeanour.
The uncomplicated design was inspired by photojournalism, fashion and design websites, to convey elegance. A fan of Chanel and photography, black and white was a clear choice. I wanted to bring in a pop of colour but couldn't find a combination which matched my personality. I have a saying "There is too much black and white in people's thinking; there needs to be more gray". So, I have used gray tones from my suit jacket, in the hero photo, as the grouping or encapsulation mechanism.
A potential employer will likely want to see what technology I can use, my "Tech Stack". Because of my age, I can offer another (I think equally important) stack, my "Life Stack". So, I duplicated the use of icons, present in a tech stack, for parts of my life. The life stack icons offer insight into who I am and what I have done so far. I think they provide a useful insight for my potential to value-add to a project.
This website duplicates the contemporary use of a long, single page layout. Initially I wanted interconnected pages but this might not be obvious to all users. So, as much as has been possible, all content is on the single page and clearly visible.
Using mobile-first design development required fine grained use of space. Mobile-first constrained content but also my CSS follies. There are many examples of intelligent use of CSS on the Internet; some too clever as content can remain hidden. Sadly, also, some CSS tricks don't work on mobile - further narrowing the band-width of potential design mistakes.
The only fancy bit I did add, apart from intra-page and work links, was SVG decoration for a button. The button is at the bottom of the page, when pressed the user returns to the top.
Figma, Photoshop, FontAwesome, Google, HTML, Grab, CodePen, FormSpree, Google, Pinterest, Illustrator, Google, CSS, Google, GitHub, Google, GitHub, FavIcons, Google, SVG, DevIcons, Google, ColorPicker, FlexBox, CSS Tricks, YouTube, Animista, Google.
- Change site navigation to fixed hamburger menu when user moves away from opening section.
- Hamburger menu aware of user location on site, hides option for self.section.
- Get all Work script hyperlinks working, html programs to be responsive.
- Edit video to be shorter and remove references to why it was created.
- Continue to add new work.
- Add "choose your own adventure" element.
- Add background animation.