Open In App

Single Page Portfolio Using Flask

Last Updated : 08 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
  </script>
  <title>Portfolio</title>
</head>
  
<body>
  
  <div class="text-center">
  
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-12.png" 
         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="">
      <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-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 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    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.


 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Python Flask Projects with Source Code (Beginners to Advanced)
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Create Cricket Score API using Web Scraping in Flask
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Documenting Flask Endpoint using Flask-Autodoc
            

        
    
        
            

                Minify HTML in Flask using Flask-Minify
            

        
    
        
            

                How to use Flask-Session in Python Flask ?
            

        
    
        
            

                Connect Flask to a Database with Flask-SQLAlchemy
            

        
    
        
            

                How to Integrate Flask-Admin and Flask-Login
            

        
    
        
            

                Flask URL Helper Function - Flask url_for()
            

        
    
        
            

                Flask form submission without Page Reload
            

        
    
        
            

                Cryptocurrency Portfolio Tracker Using Django
            

        
    
        
            

                Python | Using for loop in Flask
            

        
    
        
            

                Setup API for GeeksforGeeks user data using WebScraping and Flask
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        skrg141                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                                    

                                        
Practice Tags : 

                                        
                                    

                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox