[Shay's Portfolio Site] (https://shayzimm.github.io/)
Shay's portfolio website starts with a profile picture that introduces visitors to the personality behind the website. A detailed biography, spanning over 100 words, provides insights into Shay's background. The site also incorporates a functional contact form, making it easy for visitors to reach out and connect. The 'Projects' section showcases Shay's work and skills, providing a glimpse into past and upcoming projects. Additionally, links to external sites, including GitHub and LinkedIn, allow visitors to explore Shay's professional and coding journey.
- At least one profile picture
- Biography (at least 100 words)
- Functional Contact Form
- "Projects" section
- Links to external sites, e.g. GitHub and LinkedIn.
Shay's portfolio website offers a feature set that elevates its functionality and user experience. It includes a home page, an about page, and a project page, allowing for organised content and easy navigation. The project is version controlled with Git, allowing for collaboration and version tracking. Deployed on GitHub Pages, it's accessible to a wide audience. The website demonstrates responsive design principles, adapting to various screen sizes and devices. It adheres to semantic HTML practices by using proper headings, ordered and unordered lists, semantic elements like
, , and , as well as meaningful attributes. It also includes alt attributes for images and utilises elements for hyperlinks to external sites. These practices enhance accessibility and help search engines understand your content, ensuring a well-structured and maintainable web page.- At least 2 web pages.
- Version controlled with Git
- Deployed on GitHub pages.
- Implements responsive design principles.
- Uses semantic HTML.
Implemented hover effects for links and buttons in the website's CSS to enhance user interactivity. Links change color and get underlined when hovered over, while buttons slightly change color to provide feedback to users when they interact with these elements.
- Different styles for active, hover and focus states.
- Include JavaScript to add some dynamic elements to your site. (Extratricky!)
Please include the following:
- The different pages and features of your website on mobile, tablet and desktop screen sizes (multiple screenshots per page and screen size).
- The different features of your site, e.g. if you have hover states, take ascreenshot that shows that.
You can do this by saving the images in a folder in your repo, and including them in your readme document with the following Markdown code:
[hover state on link to about page](screenshots/about link hover.png)
[hover state on form button](screenshots/button hover.png)
shows form button with no hover state
[hover state on github icon link](screenshots/github hover.png)
[about page on ipad](screenshots/iPad-about page.jpeg)
[home page on ipad](screenshots/iPad-home page.jpeg)
[portfolio page on ipad](screenshots/iPad-portfolio page.jpeg)
[about page on iPhone 12 Pro](screenshots/iPhone 12 Pro-about page.jpeg)
[home page on iPhone 12 Pro](screenshots/iPhone 12 Pro-home page.jpeg)
[portfolio page on iPhone 12 Pro](screenshots/iPad-portfolio page.jpeg)
[hover state on LinkedIn icon link](screenshots/linkedin hover.png)
[about page on MacBook Pro](screenshots/MacBook Pro-about page.jpeg)
[home page on MacBook Pro](screenshots/MacBook Pro-home page.jpeg)
[portfolio page on MacBook Pro](screenshots/MacBook Pro-portfolio page.jpeg)
[hover state on link to portfolio page](screenshots/portfolio link hover.png)
[hover state on home page/'sz' link](screenshots/sz_home link hover.png)