https://github.com/bigyusuf/yusuflateef
This is my cool personal portfolio... where you can easily manage the whole portfolio without going back to the code
https://github.com/bigyusuf/yusuflateef
alan-ai context-api cool-design cool-slider firebase hooks management-system react react-router reactjs vercel voice-assistant
Last synced: 3 months ago
JSON representation
This is my cool personal portfolio... where you can easily manage the whole portfolio without going back to the code
- Host: GitHub
- URL: https://github.com/bigyusuf/yusuflateef
- Owner: BigYusuf
- License: mit
- Created: 2022-03-10T08:15:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-27T15:56:07.000Z (over 3 years ago)
- Last Synced: 2024-12-18T06:19:13.869Z (over 1 year ago)
- Topics: alan-ai, context-api, cool-design, cool-slider, firebase, hooks, management-system, react, react-router, reactjs, vercel, voice-assistant
- Language: JavaScript
- Homepage: https://yusuflateef.vercel.app/
- Size: 12 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
BigYusufff
An awesome portfolio projects!
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
## About The Project
[![Desktop Mode][product-screenshot]](https://yusuflateef.vercel.app/)
This project is simple and unique. The project ideas was inspired by a friend, who wants an interactive portfolio. Where the applicant's portfolio website will do all the talking and answer some of the unknown questions recruiters have in mind. The portfolio is mobile friendly
Due to some responses i got from other developers:
- Text and unnecessary explanation, contents have been removed, giving it this simple outlook
- Easy integration to database
- I avoided using backend in this project.
Of course, the website is mobile responsive. I used a mobile first approach to desgn this website. Although, It took longer than expected due to integrating the alan AI to the web application.
[![Mobile screen][product-screenshot2]](https://yusuflateef.vercel.app/)
### Built With
Here are the list of major frameworks/ libraries used to bootstrap this project
- [React.js](https://reactjs.org/)
- [Emailjs](https://www.emailjs.com/)
- [Firebase Firestore](https://firebase.google.com/)
- [Alan AI](https://alan.app/)
### Features
This section is still in progress
#### Email
[![Sample Email][product-screenshot3]](https://yusuflateef.vercel.app/)
#### Database storage
[![Sample Database][product-screenshot4]](https://yusuflateef.vercel.app/)
#### Elegant design and multi-mode
[![Mobile][product-screenshot5]](https://yusuflateef.vercel.app/)
#### Authenticated Admin and protected route
[![Mobile][product-screenshot7]](https://yusuflateef.vercel.app/)
#### Voice control
[![Mobile][product-screenshot6]](https://yusuflateef.vercel.app/)
## Getting Started
To get a local copy up and running follow these simple example steps.
### Prerequisites
This is an example of how to list things you need to use the software and how to install them.
- npm
```sh
npm install npm@latest -g
```
### Installation
_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
1. Clone the repo
```sh
git clone https://github.com/BigYusuf/yusuflateef.git
```
2. Install NPM packages
```sh
npm install
```
3. Enter your KEYS in `.env`
```javascript
REACT_APP_ALAN_KEY = "ENTER YOUR ALAN AI API KEY";
REACT_APP_USER_ID = "ENTER YOUR EMAILJS USER ID";
REACT_APP_TEMPLATE_ID = "ENTER YOUR EMAIL JS TEMPLATE ID";
REACT_APP_SERVICE_ID = "ENTER YOUR EMAIL JS SERVICE ID";
REACT_APP_FBASE_API_KEY="ENTER YOUR FIREBASE API KEY";
REACT_APP_FBASE_AUTH_DOMAIN="ENTER YOUR FIREBASE AUTH DOMAIN"
REACT_APP_FBASE_PROJECT_ID="ENTER YOUR FIREBASE PROJECT ID"
REACT_APP_FBASE_STORAGE_BUCKET="ENTER YOUR FIREBASE STORAGE BUCKET"
REACT_APP_FBASE_MESSAGE_ID="ENTER YOUR FIREBASE MESSAGE ID"
REACT_APP_FBASE_APP_ID="ENTER YOUR FIREBASE APP ID"
REACT_APP_FBASE_DB_IMAGEURL="ENTER YOUR FIREBASE DATABASE IMAGE URL"
```
## Usage
Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
_For more examples, please refer to the [Documentation](https://example.com)_
## Roadmap
- [x] Design Web application
- [x] Create React App
- [x] Create all components (Navbar, Intro, Contact, Alan, Skills, Services, Work)
- [x] Create css for the enrichment of the application
- [x] Create dummydata for testing of web application
- [x] Connect and integrate Alan Studio
- [x] Add Database functionality (Firebase firestore)
- [x] Add Send Email functionality
- [x] Add Codes to github
- [x] Deploy and Host Web Application on firebase (testing)
- [x] Take Screenshots of Web Application
- [x] Update dummydata with real life working data
- [x] Add / update Project Readme file
- [x] Create well detail report on Project (Documentation)
- [ ] Test functionality of website and its limits
- [ ] Host website on custom domain
- [ ] Continuous update and linking to blog post
See the [open issues](https://github.com/BigYusuf/yusuflateef/issues) for a full list of proposed features (and known issues).
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact
Yusuf Lateef - [Connect via Messenger](http://m.me/Bigyusufff/) - yusuflateef0000@gmail.com mystik5551@gmail.com
Project Link: [https://github.com/BigYusuf/yusuflateef](https://github.com/BigYusuf/yusuflateef)
## Acknowledgments
Here are the list of resources I find helpful and would like to give credit to.
- [The Net Ninja (Youtube Channel) - All about firebase 9](https://www.youtube.com/watch?v=9zdvmgGsww0)
- [Best ReadMe Template](https://github.com/othneildrew/Best-README-Template)
[contributors-shield]: https://img.shields.io/github/contributors/BigYusuf/Best-README-Template.svg?style=for-the-badge
[contributors-url]: https://github.com/BigYusuf/yusuflateef/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/BigYusuf/yusuflateef.svg?style=for-the-badge
[forks-url]: https://github.com/BigYusuf/yusuflateef/network/members
[stars-shield]: https://img.shields.io/github/stars/BigYusuf/yusuflateef.svg?style=for-the-badge
[stars-url]: https://github.com/BigYusuf/yusuflateef/stargazers
[issues-shield]: https://img.shields.io/github/issues/BigYusuf/yusuflateef
[issues-url]: https://github.com/BigYusuf/yusuflateef/issues
[license-shield]: https://img.shields.io/github/license/BigYusuf/yusuflateef.svg?style=for-the-badge
[license-url]: https://github.com/BigYusuf/yusuflateef/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/bigyusufff
[product-screenshot]: images/desktopmode.png
[product-screenshot2]: images/mobilemode.png
[product-screenshot3]: images/emailsample.png
[product-screenshot4]: images/databasesample.png
[product-screenshot5]: images/mobilemode2.png
[product-screenshot6]: images/alanstudio.png
[product-screenshot7]: images/login.png