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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </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.
