View live project here.

Welcome to my personal portfolio page, built as my project 4 for my CodeInstitute Full Stack Software Development Diploma. The webpage will be geared towards showcasing my skills as a developer and sharing who I am as a person.

• As a user, I can click navigation links so that I can easily navigate the site.
• As a user, I can access social media links so that I can see other activity from the site owner.
• As a user, I can download the site owners CV so that I can view their professional credentials.
• As a user, I can view the skills of the site owner so that I can get an idea of how they are progressing as a developer.
• As a user, I can view basic information about the site owner so that I can get a feel of what type of person they are.
• As a user, I can view projects completed by the site owner so that I can see how they have implemented their skills.

• As an admin, I want a secure log-in so that I can access the admin dashboard.
• As an admin, I want CRUD functionality so that I can create, read, update and delete data.
• As an admin, I want log-in validation so that only super users (admins) have access to the admin dashboard.
• As an admin, I want templates to pull information from the database so that it can be viewed by general users.

The goals of this website are to showcase my journey as a developer and share what I am like as a person. There will also be functionality to download my CV. The site will have information to highlight my skills and showcase the projects I have previously completed. The aim is to attract future employers and show that I would be a worthy member of their team.

• Landing page.
• About section.
• Skills section.
• Project showcase section.
• Downloadable CV.
• Links to social media.
• Login access for admins only to admin dashboard.
• CRUD functionality for admins to add, change or delete data.

Google Fonts has been used to select the fonts for the website. The font selected for the logo was Playfair Display as it is elegant and gives off a professional vibe. Montserrat was chosen for headings for its clean and striking aesthetic. Roboto Slab was chosen for the body text for its readability and how easily it pairs with the other fonts selected.

• #000080 - Navy Blue header/footer
• #00AEFF - Picton Blue background
• #FFFFFF - White Text

The icons used for the site were sourced from Font Awesome and Devicon.

The structure of the site will be simplistic as to not deter the user from engaging with the content. The main site will be broken into sections and be a continuous scroller for ease of reading. There will be a backend admin dashboard for the management of data used on the site. This dashboard will only be available to super users. The navbar will contain a login link and once logged in (admins only), the login link will change to one for the admin dashboard.

Home:

Personal Details:

Skill:

Skill Category:

Project:

Work History:

Education:

Wireframes have been created using Balsamic. These wireframes gave a basic view of how my portfolio was going to be laid out. The layout may have changed slightly in the finished product.

Home Desktop Wireframe

Home Mobile Wireframe

About Desktop Wireframe

About Mobile Wireframe

Skills Desktop Wireframe

Skills Mobile Wireframe

Projects Desktop Wireframe

Projects Mobile Wireframe

The landing page will feature an image of myself along with some basic information in regards to the site.

Home Desktop

Home Mobile

The navbar will be present on all pages and will contain navigation links to all the pages on the site. Once logged in as admin, an additional button for the dashboard will show on the navbar. There will be a different navbar for the dashboard, only consisting of a home, dashboard and logout link. The navbar will change to a toggle icon with a dropdown list once the screen size drops below a certain width.

Navbar Desktop

Navbar Mobile

Navbar Admin

Navbar Dashboard

The about me section will give more information about myself than the original landing page. Information such as my current location, more on my coding journey and work history.

About Desktop

About Mobile

Tne skills section will highlight what coding related skills I have learned thus far and how strong of an understanding I have with each. The skills page will show a table with icons for each skill which will be a clickable button. When clicked, the description box will update with more detailed information about that particular skill.

Skills Desktop

Skills Mobile

The project section will contain a look at all the projects I have completed so far with links to the repositories and the live sites for each. There will be an image and brief description of each project.

Projects Desktop

Projects Mobile

The CV section will contain a link to my CV on my GitHub repository where the user can download it.

CV Desktop

CV Mobile

The admin dashboard will be used to create, update or delete information used on the site. This will only be available to admins and will be accessable once logged in.

Dashboard Desktop

Dashboard Mobile

The footer will be present on each page and contain links to my social accounts.

Footer

For security purposes, the admin dashboard is only available to super users (admins). To login as an admin, you must navigate to the admin login by putting /admin at the end of the site url. Once logged in, you will be taken to the default django backend dashboard. You can navigate back to the site using the view site link in the navigation bar. Once back to the main site, a new link for the dashboard in the navigation bar will be present. Any attempts to navigate to the admin dashboard or any related page will result in redirection to the home page if the user is not logged in.

CRUD functionality is fully available in the admin dashboard. The dashboard itself contains cards for each model with the option to add, edit and delete data dependent on the model. The buttons on the cards will take you to each individual page for change in data.

The home section will only have an edit page as there is no need to add or delete any data.

Edit Home

The about section will only have an edit page. As this page is very similar to the edit home page, I have opted not to add a screenshot for this page.

The skills section will have options to add, edit or delete data. It is important to be able to add more skills as I progress as a developer. In the edit and delete pages, the form will be accompanied by a table containing all of the current skills. Clicking on a particular skill will reload the page and propagate the form with that skills information.

Add Skill

Edit Skill

Delete Skill

The project section will have the options to add, edit or delete data. As I complete more projects, I need the ability to add these to the database. A list of the projects will accompany the form and can be selected to propagate the specific information for editing and deleting purposes.

Add Project

Edit Project

Delete Project

The work history section will have the options to add or edit data. There is no need to have a delete function in this section.

The education section will be the same as for the work history section.

Thorough testing has been completed throughout the project's development. Testing completed is documented in the table below.

To validate all python code used in this project, each file was evaluated using the CI Python Linter.

Errors regarding line length are present in files but does not effect the functionality of the code. Due to this and time constraints, I have opted to ignore these errors.

Model.py

Views.py

Form.py

W3C CSS Validator was used to validate the CSS in this project. The validator returned no errors.

CSS Validation

The skills section starts overlapping at certain screen widths. Fixing it was attempted but due to time constraints had to be left as is.

• Fix issue of skills section overlapping.
• Add contact form for users to contact me.

• HTML
• CSS
• JavaScript
• Python

• Django
• Bootstrap
• Google Fonts

• PostgreSQL
• ElephantSQL

• GitHub
• Gitpod
• Balsamic
• Coolors
• DevTools
• Gunicorn
• Cloudinary
• Heroku
• Psycopg
• Crispy Forms

Forking allows you to make a copy of a chosen repository to your own GitHub account. This allows you to test and edit the project without making changes to the original. Forking is done by following these steps.

1. Whilst logged into your GitHub account, navigate to the repository you would like to fork.
2. Click on the Fork button at the top right of the page.
3. Choose a name to give the repository. It will be intially named as the same as the original repository.
4. Click the Create Fork button.

Cloning allows you to download a local version of a chosen repository. Cloning can be done by following these steps.

1. Whilst logged into your GitHub account, navigate to the repository you would like to clone.
2. Click the green <> Code button.
3. Click on the Local tab.
4. Select HTTPS and copy the url.
5. Open your chosen IDE and ensure Git is installed.
6. In your IDE terminal type git clone (url link that you copied) and hit enter.

1. Navigate to Cloudinary and create an account.
2. Log in.
3. Navigate to your dashboard and copy the API Enviroment variable.
4. Keep a note of this variable as you will need to add it to your env.py file in your project.

1. Navigate to ElephantSQL and create an account.
2. Once logged in, create new instance.
3. Select a plan, Tiny Turtle is the free to use plan.
4. Select a region, one closest to yourself.
5. Click create instance.
6. Select newly created instance.
7. Copy and make note of instance URL as this will be added to your env.py file.

You need to create an env.py file in the root folder of your repository. This is where you assign hidden variables for security reasons. This file must be added to your list of ignored files in git.ignore to ensure it does not get pushed up to your repository on GitHub as it would then be publicly accessible.

env.py

For the DATABASE_URL variable, assign it your elephantSQL instance URL. For the SECRET_KEY variable, assign a secret key of your choosing. You can generate one at Django Secret Key Generator. For the CLOUDINARY_URL, assign it your API Enviroment variable (you need to remove everything before cloudinary://).

As you can see in the picture above, I have a variable named DEBUG which is set to 1. The reason for this is because when I assign DEBUG in my settings.py file, I can assign it to this value. A string with a value in it is considered to be a boolean value of True, meaning DEBUG=True for my production environment. Due to the variable being set in my env.py file, it will not be pushed up to my repository and therefore default back to False. It is necessary to have DEBUG set to false for deployment purposes.

The requirements for this particular project are as follows:

asgiref==3.7.2
backports.zoneinfo;python_version<"3.9"
cloudinary==1.34.0
crispy-bootstrap5==0.7
dj-database-url==2.1.0
dj3-cloudinary-storage==0.0.6
Django==4.2.5
django-allauth==0.56.1
django-crispy-forms==2.0
gunicorn==21.2.0
oauthlib==3.2.2
psycopg2==2.9.7
PyJWT==2.8.0
python3-openid==3.2.0
requests-oauthlib==1.3.1
sqlparse==0.4.4
urllib3==1.26.16

You can update your requirements file using the command in your IDE terminal:
pip freeze > requirements.txt
This is handy command to know for when you install any new components which would then be needed to be added to your requirements.

You can install all requirement packages using the following command in your IDE terminal:
pip3 install -r requirements.txt
Disclaimer: Please check Python documentation for the correct terminal command as it may differ depending on the system you are using

This project was deployed using Heroku by following the steps detailed below.

1. Navigate to Heroku website and sign up or log in.
2. Navigate to your dashboard, select New and then Create New App.
3. Assign a unique name to your project, select your region and click Create app.
4. Navigate to Settings tab.
5. You need to add specific config vars to be able to deploy the project properly on Heroku. This is done by clicking on Reveal Config Vars, and adding them here. The config vars needed are listed below:
   CLOUDINARY_URL = Same as your CLOUDINARY_URL in your env.py.
   DATABASE_URL = Same as your DATABASE_URL in your env.py.
   DISABLE_COLLECTSTATIC = 1 - This is needed so that it will not time out on deployment. Collect static must be completed in your IDE terminal each time a change is made to static files. Do this by running the command python3 manage.py collectstatic.
   PORT = 8000 SECRET_KEY = Another secret key here - Make sure it is different to the one in your env.py file for security reasons.

1. Navigate to Deploy tab.
2. Select GitHub - Connect for deployment method and connect your GitHub account by logging in with your GitHub details in the prompt.
3. Select your GitHub account from the dropdown list if not already preselected.
4. Search for your GitHub repository that you would like to deploy and click Connect on the respository in the search list.
5. Deployment options are found further down the Deploy tab with options for Automatic Deploys and Manual Deploy. Automatic deploys all for heroku to update your app everytime your GitHub is updated.
6. Choose your deployment option and the branch from which you would like to deploy.
7. If Automatic deploys is chosen, click on Enable Automatic Deploys. If Manual deploy chosen, click on Deploy Branch.
8. Heroku should now start the deployment process. Once successfully deployed, a message will appear saying Your app was successfully deployed. with a button to view your deployed application.

I would like to thank my mentor Simen Daehlin for his continued support throughout the course.