Portfolio

Getting Started Cloning the project Git clone git@github.com:BANCUNGUYE66/Portofolio.github.io.git To get a local copy up and running follow these simple example steps. Prerequisites

Prerequisites A working browser application. VS code or anu other IDE NPM (Node Package Manager) Setup Install INSTALLING AND TESTING WEBHINT npm init -y

npm install --save-dev hint@6.x For validation detection to use Webhint Run -npx hint . INSTALLING AND TESTING STYLEHINT

npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x For validation detection to use Webhint Run

📗 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
• 📝 License

📖 Portfolio

Learning objectives

• Used basic JavaScript syntax.
• Used JavaScript to manipulate DOM elements.
• Used JavaScript events.
• Understood how to parse a Figma design to create a UI.
• Used objects to store and access data.

Description

For this milestone of my portfolio website, I implemented a popup window that includes the project details in both desktop and mobile. In order to do that, I needed to store the information about my projects in a JavaScript object.

🛠 Built With

Tech Stack

Programming Languages

• Html
• Css

Key Features

features of this project

• learning how to setup linters
• learning how to git ignore files

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

To get a local copy up and runing follow these simple example steps. 1.Clone the Repo or Download the Zip file or git clone git@github.com:BANCUNGUYE66/Portofolio.github.io.git Open it with the live server

Prerequisites

In order to run this project you need:

-Git -Npm -Node -VS Code

Setup

Information that shows how to clone the repository

• Open your command line interface (such as Git Bash or Terminal).
• Navigate to the directory where you want to clone the repository.
• Use the "git clone" command, followed by the URL of the repository you want to clone.
• Press enter, and the repository will be cloned to your local machine.

Install

The ways to install linters you used for the project

If you are not familiar with linters, read [root level README](../README.md).

Set-up GitHub Actions

Please do the following steps in this order:

1. In the first commit of your feature branch create a .github/workflows folder and add a copy of .github/workflows/linters.yml to that folder.
   • Remember to use the file linked above
   • Remember that .github folder starts with a dot.
2. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
   • If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
3. When you open your first pull request you should see the result of the GitHub actions.

Set-up linters in your local env

Note: The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:

# .gitignore
node_modules/

Lighthouse

An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more.

You can get the Lighthouse report by any of the following ways:

• In Chrome DevTools
• From the command line
• As a Node module
• From a web UI

To access the report generated by Lighthouse on your pull request, click the Details link for the Linters/Lighthouse check and you will see the full output of the action.

Webhint

A customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.

NOTE: If you are running on Windows, you need to initialize npm to create package.json file.

npm init -y

Run

1. Run

   npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
   

   not sure how to use npm? Read this.

2. Copy .stylelintrc.json to the root directory of your project.

3. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.

   • If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.

4. Run npx stylelint "**/*.{css,scss}" on the root of your directory of your project.

5. Fix linter errors.

6. IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

Have you already completed the Sass lessons?

If you completed the Sass lessons you may prefer to work with SCSS files, if that's the case you need to perform a few modifications to the linter configuration files.

1. In the file .github/workflows/linters.yml line 48 replace "**/*.{css,scss}" with "**/*.scss"
2. Use npx stylelint "**/*.scss" to lint you SCSS files and not the generated CSS

Once you've done the previous steps you can focus on your SCSS files and not in fixing the generated CSS output every time.

Deployment

Deployment Link

👥 Authors

Mention all of the collaborators of this project.

👥 Author

• GitHub: @bancunguye66
• Twitter: @bancunguye66
• LinkedIn: [Aimable BANCUNGUYE](https://linkedin.com/in/Aimable BANCUNGUYE)

👥 Collabrations

👤 Yan Min Thwin

• GitHub: @anbehindY
• Twitter: @yanminthwin
• LinkedIn: Yan Min Thwin

👤 JansueT

• GitHub: @githubhandle
• instagram: @cansuetas
• twitter: @cansu8tas
• linkedIn: @LinkedIn

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

🔭 Future Features

• [Web]
• [Socialmedia]
• [Navigation]

(back to top)

⭐️ Show your support

Write a message to encourage readers to support your project

If you like this project...

(back to top)

🙏 Acknowledgments

Give credit to everyone who inspired your codebase.

(back to top)

📝 License

This project is MIT licensed.