This is a personal portfolio website for showcasing my projects and resume. The website is built using React for the frontend and Flask for the backend, and it connects to a MongoDB database to fetch project data from my GitHub repositories. Feel free to use this as a template for your own Personal Website ๐
You can check out the live demo of the website here.
- Responsive design for different screen sizes
- Starry background animation
- Fetch and display projects from GitHub repositories
- Download resume functionality
- Modern and clean UI/UX design
- Frontend: React, HTML, CSS
- Backend: Flask, Python
- Database: MongoDB
- Styling: CSS3
- API: GitHub API
- Node.js and npm installed
- Python and pip installed
- MongoDB database
- Clone the repository
git clone https://github.com/DaniyalAhm/personal-portfolio.git cd personal-portfolio
- Navigate to the frontend directory and install dependencies
cd frontend npm install
- Start the React development server
npm start
- Navigate to the backend directory
cd backend
- Create a virtual environment and activate it
python -m venv venv source venv/bin/activate # On Windows, use `venv\Scripts\activate`
- Install the required dependencies
pip install -r requirements.txt
- Create a
.env
file in the backend directory and add your environment variablesGITHUB_TOKEN=your_github_token MONGO_URI=your_mongo_db_uri
- Run the Flask server
python backendmain.py
Once the setup is complete, you can access the website at http://localhost:3000
(or the port specified by React) and the backend server at http://localhost:5000
.
- GET /repos: Fetches the list of repositories from GitHub and updates the MongoDB database.
This project is licensed under the MIT License. See the LICENSE file for details.
- LinkedIn: Daniyal Ahmed
- GitHub: DaniyalAhm