In my previous post, I talked about how I created my Django portfolio site, when I left off we had created jobs and a blog and we were able to create a new Blog and Job objects. The next step in the process is setting up the views and bootstrap for styling.
The View(s)
We will need to modify our blog/views.py and jobs/views.py The views.py file sets the urlpatterns for our project. There are some imports that are automatic with Django and you will see them here;
from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
In order to set up the urlpatterns for your project, you will need to add to these imports. I want to have access to my Blog as well as Jobs views in this file so my imports now look like this;
jobs/views.py
from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
import jobs.views
import blog.views
from django.urls import include
blog/views.py
from django.shortcuts import render, get_object_or_404
# import requests
from .models import Blog
# Create your views here.
def allblogs(request):
blogs = Blog.objects
return render(request, 'blog/allblogs.html', {'blogs':blogs})
def detail(request, blog_id):
detailblog = get_object_or_404(Blog, pk=blog_id)
return render(request, 'blog/detail.html', {'blog':detailblog})
Adding Bootstrap
Now that we have our views setup let's add bootstrap. I decided to go with the Album Example feel free to choose whichever one appeals to you. In the jobs directory, I created a templates/jobs folder, and inside that folder and new file home.html
This is the file that my visitors will see when they first visit my website and it's where we will add some styling to our project so that it looks super nice in the browser. One of the important things we need to do in this file is to load our static files which you can do like this {% load static %} I also added a title tag, currently my HTML file looks like this;
<!doctype html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Randy Steele</title>
Header
Next, I wanted to modify the header so that it applies to me and has links to my LinkedIn, Twitter, Blog and Resume.
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="{%url 'home' %}">Randy Steele</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link" aria-current="page" href="https://twitter.com/RandySt02617967">Twitter</a>
<a class="nav-link" href="https://linkedin.com/in/randysteele">LinkedIn</a>
<a class="nav-link" href="/static/Randy%20Steele%20Resume.pdf">Resume</a>
<a class="nav-link" href="https://dev.to/steelerx155">Blog</a>
</div>
</div>
</div>
</nav>
</header>
Contact info
Now, within the <main> I added a photo of myself, a super short description and a link to email me!
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="{%url 'home' %}">Randy Steele</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link" aria-current="page" href="https://twitter.com/RandySt02617967">Twitter</a>
<a class="nav-link" href="https://linkedin.com/in/randysteele">LinkedIn</a>
<a class="nav-link" href="/static/Randy%20Steele%20Resume.pdf">Resume</a>
<a class="nav-link" href="https://dev.to/steelerx155">Blog</a>
</div>
</div>
</div>
</nav>
</header>
All jobs
Now, I want everyone who visits my portfolio site to be able to see a list of the jobs (aka projects) I have built and worked on.
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
{% for job in jobs.all %}
<div class="col">
<div class="card shadow-sm">
<img class="bd-placeholder-img card-img-top" src="{{job.image.url}}" width="100%" height="225" />
<div class="card-body">
<p class="card-text">{{job.summary}}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="{{job.github_url}}" type="button" class="btn btn-sm btn-outline-secondary">Github</a>
<a href="{{job.heroku_url}}" type= "button" class="btn btn-sm btn-outline-secondary">Heroku</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
Footer
Lastly, a super simple <footer>
<footer class="text-muted py-5">
<div class="container text-center"><br />
<p>©️ Randy Steele {% now "Y" %}</p>
</div>
</footer>
See the full HTML File Here
For more help with styling, checkout getbootstrap
Top comments (0)