Skip to content
Related Articles

Related Articles

Single Page Portfolio Using Flask

View Discussion
Improve Article
Save Article
  • Last Updated : 27 Jun, 2022

In this article, We’ll learn how to construct a Portfolio webpage with the Flask framework.  This project will show you how to present your portfolio to HR and coworkers more impressively. It will also contain features such as Download CV, which allows you to post your CV and have it downloaded by every user that visits your portfolio. Any user can also contact you through this service by filling out the contact me form, which will send an email to your Gmail account.

Requirements

Installation:

pip install Flask

The below image shows the interface for the Portfolio:

 

 

File Structure:

 

Stepwise Implementation

Step 1: First make basic folders, for that type the below cmd in your cmd terminal.

mkdir Flask

Step 2: Move into your Flask folder

cd Flask static templates

Step 3: Make all folders that we need for our project such as:

  • static: In this static folder, we will keep our images and CSS files in this folder.
  • templates: In this folder, we can keep our HTML files.
mkdir static templates

Step 3: Now create your index.html file in your template folder.

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 -->
        rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
  
  </script>
  </script>
  <title>Portfolio</title>
</head>
  
<body>
  
  <div class="text-center">
  
         style="width:30%; height: 100px;"
      alt="...">
  </div>
  
  <!-- Navbar Section -->
  <nav class="navbar navbar-expand-sm bg-success navbar-light">
    <!-- Brand/logo -->
    <a class="navbar-brand" href="">
        style="width:40px;">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" 
            data-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 wrapper -->
  <div id="carouselExampleControls" class="carousel slide text-center carousel-dark" 
       data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="rounded-circle shadow-1-strong mb-4"
          src="../static/images/gfglogo.jpg" alt="avatar" 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 - TCE</p>
  
            <p class="text-muted">
              <i class="fas fa-quote-left pe-2"></i>
              A Technical Content Engineer is a technologist
              that ensures that Tetrate's 
              products are positioned in such a way that they
              effectively represent the 
              value we provide to our clients. This entails
              creating unique marketing 
              solutions and communications that clearly 
              communicate our products' 
              technical and business benefits.
            </p>
  
          </div>
        </div>
        <ul class="list-unstyled d-flex justify-content-center text-warning mb-0">
          <li><i class="fas fa-star fa-sm"></i></li>
          <li><i class="fas fa-star fa-sm"></i></li>
          <li><i class="fas fa-star fa-sm"></i></li>
          <li><i class="fas fa-star fa-sm"></i></li>
          <li><i class="far fa-star fa-sm"></i></li>
        </ul>
      </div>
  
    </div>
      
  </div>
  <!-- Carousel wrapper -->
  
  
  <div class="section" id="about">
    <div class="container">
      <div class="card aos-init aos-animate" 
           data-aos="fade-up" data-aos-offset="10">
        <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 looking to 
                leverage my experience 
                building responsive and scalable web... Lorem ipsum, 
                dolor sit amet consectetur adipisicing elit.
                "Graduate of computer science with experience working across 
                the full-stack of software development. Ive built a few.
            </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">S***@gmail.com</div>
              </div>
              <div class="row mt-3">
                <div class="col-sm-4">
                  <strong class="text-uppercase">
                    Phone:
                  </strong></div>
                <div class="col-sm-8">8*******89</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>
  
  <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" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
        <div class="card-body">
          <div class="h5">Master in Computer Application</div>
          <p class="category">LNMI INSTITUTE OF TECHNOLOGY</p>
  
            
<p>Lorem ipsum, dolor sit amet consectetur adipisicing 
            elit. Suscipit, dolore.</p>
  
            
<p>
            <b>Projects:</b><br>
          <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
              Praesentium a veritatis voluptas 
              officiis distinctio molestiae nesciunt in eos nulla quam!</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing e
              lit. Facilis, assumenda.</li>
          </ul>
          </p>
  
        </div>
      </div>
    </div>
  </div>
  
  <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" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
        <div class="card-body">
          <b>Programming Languages:</b> R, Python, SQL, GoLang<br><br>
          <b>Tools:</b> NumPy, Pandas, Matplotlib, MS Excel, OpenCV<br><br>
          <b>Database Management Systems:</b> MySQL, , postgres, MongoDB, SQLite3<br><br>
          <b>Internet Technologies:</b> Flask, HTML5, CSS, Django
        </div>
      </div>
    </div>
  </div>
  
  <div class="container">
    <div class="section" id="contact">
      <div class="cc-contact-information">
        <div class="container" style="margin-top: 3rem;">
          <div class="cc-contact">
            <div class="row">
              <!-- <div class="col-md-9"> -->
                <div class="h4 text-center title" id="contact-us">
                  Contact Us
              </div>
              <div class="card mb-0" data-aos="zoom-in">
                  
                <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 </strong>
                        </div>
                        <div class="row mb-3">
                          <div class="col">
                            <div class="input-group">
                              <span class="input-group-addon"><i
                                  class="fa fa-user-circle"></i></span>
                              <input class="form-control" type="text" 
                                     name="name" placeholder="Name"
                                required="required" />
                            </div>
                          </div>
                        </div>
                        <div class="row mb-3">
                          <div class="col">
                            <div class="input-group">
                              <span class="input-group-addon"><i
                                  class="fa fa-file-text"></i></span>
                              <input class="form-control" type="text" 
                                     name="Subject" placeholder="Subject"
                                required="required" />
                            </div>
                          </div>
                        </div>
                        <div class="row mb-3">
                          <div class="col">
                            <div class="input-group">
                              <span class="input-group-addon"><i
                                  class="fa fa-envelope"></i></span>
                              <input class="form-control" type="email" 
                                     name="_replyto" placeholder="E-mail"
                                required="required" />
                            </div>
                          </div>
                        </div>
                        <div class="row mb-3">
                          <div class="col">
                            <div class="form-group">
                              <textarea class="form-control" name="message" 
                                        placeholder="Your Message"
                                required="required"></textarea>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col">
  
                            <button class="btn btn-primary" type="submit">
                              Send
                            </button>
                            <a class="btn btn-primary" target="_blank"
                              href="{{ url_for('static',filename='Suraj.pdf') }}" 
                               data-aos="zoom-in"
                              data-aos-anchor="data-aos-anchor">
                              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>skr@gmail.com</p>
  
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
  
  </div>
  
  
  <!-- Optional JavaScript; choose one of the two! -->
  
  <!-- Option 1: Bootstrap Bundle with Popper -->
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
  
</body>
  
</html>


Step 4: Create your app.py file in your Flask folder.

  • We are importing all the required modules that will be needed during our project execution.

Python3




from flask import Flask, render_template, request, url_for, redirect
from email.mime.text import MIMEText
import smtplib
from email.message import EmailMessage
app = Flask(__name__)


  • We can understand that whenever we hit the home page (“/”) it will render the gfg.html page from our template folder, this is the home page of our portfolio.

Python3




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


  • We can understand that whenever a user sends a message to the person, a POST request will occur, and then we will fetch all the required information from the HTML page such as “name, subject, email, and a message”. We will also set our name, email, and password for upcoming steps.

Python3




@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']
        # Set your credentials
        yourEmail = "skr@gmail.com"
        yourPassword = "$$$$$$"


  • We will try to connect to our Gmail server with the help of the inbuild smptlib library of python. “smtplib” creates a Simple Mail Transfer Protocol client session object which is used to send emails to any valid email id on the internet. Different websites use different port numbers. we are using a Gmail account to send a mail. The Port number used here is ‘587’. Then we’ll use smtp.ehlo to send an EHLO (Extended Hello) command. Now, we’ll use smtp.starttls to enable transport layer security (TLS) encryption.

Python3




# Logging in to our gmail account server
server = smtplib.SMTP('smtp.gmail.com', 587)
server.ehlo()
server.starttls()
server.login(yourEmail, yourPassword)


  • We are setting up the body structure of the email content. i.e. sender email, subject, Email content.

Note: You can learn more about How to Automate email here.

Python3




# Sender's and Receiver's email address
msg = EmailMessage()
msg.set_content("First Name : "+str(name)+"\nEmail : "+str(email) +"\n
                Subject: "+str(subject)+"\nMessage: "+str(message))
  
msg['To'] = email
msg['From'] = yourEmail
msg['Subject'] = subject


Complete implementation of app.py code

Python3




from flask import Flask, render_template, request, url_for, redirect
from email.mime.text import MIMEText
import smtplib
from email.message import EmailMessage
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']
  
        # Set your credentials
        yourEmail = "suraj@geeksforgeeks.org"
        yourPassword = "########"
  
        # Logging in to our email account
        server = smtplib.SMTP('smtp.gmail.com', 587)
        server.ehlo()
        server.starttls()
        server.login(yourEmail, yourPassword)
  
        # Sender's and Receiver's email address
        msg = EmailMessage()
        msg.set_content("First Name : "+str(name)
                        +"\nEmail : "+str(email)
                        +"\nSubject : "+str(subject)
                        +"\nMessage : "+str(message))
        msg['To'] = email
        msg['From'] = yourEmail
        msg['Subject'] = subject
  
        # Send the message via our own SMTP server.
        try:
            # sending an email
            server.send_message(msg)
            print("Send")
        except:
            print("Fail to Send")
            pass
              
    return redirect('/')
  
if __name__ == "__main__":
    app.run(debug=True)


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.

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!