En este artículo, aprenderemos cómo construir una página web de Portafolio con el marco Flask. Este proyecto le mostrará cómo presentar su cartera a Recursos Humanos y compañeros de trabajo de manera más impresionante. También contendrá funciones como Descargar CV , que le permite publicar su CV y que cada usuario que visite su cartera lo descargue. Cualquier usuario también puede contactarlo a través de este servicio completando el formulario de contacto, que enviará un correo electrónico a su cuenta de Gmail.
Requisitos
Instalación:
pip install Flask
La siguiente imagen muestra la interfaz para el Portafolio:
Estructura del archivo:
Implementación paso a paso
Paso 1: Primero cree carpetas básicas, para eso escriba el siguiente cmd en su terminal cmd.
mkdir Flask
Paso 2: muévase a su carpeta Flask
cd Flask static templates
Paso 3: Haga todas las carpetas que necesitamos para nuestro proyecto, como:
- estática: en esta carpeta estática, mantendremos nuestras imágenes y archivos CSS en esta carpeta.
- templates: En esta carpeta podemos guardar nuestros archivos HTML.
mkdir static templates
Paso 3: Ahora cree su archivo index.html en su carpeta de plantillas.
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>
Paso 4: Cree su archivo app.py en su carpeta Flask.
- Estamos importando todos los módulos requeridos que serán necesarios durante la ejecución de nuestro proyecto.
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__)
- Podemos entender que cada vez que accedemos a la página de inicio («/»), aparecerá la página gfg.html de nuestra carpeta de plantillas, esta es la página de inicio de nuestro portafolio.
Python3
@app.route("/")
def index():
return render_template("index.html")
- Podemos entender que cada vez que un usuario envía un mensaje a la persona, se producirá una solicitud POST y luego obtendremos toda la información requerida de la página HTML, como «nombre, asunto, correo electrónico y un mensaje». También estableceremos nuestro nombre, correo electrónico y contraseña para los próximos pasos.
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 = "$$$$$$"
- Intentaremos conectarnos a nuestro servidor de Gmail con la ayuda de la biblioteca incorporada smptlib de python. «smtplib» crea un objeto de sesión de cliente de Protocolo simple de transferencia de correo que se utiliza para enviar correos electrónicos a cualquier identificación de correo electrónico válida en Internet. Diferentes sitios web usan diferentes números de puerto. estamos usando una cuenta de Gmail para enviar un correo. El número de puerto utilizado aquí es ‘587’. Luego, usaremos smtp.ehlo para enviar un comando EHLO (Extended Hello). Ahora, usaremos smtp.starttls para habilitar el cifrado de seguridad de la capa de transporte (TLS).
Python3
# Logging in to our gmail account server
server = smtplib.SMTP('smtp.gmail.com', 587)
server.ehlo()
server.starttls()
server.login(yourEmail, yourPassword)
- Estamos configurando la estructura del cuerpo del contenido del correo electrónico. es decir, correo electrónico del remitente, asunto, contenido del correo electrónico.
Nota: Puede obtener más información sobre cómo automatizar el correo electrónico aquí .
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
Implementación completa del código app.py
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)
Nota: antes de ejecutar su código, configure su Gmail para recibir mensajes entrantes de su cartera. Puede ir directamente haciendo clic aquí y activarlo; de lo contrario, mostrará un error de autenticación SMTP.
