Building a portfolio website is one of the coolest ways to show off your skills and projects to potential employers or clients. It’s like having your very own online resume that screams, “I know my stuff.” And if you’re thinking, “I want to build one but it sounds too complex,” fret no more. With Flask, a lightweight Python framework, you can get your site up and running in no time. Flask is beginner-friendly yet powerful enough to make your site shine.
First things first, you want to make sure you’ve got everything you need installed. Head over to the official Python website and download the latest version of Python if you haven’t already. Python is essential because Flask runs on it. Once you’ve got Python, open up your terminal and install Flask by running:
pip install flask
To write and debug your code, you might find a code editor like Visual Studio Code (VS Code) super helpful. VS Code is user-friendly and packed with features that make coding a breeze.
Now, let’s get your project organized. Create a new folder for your portfolio website. Open up VS Code and create the following structure inside your folder:
mkdir my_portfolio
cd my_portfolio
mkdir static templates
The static folder is where you’ll stash your CSS, JavaScript, and image files. The templates folder is where your HTML files will live.
Next, we’ll set up the core of your Flask application. Create a file named app.py in your project folder and add the following code:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
This sets up a basic Flask application with a single route for the root URL that will render an index.html file from your templates folder. Now, let’s create that index.html file inside the templates folder. Here’s a simple example using Bootstrap for some quick and easy styling:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Welcome to My Portfolio</h1>
<p>This is where you can showcase your projects and skills.</p>
</div>
</body>
</html>
If you have any CSS, JavaScript, or image files to include, place them in the static folder. You can link them in your HTML template like this:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
Easy, right?
But a portfolio with just a homepage is kinda boring. Let’s spice it up with more pages like a contact page or a projects page. Create a new HTML file named contact.html in your templates folder, then update your app.py to include a route for it:
@app.route("/contact")
def contact():
return render_template("contact.html")
And here’s a simple contact.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Me</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Contact Me</h1>
<form action="/sendemail" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" id="message" name="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</body>
</html>
Oh, and we’ll need to handle form submissions in your app.py file. Here’s how:
from flask import request
import smtplib
from email.mime.text import MIMEText
from email.message import EmailMessage
@app.route("/sendemail", methods=['POST'])
def sendemail():
if request.method == "POST":
name = request.form['name']
email = request.form['email']
message = request.form['message']
yourEmail = "your-email@example.com"
yourPassword = "your-password"
msg = EmailMessage()
msg.set_content(f"Name: {name}\nEmail: {email}\nMessage: {message}")
msg['Subject'] = "Contact Form Submission"
msg['From'] = yourEmail
msg['To'] = yourEmail
with smtplib.SMTP_SSL('smtp.gmail.com', 465) as smtp:
smtp.login(yourEmail, yourPassword)
smtp.send_message(msg)
return "Email sent successfully!"
Neat, right? You’ve now got a fully functional contact form.
At this point, you might be wondering, “Cool, but how do I get this live so everyone can see it?” Deploying your website is the next step, and one of the easiest ways to do this is using a WSGI server like Waitress. You can install it with:
pip install waitress
Then run your application using:
waitress-serve --host=0.0.0.0 --port=8080 app:app
If you want to get more advanced, consider using Docker. Here’s a basic example of how to build and run a Docker image for your Flask app:
Create a Dockerfile:
FROM python:3.9-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["waitress-serve", "--host=0.0.0.0", "--port=8080", "app:app"]
Build the image with:
docker build -t my-portfolio .
Run it with:
docker run -d -p 8080:8080 my-portfolio
Don’t forget to make your website responsive so it looks good on all devices. Using Bootstrap is one smooth way to do it:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12">
<!-- Content for medium and large screens -->
</div>
<div class="col-md-6 col-sm-12">
<!-- Content for medium and large screens -->
</div>
</div>
</div>
And there you have it! Building a portfolio website with Flask isn’t just doable; it’s actually kinda fun. Keep your code tidy, make sure it looks good on all devices, and explore advanced deployment options when you’re ready. Get out there and let your portfolio showcase the amazing work you do. Happy coding!
