Job 1: Develop a Personal Portfolio.
Develop a personal portfolio project to help individuals create a professional and visually
appealing website to display their skills and accomplishments. Through this project,
users can build a portfolio that includes detailed information about their projects,
technical skills, work experiences, and educational background. The portfolio acts as an
online resume and a platform to demonstrate their expertise. The portfolio is interactive,
allowing visitors to navigate through different sections, view projects, and get in touch
using contact forms.
Job Specification information:
1. Create a new Django project named Name_ID_Portfolio.
2. Create a Django app named Portfolio.
3. Define the required models for the portfolio app in the models.py file.
4. Create views for Login (username/email and password) and Registration
(username, email, password, confirm password) pages.
5. Create required Django templates.
6. Create forms using Django forms for the contact page or any other interactive
elements on your portfolio.
7. Create a dashboard where the admin can insert/update his information.
8. Generate a view for showing Curriculum Vitae or Resume from the data.
9. Define URL Patterns and configure project-level URLs.
10. Implement the required Function and Logic in the view.py file.
Job Specification information:
a. Create a new Django project. (Naming Convention: Name_ID_Portfolio)
b. Run migration to create the data tables.
c. Create a super user. (username: admin, password: 1234)
d. Register your models to the Django admin.
models.py
from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
full_name = models.CharField(max_length=100, blank=True)
bio = models.TextField(blank=True)
profile_picture = models.ImageField(upload_to='profile_pics/', blank=True, null=True)
phone = models.CharField(max_length=20, blank=True)
address = models.TextField(blank=True)
linkedin = models.URLField(blank=True)
github = models.URLField(blank=True)
website = models.URLField(blank=True)
def __str__(self):
return self.full_name
class Skill(models.Model):
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
name = models.CharField(max_length=50)
proficiency = models.IntegerField(choices=[(i, f'{i}%') for i in range(10, 101, 10)])
def __str__(self):
return self.name
class Project(models.Model):
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
title = models.CharField(max_length=100)
description = models.TextField()
image = models.ImageField(upload_to='project_images/', blank=True, null=True)
url = models.URLField(blank=True)
github_url = models.URLField(blank=True)
technologies = models.CharField(max_length=200)
def __str__(self):
return self.title
class Experience(models.Model):
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
job_title = models.CharField(max_length=100)
company = models.CharField(max_length=100)
start_date = models.DateField()
end_date = models.DateField(blank=True, null=True)
description = models.TextField()
def __str__(self):
return f"{self.job_title} at {self.company}"
class Education(models.Model):
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
degree = models.CharField(max_length=100)
institution = models.CharField(max_length=100)
start_date = models.DateField()
end_date = models.DateField(blank=True, null=True)
description = models.TextField(blank=True)
def __str__(self):
return f"{self.degree} from {self.institution}"
class ContactMessage(models.Model):
name = models.CharField(max_length=100)
email = models.EmailField()
subject = models.CharField(max_length=200)
message = models.TextField()
sent_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return f"Message from {self.name}"
forms.py
from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from .models import ContactMessage, Profile, Skill, Project, Experience, Education
class CustomUserCreationForm(UserCreationForm):
email = forms.EmailField(required=True)
class Meta:
model = User
fields = ['username', 'email', 'password1', 'password2']
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for field in self.fields.values():
field.widget.attrs.update({'class': 'form-control'})
class ContactForm(forms.ModelForm):
class Meta:
model = ContactMessage
fields = ['name', 'email', 'subject', 'message']
widgets = {
'name': forms.TextInput(attrs={'class': 'form-control'}),
'email': forms.EmailInput(attrs={'class': 'form-control'}),
'subject': forms.TextInput(attrs={'class': 'form-control'}),
'message': forms.Textarea(attrs={'class': 'form-control', 'rows': 4}),
}
class ProfileForm(forms.ModelForm):
class Meta:
model = Profile
fields = ['full_name', 'bio', 'profile_picture', 'phone', 'address', 'linkedin', 'github', 'website']
widgets = {
'full_name': forms.TextInput(attrs={'class': 'form-control'}),
'bio': forms.Textarea(attrs={'class': 'form-control', 'rows': 4}),
'profile_picture': forms.FileInput(attrs={'class': 'form-control'}),
'phone': forms.TextInput(attrs={'class': 'form-control'}),
'address': forms.Textarea(attrs={'class': 'form-control', 'rows': 3}),
'linkedin': forms.URLInput(attrs={'class': 'form-control'}),
'github': forms.URLInput(attrs={'class': 'form-control'}),
'website': forms.URLInput(attrs={'class': 'form-control'}),
}
class SkillForm(forms.ModelForm):
class Meta:
model = Skill
fields = ['name', 'proficiency']
widgets = {
'name': forms.TextInput(attrs={'class': 'form-control'}),
'proficiency': forms.NumberInput(attrs={'class': 'form-control', 'min': 10, 'max': 100, 'step': 10}),
}
class ProjectForm(forms.ModelForm):
class Meta:
model= Project
fields= ['title', 'description', 'image', 'url', 'github_url', 'technologies']
widgets ={
'title': forms.TextInput(attrs={'class': 'form-control'}),
'description': forms.Textarea(attrs={'class': 'form-control'}),
'image': forms.FileInput(attrs={'class': 'form-control'}),
'url': forms.URLInput(attrs={'class': 'form-control'}),
'github_url': forms.URLInput(attrs={'class': 'form-control'}),
'technologies': forms.TextInput(attrs={'class': 'form-control'}),
}
class ExperienceForm(forms.ModelForm):
class Meta:
model = Experience
fields = ['job_title', 'company', 'start_date', 'end_date', 'description']
widgets = {
'job_title': forms.TextInput(attrs={'class': 'form-control'}),
'company': forms.TextInput(attrs={'class': 'form-control'}),
'start_date': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
'end_date': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
'description': forms.Textarea(attrs={'class': 'form-control', 'rows': 4}),
}
class EducationForm(forms.ModelForm):
class Meta:
model = Education
fields = ['degree', 'institution', 'start_date', 'end_date', 'description']
widgets = {
'degree': forms.TextInput(attrs={'class': 'form-control'}),
'institution': forms.TextInput(attrs={'class': 'form-control'}),
'start_date': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
'end_date': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
'description': forms.Textarea(attrs={'class': 'form-control', 'rows': 4}),
}
admin.py
from django.contrib import admin
from .models import Profile, Skill, Project, Experience, Education, ContactMessage
@admin.register(Profile)
class ProfileAdmin(admin.ModelAdmin):
list_display = ('full_name', 'user', 'phone')
search_fields = ('full_name', 'user__username')
@admin.register(Skill)
class SkillAdmin(admin.ModelAdmin):
list_display = ('name', 'proficiency', 'profile')
list_filter = ('profile',)
@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
list_display = ('title', 'profile', 'technologies')
search_fields = ('title', 'technologies')
@admin.register(Experience)
class ExperienceAdmin(admin.ModelAdmin):
list_display = ('job_title', 'company', 'start_date', 'end_date', 'profile')
list_filter = ('company', 'start_date')
@admin.register(Education)
class EducationAdmin(admin.ModelAdmin):
list_display = ('degree', 'institution', 'start_date', 'end_date', 'profile')
list_filter = ('institution', 'start_date')
@admin.register(ContactMessage)
class ContactMessageAdmin(admin.ModelAdmin):
list_display = ('name', 'email', 'subject', 'sent_at')
search_fields = ('name', 'email', 'subject')
readonly_fields = ('sent_at',)
views.py
# Create your views here.
from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth import login, authenticate, logout
from django.contrib.auth.decorators import login_required
from django.contrib import messages
from django.http import HttpResponse
from .models import Profile, Skill, Project, Experience, Education, ContactMessage
from .forms import CustomUserCreationForm, ContactForm, EducationForm, ProfileForm, SkillForm, ProjectForm, ExperienceForm, EducationForm
def home(request):
if request.user.is_authenticated:
profile = Profile.objects.filter(user=request.user).first()
else:
profile = Profile.objects.first() # Assuming one profile for simplicity
skills = Skill.objects.filter(profile=profile) if profile else []
projects = Project.objects.filter(profile=profile) if profile else []
experiences = Experience.objects.filter(profile=profile) if profile else []
educations = Education.objects.filter(profile=profile) if profile else []
return render(request, 'Portfolio/home.html', {
'profile': profile,
'skills': skills,
'projects': projects,
'experiences': experiences,
'educations': educations,
})
def cv_view(request):
if request.user.is_authenticated:
profile = Profile.objects.filter(user=request.user).first()
else:
profile = Profile.objects.first()
skills = Skill.objects.filter(profile=profile) if profile else []
projects = Project.objects.filter(profile=profile) if profile else []
experiences = Experience.objects.filter(profile=profile) if profile else []
educations = Education.objects.filter(profile=profile) if profile else []
return render(request, 'Portfolio/cv.html', {
'profile': profile,
'skills': skills,
'projects': projects,
'experiences': experiences,
'educations': educations,
})
def contact_view(request):
if request.method == 'POST':
form = ContactForm(request.POST)
if form.is_valid():
form.save()
messages.success(request, 'Your message has been sent successfully!')
return redirect('contact')
else:
form = ContactForm()
return render(request, 'Portfolio/contact.html', {'form': form})
def login_view(request):
if request.method == 'POST':
username = request.POST['username']
password = request.POST['password']
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
messages.success(request, 'Logged in successfully!')
return redirect('dashboard')
else:
messages.error(request, 'Invalid username or password.')
return render(request, 'Portfolio/login.html')
def register_view(request):
if request.method == 'POST':
form = CustomUserCreationForm(request.POST)
if form.is_valid():
user = form.save()
login(request, user)
messages.success(request, 'Registration successful!')
return redirect('dashboard')
else:
form = CustomUserCreationForm()
return render(request, 'Portfolio/register.html', {'form': form})
@login_required
def dashboard_view(request):
profile = Profile.objects.filter(user=request.user).first()
if not profile:
profile = Profile.objects.create(user=request.user, full_name=request.user.username, bio='')
skills = Skill.objects.filter(profile=profile) if profile else []
projects = Project.objects.filter(profile=profile) if profile else []
experiences = Experience.objects.filter(profile=profile) if profile else []
educations = Education.objects.filter(profile=profile) if profile else []
return render(request, 'Portfolio/dashboard.html', {
'profile': profile,
'skills': skills,
'projects': projects,
'experiences': experiences,
'educations': educations,
}
)
@login_required
def profile_update_view(request):
profile = get_object_or_404(Profile, user=request.user)
if request.method == 'POST':
form = ProfileForm(request.POST, request.FILES, instance=profile)
if form.is_valid():
form.save()
messages.success(request, 'Your profile has been updated successfully!')
return redirect('dashboard')
else:
form = ProfileForm(instance=profile)
return render(request, 'Portfolio/profile_update.html', {'form': form})
@login_required
def skill_add_view(request):
profile = get_object_or_404(Profile, user=request.user)
if request.method == 'POST':
form = SkillForm(request.POST)
if form.is_valid():
skill = form.save(commit=False)
skill.profile = profile
skill.save()
messages.success(request, 'Skill added successfully!')
return redirect('dashboard')
else:
form = SkillForm()
return render(request, 'Portfolio/skill_add.html', {'form': form, 'title': 'Add Skill', 'submit': 'Add Skill'})
@login_required
def skill_edit_view(request, id):
edit_data = get_object_or_404(Skill, id=id, profile__user=request.user)
profile = get_object_or_404(Profile, user=request.user)
if request.method == "POST":
form = SkillForm(request.POST, instance=edit_data)
if form.is_valid():
skill = form.save(commit=False)
skill.profile = profile
skill.save()
messages.success(request, "Skill added successfully!")
return redirect("dashboard")
else:
form = SkillForm(instance=edit_data)
return render(request, "Portfolio/skill_add.html", {"form": form, "title": "Edit Skill", "submit": "Update Skill"})
@login_required
def project_add_view(request):
profile = get_object_or_404(Profile, user=request.user)
if request.method == 'POST':
form = ProjectForm(request.POST, request.FILES)
if form.is_valid():
project = form.save(commit=False)
project.profile = profile
project.save()
messages.success(request, 'Project added successfully!')
return redirect('dashboard')
else:
form = ProjectForm()
return render(request, 'Portfolio/project_add.html', {'form': form})
@login_required
def experience_add_view(request):
profile = get_object_or_404(Profile, user=request.user)
if request.method == 'POST':
form = ExperienceForm(request.POST)
if form.is_valid():
experience = form.save(commit=False)
experience.profile = profile
experience.save()
messages.success(request, 'Experience added successfully!')
return redirect('dashboard')
else:
form = ExperienceForm()
return render(request, 'Portfolio/experience_add.html', {'form': form})
@login_required
def education_add_view(request):
profile = get_object_or_404(Profile, user=request.user)
if request.method == 'POST':
form = EducationForm(request.POST)
if form.is_valid():
education = form.save(commit=False)
education.profile = profile
education.save()
messages.success(request, 'Education added successfully!')
return redirect('dashboard')
else:
form = EducationForm()
return render(request, 'Portfolio/education_add.html', {'form': form})
def logout_view(request):
logout(request)
return redirect('home')
urls.py
from django.urls import path
from . import views
urlpatterns = [
path("", views.home, name="home"),
path("cv/", views.cv_view, name="cv"),
path("contact/", views.contact_view, name="contact"),
path("login/", views.login_view, name="login"),
path("register/", views.register_view, name="register"),
path("dashboard/", views.dashboard_view, name="dashboard"),
path("profile/update/", views.profile_update_view, name="profile_update"),
path("skill/add/", views.skill_add_view, name="skill_add"),
path("skill/edit/<int:id>/", views.skill_edit_view, name="skill_edit"),
path("project/add/", views.project_add_view, name="project_add"),
path("experience/add/", views.experience_add_view, name="experience_add"),
path("education/add/", views.education_add_view, name="education_add"),
path("logout/", views.logout_view, name="logout"),
]
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Portfolio{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{% static 'Portfolio/css/style.css' %}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{% url 'home' %}">Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'cv' %}">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
<ul class="navbar-nav">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'dashboard' %}">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<main>
{% block content %}{% endblock %}
</main>
<footer class="footer">
<div class="container text-center">
<p>© 2023 Portfolio. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{% static 'Portfolio/js/script.js' %}"></script>
</body>
</html>
register.html
{% extends 'Portfolio/base.html' %}
{% block title %}Register{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="text-center">Register</h3>
</div>
<div class="card-body">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
{% endfor %}
{% endif %}
<form method="post">
{% csrf_token %}
<div class="mb-3">
<label class="form-label">Username</label>
{{ form.username }}
</div>
<div class="mb-3">
<label class="form-label">Email</label>
{{ form.email }}
</div>
<div class="mb-3">
<label class="form-label">Password</label>
{{ form.password1 }}
</div>
<div class="mb-3">
<label class="form-label">Confirm Password</label>
{{ form.password2 }}
</div>
<button type="submit" class="btn btn-primary w-100">Register</button>
</form>
</div>
<div class="card-footer text-center">
<p>Already have an account? <a href="{% url 'login' %}">Login here</a></p>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
login.html
{% extends 'Portfolio/base.html' %}
{% block title %}Login{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="text-center">Login</h3>
</div>
<div class="card-body">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
{% endfor %}
{% endif %}
<form method="post">
{% csrf_token %}
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
</form>
</div>
<div class="card-footer text-center">
<p>Don't have an account? <a href="{% url 'register' %}">Register here</a></p>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
dashboard.html
{% extends 'Portfolio/base.html' %}
{% block title %}Dashboard{% endblock %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
{% block content %}
<div class="container my-5">
<div class="row">
<div class="col-md-12">
<h1 class="mb-4">Dashboard</h1>
<p class="lead">Manage your portfolio information.</p>
</div>
</div>
<!-- Profile Section -->
<div class="row mb-4">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0 section-title card-title-bg">Profile</h5>
<a href="{% url 'profile_update' %}" class="btn btn-sm btn-primary">Update Profile</a>
</div>
<div class="card-body">
{% if profile %}
<div class="row">
<div class="col-md-8">
<h3>{{ profile.full_name }}</h3>
<p>{{ profile.bio }}</p>
<p><strong>Phone:</strong> {{ profile.phone }}</p>
<p><strong>Address:</strong> {{ profile.address }}</p>
<p><strong>LinkedIn:</strong> <a href="{{ profile.linkedin }}" target="_blank">{{ profile.linkedin }}</a></p>
<p><strong>GitHub:</strong> <a href="{{ profile.github }}" target="_blank">{{ profile.github }}</a></p>
<p><strong>Website:</strong> <a href="{{ profile.website }}" target="_blank">{{ profile.website }}</a></p>
</div>
<div class="col-md-4">
{% if profile.profile_picture %}
<img src="{{ profile.profile_picture.url }}" alt="Profile Picture" class="img-fluid rounded" width="200">
{% endif %}
</div>
</div>
{% else %}
<p>No profile information available.</p>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Skills Section -->
<div class="row mb-4">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0 section-title card-title-bg">Skills</h5>
<a href="{% url 'skill_add' %}" class="btn btn-sm btn-success">Add Skill</a>
</div>
<div class="card-body">
{% if skills %}
<div class="row">
{% for skill in skills %}
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">{{ skill.name }}</h6>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: {{ skill.proficiency }}%">{{ skill.proficiency }}%</div>
</div>
<a href="{% url 'skill_edit' skill.id %}" class="btn btn-sm btn-outline-primary">Edit</a>
<button class="btn btn-sm btn-outline-danger">Delete</button>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p>No skills added yet.</p>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Projects Section -->
<div class="row mb-4">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Projects</h5>
<a href="{% url 'project_add' %}" class="btn btn-sm btn-success">Add Project</a>
</div>
<div class="card-body">
{% if projects %}
<div class="row">
{% for project in projects %}
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">{{ project.title }}</h6>
<p class="card-text">{{ project.description }}</p>
<p><strong>Technologies:</strong> {{ project.technologies }}</p>
{% if project.url %}
<a href="{{ project.url }}" class="btn btn-primary btn-sm" target="_blank">View Project</a>
{% endif %}
{% if project.github_url %}
<a href="{{ project.github_url }}" class="btn btn-secondary btn-sm" target="_blank">GitHub</a>
{% endif %}
<button class="btn btn-sm btn-outline-primary">Edit</button>
<button class="btn btn-sm btn-outline-danger">Delete</button>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p>No projects added yet.</p>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Experience Section -->
<div class="row mb-4">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0 section-title card-title-bg">Experience</h5>
<a href="{% url 'experience_add' %}" class="btn btn-sm btn-success">Add Experience</a>
</div>
<div class="card-body">
{% if experiences %}
<div class="row">
{% for experience in experiences %}
<div class="col-md-12 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">{{ experience.job_title }} at {{ experience.company }}</h6>
<p class="card-text">{{ experience.start_date }} - {{ experience.end_date|default:"Present" }}</p>
<p>{{ experience.description }}</p>
<button class="btn btn-sm btn-outline-primary">Edit</button>
<button class="btn btn-sm btn-outline-danger">Delete</button>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p>No experience added yet.</p>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Education Section -->
<div class="row mb-4">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0 section-title card-title-bg">Education</h5>
<a href="{% url 'education_add' %}" class="btn btn-sm btn-success">Add Education</a>
</div>
<div class="card-body">
{% if educations %}
<div class="row">
{% for education in educations %}
<div class="col-md-12 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">{{ education.degree }} from {{ education.institution }}</h6>
<p class="card-text">{{ education.start_date }} - {{ education.end_date|default:"Present" }}</p>
<p>{{ education.description }}</p>
<button class="btn btn-sm btn-outline-primary">Edit</button>
<button class="btn btn-sm btn-outline-danger">Delete</button>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p>No education added yet.</p>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
home.html
{% extends 'Portfolio/base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<!-- Hero Section with Round Profile Image -->
<section class="hero-section text-center py-5">
<div class="container">
{% if profile %}
{% if profile.profile_picture %}
<img src="{{ profile.profile_picture.url }}" alt="Profile Picture" width="200" class="round-profile-img mb-4">
{% endif %}
<h1 class="hero-title">{{ profile.full_name }}</h1>
<p class="hero-bio">{{ profile.bio }}</p>
{% else %}
<div class="round-profile-placeholder mb-4"></div>
<h1 class="hero-title">Welcome to My Portfolio</h1>
<p class="hero-bio">This is my personal portfolio website.</p>
{% endif %}
</div>
</section>
<!-- Contact Info Section -->
<section class="contact-section py-5 bg-light">
<div class="container">
<h2 class="section-title text-center mb-4">Contact Information</h2>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card contact-card slide-in">
<div class="card-body">
{% if profile %}
<div class="row">
<div class="col-md-6">
<p><strong>Phone:</strong> {{ profile.phone }}</p>
<p><strong>Address:</strong> {{ profile.address }}</p>
</div>
<div class="col-md-6">
<p><strong>LinkedIn:</strong> <a href="{{ profile.linkedin }}" target="_blank">{{ profile.linkedin }}</a></p>
<p><strong>GitHub:</strong> <a href="{{ profile.github }}" target="_blank">{{ profile.github }}</a></p>
<p><strong>Website:</strong> <a href="{{ profile.website }}" target="_blank">{{ profile.website }}</a></p>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
{% if skills %}
<section class="skills-section py-5">
<div class="container">
<h2 class="section-title text-center mb-4">Skills</h2>
<div class="row">
{% for skill in skills %}
<div class="col-md-4 mb-4">
<div class="card skill-card slide-in">
<div class="card-body text-center">
<h5 class="card-title">{{ skill.name }}</h5>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: {{ skill.proficiency }}%">{{ skill.proficiency }}%</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
<!-- Projects Section -->
{% if projects %}
<section class="projects-section py-5 bg-light">
<div class="container">
<h2 class="section-title text-center mb-4">Projects</h2>
<div class="row">
{% for project in projects %}
<div class="col-md-6 mb-4">
<div class="card project-card slide-in">
<div class="card-body">
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text">{{ project.description }}</p>
<p><strong>Technologies:</strong> {{ project.technologies }}</p>
<div class="d-flex justify-content-between">
{% if project.url %}
<a href="{{ project.url }}" class="btn btn-primary" target="_blank">View Project</a>
{% endif %}
{% if project.github_url %}
<a href="{{ project.github_url }}" class="btn btn-secondary" target="_blank">GitHub</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
<!-- Experience Section -->
{% if experiences %}
<section class="experience-section py-5">
<div class="container">
<h2 class="section-title text-center mb-4">Experience</h2>
<div class="row">
{% for experience in experiences %}
<div class="col-md-12 mb-4">
<div class="card experience-card slide-in">
<div class="card-body">
<h5 class="card-title">{{ experience.job_title }} at {{ experience.company }}</h5>
<p class="card-text">{{ experience.start_date }} - {{ experience.end_date|default:"Present" }}</p>
<p>{{ experience.description }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
<!-- Education Section -->
{% if educations %}
<section class="education-section py-5 bg-light">
<div class="container">
<h2 class="section-title text-center mb-4">Education</h2>
<div class="row">
{% for education in educations %}
<div class="col-md-12 mb-4">
<div class="card education-card slide-in">
<div class="card-body">
<h5 class="card-title">{{ education.degree }} from {{ education.institution }}</h5>
<p class="card-text">{{ education.start_date }} - {{ education.end_date|default:"Present" }}</p>
<p>{{ education.description }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% endblock %}
contact.html
{% extends 'Portfolio/base.html' %}
{% block title %}Contact{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="text-center mb-5">
<h1 class="display-4 fw-bold text-primary">Get In Touch</h1>
<p class="lead text-muted">I'd love to hear from you. Send me a message and I'll respond as soon as possible.</p>
</div>
</div>
</div>
<div class="row g-5">
<!-- Contact Information -->
<div class="col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body p-4">
<h3 class="card-title mb-4 text-primary">Contact Information</h3>
<div class="d-flex align-items-center mb-3">
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
<i class="fas fa-envelope"></i>
</div>
<div>
<h6 class="mb-0">Email</h6>
<p class="text-muted mb-0">your.email@example.com</p>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
<i class="fas fa-phone"></i>
</div>
<div>
<h6 class="mb-0">Phone</h6>
<p class="text-muted mb-0">+1 (555) 123-4567</p>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h6 class="mb-0">Location</h6>
<p class="text-muted mb-0">Your City, Country</p>
</div>
</div>
<div class="d-flex align-items-center">
<div class="bg-dark text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
<i class="fab fa-linkedin"></i>
</div>
<div>
<h6 class="mb-0">LinkedIn</h6>
<p class="text-muted mb-0">linkedin.com/in/yourprofile</p>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Form -->
<div class="col-lg-8">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<h3 class="card-title mb-4 text-primary">Send Message</h3>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
<form method="post" class="needs-validation" novalidate>
{% csrf_token %}
<div class="row g-3">
<div class="col-md-6">
<label for="{{ form.name.id_for_label }}" class="form-label fw-semibold">
<i class="fas fa-user me-2 text-primary"></i>Name
</label>
{{ form.name }}
{% if form.name.errors %}
<div class="invalid-feedback d-block">{{ form.name.errors }}</div>
{% endif %}
</div>
<div class="col-md-6">
<label for="{{ form.email.id_for_label }}" class="form-label fw-semibold">
<i class="fas fa-envelope me-2 text-primary"></i>Email
</label>
{{ form.email }}
{% if form.email.errors %}
<div class="invalid-feedback d-block">{{ form.email.errors }}</div>
{% endif %}
</div>
</div>
<div class="mb-3">
<label for="{{ form.subject.id_for_label }}" class="form-label fw-semibold">
<i class="fas fa-tag me-2 text-primary"></i>Subject
</label>
{{ form.subject }}
{% if form.subject.errors %}
<div class="invalid-feedback d-block">{{ form.subject.errors }}</div>
{% endif %}
</div>
<div class="mb-4">
<label for="{{ form.message.id_for_label }}" class="form-label fw-semibold">
<i class="fas fa-comment me-2 text-primary"></i>Message
</label>
{{ form.message }}
{% if form.message.errors %}
<div class="invalid-feedback d-block">{{ form.message.errors }}</div>
{% endif %}
</div>
<button type="submit" class="btn btn-primary btn-lg w-100">
<i class="fas fa-paper-plane me-2"></i>Send Message
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<style>
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
.form-control:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
}
</style>
{% endblock %}
cv.html
{% extends 'Portfolio/base.html' %}
{% load static %}
{% block title %}CV{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'Portfolio/css/style.css' %}">
{% endblock %}
{% block content %}
<div class="container my-5">
{% if profile %}
<div class="cv-header text-center mb-5 fade-in">
<h1 class="display-4 fw-bold">{{ profile.full_name }}</h1>
<p class="lead">{{ profile.bio }}</p>
<div class="contact-info">
{% if profile.phone %}<span><i class="fas fa-phone"></i> {{ profile.phone }}</span>{% endif %}
{% if profile.address %}<span><i class="fas fa-map-marker-alt"></i> {{ profile.address }}</span>{% endif %}
{% if profile.linkedin %}<a href="{{ profile.linkedin }}" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a>{% endif %}
{% if profile.github %}<a href="{{ profile.github }}" target="_blank"><i class="fab fa-github"></i> GitHub</a>{% endif %}
</div>
</div>
<div class="row">
<div class="col-lg-8">
{% if experiences %}
<section class="cv-section mb-5">
<h2 class="section-title display-6 mb-4">Work Experience</h2>
<div class="timeline">
{% for experience in experiences %}
<div class="timeline-item fade-in">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ experience.job_title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{ experience.company }}</h6>
<p class="text-muted small">{{ experience.start_date|date:"M Y" }} - {% if experience.end_date %}{{ experience.end_date|date:"M Y" }}{% else %}Present{% endif %}</p>
<p class="card-text">{{ experience.description }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}
{% if educations %}
<section class="cv-section mb-5">
<h2 class="section-title display-6 mb-4">Education</h2>
<div class="timeline">
{% for education in educations %}
<div class="timeline-item fade-in">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ education.degree }}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{ education.institution }}</h6>
<p class="text-muted small">{{ education.start_date|date:"M Y" }} - {% if education.end_date %}{{ education.end_date|date:"M Y" }}{% else %}Present{% endif %}</p>
{% if education.description %}
<p class="card-text">{{ education.description }}</p>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}
{% if projects %}
<section class="cv-section mb-5">
<h2 class="section-title display-6 mb-4">Key Projects</h2>
<div class="row">
{% for project in projects %}
<div class="col-md-6 mb-4 fade-in">
<div class="card project-card h-100">
{% if project.image %}
<img src="{{ project.image.url }}" class="card-img-top" alt="{{ project.title }}">
{% endif %}
<div class="card-body">
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text">{{ project.description|truncatewords:15 }}</p>
<p class="text-muted small">{{ project.technologies }}</p>
<div class="d-flex justify-content-between">
{% if project.url %}
<a href="{{ project.url }}" class="btn btn-outline-primary btn-sm" target="_blank">Live Demo</a>
{% endif %}
{% if project.github_url %}
<a href="{{ project.github_url }}" class="btn btn-outline-dark btn-sm" target="_blank">GitHub</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}
</div>
<div class="col-lg-4">
{% if skills %}
<section class="cv-section mb-5">
<h2 class="section-title display-6 mb-4">Skills</h2>
<div class="skills-list">
{% for skill in skills %}
<div class="skill-item mb-3 fade-in">
<div class="d-flex justify-content-between">
<span>{{ skill.name }}</span>
<span>{{ skill.proficiency }}%</span>
</div>
<div class="skill-bar">
<div class="skill-fill" style="width: {{ skill.proficiency }}%"></div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}
<section class="cv-section">
<h2 class="section-title display-6 mb-4">Contact</h2>
<div class="contact-card card">
<div class="card-body">
<p><i class="fas fa-envelope"></i> {{ profile.user.email }}</p>
{% if profile.phone %}
<p><i class="fas fa-phone"></i> {{ profile.phone }}</p>
{% endif %}
{% if profile.address %}
<p><i class="fas fa-map-marker-alt"></i> {{ profile.address }}</p>
{% endif %}
<div class="social-links mt-3">
{% if profile.linkedin %}
<a href="{{ profile.linkedin }}" target="_blank"><i class="fab fa-linkedin"></i></a>
{% endif %}
{% if profile.github %}
<a href="{{ profile.github }}" target="_blank"><i class="fab fa-github"></i></a>
{% endif %}
{% if profile.website %}
<a href="{{ profile.website }}" target="_blank"><i class="fas fa-globe"></i></a>
{% endif %}
</div>
</div>
</div>
</section>
</div>
</div>
{% else %}
<div class="alert alert-info text-center">
<h4>No profile data available</h4>
<p>Please log in as admin to add your profile information.</p>
<a href="{% url 'login' %}" class="btn btn-primary">Login</a>
</div>
{% endif %}
</div>
{% endblock %}
education-add.html
{% extends 'Portfolio/base.html' %}
{% block title %}Add Education{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<h1 class="text-center mb-4">Add Education</h1>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
<form method="post">
{% csrf_token %}
<div class="mb-3">
<label for="{{ form.degree.id_for_label }}" class="form-label">Degree</label>
{{ form.degree }}
{% if form.degree.errors %}
<div class="text-danger">{{ form.degree.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.institution.id_for_label }}" class="form-label">Institution</label>
{{ form.institution }}
{% if form.institution.errors %}
<div class="text-danger">{{ form.institution.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.start_date.id_for_label }}" class="form-label">Start Date</label>
{{ form.start_date }}
{% if form.start_date.errors %}
<div class="text-danger">{{ form.start_date.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.end_date.id_for_label }}" class="form-label">End Date (Optional)</label>
{{ form.end_date }}
{% if form.end_date.errors %}
<div class="text-danger">{{ form.end_date.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
{{ form.description }}
{% if form.description.errors %}
<div class="text-danger">{{ form.description.errors }}</div>
{% endif %}
</div>
<button type="submit" class="btn btn-primary w-100">Add Education</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
experience-add.html
{% extends 'Portfolio/base.html' %}
{% block title %}Add Experience{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<h1 class="text-center mb-4">Add Experience</h1>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
<form method="post">
{% csrf_token %}
<div class="mb-3">
<label for="{{ form.job_title.id_for_label }}" class="form-label">Job Title</label>
{{ form.job_title }}
{% if form.job_title.errors %}
<div class="text-danger">{{ form.job_title.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.company.id_for_label }}" class="form-label">Company</label>
{{ form.company }}
{% if form.company.errors %}
<div class="text-danger">{{ form.company.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.start_date.id_for_label }}" class="form-label">Start Date</label>
{{ form.start_date }}
{% if form.start_date.errors %}
<div class="text-danger">{{ form.start_date.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.end_date.id_for_label }}" class="form-label">End Date (Optional)</label>
{{ form.end_date }}
{% if form.end_date.errors %}
<div class="text-danger">{{ form.end_date.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
{{ form.description }}
{% if form.description.errors %}
<div class="text-danger">{{ form.description.errors }}</div>
{% endif %}
</div>
<button type="submit" class="btn btn-primary w-100">Add Experience</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
profile-update.html
{% extends 'Portfolio/base.html' %}
{% block title %}Update Profile{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<h1 class="text-center mb-4">Update Profile</h1>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="mb-3">
<label for="{{ form.full_name.id_for_label }}" class="form-label">Full Name</label>
{{ form.full_name }}
{% if form.full_name.errors %}
<div class="text-danger">{{ form.full_name.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.bio.id_for_label }}" class="form-label">Bio</label>
{{ form.bio }}
{% if form.bio.errors %}
<div class="text-danger">{{ form.bio.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.profile_picture.id_for_label }}" class="form-label">Profile Picture</label>
{{ form.profile_picture }}
{% if form.profile_picture.errors %}
<div class="text-danger">{{ form.profile_picture.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.phone.id_for_label }}" class="form-label">Phone</label>
{{ form.phone }}
{% if form.phone.errors %}
<div class="text-danger">{{ form.phone.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.address.id_for_label }}" class="form-label">Address</label>
{{ form.address }}
{% if form.address.errors %}
<div class="text-danger">{{ form.address.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.linkedin.id_for_label }}" class="form-label">LinkedIn</label>
{{ form.linkedin }}
{% if form.linkedin.errors %}
<div class="text-danger">{{ form.linkedin.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.github.id_for_label }}" class="form-label">GitHub</label>
{{ form.github }}
{% if form.github.errors %}
<div class="text-danger">{{ form.github.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.website.id_for_label }}" class="form-label">Website</label>
{{ form.website }}
{% if form.website.errors %}
<div class="text-danger">{{ form.website.errors }}</div>
{% endif %}
</div>
<button type="submit" class="btn btn-primary w-100">Update Profile</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
project-add.html
{% extends 'Portfolio/base.html' %}
{% block title %}Add Project{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<h1 class="text-center mb-4">Add Project</h1>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="mb-3">
<label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
{{ form.title }}
{% if form.title.errors %}
<div class="text-danger">{{ form.title.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
{{ form.description }}
{% if form.description.errors %}
<div class="text-danger">{{ form.description.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.image.id_for_label }}" class="form-label">Image</label>
{{ form.image }}
{% if form.image.errors %}
<div class="text-danger">{{ form.image.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.url.id_for_label }}" class="form-label">URL</label>
{{ form.url }}
{% if form.url.errors %}
<div class="text-danger">{{ form.url.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.github_url.id_for_label }}" class="form-label">GitHub URL</label>
{{ form.github_url }}
{% if form.github_url.errors %}
<div class="text-danger">{{ form.github_url.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.technologies.id_for_label }}" class="form-label">Technologies</label>
{{ form.technologies }}
{% if form.technologies.errors %}
<div class="text-danger">{{ form.technologies.errors }}</div>
{% endif %}
</div>
<button type="submit" class="btn btn-primary w-100">Add Project</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
skill-add.html
{% extends 'Portfolio/base.html' %}
{% block title %}Add Skill{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<h1 class="text-center mb-4">{{ title }}</h1>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
<form method="post">
{% csrf_token %}
<div class="mb-3">
<label for="{{ form.name.id_for_label }}" class="form-label">Skill Name</label>
{{ form.name }}
{% if form.name.errors %}
<div class="text-danger">{{ form.name.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.proficiency.id_for_label }}" class="form-label">Proficiency (%)</label>
{{ form.proficiency }}
{% if form.proficiency.errors %}
<div class="text-danger">{{ form.proficiency.errors }}</div>
{% endif %}
</div>
<button type="submit" class="btn btn-primary w-100">{{ submit }}</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
settings.py
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/6.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-4xlh)2=5vsr$z*%de34s_+4xle)rp501&crjr+8p9b8imue$!8'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'Portfolio',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'Mahfuz_18_Portfolio.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'Mahfuz_18_Portfolio.wsgi.application'
# Database
# https://docs.djangoproject.com/en/6.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/6.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/6.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/6.0/howto/static-files/
STATIC_URL = 'static/'
# Media files
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'
No comments:
Post a Comment