April 10, 2026

Develop a Simple Portfolio Site using Templates and Static Resources

📌 Introduction

A portfolio website is used to present:

  • Personal details
  • Skills
  • Projects
  • Contact information

In Django, we can build a simple portfolio site using:

  • views
  • URLs
  • templates
  • static CSS
  • static images

This program is useful as a mini project for practical exams and lab files.

🎯 Program Statement

👉 Develop a simple portfolio site using templates and static resources.

🧠 Features of the Portfolio Site

This portfolio site will include:

  • Home page
  • About page
  • Projects page
  • Contact page
  • Navigation bar
  • Footer
  • CSS styling
  • Profile image

⚙️ Step 1: Project Structure

Create the following structure:

myproject/
│
├── manage.py
├── myproject/
│   ├── settings.py
│   ├── urls.py
│
├── myapp/
│   ├── views.py
│
├── templates/
│   ├── base.html
│   ├── home.html
│   ├── about.html
│   ├── projects.html
│   └── contact.html
│
└── static/
    ├── css/
    │   └── style.css
    └── images/
        └── profile.jpg

⚙️ Step 2: Configure Static Files and Templates

📁 File: settings.py

🔹 Path:

myproject/myproject/settings.py

🔹 Code:

import os

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

⚙️ Step 3: Create Views

📁 File: views.py

🔹 Path:

myproject/myapp/views.py

🔹 Code:

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

def about(request):
    return render(request, 'about.html')

def projects(request):
    project_list = [
        {"title": "Student Management System", "tech": "Django, MySQL"},
        {"title": "Online Quiz App", "tech": "Python, Django"},
        {"title": "Portfolio Website", "tech": "Django, HTML, CSS"},
    ]
    return render(request, 'projects.html', {'projects': project_list})

def contact(request):
    return render(request, 'contact.html')

⚙️ Step 4: URL Mapping

📁 File: urls.py

🔹 Path:

myproject/myproject/urls.py

🔹 Code:

from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),

    path('', views.home, name='home'),
    path('about/', views.about, name='about'),
    path('projects/', views.projects, name='projects'),
    path('contact/', views.contact, name='contact'),
]

⚙️ Step 5: Create CSS File

📁 File: style.css

🔹 Path:

myproject/static/css/style.css

🔹 Code:

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.navbar {
    background-color: #222;
    padding: 15px;
    text-align: center;
}

.navbar a {
    color: white;
    text-decoration: none;
    margin: 15px;
    font-weight: bold;
}

.navbar a:hover {
    color: yellow;
}

.container {
    width: 80%;
    margin: auto;
    padding: 30px;
    text-align: center;
}

.profile-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin-top: 20px;
    border: 4px solid #333;
}

.card {
    background: white;
    padding: 20px;
    margin: 15px auto;
    width: 70%;
    border-radius: 10px;
    box-shadow: 0 0 10px gray;
}

.footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 12px;
    margin-top: 30px;
}

@media screen and (max-width: 768px) {
    .container {
        width: 95%;
    }

    .card {
        width: 90%;
    }

    .navbar a {
        display: block;
        margin: 10px 0;
    }
}

⚙️ Step 6: Add Profile Image

📁 File: profile.jpg

🔹 Path:

myproject/static/images/profile.jpg

👉 Add any image and rename it as profile.jpg

⚙️ Step 7: Create Base Template

📁 File: base.html

🔹 Path:

myproject/templates/base.html

🔹 Code:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Portfolio Site</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>

    <div class="navbar">
        <a href="{% url 'home' %}">Home</a>
        <a href="{% url 'about' %}">About</a>
        <a href="{% url 'projects' %}">Projects</a>
        <a href="{% url 'contact' %}">Contact</a>
    </div>

    <div class="container">
        {% block content %}
        {% endblock %}
    </div>

    <div class="footer">
        <p>© 2026 My Portfolio | All Rights Reserved</p>
    </div>

</body>
</html>

⚙️ Step 8: Create Home Page Template

📁 File: home.html

🔹 Path:

myproject/templates/home.html

🔹 Code:

{% extends 'base.html' %}
{% load static %}

{% block content %}
    <h1>Welcome to My Portfolio</h1>
    <img src="{% static 'images/profile.jpg' %}" alt="Profile Image" class="profile-img">
    <p>Hello! I am a web developer and Python enthusiast.</p>
{% endblock %}

⚙️ Step 9: Create About Page Template

📁 File: about.html

🔹 Path:

myproject/templates/about.html

🔹 Code:

{% extends 'base.html' %}

{% block content %}
    <h1>About Me</h1>
    <div class="card">
        <p>My name is Juhi. I am interested in Python, Django, Full Stack Development, and Cloud Computing.</p>
    </div>
{% endblock %}

⚙️ Step 10: Create Projects Page Template

📁 File: projects.html

🔹 Path:

myproject/templates/projects.html

🔹 Code:

{% extends 'base.html' %}

{% block content %}
    <h1>My Projects</h1>

    {% for p in projects %}
        <div class="card">
            <h3>{{ p.title }}</h3>
            <p>Technology Used: {{ p.tech }}</p>
        </div>
    {% endfor %}
{% endblock %}

⚙️ Step 11: Create Contact Page Template

📁 File: contact.html

🔹 Path:

myproject/templates/contact.html

🔹 Code:

{% extends 'base.html' %}

{% block content %}
    <h1>Contact Me</h1>
    <div class="card">
        <p>Email: example@gmail.com</p>
        <p>Phone: +91-9999999999</p>
    </div>
{% endblock %}

⚙️ Step 12: Run Server

python manage.py runserver

🌐 Step 13: Output

Open the following URLs:

  • Home → http://127.0.0.1:8000/
  • About → http://127.0.0.1:8000/about/
  • Projects → http://127.0.0.1:8000/projects/
  • Contact → http://127.0.0.1:8000/contact/

✅ Expected Output:

  • Styled portfolio site
  • Profile image on home page
  • About information
  • Projects displayed dynamically
  • Contact details
  • Responsive navbar and footer

🧠 How It Works

  1. urls.py maps each URL to a view
  2. views.py renders the correct template
  3. base.html provides common layout
  4. Child templates extend base.html
  5. style.css provides styling
  6. profile.jpg is loaded from static folder

⚠️ Common Errors

❌ CSS not loading

Check:

  • {% load static %} is present
  • Correct path:
{% static 'css/style.css' %}

❌ Image not displaying

Check:

  • Image placed in:
static/images/profile.jpg

❌ Reverse URL error

Ensure URL names are added correctly:

name='home'

❌ Template not found

Make sure all templates are inside:

myproject/templates/

🧪 Practice Questions

  1. Add a Skills page
  2. Add social media links in footer
  3. Add more projects in list
  4. Add a background image to home page
  5. Use Bootstrap instead of plain CSS

🎤 Viva Questions & Answers

1. What is a portfolio website?

A portfolio website is a personal site used to present information such as profile, skills, projects, and contact details. It is useful for students and professionals to showcase their work.

2. Why do we use base.html in a portfolio site?

base.html contains the common layout like navbar and footer, which can be reused across multiple pages. This reduces code duplication and makes maintenance easier.

3. What is the purpose of static files in this program?

Static files are used for CSS and images. They help improve design, styling, and overall presentation of the portfolio website.

4. Why do we use {% extends %} in child templates?

{% extends %} allows a child template to inherit the layout of a base template. It ensures consistency across pages.

5. What is {% block content %} used for?

It defines a replaceable section in the base template where child templates insert their own content.

6. Why is the projects page dynamic in this program?

The projects page receives a list of project dictionaries from the view and displays them in a loop. So the content can be changed without editing HTML manually.

7. What is the role of views.py in this project?

views.py handles requests and decides which template should be rendered. It can also send dynamic data to templates.

8. What is the use of {% url %} in navbar links?

{% url %} creates dynamic links based on URL names. It avoids hardcoding paths and makes navigation safer.

9. How is responsiveness added in this program?

Responsiveness is added through CSS media queries. This makes the layout adapt to mobile and smaller screens.

10. Why is this program important for students?

It combines multiple Django concepts such as templates, static files, inheritance, loops, and navigation. So it serves as a good mini project for exams and portfolio building.

🔗 Navigation

👉 Next Post: Create a Django Form using forms.py and Display Submitted Values
👉 Back to List: Django Programs (60 Questions with Solutions)

Further Reading

Introduction to Django Framework and its Features

Django Practice Exercise

Examples of Array Functions in PHP

Basic Programs in PHP

Registration Form Using PDO in PHP

Inserting Information from Multiple CheckBox Selection in a Database Table in PHP

programmingempire

princites.com

Team - Programmingempire
0

Leave a Reply

Your email address will not be published. Required fields are marked *