admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix(Styles): Redesigned Projects section for cleaner UI and removed hover animations for mobile compatibility.

Browse Source
This commit is contained in:
teddy
2025-03-05 06:43:31 +00:00
parent 6bb1f74395
commit 22c884c007
4 changed files with 106 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
content/images/partsERP-page-product_category.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 69 KiB

114
index.html
View File

@@ -50,79 +50,77 @@
<section id="projects"> <section id="projects">
<h2>Featured Projects</h2> <h2>Featured Projects</h2>
<div class="projects-grid"> <div class="projects-grid">
<div class="project-card"> <div class="project-card-gridslot">
<div class="project-card">
<h3>Enterprise ERP & E-commerce System</h3> <h3>Enterprise ERP & E-commerce System</h3>
<p>Enhanced ERPNext platform with UK-specific accounting features and e-commerce integration. Supports multi-channel retail operations with automated order processing.</p> <p>Enhanced ERPNext platform with UK-specific accounting features and e-commerce integration. Supports multi-channel retail operations with automated order processing.</p>
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p> <p class="project-detail-button">Show details</p>
<ul style="margin: 1rem 0; list-style-position: inside;"> <div class="project-thumbnail">
<li>UK tax compliance and reporting modules</li> <img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store">
<li>Real-time inventory synchronisation</li>
<li>Multi-storefront management</li>
<li>Automated order fulfillment</li>
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p>
<div class="project-links">
<a href="https://auth.sandbox.teddy.org.uk?target=https%3A%2F%2Ferp.sandbox.partsenterprise.partsltd.co.uk" class="button" data-project="project_demo_partsenterprise_erp">Demo ERP</a>
<!-- <a href="https://store.sandbox.partsenterprise.partsltd.co.uk" class="button" data-project="project_demo_partsenterprise_store">Demo Store</a> -->
<a href="https://bathroomwarehouse.uk" class="button" data-project="project_demo_live_partsenterprise_store">Live Store</a>
</div> </div>
<div class="project-thumbnails"> <div class="project-detail-container">
<!-- <p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<div class="project-thumbnail" data-project="project_demo_partsenterprise_erp"> <ul style="margin: 1rem 0; list-style-position: inside;">
<img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise ERP"> <li>UK tax compliance and reporting modules</li>
</div> <li>Real-time inventory synchronisation</li>
--> <li>Multi-storefront management</li>
<!-- <li>Automated order fulfillment</li>
<div class="project-thumbnail" data-project="project_demo_partsenterprise_store"> </ul>
<img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Demo PARTS Enterprise Store"> <p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p>
</div> </div>
--> <div class="project-links">
<div class="project-thumbnail" data-project="project_demo_live_partsenterprise_store"> <a href="https://auth.sandbox.teddy.org.uk?target=https%3A%2F%2Ferp.sandbox.partsenterprise.partsltd.co.uk" class="button">Demo ERP</a>
<img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store"> <!-- <a href="https://store.sandbox.partsenterprise.partsltd.co.uk" class="button">Demo Store</a> -->
</div> <a href="https://bathroomwarehouse.uk" class="button">Live Store</a>
</div> </div>
</div> </div>
</div>
<div class="project-card-gridslot">
<div class="project-card"> <div class="project-card">
<h3>partsERP Core Framework</h3> <h3>partsERP Core Framework</h3>
<p>A robust, open-source ERP framework showcasing system architecture and development practices. Over 100K lines of production-grade code.</p> <p>A robust, open-source ERP framework showcasing system architecture and development practices. Over 100K lines of production-grade code.</p>
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p> <p class="project-detail-button">Show details</p>
<ul style="margin: 1rem 0; list-style-position: inside;"> <div class="project-thumbnail">
<li>Data integrity verification</li> <img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
<li>Authentication and role-based access control</li>
<li>Custom reporting API</li>
<li>Database abstraction layer and unit test coverage</li>
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p>
<div class="project-links">
<a href="https://github.com/Teddy-1024/demo_partsERP.git" class="button" data-project="project_demo_partserp">View on GitHub</a>
<a href="https://auth.sandbox.teddy.org.uk?target=https%3A%2F%2Fsandbox.partsERP.teddy.org.uk/" class="button" data-project="project_demo_partserp">Demo Site</a>
</div> </div>
<div class="project-thumbnails"> <div class="project-detail-container">
<div class="project-thumbnail" data-project="project_demo_partserp"> <p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site"> <ul style="margin: 1rem 0; list-style-position: inside;">
</div> <li>Data integrity verification</li>
<li>Authentication and role-based access control</li>
<li>Custom reporting API</li>
<li>Database abstraction layer and unit test coverage</li>
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p>
</div>
<div class="project-links">
<a href="https://github.com/Teddy-1024/demo_partsERP.git" class="button">View on GitHub</a>
<a href="https://auth.sandbox.teddy.org.uk?target=https%3A%2F%2Fsandbox.partsERP.teddy.org.uk/" class="button">Demo Site</a>
</div> </div>
</div> </div>
</div>
<div class="project-card-gridslot">
<div class="project-card"> <div class="project-card">
<h3>Financial Data Reconciliation Tool</h3> <h3>Financial Data Reconciliation Tool</h3>
<p>VBA Excel automation that simplifies complex data processing between multiple spreadsheets.</p> <p>VBA Excel automation that simplifies complex data processing between multiple spreadsheets.</p>
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p> <p class="project-detail-button">Show details</p>
<ul style="margin: 1rem 0; list-style-position: inside;"> <!--
<li>Multi-system transaction matching</li> <div class="project-thumbnail">
<li>Configurable validation rules</li> <img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
<li>Automated error detection</li>
<li>Audit trail generation</li>
</ul>
<div class="project-links">
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> VBA, Excel Object Model</p>
<a href="https://github.com/Teddy-1024/demo_VBA.git" class="button" data-project="">View on GitHub</a>
</div> </div>
<div class="project-thumbnails"> -->
<!-- <div class="project-detail-container">
<div class="project-thumbnail" data-project=""> <p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site"> <ul style="margin: 1rem 0; list-style-position: inside;">
</div> <li>Multi-system transaction matching</li>
--> <li>Configurable validation rules</li>
<li>Automated error detection</li>
<li>Audit trail generation</li>
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> VBA, Excel Object Model</p>
</div>
<div class="project-links">
<a href="https://github.com/Teddy-1024/demo_VBA.git" class="button">View on GitHub</a>
</div> </div>
</div> </div>
</div> </div>

24
scripts/scripts.js
View File

@@ -4,7 +4,8 @@ function hookupPage() {
console.log("Hooking up home page..."); console.log("Hooking up home page...");
hookupNav(); hookupNav();
hookupScroll(); hookupScroll();
hookupProjectThumbnails(); // hookupProjectThumbnails();
hookupProjectDetailButtons();
} }
function hookupNav() { function hookupNav() {
console.log("Hooking up nav..."); console.log("Hooking up nav...");
@@ -42,6 +43,7 @@ function hookupScroll() {
}); });
}); });
} }
/*
function hookupProjectThumbnails() { function hookupProjectThumbnails() {
console.log("Hooking up project thumbnails..."); console.log("Hooking up project thumbnails...");
let demoButtonSelector = '.project-links .button'; let demoButtonSelector = '.project-links .button';
@@ -71,6 +73,26 @@ function getProjectThumbnailContainer(projectName) {
console.log({container}); console.log({container});
return container; return container;
} }
*/
function hookupProjectDetailButtons() {
console.log("Hooking up project detail buttons...");
let detailButtonSelector = '.project-detail-button';
document.querySelectorAll(detailButtonSelector).forEach(detailButton => {
console.log("Hooking up project detail button...");
detailButton.addEventListener('click', function() {
let projectDetailContainer = this.parentElement.querySelector('.project-detail-container');
let wasActive = projectDetailContainer.classList.contains(activeFlag);
if (wasActive) {
projectDetailContainer.classList.remove(activeFlag);
detailButton.innerText = 'Show Details';
}
else {
projectDetailContainer.classList.add(activeFlag);
detailButton.innerText = 'Hide Details';
}
});
});
}
// Google Translate // Google Translate
function initGoogleTranslateElement() { function initGoogleTranslateElement() {

29
styles/styles.css
View File

@@ -129,13 +129,14 @@ ul, li {
margin-top: 2rem; margin-top: 2rem;
} }
.project-card-gridslot {
}
.project-card { .project-card {
background: white; background: white;
padding: 1.5rem; padding: 1.5rem;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: fit-content;
position: relative;
} }
.expertise-card h3, .expertise-card h3,
@@ -196,6 +197,30 @@ ul, li {
height: 200px; /* Adjust the height as needed * / height: 200px; /* Adjust the height as needed * /
} }
*/ */
.project-detail-button {
font-size: 0.9rem;
text-decoration: underline;
margin-top: 1vh;
}
.project-thumbnail {
margin-top: 2vh;
}
.project-thumbnail img {
max-width: 100%;
height: auto;
}
.project-detail-container {
display: none;
}
.project-detail-container.active {
display: block;
}
.project-links {
text-align: center;
margin-top: 1vh;
}
/* Experience */ /* Experience */
.experience-card { .experience-card {
background: white; background: white;