In this article, we will create a Portfolio Showcase using Django. For creating the portfolio showcase, we will use HTML and CSS for the frontend. Additionally, in this article, we will demonstrate how to create a form in which you need to submit some details. When you fill out the form and submit it, your portfolio will be displayed by updating the data in your portfolio. To achieve this, we will integrate our portfolio website with the form. It’s a very interesting project, so let’s get started!
Portfolio Showcase using Django
To install Django follow these steps.
Starting the Project Folder
To start the project use this command
django-admin startproject core
cd core
To start the app use this command
python manage.py startapp home
Now add this app to the ‘settings.py’
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"home",
]
Setting Necessary Files
views.py : The code has two Django views. The `home` view renders ‘index.html’. The `gen_pdf` view processes a form submission, saves an uploaded PDF file, and renders ‘pdf.html’ with form data, including the saved file path. If no submission, it renders ‘index.html’.
from django.shortcuts import render
from django.core.files.storage import default_storage
from django.core.files.base import ContentFile
def home(request):
return render(request, 'index.html' )
def gen_pdf(request):
context = {} # Initialize the context dictionary
if request.method = = "POST" :
name = request.POST.get( 'name' , '')
about = request.POST.get( 'about' , '')
pro1 = request.POST.get( 'pro1' , '')
pd1 = request.POST.get( 'pd1' , '')
pro2 = request.POST.get( 'pro2' , '')
pd2 = request.POST.get( 'pd2' , '')
pro3 = request.POST.get( 'pro3' , '')
pd3 = request.POST.get( 'pd3' , '')
ach1 = request.POST.get( 'ach1' , '')
ad1 = request.POST.get( 'ad1' , '')
ach2 = request.POST.get( 'ach2' , '')
ad2 = request.POST.get( 'ad2' , '')
ad3 = request.POST.get( 'ad3' , '')
ach3 = request.POST.get( 'ach3' , '')
address = request.POST.get( 'address' , '')
number = request.POST.get( 'number' , '')
email = request.POST.get( 'email' , '')
cv_file = request.FILES.get( 'cv' )
if cv_file:
# Save the file to the media directory
cv_path = default_storage.save( 'media/cv.pdf' , ContentFile(cv_file.read()))
# Add the CV path to the context
cv_url = default_storage.url(cv_path)
context[ 'cv_url' ] = cv_url
return render(request, 'pdf.html' , {
'name' : name, 'about' : about, 'pro1' : pro1, 'pd1' : pd1, 'pro2' : pro2,
'pd2' : pd2, 'pro3' : pro3, 'pd3' : pd3, 'ach1' : ach1, 'ad1' : ad1, 'ach2' : ach2,
'ad2' : ad2, 'ad3' : ad3, 'ach3' : ach3, 'address' : address, 'number' : number, 'email' : email,
* * context # Include the context dictionary
})
return render(request, 'index.html' )
|
core/urls.py :This Django code defines URL patterns, including routes to the ‘home.urls’ app and the Django admin interface.
from django.contrib import admin
from django.urls import path, include
from . import *
urlpatterns = [
path(' ', include(' home.urls')),
path( "admin/" , admin.site.urls),
] |
home/urls.py : This Django code sets up URL patterns for two views: ‘home’ mapped to the root URL (”), and ‘gen_pdf’ mapped to the ‘/pdf/’ URL, both associated with the corresponding functions in the ‘views’ module of the ‘home’ app.
from django.urls import path, include
from home import views
urlpatterns = [
path('', views.home , name = "home" ),
path( 'pdf/' , views.gen_pdf, name = 'pdf' ),
] |
Creating GUI
index.html : This HTML code defines a form for users to input various details, including name, job role, project information, achievements, address, phone number, and email. It incorporates Bootstrap styles for a clean and responsive layout. The form is submitted to the ‘pdf’ URL using the POST method. Upon submission, the entered data is processed by the Django backend. The page includes Bootstrap CSS and JavaScript for styling and functionality.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Bootstrap Starter Template</ title >
<!-- Add Bootstrap CSS Link -->
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel = "stylesheet" >
< style >
body {
background-color: #fff;
}
h3 {
text-align: center;
font-size: 30px;
margin: 20px;
}
#port {
margin-left: 540px;
font-size: 40px;
font-weight: bold;
color: green;
}
</ style >
</ head >
< body >
< h3 >Enter Your Information</ h3 >
< form action = "{% url 'pdf' %}" method = "post" >
{% csrf_token %}
< div class = "container" >
< div class = "row" >
< div class = "col-md-6" >
< div class = "form-group" >
< label for = "name" >Name:</ label >
< input type = "text" class = "form-control form-control-sm" id = "name" name = "name" >
< label for = "jobRole" >Job Role:</ label >
< textarea class = "form-control" id = "text" name = "about" rows = "4" ></ textarea >
< br >
< label for = "cv" >Upload CV:</ label >
< input type = "file" class = "form-control-file" id = "cv" name = "cv" >
< br >
< label for = "name" >Project Title 1</ label >
< input type = "text" class = "form-control form-control-sm" id = "name" name = "pro1" >
< label for = "jobRole" >Description</ label >
< textarea class = "form-control" id = "text" name = "pd1" rows = "4" ></ textarea >
< label for = "name" >Project Title 2</ label >
< input type = "text" class = "form-control form-control-sm" id = "name" name = "pro2" >
< label for = "jobRole" >Description</ label >
< textarea class = "form-control" id = "text" name = "pd2" rows = "4" ></ textarea >
< label for = "name" >Project Title 3</ label >
< input type = "text" class = "form-control form-control-sm" id = "name" name = "pro3" >
< label for = "jobRole" >Description</ label >
< textarea class = "form-control" id = "text" name = "pd3" rows = "4" ></ textarea >
< label for = "name" >Achievemet 1</ label >
< input type = "text" class = "form-control form-control-sm" id = "name" name = "ach1" >
< label for = "jobRole" >Description</ label >
< textarea class = "form-control" id = "text" name = "ad1" rows = "4" ></ textarea >
< label for = "name" >Achievement 2</ label >
< input type = "text" class = "form-control form-control-sm" id = "name" name = "ach2" >
< label for = "jobRole" >Description</ label >
< textarea class = "form-control" id = "text" name = "ad2" rows = "4" ></ textarea >
< label for = "name" >Achievement 3</ label >
< input type = "text" class = "form-control form-control-sm" id = "name" name = "ach3" >
< label for = "jobRole" >Description</ label >
< textarea class = "form-control" id = "text" name = "ad3" rows = "4" ></ textarea >
< label for = "address" >Address:</ label >
< input type = "text" class = "form-control form-control-sm" id = "address" name = "address" >
< label for = "phoneNumber" >Phone Number:</ label >
< input type = "tel" class = "form-control form-control-sm" id = "phoneNumber" name = "number" >
< label for = "email" >Email:</ label >
< input type = "email" class = "form-control form-control-sm" id = "email" name = "email" >
</ div >
< button type = "submit" class = "btn btn-primary" >Submit</ button >
</ div >
</ form >
<!-- Add Bootstrap JS and jQuery -->
</ body >
</ html >
|
pdf.html : This HTML code constructs a responsive portfolio webpage using semantic HTML tags and CSS styles. It includes sections for home, projects, achievements, and contact, dynamically displaying user-inputted data through Django template variables. The design is clean, featuring a navigation bar and styled sections with details such as personal information, project descriptions, achievements, and contact details. Navigation links facilitate easy movement between sections.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "styles.css" >
< title >🌟 My Portfolio 🌟</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< style >
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #cde7ce;
color: #fff;
padding: 4px;
box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);
}
nav ul {
list-style: none;
padding: 0;
text-align: right;
}
nav li {
display: inline;
margin: 0 20px;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.home {
color: black;
margin-top: -10%;
}
.about {
background-color: #e74c3c;
color: #fff;
}
.projects {
color: #fff;
}
.achievements {
color: #fff;
}
.contact {
color: #fff;
}
h1 {
font-size: 36px;
margin: 10px 0;
color: black;
font-family: C;
}
h2 {
font-size: 30px;
margin: 10px 0;
}
nav a {
text-decoration: none;
color: black;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.project-container {
display: flex;
justify-content: space-between;
width: 90%;
max-width: 1200px;
padding: 20px;
}
.project {
flex: 1;
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin: 10px;
text-align: center;
box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.2);
}
.project-title {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.project-description {
font-size: 16px;
color: #666;
}
.achievement-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.achievement {
flex: 0 0 calc(33.33% - 20px);
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin: 10px;
text-align: center;
box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.2);
}
.achievement-title {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.achievement-description {
font-size: 16px;
color: #666;
}
.contact-container {
border-radius: 10px;
padding: 20px;
width: 90%;
max-width: 500px;
text-align: center;
}
.contact-info {
font-size: 18px;
color: #666;
margin-top: 20px;
}
.contact-form {
margin-top: 20px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.contact-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 90%;
max-width: 500px;
text-align: center;
}
.contact-option {
font-size: 18px;
color: #666;
margin: 20px 0;
}
#port {
margin-right: 75%;
margin-top: -2%;
font-size: 30px;
font-weight: bold;
color: green;
}
#op {
color: rgb(59, 59, 60);
padding: 10px 20px;
background-color: #e8e9dd;
border: 1px solid black;
border-radius: 10px;
font-weight: bold;
text-decoration: none;
}
#p {
width: 700px;
}
#CV {
background-color: orange;
outline: none;
font-size: 13px;
font-weight: bold;
}
</ style >
< body >
<!-- Header -->
< header >
< nav >
< ul >
< li >< a href = "#home" >🏠 Home</ a ></ li >
< li >< a href = "#projects" >🎮️ Projects</ a ></ li >
< li >< a href = "#achievements" >🏆 Achievements</ a ></ li >
< li >< a href = "#contact" >✉ Contact</ a ></ li >
</ ul >
</ nav >
</ header >
<!-- Home Section -->
< section id = "home" class = "section home" >
< div class = "content" >
< h1 id = "head" >I Am 🌟 {{name}} 🌟</ h1 >
< br >
< p id = "p" >{{about}} ✨</ p >
< div class = "content" >
< h2 id = "head" >📂 </ h2 >
< button id = "CV" > < a href = "{{ cv_url }}" download = "cv.pdf" class = "btn btn-success"
style = "color: white;" >Download CV</ a ></ button >
</ div >
</ div >
</ section >
<!-- Projects Section -->
< section id = "projects" class = "section projects" >
< li >< a href = "#home" id = "op" > Back</ a ></ li >
< div class = "project-container" >
< div class = "project" >
< h2 class = "project-title" >{{pro1}} 🎮</ h2 >
< p class = "project-description" >{{pd1}}</ p >
</ div >
< div class = "project" >
< h2 class = "project-title" >{{pro2}} 🎮️</ h2 >
< p class = "project-description" >{{pd2}} </ p >
</ div >
< div class = "project" >
< h2 class = "project-title" >{{pro3}} 🎮</ h2 >
< p class = "project-description" >{{pd3}}</ p >
</ div >
</ div >
</ section >
< section id = "achievements" class = "section achievements" >
< li >< a href = "#home" id = "op" > Back</ a ></ li >
< div class = "achievement-container" >
< div class = "achievement" >
< h2 class = "achievement-title" >{{ach1}} 🏆</ h2 >
< p class = "achievement-description" >{{ad1}}</ p >
</ div >
< div class = "achievement" >
< h2 class = "achievement-title" >{{ach2}} 🏆</ h2 >
< p class = "achievement-description" >{{ad2}}.</ p >
</ div >
< div class = "achievement" >
< h2 class = "achievement-title" >{{ach3}} 🏆</ h2 >
< p class = "achievement-description" >{{ad3}}</ p >
</ div >
</ div >
</ section >
<!-- Contact Section -->
< section id = "contact" class = "section contact" >
< div class = "contact-container" >
< h1 >✉ Contact Us ✉</ h1 >
< div class = "contact-option" >
< p >📞 Phone:+91-{{number}} ☎️</ p >
</ div >
< div class = "contact-option" >
< p >🏠 Address: {{address}}</ p >
</ div >
< div class = "contact-option" >
< p >✉ Email: {{email}}</ p >
</ div >
< br >< br >
< li >< a href = "#home" id = "op" > Back</ a ></ li >
</ div >
< br >< br >
</ section >
</ body >
</ html >
|
Deployement of the Project
Run these commands to apply the migrations:
python3 manage.py makemigrations
python3 manage.py migrate
Run the server with the help of following command:
python3 manage.py runserver
Output