Single Page Portfolio using Flask

Last Updated : 24 Mar, 2025

In this article, we’ll discuss how to create a single-page portfolio webpage using the Flask framework. This project demonstrates how to build an impressive portfolio to showcase your skills and experience to HR professionals, colleagues, or potential employers.

Key features of this portfolio are-

Download CV button: allowing visitors to download your CV.
Contact Me: its a form that sends messages directly to your Gmail account.

Prerequisites

Installation and Setting Up Flask

Create a project folder and then inside that folder create and activate a virtual environment to install flask and other necessary modules in it. Use these commands to create and activate a new virtual environment-

python -m venv venv
.venv\Scripts\activate

And after that install flask using this command-

pip install Flask

Create two folders- templates and static in our app folder. They both serve a specific purpose in flask-

static: Store images, CSS files, and other static assets here.
templates: Store HTML files (e.g., index.html) .

To know more about creating flask apps, refer to- Creating Flask Applicaions

File Structure

After completing the project, our file system should look like this-

Creating HTML

Inside the templates folder create index.html file, it is the main page of the portfolio website, designed with Bootstrap to look great on any device.

Key Features:

Navbar: Easy navigation.
Carousel: Highlights your profile.
Sections: About, Education, Skills, and Contact form.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Portfolio</title>
</head>
<body>
    <!-- Header Image -->
    <div class="text-center">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-12.png" style="width: 30%; height: 100px;" alt="Header Image">
    </div>

    <!-- Navbar Section -->
    <nav class="navbar navbar-expand-sm bg-success navbar-light">
        <a class="navbar-brand" href="#">
            <img src="https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" alt="Logo" style="width: 40px;">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_Navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapse_Navbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link text-white" href="#educational-info">Education</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#prof-skill">Professional Skills</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#contact-us">Contact Us</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Carousel Section -->
    <div id="carouselExampleControls" class="carousel slide text-center carousel-dark" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="rounded-circle shadow-1-strong mb-4" src="../static/images/profile.jpg" alt="Profile" style="width: 150px;">
                <div class="row d-flex justify-content-center">
                    <div class="col-lg-8">
                        <h5 class="mb-3">Suraj Kr. Gupta</h5>
                        <p>Python - Technical Content Engineer</p>
                        <p class="text-muted">
                            <i class="fas fa-quote-left pe-2"></i>
                            A Technical Content Engineer ensures that products are presented effectively to clients by creating clear, technical, and business-focused content.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- About Section -->
    <div class="section" id="about">
        <div class="container">
            <div class="card">
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <div class="card-body">
                            <div class="h4 mt-0 title">About</div>
                            <p>Recent graduate with an MS in Computer Science, eager to leverage my experience in building responsive and scalable web applications. Skilled in full-stack software development with a passion for creating impactful solutions.</p>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="card-body">
                            <div class="h4 mt-0 title">Basic Information</div>
                            <div class="row">
                                <div class="col-sm-4"><strong class="text-uppercase">Age:</strong></div>
                                <div class="col-sm-8">25</div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-sm-4"><strong class="text-uppercase">Email:</strong></div>
                                <div class="col-sm-8">[email protected]</div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-sm-4"><strong class="text-uppercase">Phone:</strong></div>
                                <div class="col-sm-8">+91 123-456-7890</div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-sm-4"><strong class="text-uppercase">Address:</strong></div>
                                <div class="col-sm-8">Patna, Bihar, India</div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-sm-4"><strong class="text-uppercase">Language:</strong></div>
                                <div class="col-sm-8">English, Hindi</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Education Section -->
    <div class="section" id="skill">
        <div class="container my-2">
            <div class="h4 text-center mb-4 title" id="educational-info">Education</div>
            <div class="card">
                <div class="card-body">
                    <div class="h5">Master in Computer Application</div>
                    <p class="category">LNMI Institute of Technology</p>
                    <p>Completed a comprehensive program focusing on software development and system design.</p>
                    <p><b>Projects:</b></p>
                    <ul>
                        <li>Developed a responsive web application using Flask and Bootstrap.</li>
                        <li>Built a data analysis tool with Python and Pandas.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Professional Skills Section -->
    <div class="section" id="skill">
        <div class="container my-2">
            <div class="h4 text-center mb-4 title" id="prof-skill">Professional Skills</div>
            <div class="card">
                <div class="card-body">
                    <b>Programming Languages:</b> Python, SQL, GoLang<br><br>
                    <b>Tools:</b> NumPy, Pandas, Matplotlib, MS Excel, OpenCV<br><br>
                    <b>Database Management Systems:</b> MySQL, PostgreSQL, MongoDB, SQLite<br><br>
                    <b>Internet Technologies:</b> Flask, HTML5, CSS, Django
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Section -->
    <div class="container">
        <div class="section" id="contact">
            <div class="h4 text-center title" id="contact-us">Contact Us</div>
            <div class="card mb-0">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card-body">
                            <form action="/sendemail/" method="POST">
                                <div class="p pb-3"><strong>Feel free to contact me</strong></div>
                                <div class="row mb-3">
                                    <div class="col">
                                        <input class="form-control" type="text" name="name" placeholder="Name" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col">
                                        <input class="form-control" type="text" name="Subject" placeholder="Subject" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col">
                                        <input class="form-control" type="email" name="_replyto" placeholder="E-mail" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col">
                                        <textarea class="form-control" name="message" placeholder="Your Message" required></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <button class="btn btn-primary" type="submit">Send</button>
                                        <a class="btn btn-primary" href="{{ url_for('static', filename='Suraj.pdf') }}" target="_blank">Download CV</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card-body">
                            <p class="mb-0"><strong>Address</strong></p>
                            <p class="pb-2">136, Royal Kapson, Noida, India, 800123</p>
                            <p class="mb-0"><strong>Phone</strong></p>
                            <p class="pb-2">+91 345-567-8346</p>
                            <p class="mb-0"><strong>Email</strong></p>
                            <p>[email protected]</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Code Breakdown:

Head Section: Sets up the page with meta tags for responsiveness and links to Bootstrap CSS for styling.
Body Sections:
- Header: Shows a logo or image at the top.
- Navbar: A green menu bar with links to Education, Skills, and Contact sections (collapsible on small screens).
- Carousel: Displays a profile picture, name, job title, and a quote (can slide if more items are added).
- About: Shares a short bio and personal details like age, email, and address.
- Education: Lists your degree, school, and projects.
- Skills: Shows your programming languages, tools, and tech skills.
- Contact: Includes a form to send you messages and a button to download your CV, plus contact info.
Bootstrap JS: Added at the end to make interactive features (like the navbar toggle) work.

Below is the snapshot of the live index.html page.

Creating app.py

The app.py file contains our main flask app. It connects the front-end with the back-end, handling tasks like displaying the portfolio and managing the contact form. This script makes the site dynamic and interactive by processing user input and sending emails.

Other than basic flask libraries, we are going to use these libraries in this project-

EmailMessage: A Python class from the email.message module used to create structured email messages with headers (e.g., To, From, Subject) and content.
smtplib: A Python library that enables sending emails via the Simple Mail Transfer Protocol (SMTP), connecting to email servers like Gmail’s.

Python

from flask import Flask, render_template, request, redirect, url_for
from email.message import EmailMessage
import smtplib

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/sendemail/", methods=["POST"])
def sendemail():
    if request.method == "POST":
        name = request.form["name"]
        subject = request.form["Subject"]
        email = request.form["_replyto"]
        message = request.form["message"]

        # Replace with your Gmail credentials
        your_email = "[email protected]"
        your_password = "your_app_password"  # Use an App Password if 2FA is enabled

        # Set up the SMTP server
        server = smtplib.SMTP("smtp.gmail.com", 587)
        server.ehlo()
        server.starttls()
        server.login(your_email, your_password)

        # Compose the email
        msg = EmailMessage()
        msg.set_content(f"Name: {name}\nEmail: {email}\nSubject: {subject}\nMessage: {message}")
        msg["To"] = your_email  # Send the email to yourself
        msg["From"] = your_email
        msg["Subject"] = subject

        # Send the email
        try:
            server.send_message(msg)
            print("Email sent successfully!")
        except Exception as e:
            print(f"Failed to send email: {e}")

        server.quit()
        return redirect("/")

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

Code Explanation:

Route for Home Page: The root route ("/") renders an HTML template (index.html) to display the main page.
Route to Send Email: The /sendemail/ route handles POST requests. It extracts form data (name, subject, email, message) and uses the SMTP protocol (with Gmail settings) to send an email containing this information.
SMTP Configuration and Email Sending: It sets up the SMTP server with Gmail credentials, creates an email message using EmailMessage, and attempts to send the message. Any errors during sending are caught and printed.
App Execution: Finally, the Flask app runs in debug mode when executed directly.

Note: Before running your code please set your Gmail to receive Incoming messages by your portfolio. You can go directly by clicking here, and turn it ON otherwise you will show an SMTP authentication error.

Running The Application

To run the flask app, use this command in the terminal-

python app.py

This will start the flask app and then visit the development url- "http://127.0.0.1:5000" in a browser.