Introduction

Creating a personal portfolio website is a great way to showcase your skills, projects, and achievements to potential employers or clients. In this guide, we'll explore how to build a personal portfolio website using Flask, a lightweight Python web framework. By following this guide, you'll be able to create your own online portfolio and customize it to suit your needs.


Step 1: Setting Up Your Flask Application

Start by setting up your Flask application and creating a basic directory structure for your portfolio website:

portfolio-app/
    app.py
    templates/
        index.html
    static/
        css/
            style.css
        images/

Step 2: Creating Templates

Create HTML templates for your portfolio website. Here's a basic structure for your index template (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <header>
        <h1>Welcome to My Portfolio</h1>
    </header>
    <section>
        <h2>About Me</h2>
        <p>This is where you can introduce yourself, your background, and your skills.</p>
    </section>
    <section>
        <h2>Projects</h2>
        <ul>
            <li>
                <h3>Project 1</h3>
                <p>Description of your first project.</p>
            </li>
            <li>
                <h3>Project 2</h3>
                <p>Description of your second project.</p>
            </li>
            <!-- Add more projects as needed -->
        </ul>
    </section>
    <section>
        <h2>Contact</h2>
        <p>You can provide your contact information or links to social profiles.</p>
    </section>
</body>
</html>

Step 3: Styling Your Portfolio

Create a CSS file (style.css) in the "static/css" directory to style your portfolio. Customize the styling to match your preferences.

/* static/css/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}
header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
}
section {
    margin: 1rem;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Add more styles as needed */

Step 4: Creating Routes

Create routes in your Flask application to render the portfolio page. Here's an example of how to define the route:

# app.py
from flask import Flask, render_template
app = Flask(__name)
@app.route('/')
def portfolio():
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)

Step 5: Running Your Portfolio

Run your Flask portfolio application using the following command:

python app.py

Access your personal portfolio website in a web browser to view your introduction, projects, and contact information.


Conclusion

Building a personal portfolio with Flask is an excellent way to showcase your work and skills. By following the steps in this guide, you can set up your Flask application, create templates for your portfolio, style it to your liking, and share it with others. Continue to enhance your portfolio by adding more projects and updating your information regularly.