Single Page Portfolio using Flask
Last Updated :
23 Jul, 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-
File structureCreating 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.
Index.html
index.htmlCreating 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.
Browser SettingRunning 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.
Terminal Outpur after running the app
Similar Reads
Python Tutorial - Learn Python Programming Language Python is one of the most popular programming languages. Itâs simple to use, packed with features and supported by a wide range of libraries and frameworks. Its clean syntax makes it beginner-friendly. It'sA high-level language, used in web development, data science, automation, AI and more.Known fo
10 min read
Python Fundamentals
Python IntroductionPython was created by Guido van Rossum in 1991 and further developed by the Python Software Foundation. It was designed with focus on code readability and its syntax allows us to express concepts in fewer lines of code.Key Features of PythonPythonâs simple and readable syntax makes it beginner-frien
3 min read
Input and Output in PythonUnderstanding input and output operations is fundamental to Python programming. With the print() function, we can display output in various formats, while the input() function enables interaction with users by gathering input during program execution. Taking input in PythonPython's input() function
7 min read
Python VariablesIn Python, variables are used to store data that can be referenced and manipulated during program execution. A variable is essentially a name that is assigned to a value. Unlike many other programming languages, Python variables do not require explicit declaration of type. The type of the variable i
6 min read
Python OperatorsIn Python programming, Operators in general are used to perform operations on values and variables. These are standard symbols used for logical and arithmetic operations. In this article, we will look into different types of Python operators. OPERATORS: These are the special symbols. Eg- + , * , /,
6 min read
Python KeywordsKeywords in Python are reserved words that have special meanings and serve specific purposes in the language syntax. Python keywords cannot be used as the names of variables, functions, and classes or any other identifier. Getting List of all Python keywordsWe can also get all the keyword names usin
2 min read
Python Data TypesPython Data types are the classification or categorization of data items. It represents the kind of value that tells what operations can be performed on a particular data. Since everything is an object in Python programming, Python data types are classes and variables are instances (objects) of thes
9 min read
Conditional Statements in PythonConditional statements in Python are used to execute certain blocks of code based on specific conditions. These statements help control the flow of a program, making it behave differently in different situations.If Conditional Statement in PythonIf statement is the simplest form of a conditional sta
6 min read
Loops in Python - For, While and Nested LoopsLoops in Python are used to repeat actions efficiently. The main types are For loops (counting through items) and While loops (based on conditions). In this article, we will look at Python loops and understand their working with the help of examples. For Loop in PythonFor loops is used to iterate ov
9 min read
Python FunctionsPython Functions is a block of statements that does a specific task. The idea is to put some commonly or repeatedly done task together and make a function so that instead of writing the same code again and again for different inputs, we can do the function calls to reuse code contained in it over an
9 min read
Recursion in PythonRecursion involves a function calling itself directly or indirectly to solve a problem by breaking it down into simpler and more manageable parts. In Python, recursion is widely used for tasks that can be divided into identical subtasks.In Python, a recursive function is defined like any other funct
6 min read
Python Lambda FunctionsPython Lambda Functions are anonymous functions means that the function is without a name. As we already know the def keyword is used to define a normal function in Python. Similarly, the lambda keyword is used to define an anonymous function in Python. In the example, we defined a lambda function(u
6 min read
Python Data Structures
Python StringA string is a sequence of characters. Python treats anything inside quotes as a string. This includes letters, numbers, and symbols. Python has no character data type so single character is a string of length 1.Pythons = "GfG" print(s[1]) # access 2nd char s1 = s + s[0] # update print(s1) # printOut
6 min read
Python ListsIn Python, a list is a built-in dynamic sized array (automatically grows and shrinks). We can store all types of items (including another list) in a list. A list may contain mixed type of items, this is possible because a list mainly stores references at contiguous locations and actual items maybe s
6 min read
Python TuplesA tuple in Python is an immutable ordered collection of elements. Tuples are similar to lists, but unlike lists, they cannot be changed after their creation (i.e., they are immutable). Tuples can hold elements of different data types. The main characteristics of tuples are being ordered , heterogene
6 min read
Dictionaries in PythonPython dictionary is a data structure that stores the value in key: value pairs. Values in a dictionary can be of any data type and can be duplicated, whereas keys can't be repeated and must be immutable. Example: Here, The data is stored in key:value pairs in dictionaries, which makes it easier to
7 min read
Python SetsPython set is an unordered collection of multiple items having different datatypes. In Python, sets are mutable, unindexed and do not contain duplicates. The order of elements in a set is not preserved and can change.Creating a Set in PythonIn Python, the most basic and efficient method for creating
10 min read
Python ArraysLists in Python are the most flexible and commonly used data structure for sequential storage. They are similar to arrays in other languages but with several key differences:Dynamic Typing: Python lists can hold elements of different types in the same list. We can have an integer, a string and even
9 min read
List Comprehension in PythonList comprehension is a way to create lists using a concise syntax. It allows us to generate a new list by applying an expression to each item in an existing iterable (such as a list or range). This helps us to write cleaner, more readable code compared to traditional looping techniques.For example,
4 min read
Advanced Python
Python OOPs ConceptsObject Oriented Programming is a fundamental concept in Python, empowering developers to build modular, maintainable, and scalable applications. OOPs is a way of organizing code that uses objects and classes to represent real-world entities and their behavior. In OOPs, object has attributes thing th
11 min read
Python Exception HandlingPython Exception Handling handles errors that occur during the execution of a program. Exception handling allows to respond to the error, instead of crashing the running program. It enables you to catch and manage errors, making your code more robust and user-friendly. Let's look at an example:Handl
6 min read
File Handling in PythonFile handling refers to the process of performing operations on a file, such as creating, opening, reading, writing and closing it through a programming interface. It involves managing the data flow between the program and the file system on the storage device, ensuring that data is handled safely a
4 min read
Python Database TutorialPython being a high-level language provides support for various databases. We can connect and run queries for a particular database using Python and without writing raw queries in the terminal or shell of that particular database, we just need to have that database installed in our system.A database
4 min read
Python MongoDB TutorialMongoDB is a popular NoSQL database designed to store and manage data flexibly and at scale. Unlike traditional relational databases that use tables and rows, MongoDB stores data as JSON-like documents using a format called BSON (Binary JSON). This document-oriented model makes it easy to handle com
2 min read
Python MySQLMySQL is a widely used open-source relational database for managing structured data. Integrating it with Python enables efficient data storage, retrieval and manipulation within applications. To work with MySQL in Python, we use MySQL Connector, a driver that enables seamless integration between the
9 min read
Python PackagesPython packages are a way to organize and structure code by grouping related modules into directories. A package is essentially a folder that contains an __init__.py file and one or more Python files (modules). This organization helps manage and reuse code effectively, especially in larger projects.
12 min read
Python ModulesPython Module is a file that contains built-in functions, classes,its and variables. There are many Python modules, each with its specific work.In this article, we will cover all about Python modules, such as How to create our own simple module, Import Python modules, From statements in Python, we c
7 min read
Python DSA LibrariesData Structures and Algorithms (DSA) serve as the backbone for efficient problem-solving and software development. Python, known for its simplicity and versatility, offers a plethora of libraries and packages that facilitate the implementation of various DSA concepts. In this article, we'll delve in
15 min read
List of Python GUI Library and PackagesGraphical User Interfaces (GUIs) play a pivotal role in enhancing user interaction and experience. Python, known for its simplicity and versatility, has evolved into a prominent choice for building GUI applications. With the advent of Python 3, developers have been equipped with lots of tools and li
11 min read
Data Science with Python
NumPy Tutorial - Python LibraryNumPy (short for Numerical Python ) is one of the most fundamental libraries in Python for scientific computing. It provides support for large, multi-dimensional arrays and matrices along with a collection of mathematical functions to operate on arrays.At its core it introduces the ndarray (n-dimens
3 min read
Pandas TutorialPandas is an open-source software library designed for data manipulation and analysis. It provides data structures like series and DataFrames to easily clean, transform and analyze large datasets and integrates with other Python libraries, such as NumPy and Matplotlib. It offers functions for data t
6 min read
Matplotlib TutorialMatplotlib is an open-source visualization library for the Python programming language, widely used for creating static, animated and interactive plots. It provides an object-oriented API for embedding plots into applications using general-purpose GUI toolkits like Tkinter, Qt, GTK and wxPython. It
5 min read
Python Seaborn TutorialSeaborn is a library mostly used for statistical plotting in Python. It is built on top of Matplotlib and provides beautiful default styles and color palettes to make statistical plots more attractive.In this tutorial, we will learn about Python Seaborn from basics to advance using a huge dataset of
15+ min read
StatsModel Library- TutorialStatsmodels is a useful Python library for doing statistics and hypothesis testing. It provides tools for fitting various statistical models, performing tests and analyzing data. It is especially used for tasks in data science ,economics and other fields where understanding data is important. It is
4 min read
Learning Model Building in Scikit-learnBuilding machine learning models from scratch can be complex and time-consuming. Scikit-learn which is an open-source Python library which helps in making machine learning more accessible. It provides a straightforward, consistent interface for a variety of tasks like classification, regression, clu
8 min read
TensorFlow TutorialTensorFlow is an open-source machine-learning framework developed by Google. It is written in Python, making it accessible and easy to understand. It is designed to build and train machine learning (ML) and deep learning models. It is highly scalable for both research and production.It supports CPUs
2 min read
PyTorch TutorialPyTorch is an open-source deep learning framework designed to simplify the process of building neural networks and machine learning models. With its dynamic computation graph, PyTorch allows developers to modify the networkâs behavior in real-time, making it an excellent choice for both beginners an
7 min read
Web Development with Python
Flask TutorialFlask is a lightweight and powerful web framework for Python. Itâs often called a "micro-framework" because it provides the essentials for web development without unnecessary complexity. Unlike Django, which comes with built-in features like authentication and an admin panel, Flask keeps things mini
8 min read
Django Tutorial | Learn Django FrameworkDjango is a Python framework that simplifies web development by handling complex tasks for you. It follows the "Don't Repeat Yourself" (DRY) principle, promoting reusable components and making development faster. With built-in features like user authentication, database connections, and CRUD operati
10 min read
Django ORM - Inserting, Updating & Deleting DataDjango's Object-Relational Mapping (ORM) is one of the key features that simplifies interaction with the database. It allows developers to define their database schema in Python classes and manage data without writing raw SQL queries. The Django ORM bridges the gap between Python objects and databas
4 min read
Templating With Jinja2 in FlaskFlask is a lightweight WSGI framework that is built on Python programming. WSGI simply means Web Server Gateway Interface. Flask is widely used as a backend to develop a fully-fledged Website. And to make a sure website, templating is very important. Flask is supported by inbuilt template support na
6 min read
Django TemplatesTemplates are the third and most important part of Django's MVT Structure. A Django template is basically an HTML file that can also include CSS and JavaScript. The Django framework uses these templates to dynamically generate web pages that users interact with. Since Django primarily handles the ba
7 min read
Python | Build a REST API using FlaskPrerequisite: Introduction to Rest API REST stands for REpresentational State Transfer and is an architectural style used in modern web development. It defines a set or rules/constraints for a web application to send and receive data. In this article, we will build a REST API in Python using the Fla
3 min read
How to Create a basic API using Django Rest Framework ?Django REST Framework (DRF) is a powerful extension of Django that helps you build APIs quickly and easily. It simplifies exposing your Django models as RESTfulAPIs, which can be consumed by frontend apps, mobile clients or other services.Before creating an API, there are three main steps to underst
4 min read
Python Practice
Python QuizThese Python quiz questions are designed to help you become more familiar with Python and test your knowledge across various topics. From Python basics to advanced concepts, these topic-specific quizzes offer a comprehensive way to practice and assess your understanding of Python concepts. These Pyt
3 min read
Python Coding Practice ProblemsThis collection of Python coding practice problems is designed to help you improve your overall programming skills in Python.The links below lead to different topic pages, each containing coding problems, and this page also includes links to quizzes. You need to log in first to write your code. Your
1 min read
Python Interview Questions and AnswersPython is the most used language in top companies such as Intel, IBM, NASA, Pixar, Netflix, Facebook, JP Morgan Chase, Spotify and many more because of its simplicity and powerful libraries. To crack their Online Assessment and Interview Rounds as a Python developer, we need to master important Pyth
15+ min read