Site Details

having recently moved to London Kita was after a way to allow new potential employers to see her previous work, get her latest CV and contact her. Her technical writing documents often span many pages and it is not feasible to attach them to emails as they would quickly become too big to send to certain mail exchanges. By keeping a set of documents ready in a single place to be downloaded as needed Kita is able to overcome this problem and reach a wider audience of employers.

The site needed to be simple and very functional. Everything was achieved using only three pages to deliver all the required information. In doing this a user is able to browse all they need to quickly and with minimal effort but maximum effect.

Concept

The site was initially made into a simple, single HTML page with all the necessary content presented up front. Then a contact page was added to allow a user to view samples and then contact Kita all within the same site. This meant jumping around for the user, switching from web to email, allowing for more functionality with less effort. A profile page was finally added again so the user would get greater function for less work. Usually a potential employer would be viewing this site after a reference given with a job application. By including a simple profile and a means to get Kita's most recent CV now makes this portfolio site a one-stop site to Kita's professional work.

Simplicity and function were the two overriding concepts kept in mind when creating this site. Everything is laid out with good use of white-space and nothing is cluttered. Only two main colours are present, being white and blue, so as to not overcomplicate the visual aesthetic and make for easier, faster browsing.

Technology Used

The site makes use of jQuery javascript to make the functional contact form with php doing the work at the backend. The rest of the site is HTML and CSS 2.

Images were all made and edited in Photoshop and Fireworks from Adobe. The site was built using Panic's Coda software.

• HTML
• jQuery
• Javascript
• CSS 2
• Photoshop CS3
• Fireworks CS3
• Coda

Site Details

I created this portfolio as a personal project to showcase my web experience. I'm originally from Australia however I've spent the last year travelling Europe and have now chosen to settle in London. My portfolio currently shows the work that I completed in Perth, West Australia however I am intending to add new projects very soon.

I particularly like the idea of a portfolio as it allow me to show examples of my efforts and successes in the one place. I view it as an extension of my CV, albeit a much more creative one!

Concept

As I work in both design and development I didn't want to build a portfolio on Wordpress or any other pre-done platform; I wanted to build it all from scratch to test what I can do. As such, the design, HTML, CSS and javascript code are all original pieces. Excluding the lightbox which is a jQuery plugin; there's no reason to reinvent the wheel. The requirements I set myself were that each project must include a nice set of pictures of the page, short, succinct information related to the site and also optional to access full information and site breakdown.

As an extension of my CV, I intended the site to be quickly scanned to see what has been done recently but also made to allow a deeper look into each project without unnecessarily jumping through content and heavy navigation. Details are immediately presented to a casual browser whilst anyone wanting more information on a project can expand the block to show a full breakdown and additional images. I decided on Javascript for slick animations and providing a dynamic display between the "more" and "less" options.

One of my concerns with Javascript is the possibility of reducing accessibility; the site has to be gracefully degradable for users without java enabled. I combated this by using javascript to hide extra content and insert buttons on load (instead of having it all available by default). For users without java, the site will appear with the full information but without the (non-functioning) buttons. This means that no usability is lost.

Technology Used

The site is a dynamic html (DHTML) site using jQuery to create the animations and to hide the extra information on each project until desired. All the related javascript using jQuery is written myself as is all the DHTML. The site was created in Panic's Coda software.

All the graphics are also made personally using Adobe CS4 and take inspiration from the iPhone interface in regards to the menu navigation. The other buttons on the site are not graphical but purely CSS.

The CSS on the site is predominantly CSS 2 with some newer CSS 3 added for increased visual effect in browsers that support it (Firefox 3+, Safari, Chrome).

• HTML
• DHTML
• Javascript
• jQuery
• CSS 2
• CSS 3
• Photoshop CS4
• Fireworks CS4
• Coda

Site Details

Yamaha Golf Cars WA services some of the states top golf clubs but at the time the website was looking old and outdated. When the business changed ownership it was decided that a fresh web site was needed to reflect the fresh business.

It was felt that what the site said was still appropriate to the business. It was short, to the point and conveyed everything it needed to. How the site said it though needed to be changed. So everything was built new, from the ground up, excluding the textual content.

Modernisation was required to bring the page to the latest browser technologies and current accepted W3C standards. Cross-browser compatibility was a necessity and accessibility guidelines had to be followed to ensure that the updated site would last with minimal fuss and upkeep.

Concept

The site was initially made into a simple, single HTML page with all the necessary content presented up front. But in this raw format the page is too long for functional browsing. Javascript was written to provide a new way to selectively show only the information required for the point the user was looking for.

The information is still all within the same page but the now dynamic approach meant excess content would be hidden until called for. Having not used PHP to load this content from the server and using DHTML instead meant that search engines also did not have the PHP unloaded content hidden from the search crawlers. An approach that is fantastic for functionality and search engines. Plus it looks great!

If javascript is disabled the page will still load in full. There is no problem with non-functioning code being unable to load new content as it is still all within the single HTML page.

Technology Used

The site makes heavy use of javascript to make DHTML and to create the "slider effect". But whilst being dependent on it the java code that creates it is small in size and quick to execute.

Images were all made and edited in Photoshop and Fireworks from Adobe. The site was built using Panic's Coda software. The site is styled in predominantly CSS 2 but does make some use of the newer CSS 3 for additional visual effect in browsers that support it (Firefox 3.5, Safari, Chrome).

• HTML
• DHTML
• Javascript
• CSS 2
• CSS 3
• Photoshop CS3
• Fireworks CS3
• Coda

Site Details

At Loconut I implemented the design and CSS stylings for the Loconut social website as well as other contracted websites. The pre-existing style sheets had to be completely overhauled to suit a new design direction that was being undertaken and created to suit a new underlying back end system. The new back end system was a more object-orientated focused CMS system with plug-in .Net code modules, which provided a more flexible design and development architecture.

I created a new CSS framework that would ensure that styles were easily adaptable for the new plugin widget structure. This structure was designed to be user friendly, allow freedom with any direction the site may take in the future and, most importantly, reused to quickly styled contracted websites.

Concept

Loconut already had an existing design style that was created by the previous Web Designer. The major problem was the implementation: the previous designer had only one CSS file that covered the entire site and all it's components; over 5000 lines of CSS code in a file megabytes in size.

The company agreed to a complete rewrite of the CSS with the requirement that the existing style was maintained. The CSS was written to comply with W3C standards and great readability for the ease of future designers. By breaking down the style sheets into component specific files, I ensure that a user only loaded styles that were needed and the applied styles could be easily located when needed. Along with the benefits of speed and decreased resources, this new object orientated approach to design and code was a crucial element to the modular approach Loconut was taking with it's site elements.

The next step I took was to develop a Loconut specific format to the CSS structure allowing for rapid component implementation. I would take raw backend code, written in .Net, and integrate this into the site quickly by coding HTML using standard hooks I created to use the default Loconut style theme. The individual CSS for that component was then tweaked to suit the specifics of what was desired.

My creation provided a quickly implemented, standards compliant, perfectly extensible and carefully suited HTML and CSS system.

Technology Used

The backend code is written in .Net 3.5 whilst all frontend code is HTML and Javascript. Designs were made using Adobe Photoshop and Fireworks and implemented using CSS 2. The project was written and maintained in a team of four people using Microsoft Visual Studio 2008 and SVN.

• .Net 3.5
• Javascript
• HTML
• CSS 2
• Photoshop CS3
• Fireworks CS3
• Visual Studio 2008
• SVN

Site Details

Working on behalf of Nutwork, an extension of Loconut, I implemented the design and CSS stylings based on an existing Photoshop image. The overall design was specified by another designer working for Nutwork but was implemented into code by myself.

Concept

The backend .Net framework for Gascoigne already existed, so I was able to focus on developing the CSS and HTML to match the given style. By slicing up the Photoshop image I was able to use the provided graphical elements to create a functional replica of the mock-up. Where possible CSS 2 was used in place of graphics for improved speed and efficiency performance.

Technology Used

The backend code is written in .Net 3.5 whilst all frontend code is HTML with CSS 2 markup. The artwork was developed using Adobe Photoshop and Fireworks. The project was created in a team of two people using Microsoft Visual Studio 2008 and SVN.

• .Net 3.5
• HTML
• CSS 2
• Photoshop CS4
• Fireworks CS4
• Visual Studio 2008
• SVN