georges/MSPE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix icon hover colors, text alignment, and UI improvements

Browse Source
This commit is contained in:
Krikorios
2026-02-25 23:25:59 +02:00
parent 00fda3e045
commit fcc4352afa
46 changed files with 4011 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
portfolio.html
+39 -12
View File
@@ -8,15 +8,15 @@
<link rel="icon" type="image/png" href="images/logo/logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet"></noscript>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"></noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous"></noscript>
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/pages.css">
<link rel="stylesheet" href="css/ultimate-ui.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="css/ultimate-ui.css"></noscript>
<link rel="stylesheet" href="css/header-fix.css">
<link rel="canonical" href="https://mspe.pro/portfolio.html">
<!-- Open Graph -->
<meta property="og:type" content="website">
@@ -172,10 +172,17 @@
}
</style>
</head>
<body>
<body class="has-promo">
<!-- Skip to Content (Accessibility) -->
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<!-- Promo Announcement Bar -->
<div class="promo-bar" id="promo-bar">
<span class="promo-icon"><i class="fas fa-shield-alt"></i></span>
<span>🔒 <strong>Free Infrastructure Audit</strong> — Limited availability. <a href="calendar.html">Book your spot →</a></span>
<button class="promo-close" aria-label="Close promotion"><i class="fas fa-times"></i></button>
</div>
<!-- Navigation -->
<header class="header" id="header">
<nav class="nav container">
@@ -475,6 +482,13 @@
<span>Beirut, Lebanon</span>
</li>
</ul>
<div class="footer-newsletter">
<p>Get expert insights delivered to your inbox</p>
<form class="newsletter-form" id="footer-newsletter-form">
<input type="email" placeholder="Your email address" required aria-label="Email for newsletter">
<button type="submit" class="btn-newsletter">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
@@ -495,6 +509,11 @@
<i class="fas fa-chevron-up"></i>
</button>
<!-- Mobile Sticky CTA -->
<div class="mobile-sticky-cta">
<a href="calendar.html" class="btn btn-primary"><i class="fas fa-calendar-check"></i> Book Free Consultation</a>
</div>
<script src="js/main.js" defer></script>
<script src="js/ultimate-ui.js" defer></script>
<script>
@@ -512,21 +531,29 @@
document.getElementById('portfolio-section').style.display = 'block';
const grid = document.getElementById('portfolio-grid');
const items = result.data.map(item => `
<div class="portfolio-item" data-category="${item.category}">
const items = result.data.map(item => {
const safeCategory = escapeAttr(item.category || 'general');
const safeCategoryText = escapeHTML(item.category || 'general');
const safeImage = escapeAttr(item.image || 'images/logo/logo.png');
const safeTitle = escapeHTML(item.title || 'Project');
const safeDescription = escapeHTML(item.description || ((item.content || '').substring(0, 100) + '...'));
const safeUrl = escapeAttr(item.url || '#');
return `
<div class="portfolio-item" data-category="${safeCategory}">
<div class="portfolio-image">
<img src="${item.image || 'images/logo/logo.png'}" alt="${item.title}" width="800" height="600" loading="lazy" decoding="async">
<img src="${safeImage}" alt="${safeTitle}" width="800" height="600" loading="lazy" decoding="async">
<div class="portfolio-overlay">
<div class="portfolio-content">
<span class="category-tag">${item.category}</span>
<h3>${item.title}</h3>
<p>${item.description || item.content.substring(0, 100) + '...'}</p>
<a href="${item.url || '#'}" class="btn btn-sm btn-white">View Case Study</a>
<span class="category-tag">${safeCategoryText}</span>
<h3>${safeTitle}</h3>
<p>${safeDescription}</p>
<a href="${safeUrl}" class="btn btn-sm btn-white">View Case Study</a>
</div>
</div>
</div>
</div>
`).join('');
`;
}).join('');
grid.innerHTML = items;
// Re-initialize filter logic