Building a Portfolio Website with Flask
Building a Portfolio Website with Flask
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.