My Portfolio

This website was developed as the final project for the BCIT program. The site is a portfolio of all my projects. It is responsive; the front page contains my information; the work section links to separate pages for each project containing project information.

Tools:
WordPress, PHP, HTML, CSS, Photoshop, Javascript/jQuery, inDesign



The Process

I went through many design iterations for this site as I wanted to showcase my portfolio in a simple, yet effective way. I initially had separate pages for the different sections i.e. About me, Contact but eventually decided on keeping all the content on the home page as is the trend nowadays and linking the projects to individual project pages. I used WordPress for this site as it allows for easy addition and display of content via WP admin without having to go into the code.

Typography

Navigation font: Abel

Headings font: Sans-serif

Body font: Abel

Color Palette

Challenges and Learning

The design was challenging as this is a personal portfolio and I wanted to create a simple, yet effective site that showcases all my work.

I used the Isotope filter for the projects; I initially ran into some difficulty getting this to work but StackOverflow was very helpful.

I also played around with creating my logo for a while but eventually managed to come up with a design that I liked.

One issue I came across after migration to live site was that I had used postids of pages to style the outer wrapper of the single project pages. I realised it is not very efficient using postids to format as postids do not remain the same.

Early Bird Family Farm

This responsive website was developed for a client in Langley, BC as our final BCIT group client project. The site showcases the client’s organic farm and products. Our team comprised of 4 members and we all contributed to different aspects of the project.

Tools:
Wordpress, HTML, CSS, PHP, Javascript. inDesign, GitHub, Sass



The Process

Our team first discussed requirements with the client. Once we had an idea of what was to be incorporated, we suggested a design for the site which was well received. Wireframes were developed using inDesign. GitHub and Sass were used by the team.

My tasks icluded:
Site Map
Functionality spreadsheet detailing the WordPress features we would be incorporating into the website.
'About Us' page
'Fresh Sheet' page
Help notes on the WordPress admin dashboard for the client.

Code Demo:
As part of the group project, each team had to present a Code Demo of a particular WordPress feature we thought would be useful to other teams. Our team was assigned the topic - How to eliminate some of the WYSIWYG editor buttons in the WordPress Dashboard WYSIWYG editor and ACF WYSIWYG editor buttons to make it ‘foolproof’ for the client. I volunteered to create a demo project and present the code demo to the class.

Typography

Navigation font: Poppins font weight: 400

Headings font: Poppins font-weight: 600

Body font: Lora

Color Palette

Responsive

Challenges and Learning

I found it a bit difficult initially working with GitHub. But after a few pushes and commits, things went smoothly.

The LightBox Gallery feature on the 'About Us' page was a bit tricky. I did a lot of research and went through many StackOverflow queries to get it right. I finally used the LightGallery javascript code and the gallery worked beautifully.

I had some issues with the 'Read More' feature. I tried to code it with Javascript but I had problems with determining the height of the text divs. So, I used the Wordpress Advanced Custom fields and with a little bit of PHP and JQuery scripting, got it to work.

Top