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.

India

I developed this website in HTML and CSS to experiment with the Parallax scrolling effect and displaying multiple background images on a page. The site showcases India’s geographical location, history and culture and food.

Tools:
HTML, CSS, Photoshop, Balsamiq



The Process

I used CSS background-attachment: fixed property to keep the images fixed while the text scrolls over them.

Typography

Navigation font: Roboto

Headings font: Roboto

Body font: Roboto

Color Palette

Responsive

Challenges and Learning

I learned how to create Parallax scrolling using multiple images.

Movigil – Business Site

This site has been developed for a small startup company. The site is fully responsive and showcases company and product information. It is still in development stage.

Tools:
HTML, CSS, JQuery, Photoshop, inDesign



The Process

The client wanted a simple website showcasing the product an product information. I used inDesign to create mockups. The logo and images were supplied. I created a slideshow to display the product images. The site is still in development, awaiting information regarding extra pages.

Typography

Navigation font: Roboto

Headings font: Roboto

Body font: Segoe UI

Color Palette

Responsive

Challenges and Learning

The client was unsure of how to showcase the company and product information. Being new to design myself, I created a simple, easy-to-navigate, user-friendly site.

The Slideshow was a bit of a challenge. I managed to create a cool slideshow with help from Stackoverflow.

I learned how to link the contact form to email address on Submit using PHP code.

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.

Food Explorer

This one-page fully responsive website was a group project for the BCIT Technical Web Design Program. I worked with another team member. The goal was to match the website as closely as possible with the mockups supplied.

Tools:
HTML, CSS, Javascript, Sass, Github



The Process

Working on this project with another teammate, we each took up sections of the development.

Our instructor helped set up the project on GitHub and Sass. We then worked on setting up the HTML and other shared files together, after which we individually worked on our parts. I worked on the body content, footer and part of the sidebar. Commit to Git was done once at the end of each day,

Mockups (supplied) as below:

Typography

Navigation font: Roboto Condensed Bold

Headings font: Roboto Condensed Regular

Body font: Roboto Light

Color Palette

Responsive

Challenges and Learning

The body content images were a slight challenge. I initially planned on doing it using CSS grid but I was having issues with aligning the images and also the sidebar. So, I decided to use CSS Flexbox instead, which worked well.

This was my first time using GitHub version control and I did have some issues with setup and merge conflicts.

Top