Merge pull request #308 from StartBootstrap/develop

Bootstrap 5 Update

dist/index.html

@@ -6,6 +6,7 @@
         <meta name="description" content="" />
         <meta name="author" content="" />
         <title>Agency - Start Bootstrap Theme</title>
+        <!-- Favicon-->
         <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
         <!-- Font Awesome icons (free version)-->
         <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
@@ -19,18 +20,18 @@
         <!-- Navigation-->
         <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
             <div class="container">
-                <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="assets/img/navbar-logo.svg" alt="..." /></a>
+                <a class="navbar-brand" href="#page-top"><img src="assets/img/navbar-logo.svg" alt="..." /></a>
-                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                     Menu
-                    <i class="fas fa-bars ml-1"></i>
+                    <i class="fas fa-bars ms-1"></i>
                 </button>
                 <div class="collapse navbar-collapse" id="navbarResponsive">
-                    <ul class="navbar-nav text-uppercase ml-auto">
+                    <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
-                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
-                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
-                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
-                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">Team</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#team">Team</a></li>
-                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                     </ul>
                 </div>
             </div>
@@ -40,7 +41,7 @@
             <div class="container">
                 <div class="masthead-subheading">Welcome To Our Studio!</div>
                 <div class="masthead-heading text-uppercase">It's Nice To Meet You</div>
-                <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
+                <a class="btn btn-primary btn-xl text-uppercase" href="#services">Tell Me More</a>
             </div>
         </header>
         <!-- Services-->
@@ -87,12 +88,13 @@
                 </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-toggle="modal" href="#portfolioModal1">
+                            <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
                                 <div class="portfolio-hover">
                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                 </div>
-                                <img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt="..." />
+                                <img class="img-fluid" src="assets/img/portfolio/1.jpg" alt="..." />
                             </a>
                             <div class="portfolio-caption">
                                 <div class="portfolio-caption-heading">Threads</div>
@@ -101,12 +103,13 @@
                         </div>
                     </div>
                     <div class="col-lg-4 col-sm-6 mb-4">
+                        <!-- Portfolio item 2-->
                         <div class="portfolio-item">
-                            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
+                            <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
                                 <div class="portfolio-hover">
                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                 </div>
-                                <img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt="..." />
+                                <img class="img-fluid" src="assets/img/portfolio/2.jpg" alt="..." />
                             </a>
                             <div class="portfolio-caption">
                                 <div class="portfolio-caption-heading">Explore</div>
@@ -115,12 +118,13 @@
                         </div>
                     </div>
                     <div class="col-lg-4 col-sm-6 mb-4">
+                        <!-- Portfolio item 3-->
                         <div class="portfolio-item">
-                            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
+                            <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
                                 <div class="portfolio-hover">
                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                 </div>
-                                <img class="img-fluid" src="assets/img/portfolio/03-thumbnail.jpg" alt="..." />
+                                <img class="img-fluid" src="assets/img/portfolio/3.jpg" alt="..." />
                             </a>
                             <div class="portfolio-caption">
                                 <div class="portfolio-caption-heading">Finish</div>
@@ -129,12 +133,13 @@
                         </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-toggle="modal" href="#portfolioModal4">
+                            <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4">
                                 <div class="portfolio-hover">
                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                 </div>
-                                <img class="img-fluid" src="assets/img/portfolio/04-thumbnail.jpg" alt="..." />
+                                <img class="img-fluid" src="assets/img/portfolio/4.jpg" alt="..." />
                             </a>
                             <div class="portfolio-caption">
                                 <div class="portfolio-caption-heading">Lines</div>
@@ -143,12 +148,13 @@
                         </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-toggle="modal" href="#portfolioModal5">
+                            <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5">
                                 <div class="portfolio-hover">
                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                 </div>
-                                <img class="img-fluid" src="assets/img/portfolio/05-thumbnail.jpg" alt="..." />
+                                <img class="img-fluid" src="assets/img/portfolio/5.jpg" alt="..." />
                             </a>
                             <div class="portfolio-caption">
                                 <div class="portfolio-caption-heading">Southwest</div>
@@ -157,12 +163,13 @@
                         </div>
                     </div>
                     <div class="col-lg-4 col-sm-6">
+                        <!-- Portfolio item 6-->
                         <div class="portfolio-item">
-                            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
+                            <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6">
                                 <div class="portfolio-hover">
                                     <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                 </div>
-                                <img class="img-fluid" src="assets/img/portfolio/06-thumbnail.jpg" alt="..." />
+                                <img class="img-fluid" src="assets/img/portfolio/6.jpg" alt="..." />
                             </a>
                             <div class="portfolio-caption">
                                 <div class="portfolio-caption-heading">Window</div>
@@ -246,7 +253,7 @@
                     <div class="col-lg-4">
                         <div class="team-member">
                             <img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="..." />
-                            <h4>Kay Garland</h4>
+                            <h4>Parveen Anand</h4>
                             <p class="text-muted">Lead Designer</p>
                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
@@ -256,7 +263,7 @@
                     <div class="col-lg-4">
                         <div class="team-member">
                             <img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="..." />
-                            <h4>Larry Parker</h4>
+                            <h4>Diana Petersen</h4>
                             <p class="text-muted">Lead Marketer</p>
                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
@@ -266,7 +273,7 @@
                     <div class="col-lg-4">
                         <div class="team-member">
                             <img class="mx-auto rounded-circle" src="assets/img/team/3.jpg" alt="..." />
-                            <h4>Diana Petersen</h4>
+                            <h4>Larry Parker</h4>
                             <p class="text-muted">Lead Developer</p>
                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
@@ -305,25 +312,25 @@
                     <h2 class="section-heading text-uppercase">Contact Us</h2>
                     <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                 </div>
-                <form id="contactForm" name="sentMessage" novalidate="novalidate">
+                <form id="contactForm">
                     <div class="row align-items-stretch mb-5">
                         <div class="col-md-6">
                             <div class="form-group">
-                                <input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
+                                <input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" />
                                 <p class="help-block text-danger"></p>
                             </div>
                             <div class="form-group">
-                                <input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
+                                <input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" />
                                 <p class="help-block text-danger"></p>
                             </div>
                             <div class="form-group mb-md-0">
-                                <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
+                                <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" />
                                 <p class="help-block text-danger"></p>
                             </div>
                         </div>
                         <div class="col-md-6">
                             <div class="form-group form-group-textarea mb-md-0">
-                                <textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
+                                <textarea class="form-control" id="message" placeholder="Your Message *" required="required"></textarea>
                                 <p class="help-block text-danger"></p>
                             </div>
                         </div>
@@ -339,7 +346,7 @@
         <footer class="footer py-4">
             <div class="container">
                 <div class="row align-items-center">
-                    <div class="col-lg-4 text-lg-left">
+                    <div class="col-lg-4 text-lg-start">
                         Copyright &copy; Your Website
                         <!-- This script automatically adds the current year to your website footer-->
                         <!-- (credit: https://updateyourfooter.com/)-->
@@ -352,35 +359,40 @@
                         <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
                         <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
                     </div>
-                    <div class="col-lg-4 text-lg-right">
+                    <div class="col-lg-4 text-lg-end">
-                        <a class="mr-3" href="#!">Privacy Policy</a>
+                        <a class="link-dark text-decoration-none me-3" href="#!">Privacy Policy</a>
-                        <a href="#!">Terms of Use</a>
+                        <a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
                     </div>
                 </div>
             </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">
-                    <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
+                    <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <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/01-full.jpg" alt="..." />
+                                    <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>
-                                        <li>Client: Threads</li>
+                                            <strong>Client:</strong>
-                                        <li>Category: Illustration</li>
+                                            Threads
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Illustration
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
-                                        <i class="fas fa-times mr-1"></i>
+                                        <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
                                 </div>
@@ -390,27 +402,32 @@
                 </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">
-                    <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
+                    <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <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/02-full.jpg" alt="..." />
+                                    <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>
-                                        <li>Client: Explore</li>
+                                            <strong>Client:</strong>
-                                        <li>Category: Graphic Design</li>
+                                            Explore
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Graphic Design
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
-                                        <i class="fas fa-times mr-1"></i>
+                                        <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
                                 </div>
@@ -420,27 +437,32 @@
                 </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">
-                    <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
+                    <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <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/03-full.jpg" alt="..." />
+                                    <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>
-                                        <li>Client: Finish</li>
+                                            <strong>Client:</strong>
-                                        <li>Category: Identity</li>
+                                            Finish
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Identity
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
-                                        <i class="fas fa-times mr-1"></i>
+                                        <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
                                 </div>
@@ -450,27 +472,32 @@
                 </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">
-                    <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
+                    <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <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/04-full.jpg" alt="..." />
+                                    <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>
-                                        <li>Client: Lines</li>
+                                            <strong>Client:</strong>
-                                        <li>Category: Branding</li>
+                                            Lines
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Branding
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
-                                        <i class="fas fa-times mr-1"></i>
+                                        <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
                                 </div>
@@ -480,27 +507,32 @@
                 </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">
-                    <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
+                    <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <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/05-full.jpg" alt="..." />
+                                    <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>
-                                        <li>Client: Southwest</li>
+                                            <strong>Client:</strong>
-                                        <li>Category: Website Design</li>
+                                            Southwest
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Website Design
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
-                                        <i class="fas fa-times mr-1"></i>
+                                        <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
                                 </div>
@@ -510,27 +542,32 @@
                 </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">
-                    <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
+                    <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <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/06-full.jpg" alt="..." />
+                                    <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>
-                                        <li>Client: Window</li>
+                                            <strong>Client:</strong>
-                                        <li>Category: Photography</li>
+                                            Window
+                                        </li>
+                                        <li>
+                                            <strong>Category:</strong>
+                                            Photography
+                                        </li>
                                     </ul>
-                                    <button class="btn btn-primary" data-dismiss="modal" type="button">
+                                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
-                                        <i class="fas fa-times mr-1"></i>
+                                        <i class="fas fa-times me-1"></i>
                                         Close Project
                                     </button>
                                 </div>
@@ -541,13 +578,7 @@
             </div>
         </div>
         <!-- Bootstrap core JS-->
-        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
-        <!-- Third party plugin JS-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
-        <!-- Contact form JS-->
-        <script src="assets/mail/jqBootstrapValidation.js"></script>
-        <script src="assets/mail/contact_me.js"></script>
         <!-- Core theme JS-->
         <script src="js/scripts.js"></script>
     </body>

dist/js/scripts.js

@@ -1,56 +1,54 @@
 /*!
-* Start Bootstrap - Agency v6.0.5 (https://startbootstrap.com/theme/agency)
+* Start Bootstrap - Agency v7.0.0 (https://startbootstrap.com/theme/agency)
 * Copyright 2013-2021 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-agency/blob/master/LICENSE)
 */
-(function ($) {
+//
-    "use strict"; // Start of use strict
+// Scripts
+// 
 
-    // Smooth scrolling using anime.js
+window.addEventListener('DOMContentLoaded', event => {
-    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
+
-        if (
+    // Navbar shrink function
-            location.pathname.replace(/^\//, "") ==
+    var navbarShrink = function () {
-            this.pathname.replace(/^\//, "") &&
+        const navbarCollapsible = document.body.querySelector('#mainNav');
-            location.hostname == this.hostname
+        if (!navbarCollapsible) {
-        ) {
+            return;
-            var target = $(this.hash);
-            target = target.length ?
-                target :
-                $("[name=" + this.hash.slice(1) + "]");
-            if (target.length) {
-                anime({
-                    targets: 'html, body',
-                    scrollTop: target.offset().top - 72,
-                    duration: 1000,
-                    easing: 'easeInOutExpo'
-                });
-                return false;
         }
+        if (window.scrollY === 0) {
+            navbarCollapsible.classList.remove('navbar-shrink')
+        } else {
+            navbarCollapsible.classList.add('navbar-shrink')
         }
-    });
 
-    // Closes responsive menu when a scroll trigger link is clicked
+    };
-    $(".js-scroll-trigger").on('click', function () {
-        $(".navbar-collapse").collapse("hide");
-    });
 
-    // Activate scrollspy to add active class to navbar items on scroll
+    // Shrink the navbar 
-    $("body").scrollspy({
+    navbarShrink();
-        target: "#mainNav",
+
+    // Shrink the navbar when page is scrolled
+    document.addEventListener('scroll', navbarShrink);
+
+    // Activate Bootstrap scrollspy on the main nav element
+    const mainNav = document.body.querySelector('#mainNav');
+    if (mainNav) {
+        new bootstrap.ScrollSpy(document.body, {
+            target: '#mainNav',
             offset: 74,
         });
-
-    // Collapse Navbar
-    var navbarCollapse = function () {
-        if ($("#mainNav").offset().top > 100) {
-            $("#mainNav").addClass("navbar-shrink");
-        } else {
-            $("#mainNav").removeClass("navbar-shrink");
-        }
     };
-    // Collapse now if page is not at top
-    navbarCollapse();
-    // Collapse the navbar when page is scrolled
-    $(window).on('scroll', navbarCollapse);
 
-})(jQuery); // End of use strict
+    // Collapse responsive navbar when toggler is visible
+    const navbarToggler = document.body.querySelector('.navbar-toggler');
+    const responsiveNavItems = [].slice.call(
+        document.querySelectorAll('#navbarResponsive .nav-link')
+    );
+    responsiveNavItems.map(function (responsiveNavItem) {
+        responsiveNavItem.addEventListener('click', () => {
+            if (window.getComputedStyle(navbarToggler).display !== 'none') {
+                navbarToggler.click();
+            }
+        });
+    });
+
+});

package.json

@@ -1,7 +1,7 @@
 {
     "title": "Agency",
     "name": "startbootstrap-agency",
-    "version": "6.0.5",
+    "version": "7.0.0",
     "scripts": {
         "build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets",
         "build:assets": "node scripts/build-assets.js",
@@ -36,17 +36,17 @@
         "url": "https://github.com/StartBootstrap/startbootstrap-agency.git"
     },
     "dependencies": {
-        "bootstrap": "4.6.0"
+        "bootstrap": "5.0.1"
     },
     "devDependencies": {
         "autoprefixer": "10.2.5",
         "browser-sync": "2.26.14",
         "chokidar": "3.5.1",
-        "concurrently": "6.0.2",
+        "concurrently": "6.1.0",
-        "postcss": "8.2.13",
+        "postcss": "8.2.15",
-        "prettier": "2.2.1",
+        "prettier": "2.3.0",
         "pug": "3.0.2",
-        "sass": "1.32.11",
+        "sass": "1.32.13",
         "shelljs": "0.8.4",
         "upath": "2.0.1"
     }

src/js/scripts.js

@@ -1,51 +1,49 @@
-(function ($) {
+//
-    "use strict"; // Start of use strict
+// Scripts
+// 
 
-    // Smooth scrolling using anime.js
+window.addEventListener('DOMContentLoaded', event => {
-    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
+
-        if (
+    // Navbar shrink function
-            location.pathname.replace(/^\//, "") ==
+    var navbarShrink = function () {
-            this.pathname.replace(/^\//, "") &&
+        const navbarCollapsible = document.body.querySelector('#mainNav');
-            location.hostname == this.hostname
+        if (!navbarCollapsible) {
-        ) {
+            return;
-            var target = $(this.hash);
-            target = target.length ?
-                target :
-                $("[name=" + this.hash.slice(1) + "]");
-            if (target.length) {
-                anime({
-                    targets: 'html, body',
-                    scrollTop: target.offset().top - 72,
-                    duration: 1000,
-                    easing: 'easeInOutExpo'
-                });
-                return false;
         }
+        if (window.scrollY === 0) {
+            navbarCollapsible.classList.remove('navbar-shrink')
+        } else {
+            navbarCollapsible.classList.add('navbar-shrink')
         }
-    });
 
-    // Closes responsive menu when a scroll trigger link is clicked
+    };
-    $(".js-scroll-trigger").on('click', function () {
-        $(".navbar-collapse").collapse("hide");
-    });
 
-    // Activate scrollspy to add active class to navbar items on scroll
+    // Shrink the navbar 
-    $("body").scrollspy({
+    navbarShrink();
-        target: "#mainNav",
+
+    // Shrink the navbar when page is scrolled
+    document.addEventListener('scroll', navbarShrink);
+
+    // Activate Bootstrap scrollspy on the main nav element
+    const mainNav = document.body.querySelector('#mainNav');
+    if (mainNav) {
+        new bootstrap.ScrollSpy(document.body, {
+            target: '#mainNav',
             offset: 74,
         });
-
-    // Collapse Navbar
-    var navbarCollapse = function () {
-        if ($("#mainNav").offset().top > 100) {
-            $("#mainNav").addClass("navbar-shrink");
-        } else {
-            $("#mainNav").removeClass("navbar-shrink");
-        }
     };
-    // Collapse now if page is not at top
-    navbarCollapse();
-    // Collapse the navbar when page is scrolled
-    $(window).on('scroll', navbarCollapse);
 
-})(jQuery); // End of use strict
+    // Collapse responsive navbar when toggler is visible
+    const navbarToggler = document.body.querySelector('.navbar-toggler');
+    const responsiveNavItems = [].slice.call(
+        document.querySelectorAll('#navbarResponsive .nav-link')
+    );
+    responsiveNavItems.map(function (responsiveNavItem) {
+        responsiveNavItem.addEventListener('click', () => {
+            if (window.getComputedStyle(navbarToggler).display !== 'none') {
+                navbarToggler.click();
+            }
+        });
+    });
+
+});

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

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

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

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

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

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

src/pug/index.pug

@@ -10,6 +10,7 @@ html(lang='en')
 
         title Agency - Start Bootstrap Theme
 
+        // Favicon
         link(rel='icon', type='image/x-icon', href='assets/favicon.ico')
 
         // Font Awesome icons (free version)
@@ -27,29 +28,29 @@ html(lang='en')
         // Navigation
         nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top
             .container
-                a.navbar-brand.js-scroll-trigger(href='#page-top')
+                a.navbar-brand(href='#page-top')
                     img(src='assets/img/navbar-logo.svg', alt='...')
-                button.navbar-toggler.navbar-toggler-right(type='button', data-toggle='collapse', data-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
+                button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
                     | Menu
-                    i.fas.fa-bars.ml-1
+                    i.fas.fa-bars.ms-1
                 #navbarResponsive.collapse.navbar-collapse
-                    ul.navbar-nav.text-uppercase.ml-auto
+                    ul.navbar-nav.text-uppercase.ms-auto.py-4.py-lg-0
                         li.nav-item
-                            a.nav-link.js-scroll-trigger(href='#services') Services
+                            a.nav-link(href='#services') Services
                         li.nav-item
-                            a.nav-link.js-scroll-trigger(href='#portfolio') Portfolio
+                            a.nav-link(href='#portfolio') Portfolio
                         li.nav-item
-                            a.nav-link.js-scroll-trigger(href='#about') About
+                            a.nav-link(href='#about') About
                         li.nav-item
-                            a.nav-link.js-scroll-trigger(href='#team') Team
+                            a.nav-link(href='#team') Team
                         li.nav-item
-                            a.nav-link.js-scroll-trigger(href='#contact') Contact
+                            a.nav-link(href='#contact') Contact
         // Masthead
         header.masthead
             .container
                 .masthead-subheading Welcome To Our Studio!
                 .masthead-heading.text-uppercase It's Nice To Meet You
-                a.btn.btn-primary.btn-xl.text-uppercase.js-scroll-trigger(href='#services') Tell Me More
+                a.btn.btn-primary.btn-xl.text-uppercase(href='#services') Tell Me More
 
         // Services
         section#services.page-section
@@ -88,62 +89,68 @@ 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-toggle='modal', href='#portfolioModal1')
+                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal1')
                                 .portfolio-hover
                                     .portfolio-hover-content
                                         i.fas.fa-plus.fa-3x
-                                img.img-fluid(src='assets/img/portfolio/01-thumbnail.jpg', alt='...')
+                                img.img-fluid(src='assets/img/portfolio/1.jpg', alt='...')
                             .portfolio-caption
                                 .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-toggle='modal', href='#portfolioModal2')
+                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal2')
                                 .portfolio-hover
                                     .portfolio-hover-content
                                         i.fas.fa-plus.fa-3x
-                                img.img-fluid(src='assets/img/portfolio/02-thumbnail.jpg', alt='...')
+                                img.img-fluid(src='assets/img/portfolio/2.jpg', alt='...')
                             .portfolio-caption
                                 .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-toggle='modal', href='#portfolioModal3')
+                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal3')
                                 .portfolio-hover
                                     .portfolio-hover-content
                                         i.fas.fa-plus.fa-3x
-                                img.img-fluid(src='assets/img/portfolio/03-thumbnail.jpg', alt='...')
+                                img.img-fluid(src='assets/img/portfolio/3.jpg', alt='...')
                             .portfolio-caption
                                 .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-toggle='modal', href='#portfolioModal4')
+                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal4')
                                 .portfolio-hover
                                     .portfolio-hover-content
                                         i.fas.fa-plus.fa-3x
-                                img.img-fluid(src='assets/img/portfolio/04-thumbnail.jpg', alt='...')
+                                img.img-fluid(src='assets/img/portfolio/4.jpg', alt='...')
                             .portfolio-caption
                                 .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-toggle='modal', href='#portfolioModal5')
+                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal5')
                                 .portfolio-hover
                                     .portfolio-hover-content
                                         i.fas.fa-plus.fa-3x
-                                img.img-fluid(src='assets/img/portfolio/05-thumbnail.jpg', alt='...')
+                                img.img-fluid(src='assets/img/portfolio/5.jpg', alt='...')
                             .portfolio-caption
                                 .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-toggle='modal', href='#portfolioModal6')
+                            a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal6')
                                 .portfolio-hover
                                     .portfolio-hover-content
                                         i.fas.fa-plus.fa-3x
-                                img.img-fluid(src='assets/img/portfolio/06-thumbnail.jpg', alt='...')
+                                img.img-fluid(src='assets/img/portfolio/6.jpg', alt='...')
                             .portfolio-caption
                                 .portfolio-caption-heading Window
                                 .portfolio-caption-subheading.text-muted Photography
@@ -214,7 +221,7 @@ html(lang='en')
                     .col-lg-4
                         .team-member
                             img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='...')
-                            h4 Kay Garland
+                            h4 Parveen Anand
                             p.text-muted Lead Designer
                             a.btn.btn-dark.btn-social.mx-2(href='#!')
                                 i.fab.fa-twitter
@@ -225,7 +232,7 @@ html(lang='en')
                     .col-lg-4
                         .team-member
                             img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='...')
-                            h4 Larry Parker
+                            h4 Diana Petersen
                             p.text-muted Lead Marketer
                             a.btn.btn-dark.btn-social.mx-2(href='#!')
                                 i.fab.fa-twitter
@@ -236,7 +243,7 @@ html(lang='en')
                     .col-lg-4
                         .team-member
                             img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='...')
-                            h4 Diana Petersen
+                            h4 Larry Parker
                             p.text-muted Lead Developer
                             a.btn.btn-dark.btn-social.mx-2(href='#!')
                                 i.fab.fa-twitter
@@ -272,21 +279,21 @@ html(lang='en')
                 .text-center
                     h2.section-heading.text-uppercase Contact Us
                     h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
-                form#contactForm(name='sentMessage', novalidate='novalidate')
+                form#contactForm
                     .row.align-items-stretch.mb-5
                         .col-md-6
                             .form-group
-                                input#name.form-control(type='text', placeholder='Your Name *', required='required', data-validation-required-message='Please enter your name.')
+                                input#name.form-control(type='text', placeholder='Your Name *', required='required')
                                 p.help-block.text-danger
                             .form-group
-                                input#email.form-control(type='email', placeholder='Your Email *', required='required', data-validation-required-message='Please enter your email address.')
+                                input#email.form-control(type='email', placeholder='Your Email *', required='required')
                                 p.help-block.text-danger
                             .form-group.mb-md-0
-                                input#phone.form-control(type='tel', placeholder='Your Phone *', required='required', data-validation-required-message='Please enter your phone number.')
+                                input#phone.form-control(type='tel', placeholder='Your Phone *', required='required')
                                 p.help-block.text-danger
                         .col-md-6
                             .form-group.form-group-textarea.mb-md-0
-                                textarea#message.form-control(placeholder='Your Message *', required='required', data-validation-required-message='Please enter a message.')
+                                textarea#message.form-control(placeholder='Your Message *', required='required')
                                 p.help-block.text-danger
                     .text-center
                             #success
@@ -296,7 +303,7 @@ html(lang='en')
         footer.footer.py-4
             .container
                 .row.align-items-center
-                    .col-lg-4.text-lg-left
+                    .col-lg-4.text-lg-start
                         | Copyright © Your Website
                         // This script automatically adds the current year to your website footer
                         // (credit: https://updateyourfooter.com/)
@@ -309,154 +316,20 @@ html(lang='en')
                             i.fab.fa-facebook-f
                         a.btn.btn-dark.btn-social.mx-2(href='#!')
                             i.fab.fa-linkedin-in
-                    .col-lg-4.text-lg-right
+                    .col-lg-4.text-lg-end
-                        a.mr-3(href='#!') Privacy Policy
+                        a.link-dark.text-decoration-none.me-3(href='#!') Privacy Policy
-                        a(href='#!') Terms of Use
+                        a.link-dark.text-decoration-none(href='#!') Terms of Use
 
         // Portfolio Modals
-        // Modal 1
+        include includes/portfolio-modal-1
-        #portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
+        include includes/portfolio-modal-2
-            .modal-dialog
+        include includes/portfolio-modal-3
-                .modal-content
+        include includes/portfolio-modal-4
-                    .close-modal(data-dismiss='modal')
+        include includes/portfolio-modal-5
-                        img(src='assets/img/close-icon.svg', alt='Close modal')
+        include includes/portfolio-modal-6
-                    .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/01-full.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-dismiss='modal', type='button')
-                                        i.fas.fa-times.mr-1
-                                        | Close Project
-        // Modal 2
-        #portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-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/02-full.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-dismiss='modal', type='button')
-                                        i.fas.fa-times.mr-1
-                                        | Close Project
-        // Modal 3
-        #portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-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/03-full.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-dismiss='modal', type='button')
-                                        i.fas.fa-times.mr-1
-                                        | Close Project
-        // Modal 4
-        #portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-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/04-full.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-dismiss='modal', type='button')
-                                        i.fas.fa-times.mr-1
-                                        | Close Project
-        // Modal 5
-        #portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-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/05-full.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-dismiss='modal', type='button')
-                                        i.fas.fa-times.mr-1
-                                        | Close Project
-        // Modal 6
-        #portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
-            .modal-dialog
-                .modal-content
-                    .close-modal(data-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/06-full.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(data-dismiss='modal', type='button')
-                                        i.fas.fa-times.mr-1
-                                        | Close Project
 
         // Bootstrap core JS
-        script(src='https://code.jquery.com/jquery-3.5.1.min.js')
+        script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js')
-        script(src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js')
-
-        // Third party plugin JS
-        script(src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js')
-
-        // Contact form JS
-        script(src='assets/mail/jqBootstrapValidation.js')
-        script(src='assets/mail/contact_me.js')
 
         // Core theme JS
         script(src='js/scripts.js')

src/scss/_global.scss

@@ -1,12 +1,29 @@
-// Global styling for this template
+// 
+// Global theme styling
+// 
+
+// Scroll padding for all scroll targets on page used with
+// native CSS smooth scrolling
+// 
+// https://caniuse.com/?search=scroll-padding
+
+html {
+    scroll-padding-top: 4.5rem;
+}
+
 body {
+    position: relative;
     overflow-x: hidden;
 }
 
+// Adjust the line height of paragraphs
+
 p {
-    line-height: 1.75;
+    line-height: $line-height-lg;
 }
 
+// Spacing and heading styling for page sections
+
 .page-section {
     padding: 6rem 0;
 
@@ -25,28 +42,11 @@ p {
     }
 }
 
+// Increase the padding on sections when screen size is greater
+// than the medium breakpoint (set by Bootstrap)
+
 @include media-breakpoint-up(md) {
     section {
         padding: 9rem 0;
     }
 }
-
-// Highlight color customization
-
-::-moz-selection {
-    background: $primary;
-    text-shadow: none;
-}
-
-::selection {
-    background: $primary;
-    text-shadow: none;
-}
-
-img::selection {
-    background: transparent;
-}
-
-img::-moz-selection {
-    background: transparent;
-}

src/scss/_variables.scss

@@ -1,4 +1,8 @@
+//
+// Variables
+//
+
+// Import variables from src/scss/variables
+
 @import "./variables/colors.scss";
 @import "./variables/typography.scss";
-@import "./variables/spacing.scss";
-@import "./variables/grid.scss";

src/scss/components/_buttons.scss

@@ -1,4 +1,8 @@
-// Button Styles
+//
+// Buttons
+//
+
+// Create a new xl button variant
 
 .btn-xl {
     padding: 1.25rem 2.5rem;
@@ -7,6 +11,8 @@
     font-weight: $headings-font-weight;
 }
 
+// Create a new social button variant
+
 .btn-social {
     height: 2.5rem;
     width: 2.5rem;

src/scss/components/_navbar.scss

@@ -1,17 +1,19 @@
-// Styling for the navbar
+//
+// Navbar
+//
+
 #mainNav {
     padding-top: 1rem;
     padding-bottom: 1rem;
     background-color: $gray-900;
 
     .navbar-toggler {
+
         padding: 0.75rem;
-        font-family: $headings-font-family;
         font-size: 0.75rem;
-        color: $white;
+        font-family: $headings-font-family;
         text-transform: uppercase;
-        background-color: $primary;
+        font-weight: $font-weight-bold;
-        border: 0;
     }
 
     .navbar-brand {

src/scss/sections/_contact.scss

@@ -1,4 +1,7 @@
-// Styling for the contact section
+//
+// Contact section styling
+//
+
 section#contact {
     background-color: $gray-900;
     background-image: url("../assets/img/map-image.png");

src/scss/sections/_footer.scss

@@ -1,4 +1,7 @@
-// Styling for the footer
+//
+// Footer section styling
+//
+
 .footer {
     text-align: center;
     font-size: 0.9rem;

src/scss/sections/_masthead.scss

@@ -1,4 +1,7 @@
-// Styling for the masthead
+//
+// Masthead section styling
+//
+
 header.masthead {
     padding-top: 6rem + 4.5rem;
     padding-bottom: 6rem;

src/scss/sections/_portfolio.scss

@@ -1,7 +1,10 @@
-// Styling for the portfolio section
+//
+// Portfolio section styling
+//
+
 #portfolio {
     .portfolio-item {
-        max-width: 25rem;
+        max-width: 26rem;
         margin-left: auto;
         margin-right: auto;
 

src/scss/sections/_team.scss

@@ -1,4 +1,7 @@
-// Styling for the team section
+//
+// Team section styling
+//
+
 .team-member {
     margin-bottom: 3rem;
     text-align: center;

src/scss/sections/_timeline.scss

@@ -1,4 +1,7 @@
-// Styling for the timeline section
+//
+// Timeline section styling
+//
+
 .timeline {
     position: relative;
     padding: 0;

src/scss/styles.scss

@@ -1,3 +1,7 @@
+//
+// Styles
+//
+
 // Import variables
 @import "./variables.scss";
 

src/scss/variables/_colors.scss

@@ -1,11 +1,15 @@
-// Override Bootstrap color system
+//
+// Colors
+//
 
-$yellow: #fed136;
+// Override Bootstrap color variables
 
-// Override Bootstrap default state colors
+$yellow: #ffc800;
+
+// Override Bootstrap state colors variables
 
 $primary: $yellow;
 
-// Override Bootstrap yiq lightness value
+// Override Bootstrap contrast ratio
 
-$yiq-contrasted-threshold: 205;
+$min-contrast-ratio: 1.5;

src/scss/variables/_grid.scss

@@ -1,5 +0,0 @@
-// Override Bootstrap grid column variables
-//
-// Override the spacing between columns to add symmetry to the layout
-
-$grid-gutter-width: $spacer * 1.5;

src/scss/variables/_spacing.scss

@@ -1,7 +0,0 @@
-// Restate and add to the Bootstrap default spacing variables
-//
-// The spacer is restated in order to add new entries to the $spacers map
-// The 10 and n1 through n10 spacers are newly added allowing for larger
-// spacing options and negative padding and margin utilities
-
-$spacer: 1rem;

src/scss/variables/_typography.scss

@@ -1,14 +1,54 @@
-// Override Bootstrap typography variables
+//
+// Typography
+//
 
-$font-family-base: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI",
+// Override the default Bootstrap base font family
-    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+// 
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+// Roboto Slab is being used below and is brought in
+// via Google fonts in the head of src/pug/index.pug.
+// The fonts listed afterwards are fallbacks.
 
-$headings-font-family: "Montserrat", -apple-system, BlinkMacSystemFont,
+$font-family-base: "Roboto Slab",
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+-apple-system,
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+BlinkMacSystemFont,
+"Segoe UI",
+Roboto,
+"Helvetica Neue",
+Arial,
+sans-serif,
+"Apple Color Emoji",
+"Segoe UI Emoji",
+"Segoe UI Symbol",
+"Noto Color Emoji";
+
+// Override the default Bootstrap headings font family
+// 
+// Montserrat is being used below and is brought in
+// via Google fonts in the head of src/pug/index.pug.
+// The fonts listed afterwards are fallbacks.
+
+$headings-font-family: "Montserrat",
+-apple-system,
+BlinkMacSystemFont,
+"Segoe UI",
+Roboto,
+"Helvetica Neue",
+Arial,
+sans-serif,
+"Apple Color Emoji",
+"Segoe UI Emoji",
+"Segoe UI Symbol",
+"Noto Color Emoji";
+
+// Create a subheadings font family
 
 $subheadings-font-family: $font-family-base;
 
+// Override Bootstrap default headings variables
+
 $headings-font-weight: 700;
 $headings-letter-spacing: 0.0625em;
+
+// Override default Bootstrap line height variables
+
+$line-height-lg: 1.75;