Add a short paragraph describing the features below. What aesthetic and technical choices did you make?
My profile picture is located at the page footer, left side. My bio can be found on the about.html page which can be accessed through the "About" link on my homepage navigation. The contact form can be found on the contact.html page which can also be accessed throught the "contact" link on my homepage header nav as well as footer nave. I have linked the git repositories of the 2 projects we've done in She codes, and my GitHub and LinkedIn pages are linked in the footer. My page's aesthetics were inspired by Ottolenghi's website and technical choices were mostly drawn from the previous projects we've made in class.
- At least one profile picture
- Biography (at least 100 words)
- Functional Contact Form
- "Projects" section
- Links to external sites, e.g. GitHub and LinkedIn.
Add a short paragraph describing the features below. What strategies or design decisions did you work from?
I made 3 html pages, (1) homepage, (2) About me page, (3) Contact page. I kept the design simple and straightforward because I wanted a functional page over a fancy page (for now). At the beginning, I went git commit crazy and kept on committing small changes (forgetting that I could click on GoLive on VS Code lol), not even worried about the fact that anything I commit can break the work that I've done. After we were taught how to create a develop branch, I also developed a fear of commiting and pushing changes to the main branch.
I used rem for font sizes and media queries for mobile, tablet, and desktop.
- At least 2 web pages.
- Version controlled with Git
- Deployed on GitHub pages.
- Implements responsive design principles.
- Uses semantic HTML.
Add a short paragraph describing the features below, if you included any.
- Different styles for active, hover and focus states.
- Include JavaScript to add some dynamic elements to your site. (Extra tricky!)
Please include the following:
Mobile (Screenshots/Mobile.png)
iPad (Screenshots/iPad.png)
Desktop (Screenshots/Desktop.png)
- 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 a screenshot 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: