📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ (OPTIONAL)
• 📝 License

📖 Portifolio Microverse! project

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.

🛠 Built With

Tech Stack

Client

• HTML
• CSS
• JS

Key Features

• 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.

(back to top)

🚀 Live Demo

• Live Demo

(back to top)

💻 Getting Started

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

Setup

Clone this repository to your desired folder:

cd my-folder git clone git@github.com:myaccount/my-project.git

Prerequisites

In order to run this project you need:

• GitHub account;
• git installed on your OS.

Install

https://github.com/microverseinc/linters-config/tree/master/html-css-js

• Installations required to run this project:

Webhint installation.

• Run the following command:

npm install --save-dev hint@7.x

Stylelint installation.

• 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

ESLint

• Run

npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

Usage

You can use this project by cloning it to your folder and changing index.html and styles.css files.

Run tests

To run tests, run the following commands:

npx hint . npx stylelint "**/*.{css,scss}"

Deployment

You can deploy this project adding new lines of code to index.html and styles.css files.

(back to top)

👥 Authors

👤 Habtamu Alemayehu

• GitHub: @bena

(back to top)

🔭 Future Features

For tthe second milestone in building this portfolio website, it will create the mobile website section where you will list your portfolio projects.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

(back to top)

⭐️ Show your support

Give me ⭐️ If you like this project!

(back to top)

🙏 Acknowledgments

I would like to thank Microverse program for providing me this great chance.

(back to top)

❓ FAQ (OPTIONAL)

(back to top)

📝 License

This project is MIT licensed.

(back to top)