Making a Professional Portfolio In Django

A portfolio is a compilation of work samples and professional documentation that provides proof of your accomplishments or samples of your work. It can be a physical book or binder that organizes samples of your work, or an online portfolio with electronic files.Portfolios are a great way to demonstrate the competencies you would list on a resume or talk about in an interview — they allow you to show and not just tell. During a job search, the portfolio showcases your work to potential employers. It presents evidence of your relevant skills and abilities. Portfolios are also helpful for independent contractors, consultants, or business owners who need to provide work samples to potential clients.

So starting with it lets first install python from the its website https://www.python.org/downloads/windows/. If already installed proceed to install Django

python -m pip install Django

Next step is to create a project in Django

django-admin startproject portfolio

Next is to create app in it.Change the directory to portfolio and write the command

django-admin startapp base

Bingo! portfolio folder is created now go to the settings.py in the folder and add the app name in the installed apps.

settings.py

Next go to the urls.py in the portfolio folder and add include in django.urls import path and add the path which takes the info from the views.py file in the base folder

portfolio/urls.py

Now go to the base folder and go to views.py. Now we will be writing the views which are used to do things like fetch objects from the database, modify those objects if needed, render forms, return HTML, and much more.So here we will be rendering and returning the HTML file.

Now lets look at the code below and understand it, from django.shortcuts import render is used to render the html template present in the folder so it could be seen on the page. we are making a function called home and returning the html file to get rendered.

Next step is to create a template folder inside the base folder and add base folder inside it and add html file called home.html . ughhh! its confusing right ? Look at the file structure below and understand from it.

template folder structure

So now we need to check if the server is running or not so for that first migrate what we have done

python manage.py migrate

After migrating run your server. And we should get the following below image

python manage.py runserver

Now the main part comes designing the portfolio, I am not that good at designing so if you have that skills just brush it up and make an outstanding portfolio.You wont be able to see the code so just get your cursor on the bold text and click on the link which pops below it to get the code

gist:6673cfa853b3e5708b81f70e021698aa

Now everything is set but we are not able to get to the site on the web so for that we need to set the url in urls.py of the base folder.so create a new file in base folder as urls.py and write the code.

base/urls.py

Now we need to insert the css styling and the images so for that create a folder named staticfiles in the main portfolio folder (If you get confused where to create just scroll below i have kept the folder structure screenshot) and in that create 2 folders css and images add your Display image in the image folder and change the name in the home.html page on line 17 and also add the linkedin ,github and medium icon images from my github repo and change the link to your account on line 33,34,35 respectively.

Now in Css folder add the styling needed for the page.so make a file named main.css and add the code.

main.css

Now we have created everything but we would not be able to see our pic on the site because we have not told that where django needs to get our images like from which folder. So for that head to settings.py and change and add the following.

portfolio/settings.py

Tadaaa! We have made our portfolio . Cheers to one more project. now just see the folder structure if anyone didnt get where to add what.

Folder structure

Github repo For the Portfolio https://github.com/shrey1608/Portfolio

Overall, I hope this article has helped you make your portfolio. If you’d like to share your own portfolio, feel free to post it in the comments and do tell what you want me to make next !