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’.

core/urls.py :This Django code defines URL patterns, including routes to the ‘home.urls’ app and the Django admin interface.

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.

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.

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.

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