diff --git a/content/images/PARTSEnterprise_store_live-page-home.webp b/content/images/PARTSEnterprise_store_live-page-home.webp new file mode 100644 index 0000000..58eefe2 Binary files /dev/null and b/content/images/PARTSEnterprise_store_live-page-home.webp differ diff --git a/content/images/partsERP-page-product_category.webp b/content/images/partsERP-page-product_category.webp new file mode 100644 index 0000000..39f2404 Binary files /dev/null and b/content/images/partsERP-page-product_category.webp differ diff --git a/index.html b/index.html index 5eee881..731ce36 100644 --- a/index.html +++ b/index.html @@ -9,264 +9,8 @@ - + +
@@ -317,8 +61,26 @@
  • Automated order fulfillment

    • Technologies: Python, MySQL / MariaDB, Docker

    - Demo ERP - Demo Store +
    + Demo ERP + + Live Store +
    +
    + + +
    + Live PARTS Enterprise Store +
    +

    partsERP Core Framework

    @@ -331,8 +93,15 @@
  • Database abstraction layer and unit test coverage

    • Technologies: Python - Flask, MySQL / MariaDB, JavaScript

    - View on GitHub - Demo Site +
    + View on GitHub + Demo Site +
    +
    +
    + Demo PARTS ERP Site +
    +

    Financial Data Reconciliation Tool

    @@ -344,8 +113,17 @@
  • Automated error detection
  • Audit trail generation
    • +

    Technologies: VBA, Excel Object Model

    - View on GitHub + View on GitHub +
    +
    + +
    @@ -433,51 +211,14 @@

    For ERP services, please visit my company website.

    + + + + - - - - diff --git a/scripts/scripts.js b/scripts/scripts.js new file mode 100644 index 0000000..ba78dcc --- /dev/null +++ b/scripts/scripts.js @@ -0,0 +1,83 @@ +var activeFlag = 'active'; + +function hookupPage() { + console.log("Hooking up home page..."); + hookupNav(); + hookupScroll(); + hookupProjectThumbnails(); +} +function hookupNav() { + console.log("Hooking up nav..."); + document.querySelectorAll('nav a').forEach(anchor => { + console.log("Hooking up nav anchor..."); + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const section = document.querySelector(this.getAttribute('href')); + section.scrollIntoView({ + behavior: 'smooth' + }); + }); + }); +} +function hookupScroll() { + console.log("Hooking up scroll..."); + window.addEventListener('scroll', function() { + const sections = document.querySelectorAll('section'); + const navLinks = document.querySelectorAll('nav a'); + + let current = ''; + + sections.forEach(section => { + const sectionTop = section.offsetTop; + if (scrollY >= sectionTop - 60) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove(activeFlag); + if (link.getAttribute('href').substring(1) === current) { + link.classList.add(activeFlag); + } + }); + }); +} +function hookupProjectThumbnails() { + console.log("Hooking up project thumbnails..."); + let demoButtonSelector = '.project-links .button'; + document.querySelectorAll(demoButtonSelector).forEach(demoButton => { + console.log("Hooking up project thumbnail..."); + let projectName = getProjectNameFromDemoButton(demoButton); + console.log({projectName}); + demoButton.addEventListener('mouseover', function() { + let projectName = getProjectNameFromDemoButton(this); + let thumbnailContainer = getProjectThumbnailContainer(projectName); + thumbnailContainer.classList.add(activeFlag); + }); + demoButton.addEventListener('mouseout', function() { + let projectName = getProjectNameFromDemoButton(this); + let thumbnailContainer = getProjectThumbnailContainer(projectName); + thumbnailContainer.classList.remove(activeFlag); + }); + }); +} +function getProjectNameFromDemoButton(demoButton) { + let projectName = demoButton.getAttribute('data-project'); + console.log({projectName}); + return projectName; +} +function getProjectThumbnailContainer(projectName) { + let container = document.querySelector(`div.project-thumbnail[data-project="${projectName}"]`); + console.log({container}); + return container; +} + +// Google Translate +function initGoogleTranslateElement() { + new google.translate.TranslateElement({ + pageLanguage: 'en', + // layout: google.translate.TranslateElement.InlineLayout.SIMPLE + layout: google.translate.TranslateElement.InlineLayout.VERTICAL + }, 'google_translate_element'); +} + diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..a8c93c7 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,298 @@ +/* Modern CSS reset and variables */ +:root { + /* Claude dark blue / grey theme + --text-color: #1a202c; + --primary-color: #2d3748; + --secondary-color: #4a5568; + --accent-color: #4299e1; + --background-color: #f7fafc; + */ + /* Purple theme + - https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff + --text-color: #10002B; /* very dark * / + --primary-color: #240046; /* medium dark * / + --secondary-color: #3C096C; /* dark * / + --accent-color: #C77DFF; /* light * / + --background-color: #E0AAFF; /* very light * / + */ + /* Red theme + - https://coolors.co/palette/2b0000-4f0000-740000-980000-b50000-d30000-eb1d1d-f50f0f-ff0000 + - https://coolors.co/palette/9c191b-ac1c1e-bd1f21-d02224-dd2c2f-e35053-e66063-ec8385-f1a7a9-f6cacc + */ + --text-color: #2B0000; + --primary-color: #740000; + --secondary-color: #B50000; + --accent-color: #E35053; + --background-color: #F6CACC; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); +} + +/* Header styles */ +header { + background-color: var(--primary-color); + color: white; + padding: 2rem 1rem; + text-align: center; +} + +header h1 { + color: white; +} + +nav { + background-color: var(--secondary-color); + padding: 1rem; + position: sticky; + top: 0; + z-index: 100; +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 2rem; +} + +nav a { + color: white; + text-decoration: none; + font-weight: 500; + transition: color 0.3s; +} + +nav a:hover { + color: var(--accent-color); +} + +/* Google Translate styles + - Hide poorly styled iframes +*/ +iframe.skiptranslate { + display: none !important; +} +body { + top: 0px !important; +} + +/* Main content styles */ +main { + max-width: 1200px; + margin: 0 auto; + padding: 2rem 1rem; +} + +section { + margin-bottom: 3rem; +} + +h1, h2, h3 { + color: var(--primary-color); + margin-bottom: 1rem; +} + +ul, li { + list-style-position: outside; +} + +.expertise-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.expertise-card { + background: white; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; +} + +/* Projects */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.project-card { + background: white; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + + position: relative; +} + +.expertise-card h3, +.project-card h3, +.experience-card h3 { + color: var(--secondary-color); +} + +.button { + display: inline-block; + padding: 0.5rem 1rem; + background-color: var(--accent-color); + color: white; + text-decoration: none; + border-radius: 4px; + transition: background-color 0.3s; +} + +.button:hover { + background-color: #2b6cb0; +} +/* +.project-thumbnails { + position: relative; +} + +.project-thumbnail { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 0; + overflow: hidden; + transition: height 0.3s ease; +} + +.project-thumbnail img { + width: 100%; + display: block; +} + +/* .project-card .button:hover + .project-thumbnail */ +/* +.project-card .button.project_demo_partsenterprise_erp:hover + .project-thumbnail.project_demo_partsenterprise_erp, +.project-card .button.project_demo_partsenterprise_store:hover + .project-thumbnail.project_demo_partsenterprise_store, +.project-card .button.project_demo_live_partsenterprise_store:hover + .project-thumbnail.project_demo_live_partsenterprise_store, +.project-card .button.project_demo_partserp:hover + .project-thumbnail.project_demo_partserp + +*/ +/* +.project-links .button.project_demo_partsenterprise_erp:hover ~ .project-thumbnails .project_demo_partsenterprise_erp, +.project-links .button.project_demo_partsenterprise_store:hover ~ .project-thumbnails .project_demo_partsenterprise_store, +.project-links .button.project_demo_live_partsenterprise_store:hover ~ .project-thumbnails .project_demo_live_partsenterprise_store, +.project-links .button.project_demo_partserp:hover ~ .project-thumbnails .project_demo_partserp +* / +.project-thumbnail.active +{ + height: 200px; /* Adjust the height as needed * / +} +*/ +/* Experience */ +.experience-card { + background: white; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + margin-top: 2rem; +} +.experience-card h3 { + margin-bottom: 0; +} +.experience-date { + color: var(--primary-color); + font-size: 0.9rem; + width: 50%; + min-width: 50%; + -webkit-text-fill-color: inherit; + text-decoration: none; + pointer-events: none; +} +.experience-card:last-child { + margin-bottom: 0; +} +.experience-company-and-date { + display: flex; + justify-content: space-between; + align-items: center; + text-align: left; + width: 100%; + margin-bottom: 0.25rem; +} +.experience-description { + margin: 0.5rem 0; +} +.experience-additional-entry { + list-style-type: disc; + width: 100%; +} +.experience-header { + display: flex; + align-items: center; +} +.experience-additional-entry .experience-company-and-date { + display: flex; + width: 100%; +} +.experience-additional-entry .experience-job-title, +.experience-additional-entry .experience-company, +.experience-additional-entry .experience-date { + font-weight: bold; + margin: 0; + width: fit-content; +} +.experience-additional-entry .experience-company { + margin-left: 5px; + margin-right: auto; +} +.experience-additional-entry .experience-date { + font-weight: normal; + margin-left: auto; +} +.experience-additional-entry:not(:first-of-type) .experience-job-title::after { + content: " at "; + font-weight: normal; +} +.experience-additional-entry .experience-company::after { + content: " "; +} +.experience-additional-entry .experience-description:last-of-type { + margin-top: 0; + margin-bottom: 1rem; +} + +/* Footer styles */ +footer { + background-color: var(--primary-color); + color: white; + text-align: center; + padding: 2rem 1rem; + margin-top: 4rem; +} + +footer a { + color: white; +} + +/* Responsive design */ +@media (max-width: 768px) { + nav ul { + flex-direction: column; + align-items: center; + gap: 1rem; + } + + .expertise-grid, + .projects-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file