From 62801f1155166c0e9313dffbc660a27d351f51b5 Mon Sep 17 00:00:00 2001
From: David Miller <hello@davidmiller.io>
Date: Thu, 6 May 2021 11:13:21 -0400
Subject: [PATCH] break modals out into pug includes

---
 dist/index.html                        | 108 ++++++++++++-------
 src/pug/includes/portfolio-modal-1.pug |  25 +++++
 src/pug/includes/portfolio-modal-2.pug |  25 +++++
 src/pug/includes/portfolio-modal-3.pug |  25 +++++
 src/pug/includes/portfolio-modal-4.pug |  25 +++++
 src/pug/includes/portfolio-modal-5.pug |  25 +++++
 src/pug/includes/portfolio-modal-6.pug |  25 +++++
 src/pug/index.pug                      | 144 +++----------------------
 8 files changed, 234 insertions(+), 168 deletions(-)
 create mode 100644 src/pug/includes/portfolio-modal-1.pug
 create mode 100644 src/pug/includes/portfolio-modal-2.pug
 create mode 100644 src/pug/includes/portfolio-modal-3.pug
 create mode 100644 src/pug/includes/portfolio-modal-4.pug
 create mode 100644 src/pug/includes/portfolio-modal-5.pug
 create mode 100644 src/pug/includes/portfolio-modal-6.pug

diff --git a/dist/index.html b/dist/index.html
index 3a55e48..dc719e8 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -88,6 +88,7 @@
                 </div>
                 <div class="row">
                     <div class="col-lg-4 col-sm-6 mb-4">
+                        <!-- Portfolio item 1-->
                         <div class="portfolio-item">
                             <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
                                 <div class="portfolio-hover">
@@ -102,6 +103,7 @@
                         </div>
                     </div>
                     <div class="col-lg-4 col-sm-6 mb-4">
+                        <!-- Portfolio item 2-->
                         <div class="portfolio-item">
                             <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
                                 <div class="portfolio-hover">
@@ -116,6 +118,7 @@
                         </div>
                     </div>
                     <div class="col-lg-4 col-sm-6 mb-4">
+                        <!-- Portfolio item 3-->
                         <div class="portfolio-item">
                             <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
                                 <div class="portfolio-hover">
@@ -130,6 +133,7 @@
                         </div>
                     </div>
                     <div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
+                        <!-- Portfolio item 4-->
                         <div class="portfolio-item">
                             <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4">
                                 <div class="portfolio-hover">
@@ -144,6 +148,7 @@
                         </div>
                     </div>
                     <div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
+                        <!-- Portfolio item 5-->
                         <div class="portfolio-item">
                             <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5">
                                 <div class="portfolio-hover">
@@ -158,6 +163,7 @@
                         </div>
                     </div>
                     <div class="col-lg-4 col-sm-6">
+                        <!-- Portfolio item 6-->
                         <div class="portfolio-item">
                             <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6">
                                 <div class="portfolio-hover">
@@ -361,7 +367,7 @@
             </div>
         </footer>
         <!-- Portfolio Modals-->
-        <!-- Modal 1-->
+        <!-- Portfolio item 1 modal popup-->
         <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
@@ -370,17 +376,22 @@
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
                                 <div class="modal-body">
-                                    <!-- Project Details Go Here-->
+                                    <!-- Project details-->
                                     <h2 class="text-uppercase">Project Name</h2>
                                     <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/1.jpg" alt="..." />
                                     <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                                     <ul class="list-inline">
-                                        <li>Date: January 2021</li>
-                                        <li>Client: Threads</li>
-                                        <li>Category: Illustration</li>
+                                        <li>
+                                            <strong>Client:</strong>
+                                            Threads
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Illustration
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-bs-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
                                         <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
@@ -391,7 +402,7 @@
                 </div>
             </div>
         </div>
-        <!-- Modal 2-->
+        <!-- Portfolio item 2 modal popup-->
         <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
@@ -400,17 +411,22 @@
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
                                 <div class="modal-body">
-                                    <!-- Project Details Go Here-->
+                                    <!-- Project details-->
                                     <h2 class="text-uppercase">Project Name</h2>
                                     <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/2.jpg" alt="..." />
                                     <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                                     <ul class="list-inline">
-                                        <li>Date: January 2021</li>
-                                        <li>Client: Explore</li>
-                                        <li>Category: Graphic Design</li>
+                                        <li>
+                                            <strong>Client:</strong>
+                                            Explore
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Graphic Design
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-bs-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
                                         <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
@@ -421,7 +437,7 @@
                 </div>
             </div>
         </div>
-        <!-- Modal 3-->
+        <!-- Portfolio item 3 modal popup-->
         <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
@@ -430,17 +446,22 @@
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
                                 <div class="modal-body">
-                                    <!-- Project Details Go Here-->
+                                    <!-- Project details-->
                                     <h2 class="text-uppercase">Project Name</h2>
                                     <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/3.jpg" alt="..." />
                                     <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                                     <ul class="list-inline">
-                                        <li>Date: January 2021</li>
-                                        <li>Client: Finish</li>
-                                        <li>Category: Identity</li>
+                                        <li>
+                                            <strong>Client:</strong>
+                                            Finish
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Identity
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-bs-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
                                         <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
@@ -451,7 +472,7 @@
                 </div>
             </div>
         </div>
-        <!-- Modal 4-->
+        <!-- Portfolio item 4 modal popup-->
         <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
@@ -460,17 +481,22 @@
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
                                 <div class="modal-body">
-                                    <!-- Project Details Go Here-->
+                                    <!-- Project details-->
                                     <h2 class="text-uppercase">Project Name</h2>
                                     <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/4.jpg" alt="..." />
                                     <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                                     <ul class="list-inline">
-                                        <li>Date: January 2021</li>
-                                        <li>Client: Lines</li>
-                                        <li>Category: Branding</li>
+                                        <li>
+                                            <strong>Client:</strong>
+                                            Lines
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Branding
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-bs-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
                                         <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
@@ -481,7 +507,7 @@
                 </div>
             </div>
         </div>
-        <!-- Modal 5-->
+        <!-- Portfolio item 5 modal popup-->
         <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
@@ -490,17 +516,22 @@
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
                                 <div class="modal-body">
-                                    <!-- Project Details Go Here-->
+                                    <!-- Project details-->
                                     <h2 class="text-uppercase">Project Name</h2>
                                     <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/5.jpg" alt="..." />
                                     <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                                     <ul class="list-inline">
-                                        <li>Date: January 2021</li>
-                                        <li>Client: Southwest</li>
-                                        <li>Category: Website Design</li>
+                                        <li>
+                                            <strong>Client:</strong>
+                                            Southwest
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Website Design
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-bs-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
                                         <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
@@ -511,7 +542,7 @@
                 </div>
             </div>
         </div>
-        <!-- Modal 6-->
+        <!-- Portfolio item 6 modal popup-->
         <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
@@ -520,17 +551,22 @@
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
                                 <div class="modal-body">
-                                    <!-- Project Details Go Here-->
+                                    <!-- Project details-->
                                     <h2 class="text-uppercase">Project Name</h2>
                                     <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                                     <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/6.jpg" alt="..." />
                                     <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                                     <ul class="list-inline">
-                                        <li>Date: January 2021</li>
-                                        <li>Client: Window</li>
-                                        <li>Category: Photography</li>
+                                        <li>
+                                            <strong>Client:</strong>
+                                            Window
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Photography
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary btn-lg" data-bs-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
                                         <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
diff --git a/src/pug/includes/portfolio-modal-1.pug b/src/pug/includes/portfolio-modal-1.pug
new file mode 100644
index 0000000..913332f
--- /dev/null
+++ b/src/pug/includes/portfolio-modal-1.pug
@@ -0,0 +1,25 @@
+// Portfolio item 1 modal popup
+#portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
+    .modal-dialog
+        .modal-content
+            .close-modal(data-bs-dismiss='modal')
+                img(src='assets/img/close-icon.svg', alt='Close modal')
+            .container
+                .row.justify-content-center
+                    .col-lg-8
+                        .modal-body
+                            // Project details
+                            h2.text-uppercase Project Name
+                            p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
+                            img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/1.jpg', alt='...')
+                            p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
+                            ul.list-inline
+                                li
+                                    strong Client:
+                                    | Threads
+                                li
+                                    strong Category:
+                                    | Illustration
+                            button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
+                                i.fas.fa-times.me-1
+                                | Close Project
\ No newline at end of file
diff --git a/src/pug/includes/portfolio-modal-2.pug b/src/pug/includes/portfolio-modal-2.pug
new file mode 100644
index 0000000..35fee7b
--- /dev/null
+++ b/src/pug/includes/portfolio-modal-2.pug
@@ -0,0 +1,25 @@
+// Portfolio item 2 modal popup
+#portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
+    .modal-dialog
+        .modal-content
+            .close-modal(data-bs-dismiss='modal')
+                img(src='assets/img/close-icon.svg', alt='Close modal')
+            .container
+                .row.justify-content-center
+                    .col-lg-8
+                        .modal-body
+                            // Project details
+                            h2.text-uppercase Project Name
+                            p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
+                            img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/2.jpg', alt='...')
+                            p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
+                            ul.list-inline
+                                li
+                                    strong Client:
+                                    | Explore
+                                li
+                                    strong Category:
+                                    | Graphic Design
+                            button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
+                                i.fas.fa-times.me-1
+                                | Close Project
\ No newline at end of file
diff --git a/src/pug/includes/portfolio-modal-3.pug b/src/pug/includes/portfolio-modal-3.pug
new file mode 100644
index 0000000..aab3c13
--- /dev/null
+++ b/src/pug/includes/portfolio-modal-3.pug
@@ -0,0 +1,25 @@
+// Portfolio item 3 modal popup
+#portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
+    .modal-dialog
+        .modal-content
+            .close-modal(data-bs-dismiss='modal')
+                img(src='assets/img/close-icon.svg', alt='Close modal')
+            .container
+                .row.justify-content-center
+                    .col-lg-8
+                        .modal-body
+                            // Project details
+                            h2.text-uppercase Project Name
+                            p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
+                            img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/3.jpg', alt='...')
+                            p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
+                            ul.list-inline
+                                li
+                                    strong Client:
+                                    | Finish
+                                li
+                                    strong Category:
+                                    | Identity
+                            button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
+                                i.fas.fa-times.me-1
+                                | Close Project
\ No newline at end of file
diff --git a/src/pug/includes/portfolio-modal-4.pug b/src/pug/includes/portfolio-modal-4.pug
new file mode 100644
index 0000000..f3a92bc
--- /dev/null
+++ b/src/pug/includes/portfolio-modal-4.pug
@@ -0,0 +1,25 @@
+// Portfolio item 4 modal popup
+#portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
+    .modal-dialog
+        .modal-content
+            .close-modal(data-bs-dismiss='modal')
+                img(src='assets/img/close-icon.svg', alt='Close modal')
+            .container
+                .row.justify-content-center
+                    .col-lg-8
+                        .modal-body
+                            // Project details
+                            h2.text-uppercase Project Name
+                            p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
+                            img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/4.jpg', alt='...')
+                            p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
+                            ul.list-inline
+                                li
+                                    strong Client:
+                                    | Lines
+                                li
+                                    strong Category:
+                                    | Branding
+                            button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
+                                i.fas.fa-times.me-1
+                                | Close Project
\ No newline at end of file
diff --git a/src/pug/includes/portfolio-modal-5.pug b/src/pug/includes/portfolio-modal-5.pug
new file mode 100644
index 0000000..4881f4e
--- /dev/null
+++ b/src/pug/includes/portfolio-modal-5.pug
@@ -0,0 +1,25 @@
+// Portfolio item 5 modal popup
+#portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
+    .modal-dialog
+        .modal-content
+            .close-modal(data-bs-dismiss='modal')
+                img(src='assets/img/close-icon.svg', alt='Close modal')
+            .container
+                .row.justify-content-center
+                    .col-lg-8
+                        .modal-body
+                            // Project details
+                            h2.text-uppercase Project Name
+                            p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
+                            img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/5.jpg', alt='...')
+                            p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
+                            ul.list-inline
+                                li
+                                    strong Client:
+                                    | Southwest
+                                li
+                                    strong Category:
+                                    | Website Design
+                            button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
+                                i.fas.fa-times.me-1
+                                | Close Project
\ No newline at end of file
diff --git a/src/pug/includes/portfolio-modal-6.pug b/src/pug/includes/portfolio-modal-6.pug
new file mode 100644
index 0000000..43b6062
--- /dev/null
+++ b/src/pug/includes/portfolio-modal-6.pug
@@ -0,0 +1,25 @@
+// Portfolio item 6 modal popup
+#portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
+    .modal-dialog
+        .modal-content
+            .close-modal(data-bs-dismiss='modal')
+                img(src='assets/img/close-icon.svg', alt='Close modal')
+            .container
+                .row.justify-content-center
+                    .col-lg-8
+                        .modal-body
+                            // Project details
+                            h2.text-uppercase Project Name
+                            p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
+                            img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/6.jpg', alt='...')
+                            p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
+                            ul.list-inline
+                                li
+                                    strong Client:
+                                    | Window
+                                li
+                                    strong Category:
+                                    | Photography
+                            button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
+                                i.fas.fa-times.me-1
+                                | Close Project
\ No newline at end of file
diff --git a/src/pug/index.pug b/src/pug/index.pug
index 25bb96f..a3ac9ca 100644
--- a/src/pug/index.pug
+++ b/src/pug/index.pug
@@ -89,6 +89,7 @@ html(lang='en')
                     h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                 .row
                     .col-lg-4.col-sm-6.mb-4
+                        // Portfolio item 1
                         .portfolio-item
                             a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal1')
                                 .portfolio-hover
@@ -99,6 +100,7 @@ html(lang='en')
                                 .portfolio-caption-heading Threads
                                 .portfolio-caption-subheading.text-muted Illustration
                     .col-lg-4.col-sm-6.mb-4
+                        // Portfolio item 2
                         .portfolio-item
                             a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal2')
                                 .portfolio-hover
@@ -109,6 +111,7 @@ html(lang='en')
                                 .portfolio-caption-heading Explore
                                 .portfolio-caption-subheading.text-muted Graphic Design
                     .col-lg-4.col-sm-6.mb-4
+                        // Portfolio item 3
                         .portfolio-item
                             a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal3')
                                 .portfolio-hover
@@ -119,6 +122,7 @@ html(lang='en')
                                 .portfolio-caption-heading Finish
                                 .portfolio-caption-subheading.text-muted Identity
                     .col-lg-4.col-sm-6.mb-4.mb-lg-0
+                        // Portfolio item 4
                         .portfolio-item
                             a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal4')
                                 .portfolio-hover
@@ -129,6 +133,7 @@ html(lang='en')
                                 .portfolio-caption-heading Lines
                                 .portfolio-caption-subheading.text-muted Branding
                     .col-lg-4.col-sm-6.mb-4.mb-sm-0
+                        // Portfolio item 5
                         .portfolio-item
                             a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal5')
                                 .portfolio-hover
@@ -139,6 +144,7 @@ html(lang='en')
                                 .portfolio-caption-heading Southwest
                                 .portfolio-caption-subheading.text-muted Website Design
                     .col-lg-4.col-sm-6
+                        // Portfolio item 6
                         .portfolio-item
                             a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal6')
                                 .portfolio-hover
@@ -315,138 +321,12 @@ html(lang='en')
                         a.link-dark.text-decoration-none(href='#!') Terms of Use
 
         // Portfolio Modals
-        // Modal 1
-        #portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-bs-dismiss='modal')
-                        img(src='assets/img/close-icon.svg', alt='Close modal')
-                    .container
-                        .row.justify-content-center
-                            .col-lg-8
-                                .modal-body
-                                    // Project Details Go Here
-                                    h2.text-uppercase Project Name
-                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
-                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/1.jpg', alt='...')
-                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
-                                    ul.list-inline
-                                        li Date: January 2021
-                                        li Client: Threads
-                                        li Category: Illustration
-                                    button.btn.btn-primary(data-bs-dismiss='modal', type='button')
-                                        i.fas.fa-times.me-1
-                                        | Close Project
-        // Modal 2
-        #portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-bs-dismiss='modal')
-                        img(src='assets/img/close-icon.svg', alt='Close modal')
-                    .container
-                        .row.justify-content-center
-                            .col-lg-8
-                                .modal-body
-                                    // Project Details Go Here
-                                    h2.text-uppercase Project Name
-                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
-                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/2.jpg', alt='...')
-                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
-                                    ul.list-inline
-                                        li Date: January 2021
-                                        li Client: Explore
-                                        li Category: Graphic Design
-                                    button.btn.btn-primary(data-bs-dismiss='modal', type='button')
-                                        i.fas.fa-times.me-1
-                                        | Close Project
-        // Modal 3
-        #portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-bs-dismiss='modal')
-                        img(src='assets/img/close-icon.svg', alt='Close modal')
-                    .container
-                        .row.justify-content-center
-                            .col-lg-8
-                                .modal-body
-                                    // Project Details Go Here
-                                    h2.text-uppercase Project Name
-                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
-                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/3.jpg', alt='...')
-                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
-                                    ul.list-inline
-                                        li Date: January 2021
-                                        li Client: Finish
-                                        li Category: Identity
-                                    button.btn.btn-primary(data-bs-dismiss='modal', type='button')
-                                        i.fas.fa-times.me-1
-                                        | Close Project
-        // Modal 4
-        #portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-bs-dismiss='modal')
-                        img(src='assets/img/close-icon.svg', alt='Close modal')
-                    .container
-                        .row.justify-content-center
-                            .col-lg-8
-                                .modal-body
-                                    // Project Details Go Here
-                                    h2.text-uppercase Project Name
-                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
-                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/4.jpg', alt='...')
-                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
-                                    ul.list-inline
-                                        li Date: January 2021
-                                        li Client: Lines
-                                        li Category: Branding
-                                    button.btn.btn-primary(data-bs-dismiss='modal', type='button')
-                                        i.fas.fa-times.me-1
-                                        | Close Project
-        // Modal 5
-        #portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-bs-dismiss='modal')
-                        img(src='assets/img/close-icon.svg', alt='Close modal')
-                    .container
-                        .row.justify-content-center
-                            .col-lg-8
-                                .modal-body
-                                    // Project Details Go Here
-                                    h2.text-uppercase Project Name
-                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
-                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/5.jpg', alt='...')
-                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
-                                    ul.list-inline
-                                        li Date: January 2021
-                                        li Client: Southwest
-                                        li Category: Website Design
-                                    button.btn.btn-primary(data-bs-dismiss='modal', type='button')
-                                        i.fas.fa-times.me-1
-                                        | Close Project
-        // Modal 6
-        #portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-bs-dismiss='modal')
-                        img(src='assets/img/close-icon.svg', alt='Close modal')
-                    .container
-                        .row.justify-content-center
-                            .col-lg-8
-                                .modal-body
-                                    // Project Details Go Here
-                                    h2.text-uppercase Project Name
-                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
-                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/6.jpg', alt='...')
-                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
-                                    ul.list-inline
-                                        li Date: January 2021
-                                        li Client: Window
-                                        li Category: Photography
-                                    button.btn.btn-primary.btn-lg(data-bs-dismiss='modal', type='button')
-                                        i.fas.fa-times.me-1
-                                        | Close Project
+        include includes/portfolio-modal-1
+        include includes/portfolio-modal-2
+        include includes/portfolio-modal-3
+        include includes/portfolio-modal-4
+        include includes/portfolio-modal-5
+        include includes/portfolio-modal-6
 
         // Bootstrap core JS
         script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js')