ADCM-Networks/ProfessionalWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Colour Scheme

Browse Source 
Changed from Teal & Green to Purple & Orange
This commit is contained in:
Alexander Lyall
2025-07-13 15:13:01 +01:00
parent f5302e3b55
commit 844576887f
27 changed files with 1963 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
Export/my-work/projects-for-education/cs_box.html
View File

@@ -24,7 +24,7 @@
<title>CS:Box</title>
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.mrdaviscsit.uk/assets/img/projects/cs_box/csbox_logo.png">
<meta name="description" content="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.">
<meta name="description" content="An evolution of Bit:Box to incorporate different elements of the UK Computing Curriculum">
<script>
(function() {
@@ -106,13 +106,13 @@
});
})();
</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/ADCM%20Logo%202025.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/ADCM%20Logo%202025.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="icon" type="image/png" sizes="4860x4860" href="../../assets/img/brand/ADCM%20Logo%202025.png">
<link rel="icon" type="image/png" sizes="4860x4860" href="../../assets/img/brand/ADCM%20Logo%202025.png">
<link rel="icon" type="image/png" sizes="4860x4860" href="../../assets/img/brand/ADCM%20Logo%202025.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">
@@ -127,16 +127,16 @@
<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="container-fluid"><a class="navbar-brand logo" href="../../index.html" 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 dropdown nav-item"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="projects.html">My Work</a>
<li class="nav-item dropdown nav-item" href="projects.html"><a class="dropdown-toggle nav-link nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" 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"><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">
@@ -149,53 +149,45 @@
</nav>
<main class="page">
<section class="portfolio-block block-intro" style="padding-bottom: 10px;">
<div class="container">
<div class="heading" style="margin-bottom: 10px;">
<h2 class="text-capitalize">St Thomas' Church Keresley</h2>
<div class="container center-everything">
<div class="align-content-center heading blog-heading" style="height: 25em;background: linear-gradient(rgba(var(--bs-primary-rgb),0.75), rgba(var(--bs-secondary-rgb),0.75)), url(&quot;../../assets/img/projects/cs_box/csbox_logo.png&quot;) center / cover;color: white;">
<h2>CS:Box</h2>
<p>An evolution of Bit:Box to incorporate different elements of the UK Computing Curriculum</p>
</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;">
<section class="portfolio-block project">
<div class="container center-everything">
<div class="carousel slide carousel-fade project-carousel" data-bs-ride="carousel" id="carousel-1">
<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 class="carousel-item active"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1054" src="../../assets/img/projects/cs_box/csbox_homepage.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="966" src="../../assets/img/projects/cs_box/csbox_unsigned_binary.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="996" src="../../assets/img/projects/cs_box/csbox_gcse_hexadecimal.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="966" src="../../assets/img/projects/cs_box/csbox_a_level_hexadecimal.webp" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1231" src="../../assets/img/projects/cs_box/csbox_hex_colours.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1000" src="../../assets/img/projects/cs_box/csbox_not_gate.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1000" src="../../assets/img/projects/cs_box/csbox_and_gate.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1000" src="../../assets/img/projects/cs_box/csbox_or_gate.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1000" src="../../assets/img/projects/cs_box/csbox_nor_gate.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1000" src="../../assets/img/projects/cs_box/csbox_nand_gate.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1000" src="../../assets/img/projects/cs_box/csbox_xor_gate.jpeg" alt="Slide Image"></div>
<div class="carousel-item"><img class="img-fluid w-100 d-block slider-image-fit" width="1788" height="1000" src="../../assets/img/projects/cs_box/csbox_xnor_gate.jpeg" 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 class="carousel-indicators focus-ring"><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> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="3"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="4"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="5"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="6"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="7"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="8"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="9"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="10"></button> <button type="button" data-bs-target="#carousel-1" data-bs-slide-to="11"></button></div>
</div>
<div class="row">
<div class="col-12 col-md-6 offset-md-1 info">
<h3>Phase 1 - April 2014</h3>
<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>
<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.<br><br>CS:Box is more than a collection of interactive tools — it is a guided learning experience for students to understand complex computing concepts. By combining hands-on manipulation with visual feedback, it provides a scaffolded learning approach for students at different stages of their educational journey.</p>
</div>
<div class="col-12 col-md-3 offset-md-1 meta" style="padding-left: 12px;">
<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 class="tags"><span class="meta-heading">Project Status</span><span>Ongoing</span><span class="meta-heading">Launched</span><span>April 2023</span><span class="meta-heading">Products Created</span><span>Website</span></div><a class="btn btn-primary" role="button" href="https://csbox.mrdaviscsit.uk/" target="_blank" style="margin-top: 25px;margin-right: auto;margin-left: auto;display: flex;justify-content: center;">View Project Website</a><a class="btn btn-primary" role="button" href="https://github.com/MrDavisCSIT/CS-Box" target="_blank" style="margin-top: 25px;margin-right: auto;margin-left: auto;display: flex;justify-content: center;">View Project on GitHub</a>
</div>
</div>
<div class="more-projects">
<h3 class="text-center" style="margin-bottom: 10px;">More Projects</h3>
<div data-bss-type="blog-loop" data-bss-perpage="12">
<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="post-tag-web-design col" data-bss-type="blog-loop-item">
<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="card-body"><a href="../web-design/st-thomas-church-keresley.html">
<h4 class="text-body">St Thomas' Church Keresley</h4>
</a>
<p class="card-text">A responsive and dynamic website including historical archives for public access.</p>
</div>
</div>
</div>
</div>
<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>
<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>
@@ -209,7 +201,7 @@
</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="container py-4 py-lg-5 center-everything">
<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>
@@ -236,7 +228,7 @@
<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-nav-standalone d-flex justify-content-center" data-bss-swiper-target="#light-swiper" style="margin-top: 0.5em;">
<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>
@@ -248,13 +240,13 @@
<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>
<div class="fw-bold d-flex align-items-center mb-2"><img src="../../assets/img/brand/ADCM%20Logo%202025.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>
<p class="mb-0" style="margin-left: 2em;">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. -->
@@ -279,7 +271,7 @@
</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="container py-4 py-lg-5 center-everything">
<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>
@@ -306,7 +298,7 @@
<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-nav-standalone d-flex justify-content-center" data-bss-swiper-target="#dark-swiper" style="margin-top: 0.5em;">
<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>
@@ -325,7 +317,7 @@
</div>
<hr>
<div class="d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 ADCM Networks</p>
<p class="mb-0" style="margin-left: 2em;">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. -->