Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/benawi/portifolio-microverese

Portfolio: setup and mobile first : My portfolio project built with HTML, CSS,
https://github.com/benawi/portifolio-microverese

css html javascript linters

Last synced: about 5 hours ago
JSON representation

Portfolio: setup and mobile first : My portfolio project built with HTML, CSS,

Awesome Lists containing this project

README 

        



# 📗 Table of Contents



- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

  - [Run tests](#run-tests)

  - [Deployment](#triangular_flag_on_post-deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [❓ FAQ (OPTIONAL)](#faq)

- [📝 License](#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

  



### 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](https://benawi.github.io/Portifolio-Microverese/)



(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 [email protected]: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 [email protected]



### Stylelint installation.

- Run the following command:

> npm install --save-dev [email protected] [email protected] [email protected] [email protected]



### ESLint

- Run



> npm install --save-dev [email protected] [email protected] [email protected] [email protected]



### 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](https://github.com/Benawi)



(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](./MIT.md) licensed.



(back to top)