Portfolio Site

Designer & Developer

As part of the CareerFoundry Frontend Development specialization course, I designed and built a responsive portfolio website (this one!!) from scratch with HTML, CSS, and JavaScript.

CHALLENGE

To expand my skills as a UX/UI Designer, I wanted to learn HTML, CSS, and JavaScript while simultaneously building a website from scratch to apply my new skills./p>

GOAL

Though I already had an online portfolio made with a website builder, my goal was to create a responsive portfolio website to better showcase the range of my UX/UI and frontend development skills.

TOOLS

HTML
CSS
JavaScript
Atom
Github
Adobe Illustrator

DETAILED CASE STUDY

PROCESS & INSIGHTS

DESIGN

The course provided wireframes to start the process with (below), so my first step after reviewing those was to decide on the overall visual design of my portfolio website as well as what projects I wanted to showcase. Because I had already built a portfolio site using a website builder, I already had most of the content for the projects I wanted to include.

For visuals, I decided to use the same color palette (orange, navy, & peach) and typography (Acier BAT and Interstate) I chose for my resume to create a cohesive brand.

DEVELOPMENT

HTML

With an introduction to HTML, I started building my index.html page which would serve as the home page displaying my work. Using the code editor Atom, I continued to add content to the index page and build the skeleton of my about, content, and project pages.

To ensure version control as my project expanded, I created a Github repository and started tracking changes using descriptive commits.

CSS

Moving onto styling by learning Cascading Style Sheets, I started by defining colors, typography, links, footer, header, and buttons in the same style of my resume. I continued onto styling the layout using CSS. I decided to put my navigation in my header alongside my name for simplicity. I created rows and columns for the list of projects in the MY WORK section and styled the footer.

ANIMATION

As my CSS skills advanced, I created an example of an animated SVG image using keyframes to add to my portfolio. For me, this was my favorite thing I learned in the course, and I can’t wait to learn more about and do more animation!

JAVASCRIPT

With my website style, the next task was to add responsiveness with JavaScript—which proved to be the most difficult part for me! It took me a long time and several tries at some exercises to wrap my head around the unfamiliar syntax, but JavaScript became much easier when it was time to apply it practically to my website for the hamburger menu on mobile devices. Because of the limited screen space, the hamburger menu was intended to hide the navigation links normally visible and allow the user to toggle the menu by clicking on the icon in the top right.

JavaScript would continue to be the most difficult element in this project. Several times, I ran into errors I couldn't figure out. In these situations, I would first reread the course content, then do a Google search to try to find a solution. When I was totally stumped, I'd just make a note and move on. I find fixes for difficult problems pop up in time if you set them aside for a while and work on something else. In most cases, the error was a typo in the JS code, or an element was accidentally deleted, which I'd usually discover in the process of building something else.

USABILITY TESTING

With most of my website built, I created a plan for usability testing and recruited participants. I sought participants with a range of technological expertise to complete 5 tasks based on my goals for the user:

Find & download my resume.
Learn more about my design process
View samples of deliverables
Contact me via email or LinkedIn

Screenshot of usability problems and recommendations

Overall, the usability testing went well and uncovered a few mistakes I hadn’t noticed. It was exciting to see people clicking through my website, and for the most part, people were able to navigate relatively easily through the scenarios. I’m glad that I had the participants navigate back and forth between pages to get a sense of how easy that was. Also, since more than half my participants were UX Designers, I got some great feedback about the UX of my site and how to improve certain things, like placement of contact info.

View my full USABILITY TEST PLAN SCRIPT & REPORT

CODE QUALITY & CROSS-BROWSER TESTING

Using W3C Validation (HTML), Linter-stylelint (CSS), and Standard JavaScript Style (JS) linters, I made corrections to my code which were mostly formatting related.

I also confirmed the accessibility of my colors once more: AAA!

I performed manual cross-browsing testing by visiting my website on Firefox, Safari, Edge, & Chrome on mobile, tablet, and desktop devices. Except for a few minor layout issues, everything seemed to be working fine across browsers!

PUBLISH

Finally, with a thoroughly tested website ready to launch, I identified a shared hosting provider (Green Geeks) and transferred my domain from my previous website. After uploading my files and spending several hours troubleshooting, this portfolio website was up and running!

SOLUTIONS

For my homepage, I used a hero section to quickly communicate who I am and what I do:

On a separate page, I added my full bio and headshot:

I give several options for contacting me, and this page is linked in the footers on each of my pages. I plan to add a contact form in the next iteration:

For my project pages, I built an overview layout at the top that communicates the most essential elements of my work (Challenge, Role, Goals, etc.) with a more detailed case study below it. I also opted for a fixed header to ease navigation when scrolling. I plan to integrate a side menu in the next iteration to further streamline navigation within one page.