Scribd
Upload
2 views

webx_prac10

The document outlines an experiment to design a portfolio website using the Flask framework, detailing the setup process, including environment creation and activation. It provides a basic structure for the Flask application, including code for sending emails and a sample HTML template for the website. The portfolio showcases various skills and projects, emphasizing the use of Flask for web application development.

Uploaded by

Chetan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

webx_prac10

The document outlines an experiment to design a portfolio website using the Flask framework, detailing the setup process, including environment creation and activation. It provides a basic structure for the Flask application, including code for sending emails and a sample HTML template for the website. The portfolio showcases various skills and projects, emphasizing the use of Flask for web application development.

Uploaded by

Chetan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Name: Chetan Chaudhari

Roll Number: A15


Id: TU4F2223013

Experiment No. 10

Aim: Design Portfolio Website using Flask.

Lab Outcome No: 3.ITL602 .6

Lab Outcome: Design web applications using Flask.

Objective: To design Portfolio Website using flask framework.

Theory:

What is Flask?
Flask is an API of Python that allows us to build up web-applications. It was developed by
Armin Ronacher.

Flask’s framework is more explicit than Django’s framework and is also easier to learn
because it has less base code to implement a simple web-Application.

Flask is based on WSGI(Web Server Gateway Interface) toolkit and Jinja2 template engine.

Flask is called a Micro Web Framework because there is no need for third-party libraries and
tools to add functionality to a website.

• Flask is a lightweight Web Server Gateway Interface Web Application (WSGI)


framework.

• It gives the developer varieties of choice when developing web applications,

• It provides you with the necessary tools to build and deploy a web application.

• It does not enforce any dependencies or give a fixed project structure like other
Python Web Frameworks like Django offers.

Step 1: Create an Environment in Windows

• For Python 3:

py -3 -m venv <name of environment>

• For Python 2:

py -2 -m virtualenv <name of environment>

Step 2: Activate the Environment


Activate the Environment on Windows

<name of environment>\Scripts\activate

Step 5: Make a file in the Flask project folder main.py

Code-

● main.py

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']
your_name = "Ayush Kalla"
your_email = "[email protected]"
your_password = "pASSWORD@25243912524391"
# Logging in to our email account
server = smtplib.SMTP('smtp.gmail.com', 587)
server.ehlo()
server.starttls()
server.login(your_email, your_password)
# Sender's and Receiver's email address
sender_email = "[email protected]"
receiver_email = "[email protected]"
msg = EmailMessage()
msg.set_content("First Name : "+str(name)+"\nEmail : "+str(email)+"\nSubject : "+str(subject)
+"\nMessage : "+str(message))
msg['Subject'] = 'New Response on Personal Website'
msg['From'] = sender_email
msg['To'] = receiver_email
# Send the message via our own SMTP server.
try:
# sending an email
server.send_message(msg)
except:
pass
return redirect('/');
if name == " main ":
app.run(debug=True)
● index.html
● <!DOCTYPE html>

● <html lang="en">

● <head>

● <meta charset="UTF-8">

● <meta http-equiv="X-UA-Compatible" content="IE=edge">

● <meta name="viewport" content="width=device-width, initial-scale=1.0">

● <title>Aarya Paradkar</title>

● <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

● <link rel="stylesheet" href="style.css">

● </head>

● <body>

● <header class="header">

● <a href="#" class="logo">Portfolio</a>

● <i class='bx bx-menu' id="menu-icon"></i>

● <nav class="navbar">

● <a href="#home">Home</a>

● <a href="#about">About</a>

● <a href="#skills">Skills</a>

● <a href="#portfolio">Portfolio</a>

● <a href="#contact">Contact</a>

● </nav>

● </header>

● <!-- home -->


● <section class="home" id="home">

● <div class="home-content">

● <h3>Hello, This is</h3>

● <h1>Aarya Paradkar</h1>

● <h3>And I am a <span class="multiple-text"></span></h3>

● <p>I am currently pursuing my Bachelor's in IT from Mumbai University.</p>

● <div class="social-media">

● <a href="https://www.facebook.com/aarya.paradkar"><i class='bx bxl-


facebook'></i></a>

● <a href="https://www.linkedin.com/in/aarya-paradkar-aaa519256/"><i class='bx


bxl-linkedin'></i></a>

● <a href="https://www.instagram.com/_aaryaparadkar_/"><i class='bx bxl-


instagram'></i></a>

● <a href="https://github.com/aaryaparadkar"><i class='bx bxl-github'></i></a>

● </div>

● <a href="./aarya_cv.pdf" class="btn">Download CV</a>

● </div>

● </section>

● <!-- about -->

● <section class="about" id="about">

● <div class="about-img">

● <img src="./assets/your-image.jpg" alt="Your Photo" id="profile-photo">

● </div>

● <div class="about-content">

● <h2 class="heading">About <span>Me</span></h2>

● <p>I am a tech enthusisast specializing in frontend development, blockchain and


cybersecurity. I am passionate about crafting user-friendly web interfaces, exploring the
potential of blockchain technology, and ensuring digital security. Beyond the digital world,
you will often find me trekking through nature, immersed in a good book, or enjoying the
freedom of the open road. Let's connect and explore the ever-evolving tech landscape.</p>

● </div>

● </section>

● <!-- skills -->

● <!-- <section class="skills" id="skills">

● <h2 class="heading">Skills <span>Acquired</span></h2>

● <div class="skills-container">

● <i class='bx bx-code-alt'></i>

● <h3>Meta Frontend Developer</h3>

● <p>The Meta Frontend Developer course is a comprehensive program designed to


equip individuals with the necessary skills and knowledge to become proficient frontend
developers. This course covers a wide range of topics, including HTML, CSS, JavaScript,
responsive web design, and user experience (UX) principles.</p>

● <a href="https://www.coursera.org/professional-certificates/meta-front-end-
developer" class="btn">Read More</a>

● </div>

● <div class="skills-container">

● <i class='bx bx-data'></i>

● <h3>Google CyberSecurity</h3>

● <p>The Google Cybersecurity course is an educational program designed to equip


individuals with the knowledge and skills needed to protect digital assets from cyber
threats. The course covers various topics related to cybersecurity, such as network security,
cryptography, and incident response. It provides participants with a comprehensive
understanding of the latest security technologies, tools, and best practices.</p>

● <a href="https://www.coursera.org/professional-certificates/google-cybersecurity"
class="btn">Read More</a>

● </div>

●
● <div class="skills-container">

● <i class='bx bx-support'></i>

● <h3>Google IT Support</h3>

● <p>The Google IT Support course is designed to equip individuals with


the knowledge and skills to flourish as an IT Support Specialist.</p>

● <a href="https://www.coursera.org/professional-certificates/google-it-support?"
class="btn">Read More</a>

● </div>

● <div class="skills-container">

● <i class='bx bxs-graduation'></i>

● <h3>Blockchain Specialization</h3>

● <p>With the onset of Web 3.0, this course aims to provide learners with the ability
to learn and understand Blockchain which has become a replacement for the traditional
databases in the Web 3.0.</p>

● <a href="https://www.coursera.org/specializations/blockchain"
class="btn">Read More</a>

● </div>

● </section> -->

● <section class="skills" id="skills">

● <h2 class="heading">Skills <span>Earned</span></h2>

● <div class="portfolio-container">

● <div class="portfolio-box">

● <img src="" alt="">

● <div class="portfolio-layer">

● <h4>Meta Frontend Developer</h4>

● <p>The Meta Frontend Developer course is a comprehensive program designed


to equip individuals with the necessary skills and knowledge to become proficient frontend
developers. This course covers a wide range of topics, including HTML, CSS, JavaScript,
responsive web design, and user experience (UX) principles.</p>

● <a href="https://www.coursera.org/account/accomplishments/professional-
cert/T434KVU3PEMJ" class="btn">View Certificate</a>

● </div>

● </div>

● <div class="portfolio-box">

● <img src="" alt="">

● <div class="portfolio-layer">

● <h4>Google CyberSecurity</h4>

● <p>The Google Cybersecurity course is an educational program designed to


equip individuals with the knowledge and skills needed to protect digital assets from cyber
threats. The course covers various topics related to cybersecurity, such as network security,
cryptography, and incident response. It provides participants with a comprehensive
understanding of the latest security technologies, tools, and best practices.</p>

● <a href="https://www.coursera.org/account/accomplishments/professional-
cert/EGEUZPXWD5R3" class="btn">View Certificate</a>

● </div>

● </div>

● <div class="portfolio-box">

● <img src="" alt="">

● <div class="portfolio-layer">

● <h4>Google IT Support</h4>

● <p>The Google IT Support course is designed to equip individuals with the


knowledge and skills to flourish as an IT Support Specialist.</p>

● <a href="https://www.coursera.org/account/accomplishments/professional-
cert/NDPXPW5MKDNE" class="btn">View Certificate</a>

● </div>

● </div>

●
● </div>

● </section>

● <!-- skills -->

● <!-- <section class="skills" id="skills">

● <h2 class="heading">Skills <span>Acquired</span></h2>

● <div class="skills-container">

● <div class="skills-box">

● <img src="linux-logo.png" alt="Linux Logo">

● </div>

● <div class="skills-box">

● <img src="cplusplus-logo.png" alt="C++ Logo">

● </div>

● <div class="skills-box">

● <img src="java-logo.png" alt="Java Logo">

● </div>

● <div class="skills-box">

● <img src="figma-logo.png" alt="Figma Logo">

● </div>

● <div class="skills-box">

● <img src="react-logo.png" alt="React Logo">

● </div>

●
● <div class="skills-box">

● <img src="python-logo.png" alt="Python Logo">

● </div>

● <div class="skills-box">

● <img src="javascript-logo.png" alt="JavaScript Logo">

● </div>

● <div class="skills-box">

● <img src="c-logo.png" alt="C Logo">

● </div>

● <div class="skills-box">

● <img src="bootstrap-logo.png" alt="Bootstrap Logo">

● </div>

● <div class="skills-box">

● <img src="django-logo.png" alt="Django Logo">

● </div>

● </div>

● </section> -->

● <!-- portfolio design -->

● <section class="portfolio" id="portfolio">

● <h2 class="heading">Latest <span>Project</span></h2>

● <div class="portfolio-container">
● <div class="portfolio-box">

● <img src="" alt="">

● <div class="portfolio-layer">

● <h4>Prodo - A productivity app specifically catered for students.</h4>

● <p>Prodo is a meticulously designed app to empower students on their academic


journey. Say goodbye to procrastination and hello to peak productivity as Prodo equips you
with a robust toolkit tailored to meet your unique needs.</p>

● <a href="https://github.com/ayan-joshi/PRODO.git"><i class='bx bx-link-


external' ></i></a>

● </div>

● </div>

● <div class="portfolio-box">

● <img src="" alt="">

● <div class="portfolio-layer">

● <h4>Sumz - An AI Summarizer</h4>

● <p>Sumz is your go-to app for lightning-fast, AI-powered summarization. With


Sumz, by your side, you can breeze through lengthy articles and reports in second with high
precision and clarity.</p>

● <a href="https://github.com/aaryaparadkar/ai_summarizer.git"><i class='bx bx-


link-external' ></i></a>

● </div>

● </div>

● <div class="portfolio-box">

● <img src="" alt="">

● <div class="portfolio-layer">

● <h4>Object Detector using OpenCV</h4>

● <p>Our Object Detector, built using the powerful OpenCV framework, brings
accuracy and efficiency to the world of computer vision. With this tool, you can
effortlessly identify and locate objects within images and video stream.</p>
● <a href="https://github.com/aaryaparadkar/Object-Detector.git"><i class='bx bx-
link-external' ></i></a>

● </div>

● </div>

● </div>

● </section>

● <!-- contact -->

● <section class="contact" id="contact">

● <h2 class="heading">Contact <span>me!</span></h2>

● <form action="https://formspree.io/f/mbjvwjaj" method="POST">

● <div class="input-box">

● <input type="text" placeholder="Full Name" name="full_name">

● <input type="email" placeholder="Email Address" name="email">

● </div>

● <div class="input-box">

● <input type="tel" placeholder="Mobile Number" name="mobile_number">

● <input type="text" placeholder="Email Subject" name="email_subject">

● <textarea name="message" cols="30" rows="10" placeholder="Your


message"></textarea>

● <input type="submit" value="Send Message" class="btn">

● </div>

● </form>

● </section>

● <!-- scroll reveal -->

● <script src="https://unpkg.com/scrollreveal"></script>
●

● <!-- typed js -->

● <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>

● <script src="script.js"></script>

● </body>

● </html>

requirements.txt flask==1.0.3

itsdangerous==2.0.1

Output:
Conclusion:

Hence, we have designed a Portfolio Website using Flask.

You might also like