{"id":26755262,"url":"https://github.com/bigyusuf/yusuflateef","last_synced_at":"2026-04-05T20:32:30.823Z","repository":{"id":37447370,"uuid":"468252154","full_name":"BigYusuf/yusuflateef","owner":"BigYusuf","description":"This is my cool personal portfolio... where you can easily manage the whole portfolio without going back to the code","archived":false,"fork":false,"pushed_at":"2022-10-27T15:56:07.000Z","size":12550,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-18T06:19:13.869Z","etag":null,"topics":["alan-ai","context-api","cool-design","cool-slider","firebase","hooks","management-system","react","react-router","reactjs","vercel","voice-assistant"],"latest_commit_sha":null,"homepage":"https://yusuflateef.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BigYusuf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-10T08:15:48.000Z","updated_at":"2022-07-12T19:34:19.000Z","dependencies_parsed_at":"2023-01-19T12:18:41.574Z","dependency_job_id":null,"html_url":"https://github.com/BigYusuf/yusuflateef","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigYusuf%2Fyusuflateef","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigYusuf%2Fyusuflateef/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigYusuf%2Fyusuflateef/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigYusuf%2Fyusuflateef/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BigYusuf","download_url":"https://codeload.github.com/BigYusuf/yusuflateef/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246042024,"owners_count":20714150,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alan-ai","context-api","cool-design","cool-slider","firebase","hooks","management-system","react","react-router","reactjs","vercel","voice-assistant"],"created_at":"2025-03-28T14:19:20.007Z","updated_at":"2025-12-30T23:20:59.142Z","avatar_url":"https://github.com/BigYusuf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/BigYusuf/yusuflateef\"\u003e\n    \u003ch1 align=\"center\"style=\"color:black;\"\u003eBig\u003cspan style=\"color:blue;\"\u003eYusufff\u003c/span\u003e\u003c/h1\u003e\n  \u003c/a\u003e\n\n  \u003cp align=\"center\"\u003e\n    An awesome portfolio projects!\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/BigYusuf/yusuflateef\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://yusuflateef.vercel.app/\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/BigYusuf/yusuflateef/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/BigYusuf/yusuflateef/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#features\"\u003eUnique Features\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#acknowledgments\"\u003eAcknowledgments\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About The Project\n\n[![Desktop Mode][product-screenshot]](https://yusuflateef.vercel.app/)\n\nThis 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\n\nDue to some responses i got from other developers:\n\n- Text and unnecessary explanation, contents have been removed, giving it this simple outlook\n- Easy integration to database\n- I avoided using backend in this project.\n\nOf 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.\n\n[![Mobile screen][product-screenshot2]](https://yusuflateef.vercel.app/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Built With\n\nHere are the list of major frameworks/ libraries used to bootstrap this project\n\n- [React.js](https://reactjs.org/)\n- [Emailjs](https://www.emailjs.com/)\n- [Firebase Firestore](https://firebase.google.com/)\n- [Alan AI](https://alan.app/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Features\n\nThis section is still in progress\n\n#### Email\n\n[![Sample Email][product-screenshot3]](https://yusuflateef.vercel.app/)\n\n#### Database storage\n\n[![Sample Database][product-screenshot4]](https://yusuflateef.vercel.app/)\n\n#### Elegant design and multi-mode\n\n[![Mobile][product-screenshot5]](https://yusuflateef.vercel.app/)\n\n#### Authenticated Admin and protected route\n\n[![Mobile][product-screenshot7]](https://yusuflateef.vercel.app/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n#### Voice control\n\n[![Mobile][product-screenshot6]](https://yusuflateef.vercel.app/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\nTo get a local copy up and running follow these simple example steps.\n\n### Prerequisites\n\nThis is an example of how to list things you need to use the software and how to install them.\n\n- npm\n\n  ```sh\n  npm install npm@latest -g\n  ```\n\n### Installation\n\n_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._\n\n1. Clone the repo\n\n   ```sh\n   git clone https://github.com/BigYusuf/yusuflateef.git\n   ```\n\n2. Install NPM packages\n\n   ```sh\n   npm install\n   ```\n\n3. Enter your KEYS in `.env`\n\n   ```javascript\n   REACT_APP_ALAN_KEY = \"ENTER YOUR ALAN AI API KEY\";\n   REACT_APP_USER_ID = \"ENTER YOUR EMAILJS USER ID\";\n   REACT_APP_TEMPLATE_ID = \"ENTER YOUR EMAIL JS TEMPLATE ID\";\n   REACT_APP_SERVICE_ID = \"ENTER YOUR EMAIL JS SERVICE ID\";\n   REACT_APP_FBASE_API_KEY=\"ENTER YOUR FIREBASE API KEY\";\n   REACT_APP_FBASE_AUTH_DOMAIN=\"ENTER YOUR FIREBASE AUTH DOMAIN\"\n   REACT_APP_FBASE_PROJECT_ID=\"ENTER YOUR FIREBASE PROJECT ID\"\n   REACT_APP_FBASE_STORAGE_BUCKET=\"ENTER YOUR FIREBASE STORAGE BUCKET\"\n   REACT_APP_FBASE_MESSAGE_ID=\"ENTER YOUR FIREBASE MESSAGE ID\"\n   REACT_APP_FBASE_APP_ID=\"ENTER YOUR FIREBASE APP ID\"\n   REACT_APP_FBASE_DB_IMAGEURL=\"ENTER YOUR FIREBASE DATABASE IMAGE URL\"\n   ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n## Usage\n\nUse 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.\n\n_For more examples, please refer to the [Documentation](https://example.com)_\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ROADMAP --\u003e\n\n## Roadmap\n\n- [x] Design Web application\n  - [x] Create React App\n  - [x] Create all components (Navbar, Intro, Contact, Alan, Skills, Services, Work)\n  - [x] Create css for the enrichment of the application\n  - [x] Create dummydata for testing of web application\n- [x] Connect and integrate Alan Studio\n- [x] Add Database functionality (Firebase firestore)\n- [x] Add Send Email functionality\n- [x] Add Codes to github\n- [x] Deploy and Host Web Application on firebase (testing)\n- [x] Take Screenshots of Web Application\n- [x] Update dummydata with real life working data\n- [x] Add / update Project Readme file\n- [x] Create well detail report on Project (Documentation)\n- [ ] Test functionality of website and its limits\n- [ ] Host website on custom domain\n- [ ] Continuous update and linking to blog post\n\nSee the [open issues](https://github.com/BigYusuf/yusuflateef/issues) for a full list of proposed features (and known issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf 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\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTACT --\u003e\n\n## Contact\n\nYusuf Lateef - [Connect via Messenger](http://m.me/Bigyusufff/) - yusuflateef0000@gmail.com mystik5551@gmail.com\n\nProject Link: [https://github.com/BigYusuf/yusuflateef](https://github.com/BigYusuf/yusuflateef)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n\n## Acknowledgments\n\nHere are the list of resources I find helpful and would like to give credit to.\n\n- [The Net Ninja (Youtube Channel) - All about firebase 9](https://www.youtube.com/watch?v=9zdvmgGsww0)\n- [Best ReadMe Template](https://github.com/othneildrew/Best-README-Template)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[contributors-shield]: https://img.shields.io/github/contributors/BigYusuf/Best-README-Template.svg?style=for-the-badge\n[contributors-url]: https://github.com/BigYusuf/yusuflateef/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/BigYusuf/yusuflateef.svg?style=for-the-badge\n[forks-url]: https://github.com/BigYusuf/yusuflateef/network/members\n[stars-shield]: https://img.shields.io/github/stars/BigYusuf/yusuflateef.svg?style=for-the-badge\n[stars-url]: https://github.com/BigYusuf/yusuflateef/stargazers\n[issues-shield]: https://img.shields.io/github/issues/BigYusuf/yusuflateef\n[issues-url]: https://github.com/BigYusuf/yusuflateef/issues\n[license-shield]: https://img.shields.io/github/license/BigYusuf/yusuflateef.svg?style=for-the-badge\n[license-url]: https://github.com/BigYusuf/yusuflateef/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://linkedin.com/in/bigyusufff\n[product-screenshot]: images/desktopmode.png\n[product-screenshot2]: images/mobilemode.png\n[product-screenshot3]: images/emailsample.png\n[product-screenshot4]: images/databasesample.png\n[product-screenshot5]: images/mobilemode2.png\n[product-screenshot6]: images/alanstudio.png\n[product-screenshot7]: images/login.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigyusuf%2Fyusuflateef","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigyusuf%2Fyusuflateef","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigyusuf%2Fyusuflateef/lists"}