Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahammad-mostafa/personal-portfolio
This is the second project in the first module at Microverse program. It is a portfolio website built from a template in Figma.
https://github.com/mahammad-mostafa/personal-portfolio
css3 es6-javascript eslint flexbox grid-layout html-css-javascript html5 microverse microverse-projects microverse-students mit-license responsive-layout responsive-website styelint webhint
Last synced: 1 day ago
JSON representation
This is the second project in the first module at Microverse program. It is a portfolio website built from a template in Figma.
- Host: GitHub
- URL: https://github.com/mahammad-mostafa/personal-portfolio
- Owner: mahammad-mostafa
- License: mit
- Created: 2023-06-01T13:59:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-29T17:17:10.000Z (7 months ago)
- Last Synced: 2024-04-14T10:06:18.918Z (6 months ago)
- Topics: css3, es6-javascript, eslint, flexbox, grid-layout, html-css-javascript, html5, microverse, microverse-projects, microverse-students, mit-license, responsive-layout, responsive-website, styelint, webhint
- Language: CSS
- Homepage: https://mahammad-mostafa.github.io/personal-portfolio/
- Size: 1.97 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 🏷️ Personal Portfolio
This is the second project in the first module in the **Microverse** program.
Check the below contents for further details about this project.
# 📗 Contents
- [Description](#description)
- [Instructions](#instructions)
- [Authors](#authors)
- [Future](#future)
- [Contributions](#contributions)
- [Support](#support)
- [Acknowledgements](#acknowledgements)
- [License](#license)
# 📖 Description
This project is about building a personal portfolio website. It contains three main files (`index.html` / `style.css` / `script.js`).
It also includes some config linters for (`HTML` / `CSS3` / `JavaScript`) in the `.github` folder.
📌 **Live Demo:**
- See the project live from [here](https://mahammad-mostafa.github.io/personal-portfolio).
- Check a screen recording to showcase the project from [here](https://www.loom.com/share/88c81920af414ed990ed921229723289?sid=0fbd0b34-c04f-4c6b-9923-e7802dd173e0).
📌 **Tech Stack:**
- Page strucutre is built with `HTML5`
- Styling and effects built with `CSS3`
- Interaction and dynamic content built with `JavaScript`
📌 **Key Features:**
- Mobile first design approach
- Responsive design on all screens
- Icons in SVG format for sharp visuals
- Hover effect on every link and icon
- Animation on hero section heading
- Toolbar with logo and menu button
- Toggling hamburger mobile menu
- Smooth scrolling for each section
- Menu higlight with scrolling sections
- Hero section with titles and paragraph
- Works section with a detailed card for each item
- About section containing text information
- Contact section with a form to submit
- Footer section with social icons links
- Details Popup window for browsing each project
- Navigation buttons inside popup window
- Custom form validation in contact form
- Preserving contact form information in browser
# 🛠️ Instructions
You can easily download or fork this repository and work on it immadiately!
📌 **Prerequisites:**
- No prior requirements needed!
📌 **Setup:**
- Simply download or fork this repository.
📌 **Deployment:**
- You can deploy this project by uploading three files (`index.html` / `style.css` / `script.js`) to a live server.
# 👥 Authors
📌 **Mahammad:**
- [GitHub](https://github.com/mahammad-mostafa)
- [Twitter](https://twitter.com/mahammad_mostfa)
- [LinkedIn](https://linkedin.com/in/mahammad-mostafa)
📌 **Etsubdink:**
- [GitHub](https://github.com/etsubdink-demeke12)
📌 **Mark:**
- [GitHub](https://github.com/as1imwe-mark)
# 🔭 Future
Some additional features I may implement in the project:
- [ ] Backend and database integration
- [ ] Admin panel for content management
# 🤝🏻 Contributions
Wish to contribute to this project?
Contributions, issues, and feature requests are more than welcome!
Feel free to check the [issues](../../issues) page too.
# ⭐️ Support
Like this project? Show your support by starring!
# 🙏🏻 Acknowledgements
I thank everyone at **Microverse** for guiding me through this project.
Special thanks for [John](https://github.com/Rysth) who contributed this [issue](../../issues/3).
# 📝 License
This project is [MIT](LICENSE.md) licensed.