My Portfolio Project

number one
Relational Database

Demonstrating use of one-to-many and many-to-many relationships between skills, achievements, and projects, just to name a few. I used Django's generic list and detail views to match the models with associated templates to produce consistent and updated content.

number one
Integrated HTML5, CSS, JS

Full integration of HTML5, CSS, and JS to create visually aesthetic content used with Django templates and the Django Template Language. The site features advanced use of Django's template filters and template tags.

number one

Throughout the site, some extras have been added such as Crispy Forms to the contact page, ChartJS on the home page to show my skill statistics, and use of the Django sitemap module to create a sitemap XML page that was submitted to Google for crawling. I utilized Adobe Illustrator and Adobe Photoshop to prepare images for the site.


What better way to demonstrate my Django Web development and Python skills than to build a portfolio that is built on a Django framework? My portfolio site runs on a Django framework and has features that demonstrates some of my skills. For example, most of the site's content is modeled, code is written to express the views, and finally, displayed through Django's template system using the Django Template language.

I built the models for the content using one-to-many and many-to-many relationships. For example, on the Skills page, there is a list of my skills. These skills are connected to both my achievements and projects through separate many-to-many relationships. Projects and Tools have many-to-many relationships as well. With the models built in this way, I am able to update content through Django's admin module. As soon as I make an update to the model, the page renders updated content.

I built custom context processors within this site that perform functions such as output lists from my models that can be used for the doughnut and polar area charts on the home page. These charts use the library django-chartjs.

I am using template inheritance patterns such as {% extends "" %} for consistency. In addition, I use some template filters such as {{ blah|length }} and {{ blah|last }} to produce desired output. I created my own template tags when needed to solve problems. Additionally, I used conditionals such as if and for statements within the templating language (e.g., {% if blah %}{% endif %}) in order to display conditional content.

The grid system for display is all defined within my css files. I use javascript libraries to add features such as the counter display on the home page that displays my number of achievements. The bones of my HTML5, CSS, and JavaScript work is all rooted from a well-designed template that I purchased. This was not a template designed for a Django site, I adapted it to meet the needs of my site running on the Django framework.

All images on my site were designed and sized properly using Adobe Illustrator and Adobe Photoshop. Using layering with these tools allows for me to create images that look consistent with each other. For example, the images used to display my projects with the tools appended onto the images were created to have a uniform look.

Model for the Portfolio Project
See More

In my model schema for the Portfolio Project, I planned for three different many-to-many relationships. Achievement<->Skill; Project<->Skill; and Project<->Tool. I set up a through table called "Skillsets" for the Achievement <-> Skill relationship. For the other two, I just kept it the way Django does it naturally with its own version of a through table.

There are two foreign keys, or one-to-many relationships. There is one Specialization per Achievement, but there can be many Achievements per Specialization. Additionally, there is one Organization per Achievement and there can be many Achievements per Organization.

The information stored in the MySQL database backend for the project from the tables shown in the illustration is used for displaying content in various ways, from templates to charts.

On a side note, I created the model illustration using Adobe Illustrator.

Model for the Portfolio Project
Data Visualization Using ChartJS in Django Portfolio Project
See More Data Visualization Using ChartJS in Django Portfolio Project

I used a Django library that supports ChartJS called django-chartjs to visualize data that describes my skill:achievement and skill:project relationships.

The biggest challenge is passing the Django variables created in my custom context processor through the javascript chart in the template. For that, I came up with a solution. I registered a template tag to help out. My template tag function takes in an object, or in our case, a variable, then uses the Django utilities module safestring.marksafe on it. Notice in the template code that I imported the "js" tag. This is the custom template tag. Now, I am able to pass the variables into the JavaScript code.

Take a look at my hex code randomizer in the custom context processor. This is how I created the list of hex codes to come up with all the colors for the charts. I used a for loop that iterates over the skills to append the randomized list to ensure there is always the correct number of hex codes for the chart.

Using Forms
See More

For the contact form within my Portfolio site, I installed a contact form app so that I could keep the model and other files separate from my portfolio app within the project. In my contact form model, I defined three fields: name, email, and message. Next, I created views, forms and a template for the contact app. I registered the URL with my project site and defined the path in the contact form app urls.

I used the Django library django-crispy-forms to make a nice looking form. I alert the user that the form was submitted once the input is saved into the database.

Please check out my contact form and leave a message for me!

Using Forms
See More Extras

Some of the extras I put into the Portfolio site is a custom 404 page, sitemap, and an Admin Panel. Each of these features are not difficult to do within the Django Framework. Django comes with built-in sitemap and admin modules. By following the Django documentation, it's easy to set it all up.

I submitted my sitemap link to the Google Search Console. It doesn't guarantee great SEO, but as I write this, my site ranks third when you search "Marci Sprouse" in Google. The sitemap is updated automatically.

The admin portal is enough of a reason alone to use the Django framework for building sites. It can become your content manager (which I have done for this site) or any other data management needs with a great GUI. I customized the title of my Admin Panel in my settings. There are all kinds of customizations you can make for the Admin panel. It's particularly useful for managing users if you have users for the site.

I have both local and social login capability on the Portfolio site using Django social-auth middleware. I am using Google OAUTH2 credentials for the social login. Once logged in, a user will have access to special content (such as my resume).