Portfolio

Portfolio of Microverse projects

This project is a portfolio of projects I build at Microverse.

Things done so far in the project:

1. Build mobile skeleton

• Parse a Figma design
• Use Flexbox for positioning
• Use images and backgrounds

2. Build mobile version

• Use Grid alongside Flexbox for positioning
• Add button hover and pressed effects

3. Build contact form (pair programming)

• Pair program with a coding partner
• Use HTML5 validation
• Collect form data using Formspree

4. Build desktop version

• Use media query for desktop view
• Use desktop-specific classes to show/hide elements depending on view
• Display desktop sections fully in viewport height

4.5. Add effects (pair programming)

• Use CSS transitions
• Use CSS animations

5. Deploy

• Use GitHub pages to deploy website

5.5. Add Google Analytics

• Create a Google Analytics property
• Add a web data stream
• Set up data collection using a global site tag

6. Evaluate accessibility

• To do

7. Add mobile menu (pair programming)

• Use JavaScript DOM manipulation to open/close menu in mobile view
• Use JavaScript media query
• Apply JavaScript linting with ESLint

8. Add details modal (pair programming)

• Use JavaScript objects to store data

9. Validate contact form (pair programming)

• Use JavaScript validation with Constraint Validation API
• Refactor common functions into a library

10. Preserve data in browser (pair programming)

• Use Storage API to save data into local storage

Built With

• Major languages: HTML, CSS, JS
• Technologies used: Lighthouse, Webhint, Stylelint, ESLint

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running follow these simple example steps.

Use the following command in your terminal:

• To clone the main project

git clone https://github.com/AkashaRojee/portfolio

• To clone the validate-contact-form branch

git clone -b validate-contact-form https://github.com/AkashaRojee/portfolio

• To clone the details-modal branch

git clone -b details-modal https://github.com/AkashaRojee/portfolio

• To clone the mobile-menu branch

git clone -b mobile-menu https://github.com/AkashaRojee/portfolio

• To clone the deploy branch

git clone -b deploy https://github.com/AkashaRojee/portfolio

• To clone the effects branch

git clone -b effects https://github.com/AkashaRojee/portfolio

• To clone the desktop-version branch

git clone -b desktop-version https://github.com/AkashaRojee/portfolio

• To clone the contact-form branch

git clone -b contact-form https://github.com/AkashaRojee/portfolio

• To clone the mobile-version branch

git clone -b mobile-version https://github.com/AkashaRojee/portfolio

• To clone the mobile-skeleton branch

git clone -b mobile-skeleton https://github.com/AkashaRojee/portfolio

Notes:

• Both the mobile and the desktop version have been built. The website can be viewed in either view.

• Main is up to date.

• Currently under review: N/A.

Authors

👤 Akasha Rojee

• GitHub: @AkashaRojee
• Twitter: @AkashaRojee
• LinkedIn: Akasha Rojee

👤 Damilare Akintoye

• GitHub: @dami1080

👤 Yahya El Ganayni

• GitHub: @yahyaelganyni1

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.