Portfolio Template

A customizable portfolio template built with Flask and Docker, featuring a clean design and easy customization options. This template allows you to showcase your work experiences, education, hobbies, and travel experiences in an elegant way.

Features

• 🎨 Clean and modern design
• 🔧 Easy to customize and extend
• 📱 Responsive layout
• 🗺️ Interactive map for showcasing visited locations
• 📚 Multiple page sections (About, Work Experience, Education, Hobbies)
• 🐳 Docker support for easy deployment
• 🔄 Dynamic content using Jinja templates

Setup Instructions

Prerequisites

• Docker and Docker Compose installed on your machine
• Git (for cloning the repository)
• MySQL (if running without Docker)

Environment Setup

The application requires certain environment variables to be set. Create a .env file in the app directory with the following variables:

URL=localhost:5000
MYSQL_HOST=mysql
MYSQL_USER=myportfolio
MYSQL_PASSWORD=your_password_here
MYSQL_DATABASE=myportfoliodb
MYSQL_ROOT_PASSWORD=your_root_password_here

Make sure to:

• Replace your_password_here with a secure password
• Replace your_root_password_here with a secure root password
• Keep these credentials safe and never commit them to version control

MySQL Setup

If you're using Docker, MySQL will be automatically set up for you. For local development:

1. Install MySQL:

   # For macOS with Homebrew
   brew install mysql
   
   # For Ubuntu/Debian
   sudo apt-get install mysql-server
   
   # For Windows
   # Download and install from MySQL website

2. Start MySQL service:

   # For macOS with Homebrew
   brew services start mysql
   
   # For Ubuntu/Debian
   sudo service mysql start

3. Create the database and user:

   mysql -u root -p
   
   # In MySQL prompt:
   CREATE DATABASE myportfoliodb;
   CREATE USER 'myportfolio'@'localhost' IDENTIFIED BY 'your_password_here';
   GRANT ALL PRIVILEGES ON myportfoliodb.* TO 'myportfolio'@'localhost';
   FLUSH PRIVILEGES;

Quick Start

1. Clone the repository:

   git clone https://github.com/laygofiona/mlh-portfolio.git
   cd mlh-portfolio

2. Create environment file:

   # Create .env file in the app directory
   cp app/.env.example app/.env

3. Build and start the containers:

   docker-compose up --build

4. Access your portfolio at: http://localhost:5000

Development Setup

For local development without Docker:

1. Create a virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

2. Install dependencies:

   pip install -r requirements.txt

3. Set up environment variables:

   cp app/.env.example app/.env

4. Run the Flask application:

   flask run

Production Deployment

For production deployment:

1. Use the production Docker Compose file:

   docker-compose -f docker-compose.prod.yml up --build -d

Customization

To personalize your portfolio, you'll need to modify several files in the project. Here's where to make your changes:

Content Customization

1. About Page (app/templates/aboutUs.html)

   • Replace the profile picture in app/static/img/
   • Update the personal description and bio
   • Modify contact information and social media links

2. Work Experience (app/templates/workExperience.html)

   • Navigate to this file to update your work history
   • Each experience is structured as:

     <div class="experience">
         <h3>Job Title</h3>
         <p>Company Name</p>
         <p>Duration</p>
         <p>Description</p>
     </div>

3. Education (app/templates/education.html)

   • Update your educational background
   • Add/modify schools, degrees, and graduation dates
   • Include relevant coursework and achievements

4. Hobbies (app/templates/hobbies.html)

   • Add your personal interests and hobbies
   • Upload related images to app/static/img/
   • Update image references in the HTML

5. Map (app/templates/map.html and app/static/scripts/map.js)

   • Update the locations in map.js with your visited places
   • Each location should include coordinates and description

Styling Customization

1. Colors and Theme (app/static/styles/)

   • Main styling: main.css
   • Color palette: palette.css
   • Individual section styles in respective CSS files

2. Navigation (app/static/styles/navbar.css)

   • Modify the navigation bar styling
   • Update menu items and links

Tips for Customization

1. Make a backup of original files before making changes
2. Test changes locally before deploying
3. Keep the same file structure for assets
4. Optimize images before uploading
5. Maintain consistent styling across pages

Tasks

Once you've got your portfolio downloaded and running using the instructions below, you should attempt to complete the following tasks.

Portfolio Tasks

• Add a photo of yourself to the website
• Add an "About youself" section to the website.
• Add your previous work experiences
• Add your hobbies (including images)
• Add your current/previous education
• Add a map of all the cool locations/countries you visited

Flask Tasks

• Get your Flask app running locally on your machine using the instructions below.
• Add a template for adding multiple work experiences/education/hobbies using Jinja
• Create a new page to display hobbies.
• Add a menu bar that dynamically displays other pages in the app

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.