# **Create Portofolio Using HTML, CSS, Bootstrap, and Django on Windows**

## 1. Persiapan

Sebelum kita memulainya, alangkah baiknya Kalian memastikan bahwa di device anda sudah ter-install `python` dan `pip package`. Untuk mendownload python anda dapat memeriksa link berikut: https://www.python.org/downloads/.

Serta pastikan di device anda ter-install Visual Studio Code. Untuk download Visual Studio Code anda dapat menggunakan link berikut: https://code.visualstudio.com/download

## 2. Membuat Virtual Environtment.

1. Buat direktori baru bernama Django, lalu buka di Visual Studio Code.
2. Buka terminal di VS Code (Visual Studio Code)

3. Buat Virtual Environtment di terminal, dengan mengetikkan `python -m venv env`


4. Ketika Sudah Ter-install, aktifkan Virtual Environment nya dengan command `.\env\Scripts\activate`

5. Apabila sudah seperti ini, maka Virtual Environtment telah ter-install


## 3. Start Project

1. Aktifkan Virtual Environment Yang telah kita install tadi
2. Install Framework Django dengan command `pip install django`

3. Selanjutnya start project dengan command `django-admin startproject mywebsite`


4. Tunggu Beberapa saat dan Project anda siap digunakan!

## 4. Configurasi
Sebelum membuat portofolio, kita memerlukan beberapa konfigurasi terlebih dahulu

1. Buat direktori `settings` di dalam mywebsite, lalu buat file `__init__.py` dan `base.py` di dalam direktori settings


2. Isi base.py dengan configurasi berikut:

"""
Django settings for mywebsite project.

Generated by 'django-admin startproject' using Django 5.0.4.

For more information on this file, see
https://docs.djangoproject.com/en/5.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/5.0/ref/settings/
"""

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-m_1(!j*1g_!+6#20kpp@!q84+k2u(45q&9*&g0pb@54fgvu6i5'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'library',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'mywebsite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS' : [os.path.join(BASE_DIR,  '../templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'mywebsite.wsgi.application'


# Database
# https://docs.djangoproject.com/en/5.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/5.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '../static'),
]
# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

Untuk isi dari base.py kurang lebih meng-copy dari file settings.py namun ada beberapa yang di rubah atau ditambahkan.

3. Ubah isi dari `__init__.py` menjadi seperti berikut:

from .base import *

4. Ubah Konfigurasi `manage.py` di dalam direktori `mywebsite` menjadi seperti berikut:

#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sys


def main():
    """Run administrative tasks."""
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mywebsite.settings.base')
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc
    execute_from_command_line(sys.argv)


if __name__ == '__main__':
    main()

`manage.py` di rubah agar dapat menggunakan file `base.py` untuk konfigurasinya.

## 5. Start Portofolio

Mulai dari sini, kita akan membuat portofolio yang menggunakan HTML, CSS, Bootstrap dan Django

1. Kita startapp terlebihd dahulu dengan command `django-admin startapp library` disini nama `library` dapat anda ubah sesuai yang anda inginkan, saya menggunakan `library` karena saya menggunakan configurasi project saya sebelumnya


2. Ubah isi dari keseluruhan file`views.py` menjadi seperti ini:

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, 'base.html')

3. buat direktori `templates` di dalam direktori `mywebsite`


4. Tambahkan file `base.html` di dalam direktori `templates` tempat kita membuat portofolionya.

5. Edit file `base.html` menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {% load static %}
    <!-- Bootstrap 5-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />

    <!-- Bootstrap icon -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
    <!-- Font-Awesome -->
    <link href="{% static 'assets/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" />
    <!-- Lightbox -->
    <link href="{% static 'assets/lightbox/css/lightbox.css' %}" rel="stylesheet" />
    <!-- Text Rotator-->
    <link href="{% static 'assets/textrotator/simpletextrotator.css' %}" rel="stylesheet" />
    <!-- FlexSlider -->
    <link href="{% static 'assets/flexslider/flexslider.css' %}" rel="stylesheet" />
    <!-- Theme Style -->
    <link href="{% static 'css/style.css' %}" rel="stylesheet" />
    <!-- Animations -->
    <link href="{% static 'css/animate.css' %}" rel="stylesheet" />
    <!-- Custom Favicon -->
    <link href="{% static 'img/favicon.ico' %}" rel="shortcut icon" type="image/x-icon" />

    <title>Mochammad Hakim | Portofolio</title>
  </head>

  <body id="home">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg bg-primary navbar-dark shadow-sm navbar fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Mochammad Hakim</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#About">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#education">Education</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#skill">Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#experience">Experience</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#certificate">Certificates</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Akhir Navbar -->
    <!-- jumbotron -->
    <section class="jumbotron text-center">
      <img src="{% static 'img/hakim.jpg' %}" alt="Mochammad Hakim" width="200" class="rounded-circle img-thumbnail" />
      <h1 class="display-4">Mochammad Hakim Al Irsyad</h1>
      <p class="lead">Undergraduate Telkom University Bandung | Network Engineer</p>
      <div>
        <ul class="social-links">
          <a href="https://www.instagram.com/hakimmc_/" target="_blank">
            <li>
              <img class="social" src="{% static 'img/instagram.png' %}" />
            </li>
          </a>
          <a href="https://www.linkedin.com/in/mochammadhakim" target="_blank">
            <li>
              <img class="social" src="{% static 'img/linkedin.png' %}" />
            </li>
          </a>
          <a href="https://github.com/MochammadHakim" target="_blank">
            <li><img class="social" src="{% static 'img/github.png' %}" /></li>
          </a>
        </ul>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#ffffff"
          fill-opacity="100"
          d="M0,32L26.7,48C53.3,64,107,96,160,117.3C213.3,139,267,149,320,160C373.3,171,427,181,480,165.3C533.3,149,587,107,640,106.7C693.3,107,747,149,800,160C853.3,171,907,149,960,149.3C1013.3,149,1067,171,1120,170.7C1173.3,171,1227,149,1280,122.7C1333.3,96,1387,64,1413,48L1440,32L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- end jumbotron -->

    <!-- About -->
    <section id="About">
      <div class="container">
        <div class="row text-center mb-3">
          <div class="col">
            <h2>About Me</h2>
          </div>
        </div>
        <div class="d-flex flex-column justify-content-center align-items-center gap-5 fs-5 text-center">
          <div class="col-md-10">
            Hello, My name is Mochammad Hakim Al Irsyad, you can call me Hakim. I am an alumnus of Telkom Sandhy Putra Malang Vocational School batch 29 majoring in Computer and Network Engineering. Now I am a Telkom University student
            majoring in Telecommunication Engineering At Telkom Shandy Putra Malang Vocational School, I learned about the basics of networking such as Network Instrastucture, Cisco Networking, Network Configuration, and Also Cyber
            Security. I also had the opportunity to intern at PT Kharisma Network System for 6 months.
          </div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#e2edff"
          fill-opacity="1"
          d="M0,224L48,208C96,192,192,160,288,160C384,160,480,192,576,192C672,192,768,160,864,144C960,128,1056,128,1152,122.7C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- end About -->

    <!-- Education -->
    <section id="education" class="education">
      <div id="container">
        <div class="text-center pb-5">
          <div class="col">
            <h2>Education</h2>
          </div>
        </div>
        <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="row justify-content-center text-center">
                <div class="col-6">
                  <img src="{%static 'img/Logo-Telkom-Malang.png' %}" alt="Logo-Telkom-Malang" width="250" />
                  <p class="pt-5">
                    "Telkom Malang Vocational School is the pioneer of the first vocational high school in Indonesia in the field of Technology and Informatics. Experienced since 1992 which has been accredited "A" and has ISO 9001:2015
                    quality standards. Telkom Malang Vocational School is also an adiwiyata school that applies green school principles, this increasingly provides a comfortable atmosphere for the school community."
                  </p>
                  <div class="pt-3">
                    <a href="https://smktelkom-mlg.sch.id/" class="btn btn-primary">Official Website </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="row justify-content-center text-center">
                <div class="col-6">
                  <img src="{%static 'img/Logo_TelU_Bandung.png' %}" alt="Logo_TelU_Bandung" width="250" />
                  <p>
                    "Telkom University (Tel-U) is a state-owned private university located in Bandung, West Java.Tel-U was one of the first private universities to achieve Superior accreditation by BAN- PT has held the title of Best Private
                    University in Indonesia several times and is one of the Best Universities in Indonesia."
                  </p>
                  <div class="pt-3">
                    <a href="https://telkomuniversity.ac.id/" class="btn btn-primary">Official Website </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#ffffff"
          fill-opacity="10"
          d="M0,128L20,128C40,128,80,128,120,122.7C160,117,200,107,240,128C280,149,320,203,360,197.3C400,192,440,128,480,101.3C520,75,560,85,600,96C640,107,680,117,720,138.7C760,160,800,192,840,197.3C880,203,920,181,960,165.3C1000,149,1040,139,1080,133.3C1120,128,1160,128,1200,144C1240,160,1280,192,1320,176C1360,160,1400,96,1420,64L1440,32L1440,320L1420,320C1400,320,1360,320,1320,320C1280,320,1240,320,1200,320C1160,320,1120,320,1080,320C1040,320,1000,320,960,320C920,320,880,320,840,320C800,320,760,320,720,320C680,320,640,320,600,320C560,320,520,320,480,320C440,320,400,320,360,320C320,320,280,320,240,320C200,320,160,320,120,320C80,320,40,320,20,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- end Education -->

    <!-- Skill -->
    <section id="skill">
      <div class="container">
        <div class="row text-center mb-3">
          <div class="col">
            <h2>Top Skills</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/python.png' %}" class="card-img-top" alt="Python" />
              <div class="card-body">
                <h3 class="card-title text-center">Python</h3>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/cisco.png' %} " class="card-img-top" alt="Cisco" />
              <div class="card-body text-center">
                <h3 class="card-title">Cisco Networking</h3>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/ubuntu.png' %}" class="card-img-top" alt="ubuntu" />
              <div class="card-body">
                <h3 class="card-title text-center">Ubuntu</h3>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/cybersecurity.png' %}" class="card-img-top" alt="cybersecurity" />
              <div class="card-body">
                <h3 class="card-title text-center">Cyber Security</h3>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/cisco.png' %}" class="card-img-top" alt="cisco" />
              <div class="card-body">
                <h3 class="card-title text-center">Cisco Configuration</h3>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/network_architect.png' %}" class="card-img-top" alt="network_architect" />
              <div class="card-body text-center">
                <h3 class="card-title">Network Architect</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#e2edff"
          fill-opacity="10"
          d="M0,160L26.7,170.7C53.3,181,107,203,160,213.3C213.3,224,267,224,320,197.3C373.3,171,427,117,480,106.7C533.3,96,587,128,640,154.7C693.3,181,747,203,800,208C853.3,213,907,203,960,202.7C1013.3,203,1067,213,1120,186.7C1173.3,160,1227,96,1280,74.7C1333.3,53,1387,75,1413,85.3L1440,96L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- End Skill -->

    <!-- ======= Experience Section ======= -->
    <section id="experience" class="experience">
      <div class="container">
        <div class="row text-center mb-3">
          <div class="col">
            <h2>Experience</h2>
          </div>
        </div>
        <!-- <div
          class="d-flex flex-column justify-content-center align-items-center gap-5"
        >
          <div class="row w-100">
            <div class="col-6 text-center">
              <h3>2023 - PRESENT</h3>
              <h3>Internship</h3>
            </div>
            <div class="col-6 text-center">
              <br />
              <h3>Adaptive Network Laboratory</h3>
            </div>
          </div>
          <div class="row w-100">
            <div class="col-6 text-center">
              <h3>2022 (October - November)</h3>
              <h3>Apprenticeship</h3>
            </div>
            <div class="col-6 text-center">
              <br />
              <h3>PT. Pertamina Patra Niaga Surabaya</h3>
            </div>
          </div>
          <div class="row w-100">
            <div class="col-6 text-center">
              <h3>2022 (June - November)</h3>
              <h3>Internship</h3>
            </div>
            <div class="col-6 text-center">
              <br />
              <h2>PT. Kharisma Network System Surabaya</h2>
            </div>
          </div>
        </div> -->
        <div class="d-flex justify-content-around gap-5">
          <div class="bg-white text-center d-flex justify-content-center align-items-center rounded-3" style="width: 40rem">
            <div class="" style="padding-left: 20px; padding-right: 20px; padding-block: 20px">
              <h5 class="card-title">2023 - PRESENT Internship</h5>
              <p class="card-text">Adaptive Network Laboratory</p>
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#adaptive">Description My Jobdesk</button>
            </div>
          </div>
          <div class="modal fade" id="adaptive" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Description My Jobdesk</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <p>Netschool is study group held by Adaptive Network Laboratory that have learned about :</p>
                  <p>- Networking (Subnetting VLSM, Routing Static & Dynamic, Vlan & Inter-Vlan)</p>
                  <p>- Python Programming (Syntax Basic Python, Looping Concept, Array Concept, Condition Concept, Function Concept, Object Oriented Program (OOP). Inheritance)</p>
                  <p>-Linux (Basic Command Linux, SSH, Kill Process Signalling, How to start, stop, Restart Service, Bash Scripting, Setup DNS Server,Web server (Apache2 & NGINX) & HTTPS)</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

          <div class="bg-white text-center d-flex justify-content-center align-items-center rounded-3" style="width: 40rem">
            <div class="" style="padding-left: 20px; padding-right: 20px; padding-block: 20px">
              <h5 class="card-title">2022 (October - November) Apprenticeship</h5>
              <p class="card-text">PT. Pertamina Patra Niaga Surabaya</p>
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pertamina">Description My Jobdesk</button>
            </div>
          </div>
          <div class="modal fade" id="pertamina" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Description My Jobdesk</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <p>When I was an intern at PT Kharisma, I got a project at PT Pertamina Patra Niaga. I worked as a support technician handling cable pulling and server transfers at PT Pertamina Patra Niaga Surabaya.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

          <div class="bg-white text-center d-flex justify-content-center align-items-center rounded-3" style="width: 40rem">
            <div class="" style="padding-left: 20px; padding-right: 20px; padding-block: 20px">
              <h5 class="card-title">2022 (June - November) Internship</h5>
              <p class="card-text">PT. Kharisma Network System Surabaya</p>
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Kharisma">Description My Jobdesk</button>
            </div>
          </div>

          <div class="modal fade" id="Kharisma" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Description My Jobdesk</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <p>
                    In PT Kharisma Network System, I got project at Senior High School Ta'miriyah surabaya, worked as techinician handling CCTV installation and cable pulling. Also I contributed to maintanancing a laptop for DPRD Surabaya.
                  </p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#ffffff"
          fill-opacity="10"
          d="M0,96L24,85.3C48,75,96,53,144,69.3C192,85,240,139,288,165.3C336,192,384,192,432,170.7C480,149,528,107,576,112C624,117,672,171,720,160C768,149,816,75,864,80C912,85,960,171,1008,197.3C1056,224,1104,192,1152,149.3C1200,107,1248,53,1296,48C1344,43,1392,85,1416,106.7L1440,128L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- End experience Section -->

    <!-- Certificate -->
    <section id="certificate">
      <div class="container">
        <div class="row text-center mb-3">
          <div class="col">
            <h2>My Certificate</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/CCNA_CyberOPS.PNG' %}" class="card-img-top" alt="CyberOps" />
              <div class="card-body">
                <h5 class="card-title">CyberOps Associate</h5>
                <p class="card-text">Cisco verifies the earner of this badge successfully completed the CyberOps Associate course. The holder of this student-level credential has a broad understanding of Security Operations.</p>
                <a href="https://www.credly.com/badges/cf9f970e-2885-4571-bb52-f3cce1738ce5/linked_in_profile" class="btn btn-primary">Certificate</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/CCNA_ENTERPRISE.PNG' %}" class="card-img-top" alt="ENSA" />
              <div class="card-body">
                <h5 class="card-title">CCNA: Enterprise Networking, Security, and Automation</h5>
                <p class="card-text">Cisco verifies the earner of this badge successfully completed the Enterprise Networking, Security and Automation course and achieved this student level credential.</p>
                <a href="https://www.credly.com/badges/2c438bcd-0b67-4a58-aff9-9e5c30eaf07f/linked_in_profile" class="btn btn-primary">Certificate</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/CCNA_SWITCHING.PNG' %}" class="card-img-top" alt="SRWE" />
              <div class="card-body">
                <h5 class="card-title">CCNA: Switching, Routing, and Wireless Essentials</h5>
                <p class="card-text">Cisco verifies the earner of this badge successfully completed the Switching, Routing, and Wireless Essentials course and achieved this student level credential.</p>
                <a href="https://www.credly.com/badges/1c315bc6-36ac-4f1a-a822-3676cadf2040/linked_in_profile" class="btn btn-primary">Certificate</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/CCNA_ENTERPRISE.PNG' %}" class="card-img-top" alt="ITN" />
              <div class="card-body">
                <h5 class="card-title">CCNA: Introduction to Networks</h5>
                <p class="card-text">Cisco verifies the earner of this badge successfully completed the Introduction to Networks course and achieved this student level credential.</p>
                <a href="https://www.credly.com/badges/526895dd-3d61-4744-a7f9-028c0e56cbc2/linked_in_profile" class="btn btn-primary">Certificate</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/ITS_NETWORKING.PNG' %}" class="card-img-top" alt="ITS_NETWORKING" />
              <div class="card-body">
                <h5 class="card-title">IT Specialist - Networking</h5>
                <p class="card-text">Earners of this badge demonstrate foundational networking knowledge and skills, including TCP/IP, networking services, networking topologies, and troubleshooting in wired and wireless environments.</p>
                <a href="https://www.credly.com/badges/d075a3ec-a965-415e-a864-22c78894d7d1/linked_in_profile" class="btn btn-primary">Certificate</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="{%static 'img/MTA_NETWORKING.PNG' %}" class="card-img-top" alt="MTA_NETWORKING" />
              <div class="card-body">
                <h5 class="card-title">MTA: Networking Fundamentals - Certified 2022</h5>
                <p class="card-text">
                  Earners of the MTA: Networking Fundamentals certification have demonstrated knowledge of fundamental networking concepts. The MTA program provides an appropriate entry point to a future career in technology.
                </p>
                <a href="https://www.credly.com/badges/fb306a4a-790d-4815-8d79-18fcc082cbc8/linked_in_profile" class="btn btn-primary">Certificate</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#e2edff"
          fill-opacity="10"
          d="M0,64L30,90.7C60,117,120,171,180,186.7C240,203,300,181,360,197.3C420,213,480,267,540,282.7C600,299,660,277,720,272C780,267,840,277,900,256C960,235,1020,181,1080,170.7C1140,160,1200,192,1260,197.3C1320,203,1380,181,1410,170.7L1440,160L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- End Certificate -->

    <!-- Contact -->
    <section id="contact">
      <div class="container">
        <div class="row text-center">
          <div class="col">
            <h2>Contact Me</h2>
          </div>
        </div>
        <div class="row justify-content-center mb-3">
          <div class="col-md-6">
            <form>
              <div class="mb-3">
                <label for="Name" class="form-label">Full Name</label>
                <input type="text" class="form-control" id="name" aria-describedby="name" />
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" aria-describedby="email" />
              </div>
              <div class="mb-3">
                <label for="Messages" class="form-label">Messages</label>
                <textarea class="form-control" id="Messages" rows="3"></textarea>
              </div>

              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#0d6efd"
          fill-opacity="1"
          d="M0,64L30,90.7C60,117,120,171,180,170.7C240,171,300,117,360,117.3C420,117,480,171,540,197.3C600,224,660,224,720,213.3C780,203,840,181,900,160C960,139,1020,117,1080,128C1140,139,1200,181,1260,202.7C1320,224,1380,224,1410,224L1440,224L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- End Contact -->

    <!-- Footer -->
    <footer class="bg-primary text-white text-center">
      <p class="m-0">
        Created with <i class="bi bi-heart-fill text-danger"></i> by
        <a href="https://www.linkedin.com/in/mochammadhakim" class="text-white fw-bold"> Mochammad Hakim </a>
      </p>
    </footer>
    <!-- End Footer -->
    <!-- booststrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Disetiap section, terdapat beberapa keterangan untuk memudahkan anda ketika ingin mengubah sesuatu.

6. Buat direktori `snippets` di dalam direktori `templates` yang memuat file `navbar.html`


7. Ubah isi dari file `navbar.html` menjadi seperti ini:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Perpustakaan</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Services
              </a>
              <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">History</a></li>
                  <li><a class="dropdown-item" href="#">Contact</a></li>
                  <li><a class="dropdown-item" href="#">About</a></li>
                  <!-- <li><hr class="dropdown-divider"></li> -->
              </ul>
              <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
              </li>
          </li>
        <!-- <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Link</a>
        </li> -->
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

8. Buat direktori `static` yang akan digunakan untuk memuat `CSS` dan juga `image`


9. Di dalam direktori `css`, buat file `style.css`, yang berisikan:

.jumbotron {
  padding-top: 7rem;
  background-color: #e2edff;
}

#education {
  padding-top: 10rem;
  background-color: #e2edff;
}

#experience {
  padding-top: 7rem;
  background-color: #e2edff;
}

#skill {
  padding-top: 7rem;
}
#certificate {
  padding-top: 7rem;
}

#contact {
  padding-top: 7rem;
  background-color: #e2edff;
}
.social-links ul,
li {
  list-style-type: none;
  display: inline-block;
}

.social {
  width: 50px;
  height: 50px;
}

/* section {
  padding-top: 7rem;
} */

.card {
  padding: 5rem;
  height: 100%;
}

.card-title {
  padding-bottom: 5px;
  padding-top: 10px;
}

#About .container {
  padding-top: 7rem;
}

.icon-intren {
  width: 50px;
  background-color: red;
}

.asd {
  background-color: red;
}

10. Isi direktori `img` disesuaikan dengan foto foto yang akan anda gunakan untuk membuat portofolio!


11. Ubah isi dari file `urls.py` yang berada di dalam direktori `mywebsite` menjadi seperti berikut:

from django.contrib import admin
from django.urls import path
from library.views import home

urlpatterns = [
    path(r'admin/', admin.site.urls),
    path(r'', home),
]

12. Jalankan Django agar anda dapat mengakses website Portofolio anda dengan menggunakan command `python manage.py runserver`


13. Akses url `http://127.0.0.1:8000/`

14. Maka ia akan membuka portofolio yang telah anda buat sebelumnya!


## 6. Ending

Untuk pembuatan portofolio sudah Selesai! anda dapat mengubah isi dari portofolio dengan mengubah file `base.html` yang berada di direktori `templates` dan file `navbar.html` yang berada di direktori `templates/snippets`, apabila anda mengalami kesulitan anda dapat menghubungi saya di Contact berikut:

Linkedin: https://www.linkedin.com/in/mochammadhakim

Untuk beberapa referensi anda dapat mengunjungi Github saya

Github: https://github.com/MochammadHakim/portofolio.git

Terima kasih telah membaca dokumentasi saya sampai akhir, anda dapat membaca Dokumentasi saya yang lain dengan mengunjungi Link berikut:

Python Web Development:
https://hackmd.io/@ZNLLPEerQgmDKfOJZIGVKQ/By2_FCFRp

Python Web Development Part 2: https://hackmd.io/@ZNLLPEerQgmDKfOJZIGVKQ/H1ACToE10

Docker Fundamental:
https://hackmd.io/@ZNLLPEerQgmDKfOJZIGVKQ/H1ACToE10