Nowadays most of the companies ask candidates for their web resume. Some of our website visitors mail us to write an article on How to build a personal resume website using python, flask.
Today in this article I will share a very easy way to build a personal resume website using python, flask. If you are new to programming then you can also make your resume website very easy.
Click here for Demo: Demo
Step 1: Start with Flask
First, you have created a file main.py (you can name this file as per your choice) which should look like this:
from flask import render_template, Flask, request, redirect
from flask_mail import Mail, Message
app = Flask(__name__)
mail = Mail(app)
app.config['MAIL_SERVER']='smtp.gmail.com'
app.config['MAIL_PORT'] = 465
app.config['MAIL_USERNAME'] = 'XXXXXXX@gmail.com'
app.config['MAIL_PASSWORD'] = 'XXXXXXX'
app.config['MAIL_USE_TLS'] = False
app.config['MAIL_USE_SSL'] = True
mail = Mail(app)
@app.route('/')
def index():
return render_template("index.html")
@app.route('/touch', methods=['POST', 'GET'])
def touch():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
sub = request.form['subject']
mess = request.form['message']
msg = Message(sub, sender="xxxxxx@gmail.com", recipients=["xxxx@gmail.com"])
msg.body = f"Name = {name} \nEmail = {email} \n{mess}"
mail.send(msg)
return render_template('index.html', ms="Thanks!! I will contact you asap.")
app.run(debug=True)
Create a directory template and inside the template directory create file index.html which should look like this:
Download this file: click here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Manoj Kumawat Resume</title>
<!-- favicon -->
<link href="{{url_for('static', filename='favicon.png')}}" rel=icon>
<!-- web-fonts -->
<link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
<!-- font-awesome -->
<link href="{{url_for('static', filename='css/font-awesome.min.css')}}" rel="stylesheet">
<!-- Bootstrap -->
<link href="{{url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
<!-- owl carousal -->
<link href="{{url_for('static', filename='css/owl.carousel.css')}}" rel="stylesheet">
<!-- Style CSS -->
<link href="{{url_for('static', filename='css/style.css')}}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main-wrapper">
<!-- Page Preloader -->
<div id="preloader">
<div id="status">
<div class="status-mes"></div>
</div>
</div>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="profile-img">
<img src="{{url_for('static', filename='img/profile.jpg')}}" class="img-responsive" alt=""/>
</div>
<!-- Profile Image -->
</div>
<div class="col-md-9">
<div class="name-wrapper">
<h1 class="name">Manoj Kumawat</h1>
</div>
<p>
Hey! I am a 2<sup>nd</sup> year undergraduate student in Computer Science and Engineering Department at Government Engineering College, Ajmer. My Home Town is Sikar.
</p>
<div class="row">
<div class="col-md-3">
<div class="personal-details">
<strong>MARCH 29, 1999</strong>
<small>BIRTH</small>
</div>
</div>
<div class="col-md-3">
<div class="personal-details">
<strong>INDIA</strong>
<small>NATIONALITY</small>
</div>
</div>
<div class="col-md-6">
<div class="personal-details">
<strong>ENGLISH <span>(INTERMIDIATE)</span>, HINDI <span>(NATIVE)</span></strong>
<small>LANGUAGE</small>
</div>
</div>
</div>
<ul class="social-icon">
<li><a href="https://www.facebook.com/profile.php?id=100009450971341" target="blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="https://www.linkedin.com/in/manoj-kumawat-5b1349167/" target="blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="https://github.com/manojkumawat2" target="blank"><i class="fa fa-github" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- .header-->
<section class="expertise-wrapper section-wrapper">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="section-title">
<h2>CERTIFICATIONS</h2>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<div class="expertise-item">
<h3>Campus Ambassador</h3>
<p>
CodeFest2K19 (Organized by Indian Institute of Technology(BHU), Varanasi)
</p>
</div>
</div>
<div class="col-md-6">
<div class="expertise-item">
<h3>PHP Tutorial Course </h3>
<p>
SoloLearn
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="expertise-item">
<h3>HTML, CSS verified Developer</h3>
<p>
Templaet Monsters
</p>
</div>
</div>
</div>
</div>
</div>
<!-- .row -->
</div>
</section>
<!-- .expertise-wrapper -->
<section class="section-wrapper skills-wrapper">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="section-title">
<h2>Skills</h2>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<div class="progress-wrapper">
<h3>SKILLS</h3>
<div class="progress-item">
<span class="progress-title">C++</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="62" aria-valuemin="0"
aria-valuemax="100" style="width: 60%"><span
class="progress-percent"> 60%</span>
</div>
</div>
<!-- .progress -->
</div>
<!-- .skill-progress -->
<div class="progress-item">
<span class="progress-title">PYTHON</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0"
aria-valuemax="100" style="width: 50%"><span
class="progress-percent"> 50%</span>
</div>
</div>
<!-- /.progress -->
</div>
<!-- /.skill-progress -->
<div class="progress-item">
<span class="progress-title">PHP</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100" style="width: 50%;"><span
class="progress-percent"> 50%</span>
</div>
</div>
<!-- /.progress -->
</div>
<!-- /.skill-progress -->
</div>
<!-- /.progress-wrapper -->
</div>
<div class="col-md-6">
<div class="progress-wrapper">
<h3>FRAMEWORKS AND TOOLS</h3>
<div class="progress-item">
<span class="progress-title">FLASK</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="62" aria-valuemin="0"
aria-valuemax="100" style="width: 60%"><span
class="progress-percent"> 60%</span>
</div>
</div>
<!-- .progress -->
</div>
<!-- .skill-progress -->
<div class="progress-item">
<span class="progress-title">HTML</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0"
aria-valuemax="100" style="width: 70%"><span
class="progress-percent"> 70%</span>
</div>
</div>
<!-- /.progress -->
</div>
<!-- /.skill-progress -->
<div class="progress-item">
<span class="progress-title">CSS</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100" style="width: 70%;"><span
class="progress-percent"> 70%</span>
</div>
</div>
<!-- /.progress -->
</div>
<!-- /.skill-progress -->
<div class="progress-item">
<span class="progress-title">BOOTSTRAP</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0"
aria-valuemax="100" style="width: 70%;"><span
class="progress-percent"> 70%</span>
</div>
</div>
<!-- /.progress -->
</div>
<!-- /.skill-progress -->
</div>
<!-- /.progress-wrapper -->
</div>
</div>
<!--.row -->
</div>
</div>
</div>
<!-- .container-fluid -->
</section>
<!-- .skills-wrapper -->
<section class="section-education section-wrapper">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="section-title"><h2>Education</h2></div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<div class="content-item">
<small>2018-PRESENT</small>
<h3>B.TECH (Computer Science and Engineering)</h3>
<h4>Government Engineering College</h4>
<p>Ajmer, Rajasthan, India</p>
</div>
<!-- .experience-item -->
<div class="content-item">
<small>2014-15</small>
<h3>12<sup>th</sup> Standard</h3>
<h4>Nobel Academy Sr. Sec. School</h4>
<p>Dantaramgarh(Sikar), Rajasthan</p>
</div>
<!-- .experience-item -->
<div class="content-item">
<small>2016-17</small>
<h3>10<sup>th</sup>Standard</h3>
<h4>Nobel Academy Sr. Sec. School</h4>
<p>Dantaramgarh(Sikar), Rajasthan</p>
</div>
<!-- .experience-item -->
</div>
</div>
<!--.row-->
</div>
</div>
<!--.row-->
</div>
<!-- .container -->
</section>
<!-- .section-education -->
<section class="section-wrapper portfolio-section">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="section-title">
<h2>PROJECTS</h2>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4 col-sm-6">
<a class="portfolio-item" href="https://github.com/manojkumawat2/Old-Book-Selling-Website" target="blank">
<div class="portfolio-thumb">
<img src="{{url_for('static', filename='img/project.jpg')}}" alt="">
</div>
<div class="portfolio-info">
<h3>Old Book Selling Website</h3>
<small>https://github.com/manojkumawat2/Old-Book-Selling-Website</small>
</div>
<!-- portfolio-info -->
</a>
<!-- .portfolio-item -->
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
</section>
<!-- .portfolio -->
<section class="section-contact section-wrapper">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="section-title">
<h2>Contact</h2>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-3">
<address>
<strong>Address</strong><br>
Ward No. 06, Renwal Road, Dantaramgarh<br>
332703, Dantaramgarh, Sikar, Rajasthan (India)
</address>
</div>
<div class="col-md-3">
<address>
<strong>Mobile Number</strong><br>
+91 9636018846
</address>
</div>
<div class="col-md-3">
<address>
<strong>Email</strong><br>
<a href="mailto:mkkumawat3333@gmail.com">mkkumawat3333@gmail.com</a>
</address>
</div>
</div>
<!--.row-->
{% if ms: %}
<div class="p-3 mb-2 bg-danger text-white" style="text-align: center;">{{ms}}</div>
<div class="feedback-form">
{% endif %}
<h3>GET IN TOUCH</h3>
<form id="contactForm" action="{{url_for('touch')}}" method="POST">
<div class="form-group">
<input type="text" name="name" required="" class="form-control" id="InputName"
placeholder="Full Name">
</div>
<div class="form-group">
<input type="email" name="email" required="" class="form-control" id="InputEmail"
placeholder="Email">
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" id="InputSubject"
placeholder="Subject">
</div>
<div class="form-group">
<textarea class="form-control" rows="4" required="" name="message" id="message-text"
placeholder="Write message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- .feedback-form -->
</div>
</div>
<!--.row-->
</div>
<!--.container-fluid-->
</section>
<!--.section-contact-->
<footer class="footer">
<div class="copyright-section">
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
<!--.row-->
</div>
<!-- .container-fluid -->
</div>
<!-- .copyright-section -->
</footer>
<!-- .footer -->
</div>
<!-- #main-wrapper -->
<!-- jquery -->
<script src="{{url_for('static', filename='js/jquery-2.1.4.min.js')}}"></script>
<!-- Bootstrap -->
<script src="{{url_for('static', filename='js/bootstrap.min.js')}}"></script>
<!--owl carousal-->
<script src="{{url_for('static', filename='js/owl.carousel.min.js')}}"></script>
<!--theme script-->
<script src="{{url_for('static', filename='js/scripts.js')}}"></script>
</body>
</html>
And also you can also download the full code from here
Step 2: How to deploy it on Heroku App:
To deploy you website on Heroku App watch the video given below.
Thanks For Read this Tutorial.