Building Your First Portfolio Website with Flask

Welcome, aspiring web developers! Are you looking for a fantastic way to showcase your skills and projects to the world? A personal portfolio website is an excellent tool for that, and building one from scratch is a rewarding experience. In this guide, we’re going to walk through how to create a simple yet effective portfolio website using Flask, a beginner-friendly Python web framework.

What is a Portfolio Website?

Imagine a digital resume that’s alive, interactive, and fully customized by you. That’s essentially what a portfolio website is! It’s an online space where you can:

• Introduce yourself: Tell your story, your interests, and your professional goals.
• Showcase your projects: Display your coding projects, designs, writings, or any work you’re proud of, often with links to live demos or code repositories (like GitHub).
• Highlight your skills: List the programming languages, tools, and technologies you’re proficient in.
• Provide contact information: Make it easy for potential employers or collaborators to reach out to you.

Having a portfolio website not only demonstrates your technical abilities but also shows your initiative and passion.

Why Choose Flask for Your Portfolio?

There are many ways to build a website, but for beginners using Python, Flask is an excellent choice.

• Flask Explained: Flask is a “micro” web framework for Python. What does “micro” mean? It means Flask is lightweight and doesn’t come with many built-in features like a database layer or complex form validation. Instead, it provides the essentials for web development and lets you choose what additional tools you want to use. This makes it very flexible and easy to understand for newcomers.
• Beginner-Friendly: Its simplicity means less boilerplate code (pre-written code you have to include) and a shallower learning curve compared to larger frameworks like Django. You can get a basic website up and running with just a few lines of code.
• Flexible and Customizable: While it’s simple, Flask is also incredibly powerful. You can extend it with various add-ons and libraries to build almost any kind of website. For a portfolio, this flexibility allows you to tailor every aspect to your unique style.
• Python Integration: If you’re already familiar with Python, using Flask feels very natural. You can leverage all your Python knowledge for backend logic, data processing, and more.

Getting Started: Setting Up Your Development Environment

Before we write any code, we need to set up our computer so Flask can run smoothly.

Prerequisites

To follow along, you’ll need:

• Python: Make sure you have Python 3 installed on your computer. You can download it from the official Python website (python.org).
• Basic HTML & CSS Knowledge: You don’t need to be an expert, but understanding how to structure web pages with HTML and style them with CSS will be very helpful.

Creating a Virtual Environment

A virtual environment is like a separate, isolated container for your Python projects. It ensures that the libraries you install for one project don’t conflict with libraries used by another project. This is a best practice in Python development.

1. Create a project folder:
   First, create a new folder for your portfolio website. You can name it my_portfolio or anything you like.
   bash
mkdir my_portfolio
cd my_portfolio

2. Create a virtual environment:
   Inside your my_portfolio folder, run the following command. venv is a module that creates virtual environments.
   bash
python3 -m venv venv
   This command creates a new folder named venv inside your project directory, which contains a separate Python installation.

3. Activate the virtual environment:
   Now, you need to “activate” this environment. The command depends on your operating system:

   • macOS / Linux:
     bash
source venv/bin/activate
   • Windows (Command Prompt):
     bash
venv\Scripts\activate.bat
   • Windows (PowerShell):
     bash
venv\Scripts\Activate.ps1
     You’ll know it’s active when you see (venv) at the beginning of your command line prompt.

Installing Flask

With your virtual environment activated, we can now install Flask.

pip install Flask

pip is Python’s package installer, used to install libraries like Flask.

Building Your First Flask Application

Every Flask application needs a main file, usually named app.py, and a place for your web pages (HTML files) and other resources.

Basic Application Structure

Let’s create the basic folders and files:

my_portfolio/
├── venv/
├── app.py
├── templates/
│   ├── index.html
│   └── about.html
└── static/
    └── css/
        └── style.css

• app.py: This is where your Flask application logic lives. It tells Flask which pages to show and what to do when a user visits them.
• templates/: Flask looks for your HTML files (your web pages) in this folder.
• static/: This folder is for static files like CSS (for styling), JavaScript (for interactivity), and images.

Your First Flask Code (app.py)

Let’s create a very simple Flask application that shows a “Hello, World!” message. Open app.py in your code editor and add the following:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    # render_template looks for an HTML file in the 'templates' folder.
    # It sends the content of index.html to the user's browser.
    return render_template('index.html')

@app.route('/about')
def about():
    return render_template('about.html')

if __name__ == '__main__':
    app.run(debug=True)

Creating Your HTML Templates

Now, let’s create the index.html and about.html files inside the templates folder.

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio - Home</title>
    <!-- link_for is a Jinja2 function (Flask's templating engine)
         that helps generate URLs for static files.
         It makes sure the path to your CSS is correct. -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About Me</a>
            <!-- Add more links later -->
        </nav>
    </header>
    <main>
        <h1>Welcome to My Portfolio!</h1>
        <p>This is the home page. Learn more about me <a href="/about">here</a>.</p>
    </main>
    <footer>
        <p>&copy; 2023 My Awesome Portfolio</p>
    </footer>
</body>
</html>

templates/about.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio - About</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About Me</a>
        </nav>
    </header>
    <main>
        <h1>About Me</h1>
        <p>Hi, I'm [Your Name]! I'm a passionate [Your Profession/Interest] learning to build amazing things with Python and Flask.</p>
        <p>This section is where you'd write about your journey, skills, and aspirations.</p>
    </main>
    <footer>
        <p>&copy; 2023 My Awesome Portfolio</p>
    </footer>
</body>
</html>

Adding Some Style (static/css/style.css)

Let’s add a tiny bit of CSS to make our pages look less bare. Create style.css inside static/css/.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

footer {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    background-color: #333;
    color: #fff;
}

Running Your Application

Now that everything is set up, let’s see your portfolio website in action!

1. Make sure your virtual environment is active. If not, activate it using the commands mentioned earlier (e.g., source venv/bin/activate on macOS/Linux).
2. Navigate to your project’s root directory (where app.py is located) in your terminal.
3. Run the Flask application:
   bash
python app.py
   You should see output similar to this:
   “`
   • Serving Flask app ‘app’
   • Debug mode: on
     WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
   • Running on http://127.0.0.1:5000
     Press CTRL+C to quit
   • Restarting with stat
   • Debugger is active!
   • Debugger PIN: …
     “`
4. Open your web browser and go to http://127.0.0.1:5000. This is the local address where your Flask application is running.

You should now see your “Welcome to My Portfolio!” home page. Click on “About Me” in the navigation to go to the about page!

Expanding Your Portfolio

Now that you have the basics, here are ideas to make your portfolio shine:

• Projects Page: Create a /projects route and a projects.html template. Each project could have its own section with a title, description, image, and links to the live demo and code repository.
• Contact Page: Add a /contact route with a contact.html template. You can simply list your email, LinkedIn, and GitHub profiles, or even explore adding a simple contact form (which is a bit more advanced).
• Resume/CV: Link to a PDF version of your resume.
• Images: Use the static/ folder for images (static/img/your_project_screenshot.png) and reference them in your HTML using url_for('static', filename='img/your_image.png').
• Advanced Styling: Experiment more with CSS to match your personal brand. Consider using CSS frameworks like Bootstrap for responsive designs.
• Base Template: For larger sites, you’d typically create a base.html template with common elements (like header, navigation, footer) and then have other templates extend it. This avoids repeating code.

What’s Next? Deployment!

Once your portfolio website is looking great, you’ll want to share it with the world. This process is called deployment. It means taking your local Flask application and putting it on a public server so anyone can access it.

Some popular options for deploying Flask applications for free or at a low cost include:

• Render
• Heroku
• PythonAnywhere
• Vercel

Each platform has its own set of instructions, but they generally involve pushing your code to a Git repository (like GitHub) and then connecting that repository to the deployment service. This step is a bit more advanced but definitely achievable once you’re comfortable with the basics.

Conclusion

Congratulations! You’ve just built the foundation of your very own portfolio website using Flask. This project is not just about having an online presence; it’s a fantastic way to practice your Python, Flask, HTML, and CSS skills. Remember, your portfolio is a living document – keep updating it with your latest projects and learning experiences. Happy coding!