BigYusufff

An awesome portfolio projects!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
   • Unique Features
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

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.

(back to top)

Built With

Here are the list of major frameworks/ libraries used to bootstrap this project

• React.js
• Emailjs
• Firebase Firestore
• Alan AI

(back to top)

Features

This section is still in progress

Email

Database storage

Elegant design and multi-mode

Authenticated Admin and protected route

(back to top)

Voice control

(back to top)

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

  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

   git clone https://github.com/BigYusuf/yusuflateef.git

2. Install NPM packages

   npm install

3. Enter your KEYS in .env

   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"

(back to top)

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

(back to top)

Roadmap

• Design Web application
  • Create React App
  • Create all components (Navbar, Intro, Contact, Alan, Skills, Services, Work)
  • Create css for the enrichment of the application
  • Create dummydata for testing of web application
• Connect and integrate Alan Studio
• Add Database functionality (Firebase firestore)
• Add Send Email functionality
• Add Codes to github
• Deploy and Host Web Application on firebase (testing)
• Take Screenshots of Web Application
• Update dummydata with real life working data
• Add / update Project Readme file
• 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 for a full list of proposed features (and known issues).

(back to top)

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

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Yusuf Lateef - Connect via Messenger - yusuflateef0000@gmail.com mystik5551@gmail.com

Project Link: https://github.com/BigYusuf/yusuflateef

(back to top)

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
• Best ReadMe Template

(back to top)