BobsProgrammingAcademy / portfolio-website-django-bootstrap-sass

A freelance developer portfolio website built using Django 4, HTML 5, CSS 3, Bootstrap 5, and Sass.

Freelance Developer Portfolio Website

This is a freelance developer portfolio website built using Django 4, HTML 5, CSS 3, Bootstrap 5, and Sass.

Table of Contents

• Prerequisites
• Installation
• Running the application
• Adding data to the application
• Customizing the application
• Copyright and License

Prerequisites

Install the following prerequisites:

1. Python 3.8-3.11
   This project uses Django v4.2.4. For Django to work, you must install a correct version of Python on your machine. More information here.
2. Node.js
3. Visual Studio Code with the Live Sass Compiler extension.
   

Live Sass Compiler allows us to compile Sass files to CSS files in real-time. It will watch a Sass file for changes, and then it will automatically compile that Sass file into a CSS file whenever a change is made and saved.

Installation

1. Create a virtual environment

From the root directory, run:

python -m venv venv

2. Activate the virtual environment

From the root directory, run:

On macOS:

source venv/bin/activate

On Windows:

venv\scripts\activate

3. Install required dependencies

From the root directory, run:

pip install -r requirements.txt

From the root directory, run:

cd static

npm install

4. Run migrations

From the root directory, run:

python manage.py makemigrations

python manage.py migrate

5. Create an admin user to access the Django Admin interface

From the root directory, run:

python manage.py createsuperuser

When prompted, enter a username, email, and password.

Run the application

From the root directory, run:

python manage.py runserver

View the application

Go to http://127.0.0.1:8000/ to view the application.

Add data to the application

Add data through Django Admin.

Go to http://127.0.0.1:8000/admin to access the Django Admin interface and sign in using the admin credentials.

Customize the application

This section describes how to customize the application.

Changing Section Titles and Subtitles

1. About

To modify the title and subtitle of the About section, make changes in the templates/index.html file.

2. Projects

To modify the title and subtitle of the Projects section, make changes in the templates/index.html file.

Changing Colors

To modify the colors in the application, make changes in the static/sass/styles.scss file and compile the file using the Live Sass Compiler, which is a Visual Studio Code Extension. Remember to set the savePath option in the settings.json file (liveSassCompile.settings.formats section) to static/css so that the generated CSS file is stored in the static/css directory.

Changing Logo

To modify the logo in the application, make changes in the templates/index.html file.

Copyright and License

Copyright © 2022 Bob's Programming Academy. Code released under the MIT license.