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

Fix(UI): \n 1. Prevent experience section dates from being detected as phone numbers on iOS on Safari. \n 2. Improved bullet point styling on all cards.

Browse Source
This commit is contained in:
teddy
2025-03-05 20:15:32 +00:00
parent c237680b30
commit e5e29273a9
4 changed files with 21 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@@ -7,22 +7,14 @@
<!-- SEO --> <!-- SEO -->
<meta name="yandex-verification" content="6d6eae9d533ef680" /> <meta name="yandex-verification" content="6d6eae9d533ef680" />
<!-- Security --> <!-- Security -->
<!--
<meta http-equiv="X-Frame-Options" content="SAMEORIGIN"> <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate"> <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
-->
<!-- Stylesheets --> <!-- Stylesheets -->
<!-- <!--
GitHub Contributions Calendar (light mode default) GitHub Contributions Calendar (light mode default)
- Statistics under calendar do not work. - Statistics under calendar do not work.
--> -->
<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" /> <link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
<!--
GitHub Contributions Calendar (dark mode default)
- Statistics under calendar do not work.
- Requires https://github.com/forresttindall/Github-Activity-Calendar
<link rel="stylesheet" href="./Github-Activity-Calendar/github-calendar.css"/>
-->
<link rel="stylesheet" href="styles/experience-section.css"> <link rel="stylesheet" href="styles/experience-section.css">
<link rel="stylesheet" href="styles/expertise-section.css"> <link rel="stylesheet" href="styles/expertise-section.css">
<link rel="stylesheet" href="styles/footer.css"> <link rel="stylesheet" href="styles/footer.css">
@@ -34,6 +26,8 @@
<link rel="stylesheet" href="styles/navigation.css"> <link rel="stylesheet" href="styles/navigation.css">
<link rel="stylesheet" href="styles/projects-section.css"> <link rel="stylesheet" href="styles/projects-section.css">
<link rel="stylesheet" href="styles/themes.css"> <link rel="stylesheet" href="styles/themes.css">
<!-- Prevent detecting of experience section date ranges as phone numbers on Safari on iOS -->
<meta name="format-detection" content="telephone=no">
</head> </head>
<body> <body>
<header> <header>
@@ -87,14 +81,14 @@
<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 class="project-detail-button">Show details</p> <p class="project-detail-button">Show details</p>
<div class="project-detail-container"> <div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p> <p><strong>Key Features:</strong></p> <!-- p style="margin: 0.5rem 0" -->
<ul style="margin: 1rem 0; list-style-position: inside;"> <ul><!-- style="margin: 1rem 0; list-style-position: inside;" -->
<li>UK tax compliance and reporting modules</li> <li>UK tax compliance and reporting modules</li>
<li>Real-time inventory synchronisation</li> <li>Real-time inventory synchronisation</li>
<li>Multi-storefront management</li> <li>Multi-storefront management</li>
<li>Automated order fulfillment</li> <li>Automated order fulfillment</li>
</ul> </ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p> <p><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p> <!-- p style="margin-bottom: 1rem" -->
</div> </div>
<div class="project-thumbnail"> <div class="project-thumbnail">
<img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store"> <img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store">
@@ -112,14 +106,14 @@
<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 class="project-detail-button">Show details</p> <p class="project-detail-button">Show details</p>
<div class="project-detail-container"> <div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p> <p><strong>Key Features:</strong></p> <!-- p style="margin: 0.5rem 0" -->
<ul style="margin: 1rem 0; list-style-position: inside;"> <ul> <!-- style="margin: 1rem 0; list-style-position: inside;" -->
<li>Data integrity verification</li> <li>Data integrity verification</li>
<li>Authentication and role-based access control</li> <li>Authentication and role-based access control</li>
<li>Custom reporting API</li> <li>Custom reporting API</li>
<li>Database abstraction layer and unit test coverage</li> <li>Database abstraction layer and unit test coverage</li>
</ul> </ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p> <p><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p> <!-- p style="margin-bottom: 1rem" -->
</div> </div>
<div class="project-thumbnail"> <div class="project-thumbnail">
<img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site"> <img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
@@ -136,14 +130,14 @@
<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 class="project-detail-button">Show details</p> <p class="project-detail-button">Show details</p>
<div class="project-detail-container"> <div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p> <p><strong>Key Features:</strong></p> <!-- p style="margin: 0.5rem 0" -->
<ul style="margin: 1rem 0; list-style-position: inside;"> <ul> <!-- style="margin: 1rem 0; list-style-position: inside;" -->
<li>Multi-system transaction matching</li> <li>Multi-system transaction matching</li>
<li>Configurable validation rules</li> <li>Configurable validation rules</li>
<li>Automated error detection</li> <li>Automated error detection</li>
<li>Audit trail generation</li> <li>Audit trail generation</li>
</ul> </ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> VBA, Excel Object Model</p> <p><strong>Technologies:</strong> VBA, Excel Object Model</p> <!-- p style="margin-bottom: 1rem" -->
</div> </div>
<!-- <!--
<div class="project-thumbnail"> <div class="project-thumbnail">
@@ -202,7 +196,7 @@
<div class="experience-card"> <div class="experience-card">
<h3>Additional Experience</h3> <h3>Additional Experience</h3>
<ul style="margin: 1rem 0; list-style-position: inside;"> <ul> <!-- style="margin: 1rem 0; list-style-position: inside;" -->
<li class="experience-additional-entry"> <li class="experience-additional-entry">
<div class="experience-company-and-date"> <div class="experience-company-and-date">
<p class="experience-job-title">STEM Tutor</p> <p class="experience-job-title">STEM Tutor</p>

15
styles/experience-section.css
View File

@@ -7,22 +7,23 @@
} }
.experience-date { .experience-date {
color: var(--primary-colour) !important; color: var(--primary-colour) !important;
font-size: 0.9rem; font-size: 0.95rem;
width: 50%; width: 50%;
min-width: 50%; min-width: 50%;
-webkit-text-fill-color: inherit;
text-decoration: none !important; text-decoration: none !important;
pointer-events: none; -webkit-text-fill-color: inherit !important;
-webkit-text-decoration: none !important;
pointer-events: none !important;
} }
.experience-card:last-child { .experience-card:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.experience-company-and-date { .experience-company-and-date {
display: flex; display: inline-flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
text-align: left; text-align: left;
width: 100%; width: 90%;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.experience-description { .experience-description {
@@ -36,10 +37,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.experience-additional-entry .experience-company-and-date {
display: flex;
width: 100%;
}
.experience-additional-entry .experience-job-title, .experience-additional-entry .experience-job-title,
.experience-additional-entry .experience-company, .experience-additional-entry .experience-company,
.experience-additional-entry .experience-date { .experience-additional-entry .experience-date {

4
styles/home.css
View File

@@ -16,7 +16,7 @@ h1, h2, h3 {
} }
ul, li { ul, li {
list-style-position: outside; list-style-position: inside;
} }
/* Common card styles */ /* Common card styles */
@@ -41,7 +41,7 @@ ul, li {
/* Responsive design */ /* Responsive design */
@media (max-width: 768px) { @media (max-width: 768px) {
nav ul { nav ul {
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
} }

1
styles/navigation.css
View File

@@ -12,6 +12,7 @@ nav ul {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 2rem; gap: 2rem;
flex-wrap: wrap;
} }
nav ul li { nav ul li {
margin-top: auto; margin-top: auto;