Portfolio Showcase using Django

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

Python3

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.

Python3

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.

Python3

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.

HTML

<!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 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
</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.

HTML

<!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