A Personal Journey Through Web Development (Part II)
This post is a continuation of my personal journey through web development. You can read part one of my adventure by clicking here.
The new beginning
Version 4 has what would become the primary pallet of my current theme. In not so technical terms, it is the first version to contain the blue, the green, the grey, and the gold I use now. It is also where I began to use AngularJS v1.2.4, and v5.5.1 of the front-end framework Foundation.
The idea of the site as a big promotional card was still there. Everything displays on a single HTML page in three separate sections. Each section contains a coloured photograph or pattern background, as well as the content.
There’s a fixed navigation menu on the right side of the window. All links use the Foundation icon that best represents that section. I recall not wanting a traditional nav-bar menu and opted to do something a bit more creative. It’s likely the influence came from another website or even a demo of some sort but I can’t recall what or where. Clicking a nav button will auto scroll the page to the corresponding section.
The only use of AngularJS is in the major projects section. Images or logos represent each project, and a wobbly effect (using css generated by Bounce.js) occurs when the cursor hovers over them. Clicking on a project will replace the section with the project’s information.
Last modified around June 2015.
By leaps and bounds
All aspects of the design, layout, functionality, and content in Version 5 stands way, way out. Using AngularJS v1.2.4, Angular UI Router, jQuery v2.1.3, and Bootstrap v3.3.6, Version 5 comes across as a much fuller website.
The home page has the gradient colour with bokeh circles background, as well as header and sub-header font that is central in the current version. Different pages use different graphic backgrounds for their header, as well as a different colour pallet. Liberal uses of call to action buttons appear throughout each page. A transparent nav stays at the top of the site, and collapses to a hamburger menu at a certain break point.
The entire site uses a single HTML page. All navigation and content displays using AngularJS and the UI Router. A controller is setup to jump to specific content when clicking a call to action button.
The code is unfortunately a little weak. There’s more inline CSS then I would like to see, as well as improper use of header tags. The only non Angular JavaScript is a function that returns the window to the top of the page.
Last modified around February 2016.
Out of order
Despite my attempt to keep all that I’ve done during my journey through web development, there is a good chance that Version 6 is no more. Gone in the ether, I do not possess a folder entitled agskrypv6. While V6’s disappearance is mysterious, its legacy isn’t completely missing.
According to my work portfolio in Version 5, Version 4 is a WordPress site, made with a custom theme. Version 3 meanwhile, is what I now consider as Version 4 in both folder label and blog entry. No other version exists in the portfolio after V3.
Wait, a WordPress site with a custom built theme?
Yep, it’s true. Reading over the information, prior to Version 5 I had built my first website and theme in WordPress. The theme was customized from a tutorial I’d watch on YouTube, and the site was available online through a free hosting provider.
Judging from the photos, the layout does mimic that of Version 5. It uses large icons and call to action buttons, but also contains a locator map as well as a contact form. One of the colour pallets and a photo makes an appearance in V5 as well.
Development of the theme likely occurred between Version 4 and Version 5, which I suppose would technically make this the real Version 5. Unfortunately I hadn’t much experience with backing up databases or saving a WordPress theme at the time.
I do recall emails from the host provider, explaining something to the effect that unless the site receives traffic of some kind that they’ll take it offline. I must’ve had the latest version online by this time, as I had let this version go under.
At the time, AngularJS seemed like the next big thing, and I venture it was important to be able to sell myself with knowledge and skills on the latest frameworks. The site is no longer accessible, and only odd kinds of content remain blended in with V5. Probably for the best.
A train on twisted tracks
Even though I’ve been zeroing in on a design I like, on features to have, and on content to display, I was still ping ponging on the overall implementation and presentation.
Version 7 ditches both WordPress and AngularJS, and instead favours heavily on TweenMax v1.18.5 animation library and jQuery v2.1.3. The plugin mCustomScrollbar v3.0.6. is also used for a more creative scrollbar. V7 sticks with Bootstrap v3.3.6, while reusing the header fonts, background, and button style nav.
The site is very condense. Content is not just on a single page, but within a single screen. Headers and nav appear in a column on the left side of the page, while content is in a scrollable column on the right.
There’s only an about and work component, with other buttons linking offsite. Each content element fades up and in when selected, and the background graphic changes on specific portfolio projects.
Coding improves with this version. Nothing looks inline, although the CSS styles more IDs then I would like. Having all the content in one file and not having the ability to use partials would make building out this project a pain.
Last modified around October 2016.