Maya Dominice - Portfolio Task

My portfolio site

Project Requirements

Content

The content requirements for the porfolio included the following:

• At least one profile picture
• Biography (at least 100 words)
• Functional Contact Form
• "Projects" section
• Links to external sites, e.g. GitHub and LinkedIn.

I incorporated a single profile image (hoping to update to include the professional one as well), a short biography of 100 words, a contact form at the end of the page which uses Formspree to send an email to my personal email account. The Projects is sandwiched between these, listing some items I've worked on/attempted.

Technical

The technical requirements for the site included some additional features:

• At least 2 web pages.
• Version controlled with Git
• Deployed on GitHub pages.
• Implements responsive design principles.
• Uses semantic HTML.

I added a secondary HTML page with a placeholder to contain addition work/projects. The whole site was uploaded and version controlled in GitHub using Git. I attempted to implement responsive design principles by using media queries and hover/click event listeners/behaviours. I attempted to use semantic HTML through the use of articles, headers, footers, form and other more explicit elements and tried to minimise the use of divs where possible. I included references and alt text on images as well.

Bonus (optional)

For the bonus tasks, I tried to implement the below tasks:

• Different styles for active, hover and focus states.
• Include JavaScript to add some dynamic elements to your site. (Extratricky!)

I did this by incorporating a call to a JavaScript library called TagCloud, and tried to make the element/object responsive to interactions.

I also included some small styles for hover states, predominantly with links.

Screenshots

Original design in Excalidraw (https://excalidraw.com/):

Screenshots of the website in various states:

Homepage of the site

Homepage with Menu hovering

Homepage with click result of the TagCloud

Homepage of the site at mobile size

Homepage of the site at mobile size with menu click/hover

Example of link hover

The contact form without hovering

The contact form with hoveringo over the button

The second HTML page at fullscreen

The second HTML page at mobile size

Resources

• TagCloud (https://www.npmjs.com/package/TagCloud#texts)
• Icons8 (https://icons8.com/)
• Unsplash (https://unsplash.com/)
• StackOverflow (https://stackoverflow.com)

Wishlist/improvements

This is probably a super big list if I allow myself to ponder too long, but the immediate improvements would be:

• Better responsiveness at different resolutions - particulalry the projects section, so it tiles across at bigger resolutions.
• Accessibility improvements (particularly with the white-on-orange aspect)
• The overall look/feel of the Projects section(s) - not sure exactly how I want this to look, but starting to know what I don't want.
• Incorporation of some spatial interactivity - would love to learn d3 or webGL to see if I could include a custom globe or map.
• Include a favicon
• Learn/use animations and states more fully to be able to build my own custom interactivity.

Additional Documentation and Acknowledgments

• The amazing mentors and educators of She Codes Plus and the incredible cohort coding alongside me.