Building a Portfolio Website with Flask
AtomixWeb Pvt. Ltd
Specialized in custom Solutions Web Development, Mobile Applications, Cyber Security, Cloud solution
In today’s digital age, having an online presence is essential for showcasing your skills, projects, and achievements. A portfolio website serves as a digital resume, demonstrating your capabilities to potential employers or clients. Flask, a lightweight and versatile web framework in Python, is an excellent choice for building a portfolio website due to its simplicity and flexibility. In this article, we’ll walk through the steps to create a robust portfolio website using Flask.
Why Choose Flask?
Flask is a micro-framework for Python that allows developers to create web applications quickly and easily. Its minimalistic design gives you the freedom to choose how to implement various components, making it ideal for projects like portfolio websites. Here are some reasons why Flask stands out:
Setting Up Your Environment
Before we dive into building the portfolio website, ensure you have Python installed on your machine. You can download it from the official Python website. Next, set up a virtual environment and install Flask.
# Install virtualenv if you haven't already
pip install virtualenv
# Create a virtual environment
virtualenv venv
# Activate the virtual environment
# On Windows
venv\Scripts\activate
# On MacOS/Linux
source venv/bin/activate
# Install Flask
pip install Flask
Creating the Flask Application
Start by creating a new directory for your project and navigating into it. Inside the directory, create a file named app.py. This file will serve as the entry point for your Flask application.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
In this code, we import Flask and create an instance of the Flask class. We define a route for the home page, which will render an HTML template named index.html. Finally, we run the application in debug mode.
Structuring Your Project
A well-structured project is crucial for maintainability. Here’s a suggested structure for your portfolio website:
/portfolio
/static
/css
/img
/js
/templates
base.html
index.html
app.py
Creating Templates
Let’s create the base HTML template (base.html) inside the templates folder. This template will serve as a common layout for all pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2024 My Portfolio</p>
</footer>
</body>
</html>
Next, create the index.html file, which extends base.html.
领英推荐
{% extends 'base.html' %}
{% block content %}
<h2>Welcome to My Portfolio</h2>
<p>This is where you can showcase your skills, projects, and achievements.</p>
{% endblock %}
Adding Styles
Create a CSS file named styles.css inside the static/css folder to style your website.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header, footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
main {
padding: 2em;
text-align: center;
}
Running Your Application
To see your portfolio website in action, run the Flask application.
python app.py
Open your web browser and navigate to https://127.0.0.1:5000/. You should see your portfolio homepage.
Expanding Your Portfolio
You can expand your portfolio website by adding more pages and features. Here are a few ideas:
Adding a Projects Page
Create a new route app.py for the projects page.
@app.route('/projects')
def projects():
return render_template('projects.html')
Create a projects.html file in the templates folder.
{% extends 'base.html' %}
{% block content %}
<h2>My Projects</h2>
<div class="projects">
<div class="project">
<h3>Project 1</h3>
<p>Description of project 1.</p>
</div>
<div class="project">
<h3>Project 2</h3>
<p>Description of project 2.</p>
</div>
</div>
{% endblock %}
Conclusion
Building a portfolio website with Flask is a great way to showcase your skills and projects. Flask’s simplicity and flexibility make it an excellent choice for this type of project. By following the steps outlined in this article, you can create a professional and visually appealing portfolio website. Happy coding!
Need expert help with web or mobile development? Contact us at [email protected] or fill out this form.