Updates to Projects Page

Export/about.html

@@ -120,6 +120,7 @@
     <link rel="stylesheet" href="assets/css/pikaday.min.css">
     <link rel="stylesheet" href="assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -130,6 +131,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link active" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -151,22 +155,18 @@
                         <p style="margin-bottom: 15px;margin-top: 25px;">I am <strong>Alexander Davis.</strong></p><h2 style="margin-bottom: 25px;"><u class="coloured-underline">I&#39;m a <span class="txt-rotate" data-period="1000" data-rotate="[ &quot;Web Designer.&quot;, &quot;Head of Computing.&quot;, &quot;Programmer.&quot;, &quot;Media Production Assistant.&quot;,&quot;Solutions Consultant.&quot; ]"></span></u></h2>
                     </div>
                     <div class="col-md-4">
-                        <picture><img src="assets/img/brand/headshot.webp" style="height: 500px;"></picture>
+                        <picture><img class="w-100 h-auto" src="assets/img/brand/headshot.webp" style="height: 500px;"></picture>
                     </div>
                 </div>
             </div>
             <div class="container">
-                <div class="row">
+                <p style="margin-top: 15px;">I have been a huge fan of technology from a young age and I'm always looking out for the latest gadgets on the market.<br><br>This site is mainly to showcase my work with local organisations and companies around the West Midlands, most of which are based in Coventry.<br><br>If you would like more information about my work or you would like me to work with you, feel free to contact me!</p>
-                    <div class="col-md-8 col-xl-12" style="align-content: center;">
-                        <p style="margin-top: 15px;">I have been a huge fan of technology from a young age and I'm always looking out for the latest gadgets on the market.<br><br>This site is mainly to showcase my work with local organisations and companies around the West Midlands, most of which are based in Coventry.<br><br>If you would like more information about my work or you would like me to work with you, feel free to contact me!</p>
-                    </div>
-                </div>
             </div>
         </section>
-        <div class="accordion work-experience group" role="tablist" id="accordion-1" style="margin-left: 125px;margin-right: 125px;">
+        <div class="accordion min-vw-100 work-experience group" role="tablist" id="accordion-1" style="margin-left: auto;margin-right: auto;">
             <div class="accordion-item portfolio-block cv" style="padding-bottom: 0px;padding-top: 0px;">
-                <h2 class="accordion-header" role="tab" style="margin-bottom: 0px;"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1">Teaching Experience</button></h2>
+                <h2 class="accordion-header" role="tab" style="margin-bottom: 0px;"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="false" aria-controls="accordion-1 .item-1">Teaching Experience</button></h2>
-                <div class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordion-1">
+                <div class="accordion-collapse collapse item-1" role="tabpanel" data-bs-parent="#accordion-1">
                     <div class="accordion-body">
                         <div class="heading" style="margin-bottom: 25px;">
                             <h2 class="text-capitalize text-center" style="margin-bottom: 0px;">Teaching Experience</h2>
@@ -174,37 +174,33 @@
                         <div class="work-experience group" style="margin-top: 25px;margin-right: auto;margin-left: auto;">
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-md-7">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">07/2023 - Present</span>
                                         <h3>Duke of Edinburgh Programme Lead</h3><span class="badge rounded-pill bg-primary">The Mercian Trust</span>
                                     </div>
-                                    <div class="col-md-5 text-end"><span class="text-muted period">07/2023 - Present</span></div>
                                 </div>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit ultricies, feugiat est sed, efficitur nunc, vivamus vel accumsan dui.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-md-6">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">01/2023 - Present</span>
                                         <h3>Head of Computing</h3><span class="badge rounded-pill bg-primary">The Mercian Trust</span>
                                     </div>
-                                    <div class="col-md-6 text-end"><span class="text-muted period">01/2023 - Present</span></div>
                                 </div>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit ultricies, feugiat est sed, efficitur nunc, vivamus vel accumsan dui.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-md-7">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">02/2022 - 11/2022</span>
                                         <h3>Duke of Edinburgh Centre Manager</h3><span class="badge rounded-pill bg-primary">Central Region Schools Trust</span>
                                     </div>
-                                    <div class="col-md-5 text-end"><span class="text-muted period">02/2022 - 11/2022</span></div>
                                 </div>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit ultricies, feugiat est sed, efficitur nunc, vivamus vel accumsan dui.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-6">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">09/2018 - 12/2022</span>
                                         <h3>Teacher of Computer Science</h3><span class="badge rounded-pill bg-primary">Central Region Schools Trust</span>
                                     </div>
-                                    <div class="col-md-6 text-end"><span class="text-muted period">09/2018 - 12/2022</span></div>
                                 </div>
                                 <p>Created, developed and delivered appropriate Computing National Curriculum for the school and&nbsp;wider trust. Taken a pastoral role as a form tutor to engage with year 10 students delivering several PSHCE sessions which they are given the chance to voice their opinions of everyday issues.&nbsp;Primary teacher of Key Stage 3 Computing, Year 11 Computer Science and Year 12 BTEC IT students.</p>
                             </div>
@@ -222,55 +218,49 @@
                         <div class="work-experience group" style="margin-top: 25px;margin-right: auto;margin-left: auto;">
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-md-6">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">02/2016 -&nbsp;<strong>07/2017</strong></span>
                                         <h3>Student Academic Partner</h3><span class="badge rounded-pill bg-primary">Birmingham City University</span>
                                     </div>
-                                    <div class="col-md-6"><span class="text-muted period">02/2016 -&nbsp;<strong>07/2017</strong></span></div>
                                 </div>
                                 <p>Helped lecturers within research projects.&nbsp;The main project developed and delivered a student support pack for students with learning difficulties such as Dyslexia and Dyspraxia.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-md-6">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">02/2017 -&nbsp;<strong>07/2017</strong></span>
                                         <h3>Data Entry Assistant</h3><span class="badge rounded-pill bg-primary">Birmingham City University</span>
                                     </div>
-                                    <div class="col-md-6"><span class="text-muted period">02/2017 -&nbsp;<strong>07/2017</strong></span></div>
                                 </div>
                                 <p>Entered information that students have filled into their mid-module evaluations.&nbsp; Also linked these forms to the relevant modules and send the completed reports to the module coordinator.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-md-6">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">02/2016 -&nbsp;<strong>06/2016</strong></span>
                                         <h3>Demonstrator</h3><span class="badge rounded-pill bg-primary">Birmingham City University</span>
                                     </div>
-                                    <div class="col-md-6"><span class="text-muted period">02/2016 -&nbsp;<strong>06/2016</strong></span></div>
                                 </div>
                                 <p>Supported academic staff and fellow demonstrators with ensuring students were completing set work and assisting if they had questions. Provided in-depth support surrounding web design projects as part of their module including troubleshooting programming issues and errors encountered by students during lab sessions. Ensured electronic equipment was used correctly and completing basic troubleshooting if equipment did not work.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-md-6 col-xl-7">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">06/2015 -&nbsp;<strong>07/2016</strong></span>
                                         <h3>Services Support Assistant/Checkout Team Leader</h3><span class="badge rounded-pill bg-primary">WM Morrison Supermarkets PLC</span>
                                     </div>
-                                    <div class="col-md-6 col-xl-4"><span class="text-muted period">06/2015 -&nbsp;<strong>07/2016</strong></span></div>
                                 </div>
                                 <p>Supported customers requiring help on the checkouts, car park, cafe, dry cleaning and kiosk.&nbsp;Assisted Team Managers with the closedown, change runs and some of the administration work.&nbsp;Also dealt with personnel issues such as appraisals, disciplinary and general staffing issues.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-6">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">11/2014 - 11/2015</span>
                                         <h3>Grocery Sales Assistant</h3><span class="badge rounded-pill bg-primary">WM Morrison Supermarkets PLC</span>
                                     </div>
-                                    <div class="col-md-6"><span class="text-muted period">11/2014 - 11/2015</span></div>
                                 </div>
                                 <p>Restocked shelves, reduce damaged items and process goods not for resale. Helped customers locate items that they require.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-6">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">11/2013 - 11/2014</span>
                                         <h3>Trolley Assistant</h3><span class="badge rounded-pill bg-primary">WM Morrison Supermarkets PLC</span>
                                     </div>
-                                    <div class="col-md-6"><span class="text-muted period">11/2013 - 11/2014</span></div>
                                 </div>
                                 <p>Collected baskets and trolleys around the premises and ensures that they are both clean and safe for the next customer. Required to work to tight deadlines during the evening to ensure that the next team could continue the work in a safe and clean environment.</p>
                             </div>
@@ -288,10 +278,9 @@
                         <div class="work-experience group" style="margin-top: 25px;">
                             <div class="item" style="margin-top: 25px;">
                                 <div class="row">
-                                    <div class="col-md-6 col-xl-7">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">07/2023 - Present</span>
                                         <h3>Children’s Workforce Children and Youth Worker</h3><span class="badge rounded-pill bg-primary">The Parish of Keresley with Coundon</span>
                                     </div>
-                                    <div class="col-md-6 col-xl-4 d-flex justify-content-end"><span class="text-muted period">07/2023 - Present</span></div>
                                 </div>
                                 <p>Led groups with other members of the Church and previously helped lead the Sunday morning worship sessions. Within the week, helped plan and lead the main youth group for school years 7-11.</p>
                             </div>
@@ -300,8 +289,8 @@
                 </div>
             </div>
             <div class="accordion-item portfolio-block cv" style="padding-bottom: 0px;padding-top: 0px;">
-                <h2 class="accordion-header" role="tab" style="margin-bottom: 0px;"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-4" aria-expanded="false" aria-controls="accordion-1 .item-4">Education</button></h2>
+                <h2 class="accordion-header" role="tab" style="margin-bottom: 0px;"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-4" aria-expanded="true" aria-controls="accordion-1 .item-4">Education</button></h2>
-                <div class="accordion-collapse collapse item-4" role="tabpanel" data-bs-parent="#accordion-1">
+                <div class="accordion-collapse collapse show item-4" role="tabpanel" data-bs-parent="#accordion-1">
                     <div class="accordion-body">
                         <div class="heading" style="margin-bottom: 0px;">
                             <h2 class="text-capitalize text-center" style="margin-bottom: 0px;">Education</h2>
@@ -309,38 +298,33 @@
                         <div class="education group" style="margin-top: 25px;margin-right: auto;margin-left: auto;">
                             <div class="item" style="margin-top: 25px;">
                                 <div class="row">
-                                    <div class="col-xl-9">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">10/2020 - 08/2023</span>
                                         <h3>Masters in Education (Teaching &amp; Learning)</h3><span class="badge rounded-pill bg-secondary">The Open University</span>
                                     </div>
-                                    <div class="col-xl-3"><span class="text-muted period">10/2020 - 08/2023</span></div>
                                 </div>
                                 <p>Effectively used information technology and information literacy skills to search for,&nbsp;exchange, process and evaluate information, framed and addressing problems, questions and issues.&nbsp;Demonstrated logical thought and the ability to form a clearly structured&nbsp;argument using established ideas and techniques of critical analysis and enquiry in&nbsp;<br>evaluating information, arguments and assumptions.</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-xl-9">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period"><strong>09/2017 - 08/2018</strong></span>
                                         <h3>PGCE Secondary Computer Science &amp; IT</h3><span class="badge rounded-pill bg-secondary">Birmingham City University</span>
                                     </div>
-                                    <div class="col-xl-3"><span class="text-muted period"><strong>09/2017 - 08/2018</strong></span></div>
                                 </div>
                                 <p>Vice-president of the Mental Health Awareness&nbsp;society in 2017-2018 planned and coordinated events across the&nbsp;university for students with a wide range of mental health and invisible&nbsp;illnesses.&nbsp;</p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-xl-9">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period"><strong>09/2014 - 08/2017</strong></span>
                                         <h3>Bachelor of Science with Honours in Computer Science</h3><span class="badge rounded-pill bg-secondary">Birmingham City University</span>
                                     </div>
-                                    <div class="col-xl-3"><span class="text-muted period"><strong>09/2014 - 08/2017</strong></span></div>
                                 </div>
                                 <p>Regular member of the Christian Union and helped them design and maintain their website. Co-founding President of BCU Mental Health Awareness contacting organisations and planning events with a team of students.<br>Units&nbsp;include: Data Analysis, Software Development, Computer and Network&nbsp;Fundamentals, IT Professionalism, Web Technologies and Open Source Systems.</p>
-                                <p></p>
                             </div>
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-xl-9">
+                                    <div><span class="text-muted d-flex d-sm-flex d-md-flex justify-content-end period">09/2006 - 08/2014</span>
                                         <h3>Secondary &amp; Further Education</h3><span class="badge rounded-pill bg-secondary">Coundon Court School</span>
                                     </div>
-                                    <div class="col-xl-3"><span class="text-muted period">09/2006 - 08/2014</span></div>
                                 </div>
                                 <p>10 GCSEs (or equivalent) incl. English, Maths and Science<br>3 A Levels (or equivalent) in IT (QCF), Computing and Product Design</p>
                             </div>
@@ -349,9 +333,6 @@
                 </div>
             </div>
         </div>
-        <section class="portfolio-block cv" style="padding-bottom: 25px;padding-top: 25px;">
-            <div class="container"></div>
-        </section>
     </main>
     <footer class="text-body bg-body" id="Light-Footer" data-bs-theme="light">
         <div class="container py-4 py-lg-5">
@@ -498,6 +479,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="assets/js/pikaday.min.js"></script>

Export/assets/css/Carousel---Slider-With-Animation.css

@@ -0,0 +1,168 @@
+.carousel-item {
+  height: 600px;
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-item img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  transition: transform 1s ease;
+}
+
+.carousel-caption {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  width: 100%;
+  padding: 0;
+}
+
+.carousel-text-container {
+  position: relative;
+  z-index: 4;
+  opacity: 0;
+  transform: translateX(100px);
+  transition: all 1s ease;
+}
+
+.carousel-button {
+  transition: all 1s ease;
+}
+
+.carousel-button .btn {
+  background-color: #38c3ff;
+  color: #ffffff;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1.2em;
+  border-radius: 5px;
+  cursor: pointer;
+  z-index: 7;
+}
+
+.carousel-overlay {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(70% - 450px);
+  height: 170%;
+  background-color: rgba(89,170,204,0.6);
+  z-index: 2;
+  transition: all 1s ease;
+  border-radius: 4px;
+  padding-top: 50px;
+  display: block;
+}
+
+.carousel-item.active img {
+  transform: translateX(0);
+}
+
+.carousel-item.active .carousel-text-container {
+  opacity: 1;
+  transform: translateX(0);
+  transition-delay: 0.2s;
+}
+
+.carousel-item.active .carousel-button {
+  opacity: 1;
+  transition-delay: 1.2s;
+}
+
+.carousel-item.active .carousel-overlay {
+  top: -50px;
+}
+
+.heading_titles {
+  margin-top: 70px !important;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  font-weight: 700;
+}
+
+.btn_view_more {
+  margin-top: 15px;
+  z-index: 3 !important;
+  opacity: 1;
+  position: relative;
+}
+
+@media (max-width: 1480px) {
+  .carousel-overlay {
+    width: calc(60% + 50px);
+  }
+}
+
+@media (max-width: 768px) {
+  .btn_view_more {
+    /*margin-top: 15px;*/
+    z-index: 3 !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-button .btn {
+    font-size: 1em;
+    padding: 0.5rem 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-item {
+    height: 500px;
+    z-index: 7;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-overlay {
+    width: calc(80% + 50px);
+  }
+}
+
+@media (max-width: 576px) {
+  .carousel-button .btn {
+    font-size: 0.8em;
+    padding: .4rem .8rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .carousel-item {
+    height: 400px;
+  }
+}
+
+@media (max-width: 576px) {
+  .carousel-overlay {
+    width: calc(90% + 50px);
+  }
+}
+
+.small_heading {
+  text-shadow: 2px 2px 8px rgb(67,67,67);
+}
+
+.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  padding-right: calc(var(--bs-gutter-x) * .5);
+  padding-left: calc(var(--bs-gutter-x) * .5);
+  margin-right: auto;
+  margin-left: auto;
+  padding: 0px;
+  margin: 0px;
+}
+
+.container-fluid {
+  padding: 0px;
+  margin: 0px;
+}
+

Export/assets/css/styles.css

@@ -234,3 +234,7 @@
   object-fit: cover;
 }
 
+.dropdown:hover .dropdown-menu {
+  display: block;
+}
+

Export/assets/js/Carousel---Slider-With-Animation-slider_with_animation.js

@@ -0,0 +1,12 @@
+        //Optional: Pause/play on hover. Remove this block if not needed
+        const carousel = document.getElementById('carouselExampleCaptions')
+
+        carousel.addEventListener('mouseover', function () {
+            const carouselInstance = bootstrap.Carousel.getInstance(carousel)
+            carouselInstance.pause()
+        })
+
+        carousel.addEventListener('mouseout', function () {
+            const carouselInstance = bootstrap.Carousel.getInstance(carousel)
+            carouselInstance.cycle()
+        })

Export/blog.html

@@ -120,6 +120,7 @@
     <link rel="stylesheet" href="assets/css/pikaday.min.css">
     <link rel="stylesheet" href="assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -130,6 +131,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -149,7 +153,7 @@
                     <h1>Latest Updates</h1>
                 </div>
                 <div data-bss-type="blog-loop" data-bss-perpage="6" data-bss-page-param="pg" style="display: none !important;">
-                    <div class="row row-cols-3" data-bss-type="blog-loop-base">
+                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3" data-bss-type="blog-loop-base">
                         <div class="col post-tag-aspirations post-tag-goals post-tag-career post-author-mr-a-davis" data-bss-type="blog-loop-item" style="padding-bottom: 15px;">
                             <div class="card"><a href="blog/clearing-the-clutter.html"><img class="card-img-top rainbow-border" src="assets/img/blog/clearning-the-clutter.jpg"></a>
                                 <div class="card-body" style="min-height: 250px;"><a href="blog/clearing-the-clutter.html">
@@ -778,6 +782,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="assets/js/pikaday.min.js"></script>

Export/blog/acknowledgements-and-dedications.html

@@ -121,6 +121,7 @@
     <link rel="stylesheet" href="../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -131,6 +132,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -730,6 +734,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../assets/js/bs-init.js"></script>
+    <script src="../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../assets/js/pikaday.min.js"></script>

Export/blog/clearing-the-clutter.html

@@ -121,6 +121,7 @@
     <link rel="stylesheet" href="../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -131,6 +132,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -732,6 +736,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../assets/js/bs-init.js"></script>
+    <script src="../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../assets/js/pikaday.min.js"></script>

Export/blog/edtext-rollout-strategies.html

@@ -122,6 +122,7 @@
     <link rel="stylesheet" href="../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -132,6 +133,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -731,6 +735,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../assets/js/bs-init.js"></script>
+    <script src="../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../assets/js/pikaday.min.js"></script>

Export/blog/its-been-a-while.html

@@ -121,6 +121,7 @@
     <link rel="stylesheet" href="../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -131,6 +132,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -729,6 +733,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../assets/js/bs-init.js"></script>
+    <script src="../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../assets/js/pikaday.min.js"></script>

Export/blog/marking-the-milestone.html

@@ -121,6 +121,7 @@
     <link rel="stylesheet" href="../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -131,6 +132,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -737,6 +741,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../assets/js/bs-init.js"></script>
+    <script src="../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../assets/js/pikaday.min.js"></script>

Export/blog/somethings-not-right.html

@@ -121,6 +121,7 @@
     <link rel="stylesheet" href="../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -131,6 +132,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -750,6 +754,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../assets/js/bs-init.js"></script>
+    <script src="../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../assets/js/pikaday.min.js"></script>

Export/blog/what-started-it-all.html

@@ -122,6 +122,7 @@
     <link rel="stylesheet" href="../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -132,6 +133,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -731,6 +735,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../assets/js/bs-init.js"></script>
+    <script src="../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../assets/js/pikaday.min.js"></script>

Export/contact.html

@@ -120,6 +120,7 @@
     <link rel="stylesheet" href="assets/css/pikaday.min.css">
     <link rel="stylesheet" href="assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -130,6 +131,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -304,6 +308,7 @@
     <script src="assets/js/smart-forms.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="assets/js/pikaday.min.js"></script>

Export/index.html

@@ -128,6 +128,7 @@
     <link rel="stylesheet" href="assets/css/pikaday.min.css">
     <link rel="stylesheet" href="assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -138,6 +139,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link active" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link active" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -158,7 +162,7 @@
                         <h2><span class="txt-rotate" data-period="1000" data-rotate='[ "Web Designer", "Head of Computing", "Programmer", "Media Production Assistant","Solutions Consultant" ]'></span></h2>
                     </div>
                     <div class="col-md-4">
-                        <picture><img src="assets/img/brand/headshot.webp" style="height: 500px;"></picture>
+                        <picture><img class="w-100 h-auto" src="assets/img/brand/headshot.webp" style="height: 500px;"></picture>
                     </div>
                 </div>
             </div>
@@ -169,7 +173,7 @@
             <div class="row align-items-center">
                 <div class="col-md-12 col-lg-5 offset-lg-1 text">
                     <h3>Featured Project</h3>
-                    <p>CS:Box is an innovative educational tool designed to support the teaching of key concepts from the UK Computing Curriculum. Building on the foundations of Bit:Box, CS:Box expands its scope to cover a wider range of essential computing topics, providing an interactive and engaging experience for students.</p><a class="btn btn-primary" role="button" href="my-work/projects-for-education/cs_box.html">&gt; Read More</a>
+                    <p>CS:Box is an innovative educational tool designed to support the teaching of key concepts from the UK Computing Curriculum. Building on the foundations of Bit:Box, CS:Box expands its scope to cover a wider range of essential computing topics, providing an interactive and engaging experience for students.</p><a class="btn btn-primary" role="button" href="my-work/extracurricular-projects/the-computers-identity.html">&gt; Read More</a>
                 </div>
                 <div class="col-md-12 col-lg-5">
                     <div class="portfolio-laptop-mockup">
@@ -327,6 +331,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="assets/js/pikaday.min.js"></script>

Export/my-work/extracurricular-projects/the-computers-identity.html

@@ -21,9 +21,10 @@
 
 <script src="https://kit.fontawesome.com/8970d94f9b.js" crossorigin="anonymous"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Project Page - ADCM Networks</title>
+    <title>The Computer's Identity</title>
     <meta property="og:type" content="website">
-    <meta property="og:image" content="https://www.mrdaviscsit.uk/assets/img/brand/headshot.webp">
+    <meta property="og:image" content="https://www.mrdaviscsit.uk/assets/img/projects/the_computer's identity/identitypreview.png">
+    <meta name="description" content="An interactive poem entry for the BCU Christian Union &quot;Where Is Identity Found&quot; Art Competition.">
     <script>
         (function() {
 
@@ -120,6 +121,7 @@
     <link rel="stylesheet" href="../../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -130,6 +132,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -143,37 +148,61 @@
         </div>
     </nav>
     <main class="page">
-        <section class="portfolio-block project">
+        <section class="portfolio-block block-intro" style="padding-bottom: 10px;">
             <div class="container">
-                <div class="heading">
+                <div class="heading" style="margin-bottom: 10px;">
-                    <h2>project name</h2>
+                    <h2 class="text-capitalize">St Thomas' Church Keresley</h2>
+                </div>
+                <p style="margin-top: 15px;font-size: 24px;">A responsive and dynamic website including historical archives for public access.</p>
+            </div>
+        </section>
+        <section class="portfolio-block project" style="padding-top: 0;">
+            <div class="container">
+                <div class="carousel slide" data-bs-ride="false" id="carousel-1" style="width: 95%;margin-right: auto;margin-left: auto;margin-bottom: 25px;">
+                    <div class="carousel-inner">
+                        <div class="carousel-item active"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/keresleychurch.png" alt="Slide Image"></div>
+                        <div class="carousel-item"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/parish_magazines.png" alt="Slide Image"></div>
+                        <div class="carousel-item"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/burial_register_system.png" alt="Slide Image"></div>
+                    </div>
+                    <div><a class="carousel-control-prev" href="#carousel-1" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carousel-1" role="button" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></a></div>
+                    <div class="carousel-indicators"><button type="button" data-bs-target="#carousel-1" data-bs-slide-to="0" class="active"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="1"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="2"></button></div>
                 </div>
-                <div class="image" style="background-image:url(&quot;../../assets/img/tech/image4.jpg&quot;);"></div>
                 <div class="row">
                     <div class="col-12 col-md-6 offset-md-1 info">
-                        <h3>Description</h3>
+                        <h3>Phase 1 - April 2014</h3>
-                        <p>Nam a ultrices mauris. Nam efficitur, lorem a vehicula interdum, ligula velit euismod lorem, vitae vehicula ligula tortor eu leo. Maecenas porttitor massa ut vestibulum euismod. Aliquam eget mi aliquam.</p>
+                        <p>In April 2014, the Vicar at St Thomas’ Church Keresley asked me to redesign their website using an easily updateable package. The website took 6 months to complete and was finally completed in November 2014. Subsequent redesigns of the website were completed in 2019, 2023 with ongoing tweaks and modifications starting in 2025.<br><br>The main website framework is the latest version of WordPress with a modified theme.</p>
+                        <h3>Phase 2 - October 2016</h3>
+                        <p>Phase 2 included the digitisation and upload of the parish archives dating back from the mid 1800s and utilises an in-house magazine reading platform for all of its publications.<br><br>The archives section of the website also includes burial registers up to the mid-1990s and allows visitors to search available registers.</p>
+                        <h3>Phase 3 - September 2021&nbsp;</h3>
+                        <p>Following the coronavirus lockdown in 2020, the church signed up to the Church of England’s Digital Charter which includes upgrades to their online presence including plans to introduce guest internet access within centres, online access to servcies (currently through recorded services but live streamed services are planned for the near future), upgrades to internet connectivity within centres (including a mesh wifi system in each centre) and device upgrades in preperation for Windows 10 end of life date in October 2025.<br><br>Device upgrades were completed Easter 2025 while online presence upgrades are ongoing.</p>
+                        <h3>Phase 4 - 2025 and Beyond</h3>
                         <p>Lorem ipsum dapibus dolor non, malesuada mauris. Aliquam eleifend mauris non odio mattis auctor. Aenean sit amet elementum tellus, a facilisis ligula. Pellentesque ac vehicula mauris.</p>
                     </div>
-                    <div class="col-12 col-md-3 offset-md-1 meta">
+                    <div class="col-12 col-md-3 offset-md-1 meta" style="padding-left: 12px;">
-                        <div class="tags"><span class="meta-heading">Tags</span><a href="#">Resource</a><a href="#">Project</a><span class="meta-heading">Date</span><span>25-04-2017</span></div>
+                        <div class="tags"><span class="meta-heading">Project Status</span><span>Ongoing - Phase 4</span><span class="meta-heading">Client</span><span>The Parish of Keresley with Coundon PCC</span><span class="meta-heading">Date</span><span>April 2014</span><span class="meta-heading">Products Created</span><span>Website and Historical Archives<br><br>Ongoing remote technical support and consulting for ongoing digital platforms</span></div><a class="btn btn-primary" role="button" href="https://www.keresley.church/" target="_blank" style="margin-top: 25px;margin-right: auto;margin-left: auto;display: flex;justify-content: center;">Project Website</a>
                     </div>
                 </div>
                 <div class="more-projects">
-                    <h3 class="text-center">More Projects</h3>
+                    <h3 class="text-center" style="margin-bottom: 10px;">More Projects</h3>
-                    <div class="row gallery">
+                    <div data-bss-type="blog-loop" data-bss-perpage="12">
-                        <div class="col-md-4 col-lg-3">
+                        <div class="row gy-4 row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 mt-0" data-bss-type="blog-loop-base">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image2.jpg"></a></div>
+                            <div class="post-tag-web-design col" data-bss-type="blog-loop-item">
-                        </div>
+                                <div class="card"><a href="../web-design/st-thomas-church-keresley.html"><img class="img-fluid card-img-top" width="1910" height="880" src="../../assets/img/projects/keresley_church/keresleychurch.png"></a>
-                        <div class="col-md-4 col-lg-3">
+                                    <div class="card-body"><a href="../web-design/st-thomas-church-keresley.html">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image3.jpg"></a></div>
+                                            <h4 class="text-body">St Thomas' Church Keresley</h4>
-                        </div>
+                                        </a>
-                        <div class="col-md-4 col-lg-3">
+                                        <p class="card-text">A responsive and dynamic website including historical archives for public access.</p>
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/tech/image4.jpg"></a></div>
+                                    </div>
-                        </div>
+                                </div>
-                        <div class="col-md-4 col-lg-3">
+                            </div>
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image5.jpg"></a></div>
                         </div>
+                        <nav class="d-flex justify-content-center mt-3" data-bss-type="blog-loop-pagination">
+                            <ul class="pagination">
+                                <li class="page-item disabled" data-type="prev" data-page="1"><a class="page-link" aria-label="Previous" href="#"><span aria-hidden="true">«</span></a></li>
+                                <li class="page-item active" data-type="regular" data-page="1"><a class="page-link" href="#">1</a></li>
+                                <li class="page-item disabled" data-type="next" data-page="1"><a class="page-link" aria-label="Next" href="#"><span aria-hidden="true">»</span></a></li>
+                            </ul>
+                        </nav>
                     </div>
                 </div>
             </div>
@@ -320,10 +349,411 @@
             </div>
         </div>
     </footer>
+    <script>
+        (function() {
+            let collections = document.querySelectorAll('[data-bss-type="blog-loop"]');
+            let tagNavs = document.querySelectorAll('[data-bss-type="tag-nav"]');
+            let tagLoops = document.querySelectorAll('[data-bss-type="tag-loop"]');
+            let authorLoops = document.querySelectorAll('[data-bss-type="author-loop"]');
+            let authorNavs = document.querySelectorAll('[data-bss-type="author-nav"]');
+
+            window.addEventListener("popstate", (e) => {
+                for (let collection of collections) {
+                    updateCollection(collection);
+                }
+
+                for (let tagNav of tagNavs) {
+                    updateTagNav(tagNav);
+                }
+
+                for (let authorNav of authorNavs) {
+                    updateAuthorNav(authorNav);
+                }
+            });
+
+            for (let collection of collections) {
+
+                updateCollection(collection);
+
+                if (!canPaginateCollection(collection)) continue;
+
+                let pagination = collection.querySelector('[data-bss-type="blog-loop-pagination"]');
+
+                pagination.addEventListener('click', function(e) {
+                    let paginationItem = e.target.closest('.page-item');
+                    if (!paginationItem) return;
+
+                    e.preventDefault();
+
+                    if (paginationItem.classList.contains('disabled') || paginationItem.classList.contains('active')) return;
+
+                    let collection = paginationItem.closest('[data-bss-type="blog-loop"]');
+                    if (!collection) return;
+
+                    let page = parseInt(paginationItem.dataset.page);
+                    if (!page) return;
+
+                    let pageParam = getPageParameter(collection);
+
+                    if (pageParam) {
+                        const url = new URL(window.location);
+                        url.searchParams.set(pageParam, page);
+                        history.pushState({
+                            [pageParam]: page
+                        }, document.title, url);
+
+                        for (let c of collections) {
+                            let param = getPageParameter(c);
+                            if (param !== pageParam) continue;
+                            updateCollection(c);
+                        }
+                    } else {
+                        updateCollection(collection, page);
+                    }
+                });
+            }
+
+            for (let tagNav of tagNavs) {
+                updateTagNav(tagNav);
+                tagNav.addEventListener('click', onTagClick);
+            }
+
+            for (let tagLoop of tagLoops) {
+                tagLoop.addEventListener('click', onTagClick);
+            }
+
+            for (let authorLoop of authorLoops) {
+                authorLoop.addEventListener('click', onAuthorClick);
+            }
+
+            for (let authorNav of authorNavs) {
+                updateAuthorNav(authorNav);
+            }
+
+            function onTagClick(e) {
+                onBlogFilterClick(e);
+
+                for (let nav of tagNavs) {
+                    updateTagNav(nav);
+                }
+            }
+
+            function onAuthorClick(e) {
+                onBlogFilterClick(e);
+
+                for (let authorNav of authorNavs) {
+                    updateAuthorNav(authorNav);
+                }
+            }
+
+            function onBlogFilterClick(e) {
+                const item = e.target.closest('[data-bss-filter="blog"]');
+                if (!item || !item.dataset.hasOwnProperty('bssHref') || !item.dataset.hasOwnProperty('bssFilterParam')) return;
+
+                const stateNode = item.dataset.hasOwnProperty('bssStateNode') ? item : item.querySelector('[data-bss-state-node]');
+
+                if (stateNode && (stateNode.classList.contains('disabled') || stateNode.classList.contains('active'))) {
+                    e.preventDefault();
+                    return;
+                }
+
+                const link = item.dataset.bssHref;
+                if (!linksToCurrentPage(link)) return;
+
+                e.preventDefault();
+
+                const url = new URL(window.location);
+                const filterParam = item.dataset.bssFilterParam;
+                const filterValue = item.dataset.bssFilterValue || '';
+
+                const collectionsToUpdate = [];
+                const newQueryParams = {
+                    [filterParam]: filterValue
+                };
+
+                for (let c of collections) {
+                    if (!canFilterCollection(c)) continue;
+                    collectionsToUpdate.push(c);
+
+                    let pageParam = getPageParameter(c);
+                    let page = url.searchParams.get(pageParam);
+                    if (page === null || page == 1) continue;
+
+                    newQueryParams[pageParam] = 1;
+                }
+
+                for (let param in newQueryParams) {
+                    if (newQueryParams[param]) {
+                        url.searchParams.set(param, newQueryParams[param]);
+                    } else {
+                        url.searchParams.delete(param);
+                    }
+                }
+
+                history.pushState(newQueryParams, document.title, url);
+
+                for (let c of collectionsToUpdate) {
+                    updateCollection(c);
+                }
+            }
+
+            function getCollectionFilters(collection) {
+                let filters = [];
+
+                try {
+                    const parsed = JSON.parse(collection.dataset.bssFilters);
+
+                    if (Array.isArray(parsed)) {
+                        filters = parsed;
+                    }
+                } catch (e) {}
+
+                return filters;
+            }
+
+            function getCollectionEmptyFilterAction(collection, filter = '') {
+                let emptyFilterActions = [];
+
+                try {
+                    const parsed = JSON.parse(collection.dataset.bssEmptyFilterActions);
+
+                    if (Array.isArray(parsed)) {
+                        emptyFilterActions = parsed;
+                    }
+                } catch (e) {}
+
+                const action = emptyFilterActions.find(action => action.filter === filter);
+
+                return action ? action.value : '';
+            }
+
+            function canFilterCollection(collection) {
+                return !!getCollectionFilters(collection).length;
+            }
+
+            function canFilterCollectionByTag(collection) {
+                return getCollectionFilters(collection).includes('tag');
+            }
+
+            function canFilterCollectionByAuthor(collection) {
+                return getCollectionFilters(collection).includes('author');
+            }
+
+            function shouldShowAllItemsForEmptyFilter(collection, filter = '') {
+                return getCollectionEmptyFilterAction(collection, filter) === 'show-all';
+            }
+
+            function canPaginateCollection(collection) {
+                return !!getCollectionPagination(collection);
+            }
+
+            function getCollectionPagination(collection) {
+                return collection.querySelector('[data-bss-type="blog-loop-pagination"]');
+            }
+
+            function getPageParameter(collection) {
+                return collection.dataset.bssPageParam;
+            }
+
+            function linksToCurrentPage(path = '') {
+                let currentURL, url;
+
+                try {
+                    currentURL = new URL(window.location);
+                    url = new URL(path, window.location.href);
+                } catch (e) {
+                    console.error(e);
+                }
+
+                return currentURL.origin === url.origin && currentURL.pathname === url.pathname;
+            }
+
+            function updateCollection(collection, page, activeTag = '', activeAuthor = '') {
+
+                const url = new URL(window.location.href);
+
+                if (canPaginateCollection(collection)) {
+                    if (!page) {
+                        let pageParam = getPageParameter(collection);
+                        page = (pageParam ? url.searchParams.get(pageParam) : 1) || 1;
+                    }
+                }
+
+                if (canFilterCollectionByTag(collection) && !activeTag) {
+                    let tagParam = 'tag';
+                    activeTag = url.searchParams.get(tagParam) || '';
+                }
+
+                if (canFilterCollectionByAuthor(collection) && !activeAuthor) {
+                    let authorParam = 'author';
+                    activeAuthor = url.searchParams.get(authorParam) || '';
+                }
+
+                renderCollectionPage(collection, page, activeTag, activeAuthor);
+            }
+
+            function renderCollectionPage(collection, page = 1, activeTag = '', activeAuthor = '') {
+
+                page = Math.max(parseInt(page, 10), 1);
+
+                collection.style.removeProperty('display');
+
+                let loopBase = collection.querySelector('[data-bss-type="blog-loop-base"]');
+                loopBase && loopBase.style.removeProperty('display');
+
+                let emptyState = collection.querySelector('[data-bss-type="empty-state"]');
+                emptyState && emptyState.style.setProperty('display', 'none', 'important');
+
+                let listItems = [].slice.call(collection.querySelectorAll('[data-bss-type="blog-loop-item"]'));
+                listItems.forEach(item => item.style.setProperty('display', 'none', 'important'));
+
+                if (canFilterCollectionByTag(collection)) {
+                    listItems = listItems.filter(item => activeTag ? item.classList.contains('post-tag-' + activeTag) : shouldShowAllItemsForEmptyFilter(collection, 'tag'));
+                }
+
+                if (canFilterCollectionByAuthor(collection)) {
+                    listItems = listItems.filter(item => activeAuthor ? item.classList.contains('post-author-' + activeAuthor) : shouldShowAllItemsForEmptyFilter(collection, 'author'));
+                }
+
+                let perPage = collection.dataset.bssPerpage || listItems.length;
+                let visibleListItems = listItems.slice((page - 1) * perPage, page * perPage);
+                visibleListItems.forEach(item => item.style.removeProperty('display'));
+
+                let isEmpty = !visibleListItems.length;
+
+                if (isEmpty) {
+                    loopBase && loopBase.style.setProperty('display', 'none', 'important');
+                    emptyState && emptyState.style.removeProperty('display');
+                }
+
+                let itemCount = listItems.length;
+                let pageCount = Math.max(Math.ceil(itemCount / perPage), 1);
+
+                updateCollectionPagination(collection, page, pageCount, isEmpty);
+
+                if (collection.dataset.bssScrollOnChange) {
+                    scrollToCollectionTop(collection);
+                }
+            }
+
+            function updateCollectionPagination(collection, page, pageCount, isEmpty) {
+                let pagination = getCollectionPagination(collection);
+                if (!pagination) return;
+
+                let paginationItems = [].slice.call(pagination.querySelectorAll('.page-item'));
+
+                if (pageCount === 1 || isEmpty) {
+                    pagination.style.setProperty('display', 'none', 'important');
+                } else {
+                    pagination.style.removeProperty('display');
+                }
+
+                let previousBtnDisabled = page - 1 <= 0;
+                let previousPage = previousBtnDisabled ? 1 : page - 1;
+
+                let nextBtnDisabled = page + 1 > pageCount;
+                let nextPage = nextBtnDisabled ? pageCount : page + 1;
+
+                for (let i = 0; i < paginationItems.length; i++) {
+                    let paginationItem = paginationItems[i];
+
+                    paginationItem.classList.remove('active', 'disabled');
+
+                    if (paginationItem.dataset.type === 'prev') {
+                        paginationItem.dataset.page = previousPage;
+
+                        if (previousBtnDisabled) {
+                            paginationItem.classList.add('disabled');
+                        }
+                    } else if (paginationItem.dataset.type === 'next') {
+                        paginationItem.dataset.page = nextPage;
+
+                        if (nextBtnDisabled) {
+                            paginationItem.classList.add('disabled');
+                        }
+                    } else {
+                        if (paginationItem.dataset.page > pageCount) {
+                            paginationItem.style.setProperty('display', 'none', 'important');
+                        } else {
+                            paginationItem.style.removeProperty('display');
+                        }
+
+                        if (paginationItem.dataset.page == page) {
+                            paginationItem.classList.add('active');
+                        }
+                    }
+                }
+            }
+
+            function scrollToCollectionTop(collection) {
+                const rect = collection.getBoundingClientRect();
+                const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+                const threshold = 100;
+
+                if (rect.top >= 0 && viewHeight - rect.top > threshold) return;
+
+                setTimeout(() => {
+                    collection.scrollIntoView({
+                        behavior: "smooth",
+                        block: "start",
+                        inline: "start"
+                    });
+                }, 0);
+            }
+
+            function updateTagNav(tagNav) {
+                const url = new URL(window.location.href);
+
+                let tagParam = 'tag';
+                let tag = url.searchParams.get(tagParam) || '';
+
+                renderTagNav(tagNav, tag);
+            }
+
+            function renderTagNav(tagNav, activeTag = '') {
+                if (!tagNav.dataset.bssSyncUrl) return;
+
+                let navItems = [].slice.call(tagNav.querySelectorAll('[data-bss-type="tag-loop-item"]'));
+
+                navItems.forEach(item => {
+                    const activeClassNode = item.dataset.hasOwnProperty('bssStateNode') ? item : item.querySelector('[data-bss-state-node]');
+                    if (!activeClassNode) return;
+
+                    activeClassNode.classList.remove('active');
+
+                    const link = item.dataset.bssHref;
+                    if (!linksToCurrentPage(link) || activeClassNode.classList.contains('disabled')) return;
+
+                    if (item.dataset.bssTag === activeTag) {
+                        activeClassNode.classList.add('active');
+                    }
+                });
+            }
+
+            function updateAuthorNav(authorNav) {
+                const url = new URL(window.location.href);
+
+                let authorParam = 'author';
+                let author = url.searchParams.get(authorParam) || '';
+
+                renderAuthorNav(authorNav, author);
+            }
+
+            function renderAuthorNav(authorNav, activeAuthor = '') {
+                if (!canFilterCollectionByAuthor(authorNav)) return;
+
+                authorNav.style.removeProperty('display');
+
+                let items = [].slice.call(authorNav.querySelectorAll('[data-bss-type="author-loop-item"]'));
+                items.forEach(item => item.classList.contains('author-' + activeAuthor) ? item.style.removeProperty('display') : item.style.setProperty('display', 'none', 'important'));
+            }
+        })();
+    </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../../assets/js/bs-init.js"></script>
+    <script src="../../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../../assets/js/pikaday.min.js"></script>

Export/my-work/project-page.html

@@ -1,334 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="auto" lang="en-gb">
-
-<head>
-    <meta charset="utf-8">
-<!-- Matomo -->
-<script>
-  var _paq = window._paq = window._paq || [];
-  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
-    var u="//analytics.adcmnetworks.co.uk/";
-    _paq.push(['setTrackerUrl', u+'matomo.php']);
-    _paq.push(['setSiteId', '1']);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-  })();
-</script>
-<!-- End Matomo Code -->
-
-<script src="https://kit.fontawesome.com/8970d94f9b.js" crossorigin="anonymous"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Project Page - ADCM Networks</title>
-    <meta property="og:type" content="website">
-    <meta property="og:image" content="https://www.mrdaviscsit.uk/assets/img/brand/headshot.webp">
-    <script>
-        (function() {
-
-            // JavaScript snippet handling Dark/Light mode switching
-
-            const getStoredTheme = () => localStorage.getItem('theme');
-            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-
-            const getPreferredTheme = () => {
-
-                if (forcedTheme) return forcedTheme;
-
-                const storedTheme = getStoredTheme();
-                if (storedTheme) {
-                    return storedTheme;
-                }
-
-                const pageTheme = document.documentElement.getAttribute('data-bs-theme');
-
-                if (pageTheme) {
-                    return pageTheme;
-                }
-
-                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-            }
-
-            const setTheme = theme => {
-                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    document.documentElement.setAttribute('data-bs-theme', 'dark');
-                } else {
-                    document.documentElement.setAttribute('data-bs-theme', theme);
-                }
-            }
-
-            setTheme(getPreferredTheme());
-
-            const showActiveTheme = (theme, focus = false) => {
-                const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
-
-                if (!themeSwitchers.length) return;
-
-                document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-                    element.classList.remove('active');
-                    element.setAttribute('aria-pressed', 'false');
-                });
-
-                for (const themeSwitcher of themeSwitchers) {
-
-                    const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
-
-                    if (btnToActivate) {
-                        btnToActivate.classList.add('active');
-                        btnToActivate.setAttribute('aria-pressed', 'true');
-                    }
-                }
-            }
-
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-                const storedTheme = getStoredTheme();
-                if (storedTheme !== 'light' && storedTheme !== 'dark') {
-                    setTheme(getPreferredTheme());
-                }
-            });
-
-            window.addEventListener('DOMContentLoaded', () => {
-                showActiveTheme(getPreferredTheme());
-
-                document.querySelectorAll('[data-bs-theme-value]')
-                    .forEach(toggle => {
-                        toggle.addEventListener('click', (e) => {
-                            e.preventDefault();
-                            const theme = toggle.getAttribute('data-bs-theme-value');
-                            setStoredTheme(theme);
-                            setTheme(theme);
-                            showActiveTheme(theme);
-                        })
-                    })
-            });
-        })();
-    </script>
-    <link rel="icon" type="image/png" sizes="4860x4860" href="../assets/img/brand/logo.png">
-    <link rel="icon" type="image/png" sizes="4860x4860" href="../assets/img/brand/logo-white.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="4860x4860" href="../assets/img/brand/logo.png">
-    <link rel="icon" type="image/png" sizes="4860x4860" href="../assets/img/brand/logo-white.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="4860x4860" href="../assets/img/brand/logo.png">
-    <link rel="icon" type="image/png" sizes="4860x4860" href="../assets/img/brand/logo.png">
-    <link rel="icon" type="image/png" sizes="4860x4860" href="../assets/img/brand/logo.png">
-    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
-    <link rel="stylesheet" href="../assets/css/Lato.css">
-    <link rel="stylesheet" href="../assets/css/bss-overrides.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
-    <link rel="stylesheet" href="../assets/css/styles.css">
-    <link rel="stylesheet" href="../assets/css/pikaday.min.css">
-    <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
-    <link rel="stylesheet" href="../assets/css/animations.compiled.css">
-    <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
-</head>
-
-<body>
-    <nav class="navbar navbar-expand-md fixed-top portfolio-navbar gradient navbar-dark" style="padding-top: 5px;padding-bottom: 5px;">
-        <div class="container-fluid"><a class="navbar-brand logo" href="#" style="margin-right: 0;padding: 0;"><img src="../assets/img/brand/logo-white.png" style="width: 100px;height: 100px;" width="50" height="50"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navbarNav"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
-                    <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
-                    <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
-                                <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
-                            </svg></a><a class="nav-link" id="dark-mode" data-bs-theme-value="light"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-stars-fill mb-1">
-                                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
-                                <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"></path>
-                            </svg></a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <main class="page">
-        <section class="portfolio-block project">
-            <div class="container">
-                <div class="heading">
-                    <h2>project name</h2>
-                </div>
-                <div class="image" style="background-image:url(&quot;../assets/img/tech/image4.jpg&quot;);"></div>
-                <div class="row">
-                    <div class="col-12 col-md-6 offset-md-1 info">
-                        <h3>Description</h3>
-                        <p>Nam a ultrices mauris. Nam efficitur, lorem a vehicula interdum, ligula velit euismod lorem, vitae vehicula ligula tortor eu leo. Maecenas porttitor massa ut vestibulum euismod. Aliquam eget mi aliquam.</p>
-                        <p>Lorem ipsum dapibus dolor non, malesuada mauris. Aliquam eleifend mauris non odio mattis auctor. Aenean sit amet elementum tellus, a facilisis ligula. Pellentesque ac vehicula mauris.</p>
-                    </div>
-                    <div class="col-12 col-md-3 offset-md-1 meta">
-                        <div class="tags"><span class="meta-heading">Tags</span><a href="#">Resource</a><a href="#">Project</a><span class="meta-heading">Date</span><span>25-04-2017</span></div>
-                    </div>
-                </div>
-                <div class="more-projects">
-                    <h3 class="text-center">More Projects</h3>
-                    <div class="row gallery">
-                        <div class="col-md-4 col-lg-3">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../assets/img/nature/image2.jpg"></a></div>
-                        </div>
-                        <div class="col-md-4 col-lg-3">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../assets/img/nature/image3.jpg"></a></div>
-                        </div>
-                        <div class="col-md-4 col-lg-3">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../assets/img/tech/image4.jpg"></a></div>
-                        </div>
-                        <div class="col-md-4 col-lg-3">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../assets/img/nature/image5.jpg"></a></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </main>
-    <footer class="text-body bg-body" id="Light-Footer" data-bs-theme="light">
-        <div class="container py-4 py-lg-5">
-            <div class="row justify-content-center">
-                <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <h3 class="fs-6 text-center text-body" style="font-weight: bold;">Accreditations</h3>
-                    <div class="swiper w-100" id="light-swiper" data-bss-swiper="{&quot;direction&quot;:&quot;horizontal&quot;,&quot;loop&quot;:true,&quot;autoplay&quot;:{&quot;pauseOnMouseEnter&quot;:true},&quot;autoHeight&quot;:true,&quot;effect&quot;:&quot;fade&quot;,&quot;fadeEffect&quot;:{&quot;crossFade&quot;:true}}">
-                        <div class="swiper-wrapper">
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/9c9dd6cd-2703-4539-adc9-366069cbc3a9/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/mce_microsoft_certified_educator.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/b5ac17a1-0914-496f-9d85-9608966259ee/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="600" height="600" src="../assets/img/accreditations/microsoft_innovative_educator_expert_2023_2024.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/ad92a7cb-3e4f-46e2-8e73-99dffd0eb69e/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="600" height="600" src="../assets/img/accreditations/microsoft_innovative_educator_expert_2024_2025.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/44756f05-e727-41c8-a352-a656c033c9f0/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="800" height="800" src="../assets/img/accreditations/pearson_onscreen%20assessment%20expert.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/52121ef6-0760-4870-91cc-1cb20001238b/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="1200" height="1200" src="../assets/img/accreditations/establishing_a_stem_club_from_creation_to_careers_2021_2022.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/60d50339-2dda-4991-90b5-7ff087975746/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="1200" height="1200" src="../assets/img/accreditations/secondary_computer_science_professional_development_2021_2022.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/e74f9011-4006-4570-824a-f483fdcb5b26/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="600" height="600" src="../assets/img/accreditations/secondary_computing_professional_development_2023_2.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/c73720d2-8208-4e2b-a1e5-c473961834d9/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="1200" height="1200" src="../assets/img/accreditations/gcse_computer_science_professional_development_2019_2020.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/c486279a-8e97-4779-90c1-56f09622e782/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="2000" height="2000" src="../assets/img/accreditations/gcse_computer_science_professional_development_2022_2023.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/e76ed57f-2270-47f5-8e7e-4136baa261f3/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="600" height="600" src="../assets/img/accreditations/gcse_computer_science_professional_development_2023.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/0e46d6b8-1a1b-4d16-a5d5-3b95661fb290/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_master_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/287d0ca4-bea1-4e18-b9e7-21f6a5d5d571/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_word_2013_expert.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/f1831f0e-776b-49aa-8a8d-05817d4b1410/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_word_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/2ab55353-3267-46cc-b3f4-3099af54d869/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_excel_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/11162aa2-331a-4ec4-a612-665f3bc59cb1/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_powerpoint_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/cd328b1d-27b6-4410-be70-0792a99b72ea/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_onenote_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/da3b3b4c-cec4-4537-bb5b-486ce9ee6ee7/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/mta_security_fundamentals_certified_2016.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/23194bfe-30e4-4f8e-b9ec-338d060136dd/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/mta_networking_fundamentals_certified_2016.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/f0f27d87-424b-49e8-a444-95086d640e66/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/mta_windows_operating_system_fundamentals_certified_2016.png" alt="Slide Image"></a></div>
-                        </div>
-                    </div>
-                    <div class="swiper-nav-standalone d-flex justify-content-center" data-bss-swiper-target="#light-swiper">
-                        <div class="swiper-button-prev"><button class="btn btn-primary btn-sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-left">
-                                    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"></path>
-                                </svg></button></div>
-                        <div class="swiper-button-next"><button class="btn btn-primary btn-sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right">
-                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
-                                </svg></button></div>
-                    </div>
-                </div>
-                <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
-                <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
-                <div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="../assets/img/brand/logo.png" style="width: 100px;height: 100px;" width="50" height="50" class="footer-logo-white"><span>Mr A Davis</span></div>
-                    <p>IT professional and Head of Computing in the West Midlands</p>
-                </div>
-            </div>
-            <hr>
-            <div class="d-flex justify-content-between align-items-center pt-3">
-                <p class="mb-0">Copyright © 2025 ADCM Networks</p>
-                <ul class="list-inline mb-0">
-                    <li class="list-inline-item"><a href="https://mstdn.social/@MrDavisCSIT"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-body">
-                                <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
-                                <path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"></path>
-                            </svg></a></li>
-                    <li class="list-inline-item"><a href="https://bsky.app/profile/mrdaviscsit.bsky.social"><i class="fa-brands fa-square-bluesky"></i></a></li>
-                    <li class="list-inline-item"><a href="https://www.linkedin.com/in/mrdaviscsit/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin text-body">
-                                <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
-                            </svg></a></li>
-                    <li class="list-inline-item"><a href="https://github.com/MrDavisCSIT"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github text-body">
-                                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
-                            </svg></a></li>
-                    <li class="list-inline-item"><a href="https://www.reddit.com/user/AlexanderEDavis95/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-reddit text-body">
-                                <path d="M6.167 8a.831.831 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.232.232 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83.458 0 .83-.381.83-.83a.831.831 0 0 0-1.66 0z"></path>
-                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.203.203 0 0 0-.153.028.186.186 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224c-.02.115-.029.23-.029.353 0 1.795 2.091 3.256 4.669 3.256 2.577 0 4.668-1.451 4.668-3.256 0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165z"></path>
-                            </svg></a></li>
-                    <li class="list-inline-item"><a href="https://www.youtube.com/channel/UCgDhiQMLbTemv2varDiW2rA"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-youtube text-body">
-                                <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408z"></path>
-                            </svg></a></li>
-                </ul>
-            </div>
-        </div>
-    </footer>
-    <footer class="text-body bg-body" id="Dark-Footer" data-bs-theme="dark">
-        <div class="container py-4 py-lg-5">
-            <div class="row justify-content-center">
-                <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <h3 class="fs-6 text-center text-body">Accreditations</h3>
-                    <div class="swiper w-100" id="dark-swiper" data-bss-swiper="{&quot;direction&quot;:&quot;horizontal&quot;,&quot;loop&quot;:true,&quot;autoplay&quot;:{&quot;pauseOnMouseEnter&quot;:true},&quot;autoHeight&quot;:true,&quot;effect&quot;:&quot;fade&quot;}">
-                        <div class="swiper-wrapper">
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/9c9dd6cd-2703-4539-adc9-366069cbc3a9/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/mce_microsoft_certified_educator.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/b5ac17a1-0914-496f-9d85-9608966259ee/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="600" height="600" src="../assets/img/accreditations/microsoft_innovative_educator_expert_2023_2024.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/ad92a7cb-3e4f-46e2-8e73-99dffd0eb69e/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="600" height="600" src="../assets/img/accreditations/microsoft_innovative_educator_expert_2024_2025.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/44756f05-e727-41c8-a352-a656c033c9f0/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="800" height="800" src="../assets/img/accreditations/pearson_onscreen%20assessment%20expert.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/52121ef6-0760-4870-91cc-1cb20001238b/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="1200" height="1200" src="../assets/img/accreditations/establishing_a_stem_club_from_creation_to_careers_2021_2022.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/60d50339-2dda-4991-90b5-7ff087975746/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="1200" height="1200" src="../assets/img/accreditations/secondary_computer_science_professional_development_2021_2022.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/e74f9011-4006-4570-824a-f483fdcb5b26/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="600" height="600" src="../assets/img/accreditations/secondary_computing_professional_development_2023_2.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/c73720d2-8208-4e2b-a1e5-c473961834d9/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="1200" height="1200" src="../assets/img/accreditations/gcse_computer_science_professional_development_2019_2020.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/c486279a-8e97-4779-90c1-56f09622e782/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="2000" height="2000" src="../assets/img/accreditations/gcse_computer_science_professional_development_2022_2023.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/e76ed57f-2270-47f5-8e7e-4136baa261f3/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="600" height="600" src="../assets/img/accreditations/gcse_computer_science_professional_development_2023.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/0e46d6b8-1a1b-4d16-a5d5-3b95661fb290/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_master_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/287d0ca4-bea1-4e18-b9e7-21f6a5d5d571/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_word_2013_expert.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/f1831f0e-776b-49aa-8a8d-05817d4b1410/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_word_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/2ab55353-3267-46cc-b3f4-3099af54d869/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_excel_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/11162aa2-331a-4ec4-a612-665f3bc59cb1/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_powerpoint_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/cd328b1d-27b6-4410-be70-0792a99b72ea/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/microsoft_office_specialist_onenote_2013.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/da3b3b4c-cec4-4537-bb5b-486ce9ee6ee7/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/mta_security_fundamentals_certified_2016.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/23194bfe-30e4-4f8e-b9ec-338d060136dd/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/mta_networking_fundamentals_certified_2016.png" alt="Slide Image"></a></div>
-                            <div class="swiper-slide"><a href="https://www.credly.com/badges/f0f27d87-424b-49e8-a444-95086d640e66/public_url" target="_blank"><img class="img-fluid w-100 accreditation" width="352" height="352" src="../assets/img/accreditations/mta_windows_operating_system_fundamentals_certified_2016.png" alt="Slide Image"></a></div>
-                        </div>
-                    </div>
-                    <div class="swiper-nav-standalone d-flex justify-content-center" data-bss-swiper-target="#dark-swiper">
-                        <div class="swiper-button-prev"><button class="btn btn-primary btn-sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-left">
-                                    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"></path>
-                                </svg></button></div>
-                        <div class="swiper-button-next"><button class="btn btn-primary btn-sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right">
-                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
-                                </svg></button></div>
-                    </div>
-                    <ul class="list-unstyled"></ul>
-                </div>
-                <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
-                <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
-                <div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="../assets/img/brand/logo-white.png" style="width: 100px;height: 100px;" width="50" height="50" class="footer-logo-white"><span>Mr A Davis</span></div>
-                    <p>IT professional and Head of Computing in the West Midlands</p>
-                </div>
-            </div>
-            <hr>
-            <div class="d-flex justify-content-between align-items-center pt-3">
-                <p class="mb-0">Copyright © 2025 ADCM Networks</p>
-                <ul class="list-inline mb-0">
-                    <li class="list-inline-item"><a href="https://mstdn.social/@MrDavisCSIT"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-body">
-                                <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
-                                <path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"></path>
-                            </svg></a></li>
-                    <li class="list-inline-item"><a href="https://bsky.app/profile/mrdaviscsit.bsky.social"><i class="fa-brands fa-square-bluesky"></i></a></li>
-                    <li class="list-inline-item"><a href="https://www.linkedin.com/in/mrdaviscsit/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin text-body">
-                                <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
-                            </svg></a></li>
-                    <li class="list-inline-item"><a href="https://github.com/MrDavisCSIT"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github text-body">
-                                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
-                            </svg></a></li>
-                    <li class="list-inline-item"><a href="https://www.reddit.com/user/AlexanderEDavis95/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-reddit text-body">
-                                <path d="M6.167 8a.831.831 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.232.232 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83.458 0 .83-.381.83-.83a.831.831 0 0 0-1.66 0z"></path>
-                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.203.203 0 0 0-.153.028.186.186 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224c-.02.115-.029.23-.029.353 0 1.795 2.091 3.256 4.669 3.256 2.577 0 4.668-1.451 4.668-3.256 0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165z"></path>
-                            </svg></a></li>
-                    <li class="list-inline-item"><a href="https://www.youtube.com/channel/UCgDhiQMLbTemv2varDiW2rA"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-youtube text-body">
-                                <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408z"></path>
-                            </svg></a></li>
-                </ul>
-            </div>
-        </div>
-    </footer>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
-    <script src="../assets/js/bs-init.js"></script>
-    <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
-    <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
-    <script src="../assets/js/pikaday.min.js"></script>
-    <script src="../assets/js/text-carousel.js"></script>
-    <script src="../assets/js/theme.js"></script>
-</body>
-
-</html>

Export/my-work/projects-for-education/cs_box.html

@@ -121,6 +121,7 @@
     <link rel="stylesheet" href="../../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -131,6 +132,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -144,37 +148,61 @@
         </div>
     </nav>
     <main class="page">
-        <section class="portfolio-block project">
+        <section class="portfolio-block block-intro" style="padding-bottom: 10px;">
             <div class="container">
-                <div class="heading">
+                <div class="heading" style="margin-bottom: 10px;">
-                    <h2>project name</h2>
+                    <h2 class="text-capitalize">St Thomas' Church Keresley</h2>
+                </div>
+                <p style="margin-top: 15px;font-size: 24px;">A responsive and dynamic website including historical archives for public access.</p>
+            </div>
+        </section>
+        <section class="portfolio-block project" style="padding-top: 0;">
+            <div class="container">
+                <div class="carousel slide" data-bs-ride="false" id="carousel-1" style="width: 95%;margin-right: auto;margin-left: auto;margin-bottom: 25px;">
+                    <div class="carousel-inner">
+                        <div class="carousel-item active"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/keresleychurch.png" alt="Slide Image"></div>
+                        <div class="carousel-item"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/parish_magazines.png" alt="Slide Image"></div>
+                        <div class="carousel-item"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/burial_register_system.png" alt="Slide Image"></div>
+                    </div>
+                    <div><a class="carousel-control-prev" href="#carousel-1" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carousel-1" role="button" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></a></div>
+                    <div class="carousel-indicators"><button type="button" data-bs-target="#carousel-1" data-bs-slide-to="0" class="active"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="1"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="2"></button></div>
                 </div>
-                <div class="image" style="background-image:url(&quot;../../assets/img/tech/image4.jpg&quot;);"></div>
                 <div class="row">
                     <div class="col-12 col-md-6 offset-md-1 info">
-                        <h3>Description</h3>
+                        <h3>Phase 1 - April 2014</h3>
-                        <p>Nam a ultrices mauris. Nam efficitur, lorem a vehicula interdum, ligula velit euismod lorem, vitae vehicula ligula tortor eu leo. Maecenas porttitor massa ut vestibulum euismod. Aliquam eget mi aliquam.</p>
+                        <p>In April 2014, the Vicar at St Thomas’ Church Keresley asked me to redesign their website using an easily updateable package. The website took 6 months to complete and was finally completed in November 2014. Subsequent redesigns of the website were completed in 2019, 2023 with ongoing tweaks and modifications starting in 2025.<br><br>The main website framework is the latest version of WordPress with a modified theme.</p>
+                        <h3>Phase 2 - October 2016</h3>
+                        <p>Phase 2 included the digitisation and upload of the parish archives dating back from the mid 1800s and utilises an in-house magazine reading platform for all of its publications.<br><br>The archives section of the website also includes burial registers up to the mid-1990s and allows visitors to search available registers.</p>
+                        <h3>Phase 3 - September 2021&nbsp;</h3>
+                        <p>Following the coronavirus lockdown in 2020, the church signed up to the Church of England’s Digital Charter which includes upgrades to their online presence including plans to introduce guest internet access within centres, online access to servcies (currently through recorded services but live streamed services are planned for the near future), upgrades to internet connectivity within centres (including a mesh wifi system in each centre) and device upgrades in preperation for Windows 10 end of life date in October 2025.<br><br>Device upgrades were completed Easter 2025 while online presence upgrades are ongoing.</p>
+                        <h3>Phase 4 - 2025 and Beyond</h3>
                         <p>Lorem ipsum dapibus dolor non, malesuada mauris. Aliquam eleifend mauris non odio mattis auctor. Aenean sit amet elementum tellus, a facilisis ligula. Pellentesque ac vehicula mauris.</p>
                     </div>
-                    <div class="col-12 col-md-3 offset-md-1 meta">
+                    <div class="col-12 col-md-3 offset-md-1 meta" style="padding-left: 12px;">
-                        <div class="tags"><span class="meta-heading">Tags</span><a href="#">Resource</a><a href="#">Project</a><span class="meta-heading">Date</span><span>25-04-2017</span></div>
+                        <div class="tags"><span class="meta-heading">Project Status</span><span>Ongoing - Phase 4</span><span class="meta-heading">Client</span><span>The Parish of Keresley with Coundon PCC</span><span class="meta-heading">Date</span><span>April 2014</span><span class="meta-heading">Products Created</span><span>Website and Historical Archives<br><br>Ongoing remote technical support and consulting for ongoing digital platforms</span></div><a class="btn btn-primary" role="button" href="https://www.keresley.church/" target="_blank" style="margin-top: 25px;margin-right: auto;margin-left: auto;display: flex;justify-content: center;">Project Website</a>
                     </div>
                 </div>
                 <div class="more-projects">
-                    <h3 class="text-center">More Projects</h3>
+                    <h3 class="text-center" style="margin-bottom: 10px;">More Projects</h3>
-                    <div class="row gallery">
+                    <div data-bss-type="blog-loop" data-bss-perpage="12">
-                        <div class="col-md-4 col-lg-3">
+                        <div class="row gy-4 row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 mt-0" data-bss-type="blog-loop-base">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image2.jpg"></a></div>
+                            <div class="post-tag-web-design col" data-bss-type="blog-loop-item">
-                        </div>
+                                <div class="card"><a href="../web-design/st-thomas-church-keresley.html"><img class="img-fluid card-img-top" width="1910" height="880" src="../../assets/img/projects/keresley_church/keresleychurch.png"></a>
-                        <div class="col-md-4 col-lg-3">
+                                    <div class="card-body"><a href="../web-design/st-thomas-church-keresley.html">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image3.jpg"></a></div>
+                                            <h4 class="text-body">St Thomas' Church Keresley</h4>
-                        </div>
+                                        </a>
-                        <div class="col-md-4 col-lg-3">
+                                        <p class="card-text">A responsive and dynamic website including historical archives for public access.</p>
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/tech/image4.jpg"></a></div>
+                                    </div>
-                        </div>
+                                </div>
-                        <div class="col-md-4 col-lg-3">
+                            </div>
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image5.jpg"></a></div>
                         </div>
+                        <nav class="d-flex justify-content-center mt-3" data-bss-type="blog-loop-pagination">
+                            <ul class="pagination">
+                                <li class="page-item disabled" data-type="prev" data-page="1"><a class="page-link" aria-label="Previous" href="#"><span aria-hidden="true">«</span></a></li>
+                                <li class="page-item active" data-type="regular" data-page="1"><a class="page-link" href="#">1</a></li>
+                                <li class="page-item disabled" data-type="next" data-page="1"><a class="page-link" aria-label="Next" href="#"><span aria-hidden="true">»</span></a></li>
+                            </ul>
+                        </nav>
                     </div>
                 </div>
             </div>
@@ -321,10 +349,411 @@
             </div>
         </div>
     </footer>
+    <script>
+        (function() {
+            let collections = document.querySelectorAll('[data-bss-type="blog-loop"]');
+            let tagNavs = document.querySelectorAll('[data-bss-type="tag-nav"]');
+            let tagLoops = document.querySelectorAll('[data-bss-type="tag-loop"]');
+            let authorLoops = document.querySelectorAll('[data-bss-type="author-loop"]');
+            let authorNavs = document.querySelectorAll('[data-bss-type="author-nav"]');
+
+            window.addEventListener("popstate", (e) => {
+                for (let collection of collections) {
+                    updateCollection(collection);
+                }
+
+                for (let tagNav of tagNavs) {
+                    updateTagNav(tagNav);
+                }
+
+                for (let authorNav of authorNavs) {
+                    updateAuthorNav(authorNav);
+                }
+            });
+
+            for (let collection of collections) {
+
+                updateCollection(collection);
+
+                if (!canPaginateCollection(collection)) continue;
+
+                let pagination = collection.querySelector('[data-bss-type="blog-loop-pagination"]');
+
+                pagination.addEventListener('click', function(e) {
+                    let paginationItem = e.target.closest('.page-item');
+                    if (!paginationItem) return;
+
+                    e.preventDefault();
+
+                    if (paginationItem.classList.contains('disabled') || paginationItem.classList.contains('active')) return;
+
+                    let collection = paginationItem.closest('[data-bss-type="blog-loop"]');
+                    if (!collection) return;
+
+                    let page = parseInt(paginationItem.dataset.page);
+                    if (!page) return;
+
+                    let pageParam = getPageParameter(collection);
+
+                    if (pageParam) {
+                        const url = new URL(window.location);
+                        url.searchParams.set(pageParam, page);
+                        history.pushState({
+                            [pageParam]: page
+                        }, document.title, url);
+
+                        for (let c of collections) {
+                            let param = getPageParameter(c);
+                            if (param !== pageParam) continue;
+                            updateCollection(c);
+                        }
+                    } else {
+                        updateCollection(collection, page);
+                    }
+                });
+            }
+
+            for (let tagNav of tagNavs) {
+                updateTagNav(tagNav);
+                tagNav.addEventListener('click', onTagClick);
+            }
+
+            for (let tagLoop of tagLoops) {
+                tagLoop.addEventListener('click', onTagClick);
+            }
+
+            for (let authorLoop of authorLoops) {
+                authorLoop.addEventListener('click', onAuthorClick);
+            }
+
+            for (let authorNav of authorNavs) {
+                updateAuthorNav(authorNav);
+            }
+
+            function onTagClick(e) {
+                onBlogFilterClick(e);
+
+                for (let nav of tagNavs) {
+                    updateTagNav(nav);
+                }
+            }
+
+            function onAuthorClick(e) {
+                onBlogFilterClick(e);
+
+                for (let authorNav of authorNavs) {
+                    updateAuthorNav(authorNav);
+                }
+            }
+
+            function onBlogFilterClick(e) {
+                const item = e.target.closest('[data-bss-filter="blog"]');
+                if (!item || !item.dataset.hasOwnProperty('bssHref') || !item.dataset.hasOwnProperty('bssFilterParam')) return;
+
+                const stateNode = item.dataset.hasOwnProperty('bssStateNode') ? item : item.querySelector('[data-bss-state-node]');
+
+                if (stateNode && (stateNode.classList.contains('disabled') || stateNode.classList.contains('active'))) {
+                    e.preventDefault();
+                    return;
+                }
+
+                const link = item.dataset.bssHref;
+                if (!linksToCurrentPage(link)) return;
+
+                e.preventDefault();
+
+                const url = new URL(window.location);
+                const filterParam = item.dataset.bssFilterParam;
+                const filterValue = item.dataset.bssFilterValue || '';
+
+                const collectionsToUpdate = [];
+                const newQueryParams = {
+                    [filterParam]: filterValue
+                };
+
+                for (let c of collections) {
+                    if (!canFilterCollection(c)) continue;
+                    collectionsToUpdate.push(c);
+
+                    let pageParam = getPageParameter(c);
+                    let page = url.searchParams.get(pageParam);
+                    if (page === null || page == 1) continue;
+
+                    newQueryParams[pageParam] = 1;
+                }
+
+                for (let param in newQueryParams) {
+                    if (newQueryParams[param]) {
+                        url.searchParams.set(param, newQueryParams[param]);
+                    } else {
+                        url.searchParams.delete(param);
+                    }
+                }
+
+                history.pushState(newQueryParams, document.title, url);
+
+                for (let c of collectionsToUpdate) {
+                    updateCollection(c);
+                }
+            }
+
+            function getCollectionFilters(collection) {
+                let filters = [];
+
+                try {
+                    const parsed = JSON.parse(collection.dataset.bssFilters);
+
+                    if (Array.isArray(parsed)) {
+                        filters = parsed;
+                    }
+                } catch (e) {}
+
+                return filters;
+            }
+
+            function getCollectionEmptyFilterAction(collection, filter = '') {
+                let emptyFilterActions = [];
+
+                try {
+                    const parsed = JSON.parse(collection.dataset.bssEmptyFilterActions);
+
+                    if (Array.isArray(parsed)) {
+                        emptyFilterActions = parsed;
+                    }
+                } catch (e) {}
+
+                const action = emptyFilterActions.find(action => action.filter === filter);
+
+                return action ? action.value : '';
+            }
+
+            function canFilterCollection(collection) {
+                return !!getCollectionFilters(collection).length;
+            }
+
+            function canFilterCollectionByTag(collection) {
+                return getCollectionFilters(collection).includes('tag');
+            }
+
+            function canFilterCollectionByAuthor(collection) {
+                return getCollectionFilters(collection).includes('author');
+            }
+
+            function shouldShowAllItemsForEmptyFilter(collection, filter = '') {
+                return getCollectionEmptyFilterAction(collection, filter) === 'show-all';
+            }
+
+            function canPaginateCollection(collection) {
+                return !!getCollectionPagination(collection);
+            }
+
+            function getCollectionPagination(collection) {
+                return collection.querySelector('[data-bss-type="blog-loop-pagination"]');
+            }
+
+            function getPageParameter(collection) {
+                return collection.dataset.bssPageParam;
+            }
+
+            function linksToCurrentPage(path = '') {
+                let currentURL, url;
+
+                try {
+                    currentURL = new URL(window.location);
+                    url = new URL(path, window.location.href);
+                } catch (e) {
+                    console.error(e);
+                }
+
+                return currentURL.origin === url.origin && currentURL.pathname === url.pathname;
+            }
+
+            function updateCollection(collection, page, activeTag = '', activeAuthor = '') {
+
+                const url = new URL(window.location.href);
+
+                if (canPaginateCollection(collection)) {
+                    if (!page) {
+                        let pageParam = getPageParameter(collection);
+                        page = (pageParam ? url.searchParams.get(pageParam) : 1) || 1;
+                    }
+                }
+
+                if (canFilterCollectionByTag(collection) && !activeTag) {
+                    let tagParam = 'tag';
+                    activeTag = url.searchParams.get(tagParam) || '';
+                }
+
+                if (canFilterCollectionByAuthor(collection) && !activeAuthor) {
+                    let authorParam = 'author';
+                    activeAuthor = url.searchParams.get(authorParam) || '';
+                }
+
+                renderCollectionPage(collection, page, activeTag, activeAuthor);
+            }
+
+            function renderCollectionPage(collection, page = 1, activeTag = '', activeAuthor = '') {
+
+                page = Math.max(parseInt(page, 10), 1);
+
+                collection.style.removeProperty('display');
+
+                let loopBase = collection.querySelector('[data-bss-type="blog-loop-base"]');
+                loopBase && loopBase.style.removeProperty('display');
+
+                let emptyState = collection.querySelector('[data-bss-type="empty-state"]');
+                emptyState && emptyState.style.setProperty('display', 'none', 'important');
+
+                let listItems = [].slice.call(collection.querySelectorAll('[data-bss-type="blog-loop-item"]'));
+                listItems.forEach(item => item.style.setProperty('display', 'none', 'important'));
+
+                if (canFilterCollectionByTag(collection)) {
+                    listItems = listItems.filter(item => activeTag ? item.classList.contains('post-tag-' + activeTag) : shouldShowAllItemsForEmptyFilter(collection, 'tag'));
+                }
+
+                if (canFilterCollectionByAuthor(collection)) {
+                    listItems = listItems.filter(item => activeAuthor ? item.classList.contains('post-author-' + activeAuthor) : shouldShowAllItemsForEmptyFilter(collection, 'author'));
+                }
+
+                let perPage = collection.dataset.bssPerpage || listItems.length;
+                let visibleListItems = listItems.slice((page - 1) * perPage, page * perPage);
+                visibleListItems.forEach(item => item.style.removeProperty('display'));
+
+                let isEmpty = !visibleListItems.length;
+
+                if (isEmpty) {
+                    loopBase && loopBase.style.setProperty('display', 'none', 'important');
+                    emptyState && emptyState.style.removeProperty('display');
+                }
+
+                let itemCount = listItems.length;
+                let pageCount = Math.max(Math.ceil(itemCount / perPage), 1);
+
+                updateCollectionPagination(collection, page, pageCount, isEmpty);
+
+                if (collection.dataset.bssScrollOnChange) {
+                    scrollToCollectionTop(collection);
+                }
+            }
+
+            function updateCollectionPagination(collection, page, pageCount, isEmpty) {
+                let pagination = getCollectionPagination(collection);
+                if (!pagination) return;
+
+                let paginationItems = [].slice.call(pagination.querySelectorAll('.page-item'));
+
+                if (pageCount === 1 || isEmpty) {
+                    pagination.style.setProperty('display', 'none', 'important');
+                } else {
+                    pagination.style.removeProperty('display');
+                }
+
+                let previousBtnDisabled = page - 1 <= 0;
+                let previousPage = previousBtnDisabled ? 1 : page - 1;
+
+                let nextBtnDisabled = page + 1 > pageCount;
+                let nextPage = nextBtnDisabled ? pageCount : page + 1;
+
+                for (let i = 0; i < paginationItems.length; i++) {
+                    let paginationItem = paginationItems[i];
+
+                    paginationItem.classList.remove('active', 'disabled');
+
+                    if (paginationItem.dataset.type === 'prev') {
+                        paginationItem.dataset.page = previousPage;
+
+                        if (previousBtnDisabled) {
+                            paginationItem.classList.add('disabled');
+                        }
+                    } else if (paginationItem.dataset.type === 'next') {
+                        paginationItem.dataset.page = nextPage;
+
+                        if (nextBtnDisabled) {
+                            paginationItem.classList.add('disabled');
+                        }
+                    } else {
+                        if (paginationItem.dataset.page > pageCount) {
+                            paginationItem.style.setProperty('display', 'none', 'important');
+                        } else {
+                            paginationItem.style.removeProperty('display');
+                        }
+
+                        if (paginationItem.dataset.page == page) {
+                            paginationItem.classList.add('active');
+                        }
+                    }
+                }
+            }
+
+            function scrollToCollectionTop(collection) {
+                const rect = collection.getBoundingClientRect();
+                const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+                const threshold = 100;
+
+                if (rect.top >= 0 && viewHeight - rect.top > threshold) return;
+
+                setTimeout(() => {
+                    collection.scrollIntoView({
+                        behavior: "smooth",
+                        block: "start",
+                        inline: "start"
+                    });
+                }, 0);
+            }
+
+            function updateTagNav(tagNav) {
+                const url = new URL(window.location.href);
+
+                let tagParam = 'tag';
+                let tag = url.searchParams.get(tagParam) || '';
+
+                renderTagNav(tagNav, tag);
+            }
+
+            function renderTagNav(tagNav, activeTag = '') {
+                if (!tagNav.dataset.bssSyncUrl) return;
+
+                let navItems = [].slice.call(tagNav.querySelectorAll('[data-bss-type="tag-loop-item"]'));
+
+                navItems.forEach(item => {
+                    const activeClassNode = item.dataset.hasOwnProperty('bssStateNode') ? item : item.querySelector('[data-bss-state-node]');
+                    if (!activeClassNode) return;
+
+                    activeClassNode.classList.remove('active');
+
+                    const link = item.dataset.bssHref;
+                    if (!linksToCurrentPage(link) || activeClassNode.classList.contains('disabled')) return;
+
+                    if (item.dataset.bssTag === activeTag) {
+                        activeClassNode.classList.add('active');
+                    }
+                });
+            }
+
+            function updateAuthorNav(authorNav) {
+                const url = new URL(window.location.href);
+
+                let authorParam = 'author';
+                let author = url.searchParams.get(authorParam) || '';
+
+                renderAuthorNav(authorNav, author);
+            }
+
+            function renderAuthorNav(authorNav, activeAuthor = '') {
+                if (!canFilterCollectionByAuthor(authorNav)) return;
+
+                authorNav.style.removeProperty('display');
+
+                let items = [].slice.call(authorNav.querySelectorAll('[data-bss-type="author-loop-item"]'));
+                items.forEach(item => item.classList.contains('author-' + activeAuthor) ? item.style.removeProperty('display') : item.style.setProperty('display', 'none', 'important'));
+            }
+        })();
+    </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../../assets/js/bs-init.js"></script>
+    <script src="../../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../../assets/js/pikaday.min.js"></script>

Export/my-work/showreel.html

@@ -120,6 +120,7 @@
     <link rel="stylesheet" href="../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -130,6 +131,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -324,6 +328,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../assets/js/bs-init.js"></script>
+    <script src="../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../assets/js/pikaday.min.js"></script>

Export/my-work/web-design/st-thomas-church-keresley.html

@@ -21,9 +21,10 @@
 
 <script src="https://kit.fontawesome.com/8970d94f9b.js" crossorigin="anonymous"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Project Page - ADCM Networks</title>
+    <title>St Thomas' Church Keresley</title>
     <meta property="og:type" content="website">
-    <meta property="og:image" content="https://www.mrdaviscsit.uk/assets/img/brand/headshot.webp">
+    <meta property="og:image" content="https://www.mrdaviscsit.uk/assets/img/projects/keresley_church/keresleychurch.png">
+    <meta name="description" content="A responsive and dynamic website including historical archives for public access.">
     <script>
         (function() {
 
@@ -120,6 +121,7 @@
     <link rel="stylesheet" href="../../assets/css/pikaday.min.css">
     <link rel="stylesheet" href="../../assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="../../assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="../../assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="../../assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -130,6 +132,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -143,37 +148,51 @@
         </div>
     </nav>
     <main class="page">
-        <section class="portfolio-block project">
+        <section class="portfolio-block block-intro" style="padding-bottom: 10px;">
             <div class="container">
-                <div class="heading">
+                <div class="heading" style="margin-bottom: 10px;">
-                    <h2>project name</h2>
+                    <h2 class="text-capitalize">St Thomas' Church Keresley</h2>
+                </div>
+                <p style="margin-top: 15px;font-size: 24px;">A responsive and dynamic website including historical archives for public access.</p>
+            </div>
+        </section>
+        <section class="portfolio-block project" style="padding-top: 0;">
+            <div class="container">
+                <div class="carousel slide" data-bs-ride="false" id="carousel-1" style="width: 95%;margin-right: auto;margin-left: auto;margin-bottom: 25px;">
+                    <div class="carousel-inner">
+                        <div class="carousel-item active"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/keresleychurch.png" alt="Slide Image"></div>
+                        <div class="carousel-item"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/parish_magazines.png" alt="Slide Image"></div>
+                        <div class="carousel-item"><img class="img-fluid w-100 d-block" width="1910" height="880" src="../../assets/img/projects/keresley_church/burial_register_system.png" alt="Slide Image"></div>
+                    </div>
+                    <div><a class="carousel-control-prev" href="#carousel-1" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carousel-1" role="button" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></a></div>
+                    <div class="carousel-indicators"><button type="button" data-bs-target="#carousel-1" data-bs-slide-to="0" class="active"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="1"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="2"></button></div>
                 </div>
-                <div class="image" style="background-image:url(&quot;../../assets/img/tech/image4.jpg&quot;);"></div>
                 <div class="row">
                     <div class="col-12 col-md-6 offset-md-1 info">
-                        <h3>Description</h3>
+                        <h3>Phase 1 - April 2014</h3>
-                        <p>Nam a ultrices mauris. Nam efficitur, lorem a vehicula interdum, ligula velit euismod lorem, vitae vehicula ligula tortor eu leo. Maecenas porttitor massa ut vestibulum euismod. Aliquam eget mi aliquam.</p>
+                        <p>In April 2014, the Vicar at St Thomas’ Church Keresley asked me to redesign their website using an easily updateable package. The website took 6 months to complete and was finally completed in November 2014. Subsequent redesigns of the website were completed in 2019, 2023 with ongoing tweaks and modifications starting in 2025.<br><br>The main website framework is the latest version of WordPress with a modified theme.</p>
+                        <h3>Phase 2 - October 2016</h3>
+                        <p>Phase 2 included the digitisation and upload of the parish archives dating back from the mid 1800s and utilises an in-house magazine reading platform for all of its publications.<br><br>The archives section of the website also includes burial registers up to the mid-1990s and allows visitors to search available registers.</p>
+                        <h3>Phase 3 - September 2021&nbsp;</h3>
+                        <p>Following the coronavirus lockdown in 2020, the church signed up to the Church of England’s Digital Charter which includes upgrades to their online presence including plans to introduce guest internet access within centres, online access to servcies (currently through recorded services but live streamed services are planned for the near future), upgrades to internet connectivity within centres (including a mesh wifi system in each centre) and device upgrades in preperation for Windows 10 end of life date in October 2025.<br><br>Device upgrades were completed Easter 2025 while online presence upgrades are ongoing.</p>
+                        <h3>Phase 4 - 2025 and Beyond</h3>
                         <p>Lorem ipsum dapibus dolor non, malesuada mauris. Aliquam eleifend mauris non odio mattis auctor. Aenean sit amet elementum tellus, a facilisis ligula. Pellentesque ac vehicula mauris.</p>
                     </div>
-                    <div class="col-12 col-md-3 offset-md-1 meta">
+                    <div class="col-12 col-md-3 offset-md-1 meta" style="padding-left: 12px;">
-                        <div class="tags"><span class="meta-heading">Tags</span><a href="#">Resource</a><a href="#">Project</a><span class="meta-heading">Date</span><span>25-04-2017</span></div>
+                        <div class="tags"><span class="meta-heading">Project Status</span><span>Ongoing - Phase 4</span><span class="meta-heading">Client</span><span>The Parish of Keresley with Coundon PCC</span><span class="meta-heading">Date</span><span>April 2014</span><span class="meta-heading">Products Created</span><span>Website and Historical Archives<br><br>Ongoing remote technical support and consulting for ongoing digital platforms</span></div><a class="btn btn-primary" role="button" href="https://www.keresley.church/" target="_blank" style="margin-top: 25px;margin-right: auto;margin-left: auto;display: flex;justify-content: center;">Project Website</a>
                     </div>
                 </div>
                 <div class="more-projects">
-                    <h3 class="text-center">More Projects</h3>
+                    <h3 class="text-center" style="margin-bottom: 10px;">More Projects</h3>
-                    <div class="row gallery">
+                    <div data-bss-type="blog-loop" data-bss-perpage="12">
-                        <div class="col-md-4 col-lg-3">
+                        <div class="row gy-4 row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 mt-0" data-bss-type="blog-loop-base"></div>
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image2.jpg"></a></div>
+                        <nav class="d-flex justify-content-center mt-3" data-bss-type="blog-loop-pagination">
-                        </div>
+                            <ul class="pagination">
-                        <div class="col-md-4 col-lg-3">
+                                <li class="page-item disabled" data-type="prev" data-page="1"><a class="page-link" aria-label="Previous" href="#"><span aria-hidden="true">«</span></a></li>
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image3.jpg"></a></div>
+                                <li class="page-item active" data-type="regular" data-page="1"><a class="page-link" href="#">1</a></li>
-                        </div>
+                                <li class="page-item disabled" data-type="next" data-page="1"><a class="page-link" aria-label="Next" href="#"><span aria-hidden="true">»</span></a></li>
-                        <div class="col-md-4 col-lg-3">
+                            </ul>
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/tech/image4.jpg"></a></div>
+                        </nav>
-                        </div>
-                        <div class="col-md-4 col-lg-3">
-                            <div class="item"><a href="#"><img class="img-fluid scale-on-hover" src="../../assets/img/nature/image5.jpg"></a></div>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -320,10 +339,411 @@
             </div>
         </div>
     </footer>
+    <script>
+        (function() {
+            let collections = document.querySelectorAll('[data-bss-type="blog-loop"]');
+            let tagNavs = document.querySelectorAll('[data-bss-type="tag-nav"]');
+            let tagLoops = document.querySelectorAll('[data-bss-type="tag-loop"]');
+            let authorLoops = document.querySelectorAll('[data-bss-type="author-loop"]');
+            let authorNavs = document.querySelectorAll('[data-bss-type="author-nav"]');
+
+            window.addEventListener("popstate", (e) => {
+                for (let collection of collections) {
+                    updateCollection(collection);
+                }
+
+                for (let tagNav of tagNavs) {
+                    updateTagNav(tagNav);
+                }
+
+                for (let authorNav of authorNavs) {
+                    updateAuthorNav(authorNav);
+                }
+            });
+
+            for (let collection of collections) {
+
+                updateCollection(collection);
+
+                if (!canPaginateCollection(collection)) continue;
+
+                let pagination = collection.querySelector('[data-bss-type="blog-loop-pagination"]');
+
+                pagination.addEventListener('click', function(e) {
+                    let paginationItem = e.target.closest('.page-item');
+                    if (!paginationItem) return;
+
+                    e.preventDefault();
+
+                    if (paginationItem.classList.contains('disabled') || paginationItem.classList.contains('active')) return;
+
+                    let collection = paginationItem.closest('[data-bss-type="blog-loop"]');
+                    if (!collection) return;
+
+                    let page = parseInt(paginationItem.dataset.page);
+                    if (!page) return;
+
+                    let pageParam = getPageParameter(collection);
+
+                    if (pageParam) {
+                        const url = new URL(window.location);
+                        url.searchParams.set(pageParam, page);
+                        history.pushState({
+                            [pageParam]: page
+                        }, document.title, url);
+
+                        for (let c of collections) {
+                            let param = getPageParameter(c);
+                            if (param !== pageParam) continue;
+                            updateCollection(c);
+                        }
+                    } else {
+                        updateCollection(collection, page);
+                    }
+                });
+            }
+
+            for (let tagNav of tagNavs) {
+                updateTagNav(tagNav);
+                tagNav.addEventListener('click', onTagClick);
+            }
+
+            for (let tagLoop of tagLoops) {
+                tagLoop.addEventListener('click', onTagClick);
+            }
+
+            for (let authorLoop of authorLoops) {
+                authorLoop.addEventListener('click', onAuthorClick);
+            }
+
+            for (let authorNav of authorNavs) {
+                updateAuthorNav(authorNav);
+            }
+
+            function onTagClick(e) {
+                onBlogFilterClick(e);
+
+                for (let nav of tagNavs) {
+                    updateTagNav(nav);
+                }
+            }
+
+            function onAuthorClick(e) {
+                onBlogFilterClick(e);
+
+                for (let authorNav of authorNavs) {
+                    updateAuthorNav(authorNav);
+                }
+            }
+
+            function onBlogFilterClick(e) {
+                const item = e.target.closest('[data-bss-filter="blog"]');
+                if (!item || !item.dataset.hasOwnProperty('bssHref') || !item.dataset.hasOwnProperty('bssFilterParam')) return;
+
+                const stateNode = item.dataset.hasOwnProperty('bssStateNode') ? item : item.querySelector('[data-bss-state-node]');
+
+                if (stateNode && (stateNode.classList.contains('disabled') || stateNode.classList.contains('active'))) {
+                    e.preventDefault();
+                    return;
+                }
+
+                const link = item.dataset.bssHref;
+                if (!linksToCurrentPage(link)) return;
+
+                e.preventDefault();
+
+                const url = new URL(window.location);
+                const filterParam = item.dataset.bssFilterParam;
+                const filterValue = item.dataset.bssFilterValue || '';
+
+                const collectionsToUpdate = [];
+                const newQueryParams = {
+                    [filterParam]: filterValue
+                };
+
+                for (let c of collections) {
+                    if (!canFilterCollection(c)) continue;
+                    collectionsToUpdate.push(c);
+
+                    let pageParam = getPageParameter(c);
+                    let page = url.searchParams.get(pageParam);
+                    if (page === null || page == 1) continue;
+
+                    newQueryParams[pageParam] = 1;
+                }
+
+                for (let param in newQueryParams) {
+                    if (newQueryParams[param]) {
+                        url.searchParams.set(param, newQueryParams[param]);
+                    } else {
+                        url.searchParams.delete(param);
+                    }
+                }
+
+                history.pushState(newQueryParams, document.title, url);
+
+                for (let c of collectionsToUpdate) {
+                    updateCollection(c);
+                }
+            }
+
+            function getCollectionFilters(collection) {
+                let filters = [];
+
+                try {
+                    const parsed = JSON.parse(collection.dataset.bssFilters);
+
+                    if (Array.isArray(parsed)) {
+                        filters = parsed;
+                    }
+                } catch (e) {}
+
+                return filters;
+            }
+
+            function getCollectionEmptyFilterAction(collection, filter = '') {
+                let emptyFilterActions = [];
+
+                try {
+                    const parsed = JSON.parse(collection.dataset.bssEmptyFilterActions);
+
+                    if (Array.isArray(parsed)) {
+                        emptyFilterActions = parsed;
+                    }
+                } catch (e) {}
+
+                const action = emptyFilterActions.find(action => action.filter === filter);
+
+                return action ? action.value : '';
+            }
+
+            function canFilterCollection(collection) {
+                return !!getCollectionFilters(collection).length;
+            }
+
+            function canFilterCollectionByTag(collection) {
+                return getCollectionFilters(collection).includes('tag');
+            }
+
+            function canFilterCollectionByAuthor(collection) {
+                return getCollectionFilters(collection).includes('author');
+            }
+
+            function shouldShowAllItemsForEmptyFilter(collection, filter = '') {
+                return getCollectionEmptyFilterAction(collection, filter) === 'show-all';
+            }
+
+            function canPaginateCollection(collection) {
+                return !!getCollectionPagination(collection);
+            }
+
+            function getCollectionPagination(collection) {
+                return collection.querySelector('[data-bss-type="blog-loop-pagination"]');
+            }
+
+            function getPageParameter(collection) {
+                return collection.dataset.bssPageParam;
+            }
+
+            function linksToCurrentPage(path = '') {
+                let currentURL, url;
+
+                try {
+                    currentURL = new URL(window.location);
+                    url = new URL(path, window.location.href);
+                } catch (e) {
+                    console.error(e);
+                }
+
+                return currentURL.origin === url.origin && currentURL.pathname === url.pathname;
+            }
+
+            function updateCollection(collection, page, activeTag = '', activeAuthor = '') {
+
+                const url = new URL(window.location.href);
+
+                if (canPaginateCollection(collection)) {
+                    if (!page) {
+                        let pageParam = getPageParameter(collection);
+                        page = (pageParam ? url.searchParams.get(pageParam) : 1) || 1;
+                    }
+                }
+
+                if (canFilterCollectionByTag(collection) && !activeTag) {
+                    let tagParam = 'tag';
+                    activeTag = url.searchParams.get(tagParam) || '';
+                }
+
+                if (canFilterCollectionByAuthor(collection) && !activeAuthor) {
+                    let authorParam = 'author';
+                    activeAuthor = url.searchParams.get(authorParam) || '';
+                }
+
+                renderCollectionPage(collection, page, activeTag, activeAuthor);
+            }
+
+            function renderCollectionPage(collection, page = 1, activeTag = '', activeAuthor = '') {
+
+                page = Math.max(parseInt(page, 10), 1);
+
+                collection.style.removeProperty('display');
+
+                let loopBase = collection.querySelector('[data-bss-type="blog-loop-base"]');
+                loopBase && loopBase.style.removeProperty('display');
+
+                let emptyState = collection.querySelector('[data-bss-type="empty-state"]');
+                emptyState && emptyState.style.setProperty('display', 'none', 'important');
+
+                let listItems = [].slice.call(collection.querySelectorAll('[data-bss-type="blog-loop-item"]'));
+                listItems.forEach(item => item.style.setProperty('display', 'none', 'important'));
+
+                if (canFilterCollectionByTag(collection)) {
+                    listItems = listItems.filter(item => activeTag ? item.classList.contains('post-tag-' + activeTag) : shouldShowAllItemsForEmptyFilter(collection, 'tag'));
+                }
+
+                if (canFilterCollectionByAuthor(collection)) {
+                    listItems = listItems.filter(item => activeAuthor ? item.classList.contains('post-author-' + activeAuthor) : shouldShowAllItemsForEmptyFilter(collection, 'author'));
+                }
+
+                let perPage = collection.dataset.bssPerpage || listItems.length;
+                let visibleListItems = listItems.slice((page - 1) * perPage, page * perPage);
+                visibleListItems.forEach(item => item.style.removeProperty('display'));
+
+                let isEmpty = !visibleListItems.length;
+
+                if (isEmpty) {
+                    loopBase && loopBase.style.setProperty('display', 'none', 'important');
+                    emptyState && emptyState.style.removeProperty('display');
+                }
+
+                let itemCount = listItems.length;
+                let pageCount = Math.max(Math.ceil(itemCount / perPage), 1);
+
+                updateCollectionPagination(collection, page, pageCount, isEmpty);
+
+                if (collection.dataset.bssScrollOnChange) {
+                    scrollToCollectionTop(collection);
+                }
+            }
+
+            function updateCollectionPagination(collection, page, pageCount, isEmpty) {
+                let pagination = getCollectionPagination(collection);
+                if (!pagination) return;
+
+                let paginationItems = [].slice.call(pagination.querySelectorAll('.page-item'));
+
+                if (pageCount === 1 || isEmpty) {
+                    pagination.style.setProperty('display', 'none', 'important');
+                } else {
+                    pagination.style.removeProperty('display');
+                }
+
+                let previousBtnDisabled = page - 1 <= 0;
+                let previousPage = previousBtnDisabled ? 1 : page - 1;
+
+                let nextBtnDisabled = page + 1 > pageCount;
+                let nextPage = nextBtnDisabled ? pageCount : page + 1;
+
+                for (let i = 0; i < paginationItems.length; i++) {
+                    let paginationItem = paginationItems[i];
+
+                    paginationItem.classList.remove('active', 'disabled');
+
+                    if (paginationItem.dataset.type === 'prev') {
+                        paginationItem.dataset.page = previousPage;
+
+                        if (previousBtnDisabled) {
+                            paginationItem.classList.add('disabled');
+                        }
+                    } else if (paginationItem.dataset.type === 'next') {
+                        paginationItem.dataset.page = nextPage;
+
+                        if (nextBtnDisabled) {
+                            paginationItem.classList.add('disabled');
+                        }
+                    } else {
+                        if (paginationItem.dataset.page > pageCount) {
+                            paginationItem.style.setProperty('display', 'none', 'important');
+                        } else {
+                            paginationItem.style.removeProperty('display');
+                        }
+
+                        if (paginationItem.dataset.page == page) {
+                            paginationItem.classList.add('active');
+                        }
+                    }
+                }
+            }
+
+            function scrollToCollectionTop(collection) {
+                const rect = collection.getBoundingClientRect();
+                const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+                const threshold = 100;
+
+                if (rect.top >= 0 && viewHeight - rect.top > threshold) return;
+
+                setTimeout(() => {
+                    collection.scrollIntoView({
+                        behavior: "smooth",
+                        block: "start",
+                        inline: "start"
+                    });
+                }, 0);
+            }
+
+            function updateTagNav(tagNav) {
+                const url = new URL(window.location.href);
+
+                let tagParam = 'tag';
+                let tag = url.searchParams.get(tagParam) || '';
+
+                renderTagNav(tagNav, tag);
+            }
+
+            function renderTagNav(tagNav, activeTag = '') {
+                if (!tagNav.dataset.bssSyncUrl) return;
+
+                let navItems = [].slice.call(tagNav.querySelectorAll('[data-bss-type="tag-loop-item"]'));
+
+                navItems.forEach(item => {
+                    const activeClassNode = item.dataset.hasOwnProperty('bssStateNode') ? item : item.querySelector('[data-bss-state-node]');
+                    if (!activeClassNode) return;
+
+                    activeClassNode.classList.remove('active');
+
+                    const link = item.dataset.bssHref;
+                    if (!linksToCurrentPage(link) || activeClassNode.classList.contains('disabled')) return;
+
+                    if (item.dataset.bssTag === activeTag) {
+                        activeClassNode.classList.add('active');
+                    }
+                });
+            }
+
+            function updateAuthorNav(authorNav) {
+                const url = new URL(window.location.href);
+
+                let authorParam = 'author';
+                let author = url.searchParams.get(authorParam) || '';
+
+                renderAuthorNav(authorNav, author);
+            }
+
+            function renderAuthorNav(authorNav, activeAuthor = '') {
+                if (!canFilterCollectionByAuthor(authorNav)) return;
+
+                authorNav.style.removeProperty('display');
+
+                let items = [].slice.call(authorNav.querySelectorAll('[data-bss-type="author-loop-item"]'));
+                items.forEach(item => item.classList.contains('author-' + activeAuthor) ? item.style.removeProperty('display') : item.style.setProperty('display', 'none', 'important'));
+            }
+        })();
+    </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="../../assets/js/bs-init.js"></script>
+    <script src="../../assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="../../assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="../../assets/js/pikaday.min.js"></script>

Export/projects.html

@@ -120,6 +120,7 @@
     <link rel="stylesheet" href="assets/css/pikaday.min.css">
     <link rel="stylesheet" href="assets/css/CookieConsentComponent.css">
     <link rel="stylesheet" href="assets/css/animations.compiled.css">
+    <link rel="stylesheet" href="assets/css/Carousel---Slider-With-Animation.css">
     <link rel="stylesheet" href="assets/css/Footer-Dark-Multi-Column-icons.css">
 </head>
 
@@ -130,6 +131,9 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about.html">About</a></li>
+                    <li class="nav-item dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
+                        <div class="dropdown-menu"><a class="dropdown-item" href="projects.html?tag=web-design">Web Design</a><a class="dropdown-item" href="projects.html?tag=projects-for-education">Projects for Education</a><a class="dropdown-item" href="projects.html?tag=extracurricular-projects">Extracurricular Projects</a><a class="dropdown-item" href="my-work/showreel.html">Showreel</a></div>
+                    </li>
                     <li class="nav-item"><a class="nav-link" href="../../blog.html">Blog</a></li>
                     <li class="nav-item"><a class="nav-link" href="../../contact.html">Contact</a></li>
                     <li class="nav-item d-flex align-items-center mode-select"><a class="nav-link" id="light-mode" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
@@ -149,23 +153,13 @@
                     <h1>Projects</h1>
                     <ul class="nav nav-tabs d-flex justify-content-center" data-bss-type="tag-nav" data-bss-sync-url="true">
                         <li class="nav-item tag-all" data-bss-type="tag-loop-item" data-bss-href="" data-bss-filter="blog" data-bss-filter-param="tag" data-bss-filter-value="" data-bss-tag=""><a class="nav-link active" href="" data-bss-state-node="">All Projects</a></li>
-                        <li class="nav-item tag-web-design" data-bss-type="tag-loop-item" data-bss-href="" data-bss-filter="blog" data-bss-filter-param="tag" data-bss-filter-value="web-design" data-bss-tag="web-design"><a class="nav-link" href="" data-bss-state-node="">Web Design</a></li>
+                        <li class="nav-item tag-web-design" data-bss-type="tag-loop-item" data-bss-href="" data-bss-filter="blog" data-bss-filter-param="tag" data-bss-filter-value="web-design" data-bss-tag="web-design"><a class="nav-link" data-bss-state-node="">Web Design</a></li>
                         <li class="nav-item tag-projects-for-education" data-bss-type="tag-loop-item" data-bss-href="" data-bss-filter="blog" data-bss-filter-param="tag" data-bss-filter-value="projects-for-education" data-bss-tag="projects-for-education"><a class="nav-link" href="" data-bss-state-node="">Projects for Education</a></li>
                         <li class="nav-item tag-extracurricular-projects" data-bss-type="tag-loop-item" data-bss-href="" data-bss-filter="blog" data-bss-filter-param="tag" data-bss-filter-value="extracurricular-projects" data-bss-tag="extracurricular-projects"><a class="nav-link" href="" data-bss-state-node="">Extracurricular Projects</a></li>
                     </ul>
                 </div>
                 <div data-bss-type="blog-loop" data-bss-filters="[&quot;tag&quot;]" data-bss-empty-filter-actions="[{&quot;filter&quot;:&quot;tag&quot;,&quot;value&quot;:&quot;show-all&quot;}]" data-bss-perpage="6" data-bss-page-param="pg" data-bss-scroll-on-change="true" style="display: none !important;">
-                    <div class="row row-cols-3" data-bss-type="blog-loop-base">
+                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3" data-bss-type="blog-loop-base">
-                        <div class="col post-tag-extracurricular-projects" data-bss-type="blog-loop-item" style="padding-bottom: 15px;">
-                            <div class="card"><a href="my-work/extracurricular-projects/project-page-1.html"><img class="card-img-top rainbow-border" src="assets/img/brand/headshot.webp"></a>
-                                <div class="card-body" style="min-height: 250px;"><a href="my-work/extracurricular-projects/project-page-1.html">
-                                        <h4 class="text-center text-body d-flex justify-content-center">Project Page - ADCM Networks</h4>
-                                    </a>
-                                    <div class="d-flex flex-wrap gap-1 mb-3" data-bss-type="tag-loop" style="float: left;"><span class="tag-extracurricular-projects" data-bss-type="tag-loop-item"><span class="badge bg-primary"><span>Extracurricular Projects</span></span></span></div>
-                                    <p class="text-start card-text" style="clear: both;">Post Excerpt</p><a class="d-flex justify-content-end card-link blog-link" href="my-work/extracurricular-projects/project-page-1.html"><u class="coloured-underline">&gt; Read more</u></a>
-                                </div>
-                            </div>
-                        </div>
                         <div class="col post-tag-projects-for-education" data-bss-type="blog-loop-item" style="padding-bottom: 15px;">
                             <div class="card"><a href="my-work/projects-for-education/cs_box.html"><img class="card-img-top rainbow-border" src="assets/img/projects/cs_box/csbox_logo.png"></a>
                                 <div class="card-body" style="min-height: 250px;"><a href="my-work/projects-for-education/cs_box.html">
@@ -177,12 +171,22 @@
                             </div>
                         </div>
                         <div class="col post-tag-web-design" data-bss-type="blog-loop-item" style="padding-bottom: 15px;">
-                            <div class="card"><a href="my-work/web-design/project-page-1-1.html"><img class="card-img-top rainbow-border" src="assets/img/brand/headshot.webp"></a>
+                            <div class="card"><a href="my-work/web-design/st-thomas-church-keresley.html"><img class="card-img-top rainbow-border" src="assets/img/projects/keresley_church/keresleychurch.png"></a>
-                                <div class="card-body" style="min-height: 250px;"><a href="my-work/web-design/project-page-1-1.html">
+                                <div class="card-body" style="min-height: 250px;"><a href="my-work/web-design/st-thomas-church-keresley.html">
-                                        <h4 class="text-center text-body d-flex justify-content-center">Project Page - ADCM Networks</h4>
+                                        <h4 class="text-center text-body d-flex justify-content-center">St Thomas' Church Keresley</h4>
                                     </a>
                                     <div class="d-flex flex-wrap gap-1 mb-3" data-bss-type="tag-loop" style="float: left;"><span class="tag-web-design" data-bss-type="tag-loop-item"><span class="badge bg-primary"><span>Web Design</span></span></span></div>
-                                    <p class="text-start card-text" style="clear: both;">Post Excerpt</p><a class="d-flex justify-content-end card-link blog-link" href="my-work/web-design/project-page-1-1.html"><u class="coloured-underline">&gt; Read more</u></a>
+                                    <p class="text-start card-text" style="clear: both;">A responsive and dynamic website including historical archives for public access.</p><a class="d-flex justify-content-end card-link blog-link" href="my-work/web-design/st-thomas-church-keresley.html"><u class="coloured-underline">&gt; Read more</u></a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col post-tag-extracurricular-projects" data-bss-type="blog-loop-item" style="padding-bottom: 15px;">
+                            <div class="card"><a href="my-work/extracurricular-projects/the-computers-identity.html"><img class="card-img-top rainbow-border" src="assets/img/projects/the_computer%27s%20identity/identitypreview.png"></a>
+                                <div class="card-body" style="min-height: 250px;"><a href="my-work/extracurricular-projects/the-computers-identity.html">
+                                        <h4 class="text-center text-body d-flex justify-content-center">The Computer's Identity</h4>
+                                    </a>
+                                    <div class="d-flex flex-wrap gap-1 mb-3" data-bss-type="tag-loop" style="float: left;"><span class="tag-extracurricular-projects" data-bss-type="tag-loop-item"><span class="badge bg-primary"><span>Extracurricular Projects</span></span></span></div>
+                                    <p class="text-start card-text" style="clear: both;">An interactive poem entry for the BCU Christian Union "Where Is Identity Found" Art Competition.</p><a class="d-flex justify-content-end card-link blog-link" href="my-work/extracurricular-projects/the-computers-identity.html"><u class="coloured-underline">&gt; Read more</u></a>
                                 </div>
                             </div>
                         </div>
@@ -196,7 +200,6 @@
                     </nav>
                 </div>
             </div>
-            <div class="container"></div>
         </section>
     </main>
     <footer class="text-body bg-body" id="Light-Footer" data-bs-theme="light">
@@ -744,6 +747,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/Carousel---Slider-With-Animation-slider_with_animation.js"></script>
     <script src="assets/js/CookieConsentComponent-cookieconsent.js"></script>
     <script src="https://kit.fontawesome.com/8970d94f9b.js"></script>
     <script src="assets/js/pikaday.min.js"></script>

Export/sitemap.xml

@@ -21,9 +21,15 @@
     <url>
         <loc>https://www.mrdaviscsit.uk/blog/what-started-it-all.html</loc>
     </url>
+    <url>
+        <loc>https://www.mrdaviscsit.uk/my-work/extracurricular-projects/the-computers-identity.html</loc>
+    </url>
     <url>
         <loc>https://www.mrdaviscsit.uk/my-work/projects-for-education/cs_box.html</loc>
     </url>
+    <url>
+        <loc>https://www.mrdaviscsit.uk/my-work/web-design/st-thomas-church-keresley.html</loc>
+    </url>
     <url>
         <loc>https://www.mrdaviscsit.uk/about.html</loc>
     </url>