This is my portfolio resume that showcases examples of my work along with the usual resume information about my work experience.

  • By Mohammed Hussen
  • Last update: Aug 20, 2022
  • Comments: 11

Portfolio

a portfolio resume that showcases examples of my works along with the usual resume information about my work experience.

Built With

  • HTML
  • CSS
  • JS

Live Demo

View Demo

Getting Started

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

Prerequisites

  • Browser
  • A version control like git
  • A text editor

Setup

  • First clone or download using the link https://github.com/binhussen/portfolio.
  • Navigate to the folder using cd portfolio or GUI.
  • Open index.html your favorite browser.
  • Use your favorite text editor to make a changes on the page, add other content if necessary.

Authors

👤 Mohammed Hussen (binhussen)

👤 Jonah Wambua (DJ MrJAY)

🤝 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!

Acknowledgments

  • Microverse Curriculum

📝 License

This project is MIT licensed.

Github

https://github.com/binhussen/portfolio

Comments(11)

  • 1

    Project 8: Details modal (pair programming)

    Project 8: Details modal (pair programming)

    In this section I have built for this milestone is:

    • Added When the user clicks (or taps) the button to check project details, the popup with details about the project appears for both mobile and desktop screen sizes.
    • Added When the user clicks (or taps) the close (X) button, the popup disappears for both mobile and desktop screen sizes.
  • 2

    Project 7: Mobile menu (pair programming)

    Project 7: Mobile menu (pair programming)

    In this section I have built for this milestone is:

    • Added hamburger button, the mobile menu appears.
    • Added the close (X) button, the mobile menu disappears.
    • When the user clicks (or taps) any of the mobile menu options, the mobile menu disappears and a correct part of the page is displayed.
  • 3

    Project 3: Contact form (pair programming)

    Project 2: Contact form

    In this section I have built for this milestone is:

    • Added contact form in the footer.
    • Created a form with a placeholder and validation based on requirement.
    • I can able to collect data by using the Formspree service.
  • 4

    Project 9: Validate contact form (pair programming)

    Project 9: Validate contact form (pair programming)

    In this section I have built for this milestone is:

    • Added validation for the email field to be in lower case.
    • Added to show When the user submits the form, it checks if the email is in lower case.
      • If the validation is OK, the form is sent.
      • If the validation is not OK, you show an error message to the user near the submit button informing them of the error and the form is not sent
  • 5

    Project 6: Evaluate accessibility (pair programming)

    Project 5: Evaluate accessibility (pair programming)

    In this section I have built for this milestone is:

    • Page titles - no issues found
    • Image text alternatives updated
    • Text heading - no issues found
    • Color contrast - no issues found
    • Resize updated by relative measurement rem
    • Interaction updated with an invisible label to match Figma design
    • Moving content - no issues found
    • Multimedia - no issues found
    • Basic structure of the page - no issues found
  • 6

    Peer to Peer code review

    Here we are sharing some feedback from the morning session team regarding Mohamed's code:

    • Please try using some comments to separate sections of code in html index file rather than leaving space lines by themselves.
    • kindly add reusable class names instead of fixed class name for css
  • 7

    Project 5: Application deploy

    Project 5: Application deploy

    In this section I have built for this milestone is:

    • Deployed website using GitHub Pages.
    • Checked the online version of my portfolio and make sure that the page works properly.
    • Updated the README of my repository to include a link to the online version.
  • 8

    Animations and transitions

    Project 2: Animations and transitions

    In this section I have built for this milestone is:

    • Added a color transition when the user hovers over each of the buttons.
    • Added the size of the project images increases slightly when you hover them.
    • Added text of the form instructions moves slightly to the right when the user hovers it.
    • Added animation for the logo of the page, so when you load the page it rotates once.
  • 9

    Project 4: Desktop version

    Project 2: Contact form

    In this section I have built for this milestone is:

    • Updated desktop version looks like the one in the Figma design template.
    • Updated using media queries in CSS file to make your desktop version look like the template(Desktop: 768px or wider).
    • Updated using Grid and Flexbox.
  • 10

    Project 2: Mobile version

    Project 2: Mobile version

    In this PR I added :

    • Added Works section.
    • Added About myself section.
    • Used ul and li for categories in the Work and About myself section.
    • Used CSS Grid in the main container that contains all of the cards and Flexbox to lay out an individual card.
  • 11

    Bugs Hide and Seek

    Hey @binhussen 👋

    I have gone through your repository and I must commend your effort in putting this together 😄

    pls use a forEach statement to create modal pop-up instead of hard coding a loop 6 times