Introduction

Creating a portfolio website with Flask allows you to showcase your work and skills to the world. In this guide, we'll explore how to build a professional portfolio website using Flask, a Python web framework. You'll learn how to structure your portfolio, display your projects, and create a user-friendly website that reflects your personal brand. By following this guide, you'll have the knowledge and tools to create a compelling online portfolio to impress potential employers, clients, and collaborators.


Step 1: Setting Up Your Flask Application

Start by setting up your Flask application and creating a directory structure. Here's a sample structure:

portfolio-app/
    app.py
    templates/
        index.html
        project.html
    static/
        css/
        img/

Step 2: Installing Flask

Install Flask using pip:

pip install Flask

Step 3: Creating the Flask Application

Create your Flask application. Here's an example of Python code for a simple portfolio:

# app.py
from flask import Flask, render_template
app = Flask(__name__)
# Sample project data
projects = [
    {
        'title': 'Project 1',
        'description': 'Description of Project 1',
        'image': 'img/project1.jpg',
    },
    {
        'title': 'Project 2',
        'description': 'Description of Project 2',
        'image': 'img/project2.jpg',
    }
]
@app.route('/')
def index():
    return render_template('index.html', projects=projects)
@app.route('/project/<int:project_id>')
def project(project_id):
    if 0 <= project_id < len(projects):
        return render_template('project.html', project=projects[project_id])
    return 'Project not found', 404
if __name__ == '__main__':
    app.run(debug=True)

Step 4: Creating HTML Templates

Create HTML templates to display your portfolio. Here's an example of an index template:

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>Welcome to My Portfolio</h1>
    <ul>
        {% for project in projects %}
            <li><a href="{{ url_for('project', project_id=loop.index0) }}">{{ project.title }}</a></li>
        {% endfor %}
    </ul>
</body>
</html>

Step 5: Styling Your Portfolio

Create CSS styles to make your portfolio visually appealing. You can place your CSS files in the static/css directory and link to them in your HTML templates.


Conclusion

Building a portfolio website with Flask is a great way to showcase your work and skills. By following this guide, you've learned how to set up your Flask application, structure your portfolio, and create a user-friendly website. You can expand on this knowledge to add more projects, create additional pages, and personalize your portfolio to make it truly unique.