PORTFOLIO

Adobe XD | Photoshop | HTML5 | SCSS | JavaScript | JQuery | PHP

My portfolio, the site you’re looking at right now, was built using WordPress. I was the solo contributor on this project, so took on the roles of UX / UI designer and front-end developer.

PROJECT GOALS AND REQUIREMENTS

The main goal of this project was to build a personal portfolio to showcase my work and abilities in front-end development. The requirements were to plan the content and information architecture of a professional portfolio site based on my goal of working in front-end development, and to design, develop, and publish a publicly-accessible, professional-level portfolio website.

    Research

    After receiving the brief, my teammates and I began by researching other bakeries and cafes with a similar homey, friendly, welcoming vision. Once we collectively decided on our top five websites, we prepared our website needs analysis with questions to ask our client during the discovery meeting.

    Planning

    After the disovery meeting and further market research, we moved onto the content planning phase. Once we decided on what content would go on each page, we created the wireframes.

    wireframe of home page wireframe of home page wireframe of home page


Brand Development

I developed the brand for my Portfolio. I choodse the colors and created the logo based on the creative brief requirements.

Logo

Color Palette

Typography

The font used for the headings is .... and the font used for the nody text is .... in various weights.

I started the project by entering all the content first, followed by coding the functionality using PHP. Once we started styling, I styled for mobile first with media queries to accomodate responsive designs for tablet and desktop sizes.

After the style tile was made, I moved into the development of the site. I approached this phase in a specific order:
HTML structure was set up based on wireframes
Added content to the home page
Added content to one project page
Styled the two pages with Sass and gulp.js
Added JQuery plugins and JS scripts
Created remaining project pages from the completed project page
The usage of Sass and gulp.js during the styling phase kept my code organized and easy to work with. It also allowed me to make quick tweaks and see the changes live, which significantly sped up the development process.
Both the mobile and desktop views of the site have fixed navigation bars, with the mobile view having it at the bottom of the screen and the desktop view having it on the side. This is to make going between the different pages and sections quicker, as the user wouldn't have to scroll back to the top of the page.

The biggest takeaway that I have from this project is how important the research stage is when building a site. By carefully analyzing the portfolio examples that I liked and noting the reasons why I liked them, I had a great foundation of inspiration that led to a portfolio site that I’m proud to call mine.

Back to all Projects