ab-noori / portfolio Goto Github PK

Portfolio website will showcase all of my recent work. It will also maintain the information and history of my recent projects, the brave information about me, and the link to my resume.

Home Page: https://ab-noori.github.io/Portfolio

License: MIT License

HTML 30.12% CSS 43.87% JavaScript 26.02%

css-flexbox css-grid css3 javascript html5

portfolio's Introduction

Portfolio

Project Veiw Screenshots

📗 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

📖 [My-Portfolio]

[My-Portfolio] is a project to showcase all of my recent work. It will maitain the information and history of my recent projects, the brave informatin about me, and the link to my resume. it will also provide the context to be in contact with the clients.

🛠 Built With

Tech Stack

Client

Server

Database

Key Features

[Represent most recent projcts]
[Represnt skills and technogies]
[Create contact context for visitors]
[Responsive with the view of desktop and mobile]

(back to top)

🚀 Live Demo

Live Demo On Gh-pages

Live Demo On Render

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need:

A Nude.js installed on your local system.
A browser of you choice.
A text editor of your choice.

Setup

Clone this repository to your desired folder:

Use the following Commands:

cd your-desired-folder
git clone [email protected]:ab-noori/Portfolio.git

Install

Install this project with:

You can deploy it with your hosting provider of your choise.

Usage

To demonstrate your skills & knowlege of technoly.
To represent the most recent project.
to maitain connection with visitors.

Run tests

Run the following script and style test:

npx hint .
npx hint . --fix

npx eslint .
npx eslint . --fix

npx stylelint "**/*.{css,scss}"
npx stylelint "**/*.{css,scss}" --fix

Deployment

You can deploy this project using:

Free deployment services like GitHub pages.
Any deployment services of your choice.

(back to top)

👥 Authors

👤 Abdul Ali Noori

GitHub: @ab-noori
Twitter: @AbdulAliNoori4
LinkedIn: abdul-ali-noori

(back to top)

🔭 Future Features

[Responsiveness with the all kind of laptop and handheld devices viewport]

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project, you are most welcome to Contribute.

(back to top)

🙏 Acknowledgments

I would like to thank all of My colleagues and supporters.

(back to top)

📝 License

This project is MIT licensed.

(back to top)

portfolio's People

Contributors

Stargazers

Watchers

portfolio's Issues

Portfolio Project Deployment

I have been using GitHub pages since the beginning of the My-Portfolio project.
You can see the branch deployment link on each of my PR.
Below is my project deployment link from the main branch.
https://ab-noori.github.io/My-Portfolio/

Morning Session Peer-to-Peer code review

Well done Abdulali Noori on your portfolio project. The project is complete and looking awesome. It rocks both on mobile and desktop versions.

The only things we suggest are:

there is a typo in about me section
Desktop Version:

Mobile Version:

It would be nice if you implement accessibility on the desktop version so that people who prefer to use a keyboard or a screen reader to access the website, can access your beautiful website easily.

Peer to Peer code review

(https://github.com/ab-noori/My-Portfolio/blob/f186d0ce08e50d07bd2e8a314506ce89caccc655/styles.css#L38)

I think it would be better to make the header to be center in the view port width instead of making a fixed width for responsiveness
design will break in between 768 and desktop pixels

Peer to peer code review

Hi @ab-noori
Great job on applying the html and css best practices✔
I liked the way you sectioned your HTML elements and added comments. It makes it easier for a reviewer to understand your code.

I would like to address a few issues

Semantic tags

I think it would be better not to wrap the header and main tags in a div element.
Semantic tags clearly indicate the role of the content they contain.

Desktop-version responsiveness

I suggest the use of percentage widths rather than fixed widths. Fixed widths make your website unresponsive.
Here the wrapper div width:1440px makes it unresponsive to smaller widths.

Peer to peer code review

https://github.com/ab-noori/My-Portfolio/blob/f186d0ce08e50d07bd2e8a314506ce89caccc655/styles.css#L29

I think it would be better if you avoided using fixed width as this will make your website unresponsive.

Week-3 : peer to peer code review

Review

You work hard and Did a very well job creating your portfolio.
It is responsive and it looks good.

suggestion

It would be better to use 100% width.
Use some Color contrast on the button.
it would be better to avoid a horizontal scroll bar at the bottom of your website.

Peer to peer code review

https://github.com/ab-noori/My-Portfolio/blob/f186d0ce08e50d07bd2e8a314506ce89caccc655/styles.css#L449

it would be better to make the cards responsive for width less than 1000px
from mobile to desktop needs to be responsive.

ab-noori / portfolio Goto Github PK

portfolio's Introduction

Portfolio

📗 Table of Contents

📖 [My-Portfolio]

🛠 Built With

Tech Stack

Key Features

🚀 Live Demo

💻 Getting Started

Prerequisites

Setup

Install

Usage

Run tests

Deployment

👥 Authors

🔭 Future Features

🤝 Contributing

⭐️ Show your support

🙏 Acknowledgments

📝 License

portfolio's People

Contributors

Stargazers

Watchers

portfolio's Issues

Semantic tags

Desktop-version responsiveness

Review

suggestion

Recommend Projects

Recommend Topics

Recommend Org