- 📖 About the Project
- 💻 Getting Started
- 👥 Authors
- 🔭 Future Features
- 🤝 Contributing
- ⭐️ Show your support
- 🙏 Acknowledgements
- ❓ FAQ (OPTIONAL)
- 📝 License
Portifolio Microverse! project is a repository consisting of the following files:
- HTML file (index.html)
- CSS file (styles.css)
- HTML and CSS linters file
The repository also contains files for setting up linters and validators.
- When the user clicks (or taps) the hamburger button, the mobile menu appears.
- When the user clicks (or taps) the close (X) button, the mobile menu disappears.
- When the user clicks (or taps) any of the mobile menu options, the mobile menu disappears.
- When the user clicks (or taps) any of the mobile menu options, a correct part of the page is displayed.
- When the user clicks (or taps) the button to check project details, the popup with details about the project appears.
- When the user clicks (or taps) the close (X) button, the popup disappears.
- A JavaScript array used to store all of the information of all project cards.
- For each project the following pieces of data: name, description, featured image, technologies, link to live version, link to source stored in a JavaScript object.
- The recent work section is created when the page loads because the components are created dynamically using the information stored in that JavaScript.
- Popups(Modal) Implemented for both mobile and desktop screen sizes.
- I try to stick pages to the design as much as possible using [the templates 3 in Figma]
- The content of the email field will be validated
- When the user submits the form, it checks, whether the email is in lowercase or not.
- If the validation is OK, the form will be sent.
- If the validation is not OK, it shows an error message to the user near the submit button informing that the error and the form is not sent.
To get a local copy up and running, follow these steps.
Clone this repository to your desired folder:
cd my-folder git clone git@github.com:myaccount/my-project.git
In order to run this project you need:
- GitHub account;
- git installed on your OS.
https://github.com/microverseinc/linters-config/tree/master/html-css-js
- Installations required to run this project:
- Run the following command:
npm install --save-dev hint@7.x
- Run the following command:
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
- Run
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
You can use this project by cloning it to your folder and changing index.html and styles.css files.
To run tests, run the following commands:
npx hint . npx stylelint "**/*.{css,scss}"
You can deploy this project adding new lines of code to index.html and styles.css files.
👤 Habtamu Alemayehu
- GitHub: @bena
For tthe second milestone in building this portfolio website, it will create the mobile website section where you will list your portfolio projects.
Contributions, issues, and feature requests are welcome!
Give me ⭐️ If you like this project!
I would like to thank Microverse program for providing me this great chance.
This project is MIT licensed.