Web Portfolio

Web Design, front-end development

Throughout a semester long web design course I developed a website to serve as a personal photography portfolio. I implemented various assets, including lightbox display and forms, as well as responsive design. Keeping a heavy emphasis on accessibility throughout the project, I developed the site to be usable for all types of interaction, including screen readers and keyboard reliant.

 
 

 
 

Tools

  • HTML5

  • CSS3

  • JavaScript

  • jQuery

  • Visual Studio Code

 

 

Process

HTML: Beginning with the bones of the site I first built out the structure of pages and content, following best coding and accessibility practices.

CSS: Next, I designed the visual layout and look of the site, including responsive design.

JavaSscript/jQuery: Finally, I added functionality including lightbox views and form assets.

Example of code

Example of code

The final portfolio can be found at the link below, as well as all related code via GitHub.

Responsive design

To account for screen and browser size, I designed 3 distinct layouts: large, medium, and mobile, implementing them by way of media queries. My goal with these layouts was to ensure all content was visible without horizontal scrolling, and the navigation was always accessible.

> 890 px +

375-890px

< 375 px

 

Accessibility

  • Color contrast throughout meets accessibility guidelines

  • All images have alt tags for screen-readers

  • All content navigable by keyboard, including a ‘Jump to Content’ on first tab

  • All form inputs include labels

‘Jump to content’ on first tab

Tabbing through content

Mockup courtesy of https://www.anthonyboyd.graphics/mockups/iphone-x-and-2017-macbook-pro-mockup

Mockup courtesy of https://www.anthonyboyd.graphics/mockups/iphone-x-and-2017-macbook-pro-mockup