Table of Contents

• Description
• Brainstorming
• User interface and User experience
• Development
• Conclusion

Description

A portfolio site built using React using Gatsby to build the site and the content is on WordPress CMS. It easier to use then my pervious way of coding content into the pages or using markdown. I choose the backend to be WordPress because it’s the easiest to use.

Brainstorming

Planning out how i want the site to do, what type of content that i want on my site.

The backend of the site with the structure of the website. So i can write posts inside WordPress and then it can be published onto the site.

User Interface & User Experience

Goals for the UI/UX

• Looks correct in mobile , tablet and desktop
• Designing the front page
• Designing the portfolio section
  • needs the links github, the demo, Figma
• Designing the Case Study pages

The user interface for the desktop header component.

The User interface for the mobile menu drop down.

Building the components for the sites.

The Figma UI for the Case Studies page

The page layout for the posts that will be displayed on the site.

Development

Goals for Coding:

• The queries
• Setting the the cards for Trello
• Make the components easier to test in storybook.

Conclusion

In the end the site turn out ok. the main focus was the portfolio

The end result for the Portfolio section of the site. where all projects and showcased with the user able to change between

The Blogroll section

The Portfolio page showing all projects with their links to their case studies.

The portfolio page when a visitor first lands on the page. It shows only projects tagged as showcase.

What the Site looks like in mobile view for blogroll and when i add a new post to the
WordPress backend this page will be updated.