Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haroonabdulrazaq/portfolio
Portfolio
https://github.com/haroonabdulrazaq/portfolio
css3 flexbox grid-layout html5 javascript sass
Last synced: about 1 month ago
JSON representation
Portfolio
- Host: GitHub
- URL: https://github.com/haroonabdulrazaq/portfolio
- Owner: Haroonabdulrazaq
- Created: 2019-08-23T14:53:33.000Z (over 5 years ago)
- Default Branch: develop
- Last Pushed: 2023-02-09T19:10:08.000Z (almost 2 years ago)
- Last Synced: 2024-11-29T00:42:16.508Z (about 1 month ago)
- Topics: css3, flexbox, grid-layout, html5, javascript, sass
- Language: HTML
- Homepage: https://haroonabdulrazaq.github.io/Portfolio/
- Size: 13.1 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Portfolio
Portfolio showcase my skills in web technologies,
It consist of all projects i have built and skills i am comfortable working with.
## :camera: Screenshot
## Built With
- HTML5
- CSS3(Sass/Scss)
[Flex]
[Grid]
- JavaScript(ES6)
## :rocket: Live Demo
[LIVE DEMO LINK](https://www.haroonabdulrazaq.tech) OR
[LIVE DEMO LINK](https://haroonabdulrazaq.github.io/Portfolio/)
## :camera: Presentation
## Work Done 🔧
- Mobile first design approach
- Highlight some of my awesome projects
- Display my skill in css animation
- Include my backgorund in tech and my contacts
- Use Sass
- Use industry-standard tools (flexbox & grid) to place elements in the page.
- Ability to create UIs adaptable to different screen sizes using mediaqueries.
- Apply front-end best practices.
- Ability to create UIs adjusted to given designs.
# Getting Started 🚀
These instructions will get you a copy of the project up and running on your local machine.
## How To Use 🔧
From your command line, first clone the project:
```bash
# Clone this repository
$ git clone https://github.com/Haroonabdulrazaq/Portfolio.git
# Go into the repository
$ cd Portfolio
```
- Open in your favorite Editor
## Tools
| Index | Links | Use |
| ----- | :---------------------------------------------------------------------------------: | -------------------------------------------------------: |
| 1 | [HTML Validator](https://validator.w3.org/) | To check HTML errors |
| 2 | [Stylelint](https://github.com/microverseinc/linters-config/tree/master/javascript) | Linter to check css errors and enforce convention |
| 3 | [Eslint](https://github.com/microverseinc/linters-config/tree/master/javascript) | Linter to check javaScript errors and enforce convention |
| 4 | [TinyPNG](https://tinypng.com/) | To optimize image size |
| 5 | [Yandex Metrica](https://metrica.yandex.com/about?) | For site analytics |
| 6 | [Google Mobile-Friendly Test](https://search.google.com/test/mobile-friendly) | To check mobile friendliness |
| 7 | [Dead link checker](https://www.deadlinkchecker.com/) | To check for Deadlinks |
## Deploy 🚀
This project is deploy to [Netlify](Netlify.com)
## Author
👤 **Haroon Abdulrazaq**
- Github: [@githubhandle](https://github.com/Haroonabdulrazaq)
- Twitter: [@twitterhandle](https://twitter.com/hanq_o)
- Linkedin: [linkedin](https://www.linkedin.com/in/haroonabdulrazaq)
## Show your support
Give a ⭐️ if you like this project!
## Acknowledgments
- I appreciate Jonas SCHMEDTMAN for the animation techniques
- Microverse Student Figma Design
- Picture by Iconfinder & NicePng
## 📝 License
This project is [MIT](lic.url) licensed.