portfolio.php

<?php
$page_title = 'Portfolio - CodeMateRwa';
$page_description = 'Explore our portfolio of successful digital transformation projects and creative solutions.';
include __DIR__ . '/includes/header.php';

// Get portfolio items
$portfolio_items = getPortfolioItems();

// Group items by category for filtering
$categories = ['All'];
$items_by_category = ['All' => $portfolio_items];

foreach ($portfolio_items as $item) {
    $tags = !empty($item['tags']) ? explode(',', $item['tags']) : ['Web Design'];
    foreach ($tags as $tag) {
        $tag = trim($tag);
        if (!in_array($tag, $categories)) {
            $categories[] = $tag;
        }
        if (!isset($items_by_category[$tag])) {
            $items_by_category[$tag] = [];
        }
        $items_by_category[$tag][] = $item;
    }
}
?>

<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-[#13505bff] to-[#0c7489ff] opacity-90"></div>
    <div class="absolute inset-0 bg-black opacity-20"></div>
    <div class="container mx-auto px-6 relative z-10">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6 text-white">Bringing Ideas to Digital Life</h1>
            <p class="text-xl mb-8 text-teal-100 max-w-3xl mx-auto">From sleek websites to full-scale digital systems, CodeMate creates solutions that drive impact and innovation.</p>
            <a href="contact.php" class="inline-block px-8 py-4 rounded-lg font-bold bg-[#DFD7C5] text-[#13505bff] hover:bg-[#d7d9ceff] transition-all duration-300 transform hover:scale-105 shadow-lg">
                Start Your Project
            </a>
        </div>
    </div>
</section>

<!-- Project Showcase Grid -->
<section class="py-20 bg-[#DFD7C5]">
    <div class="container mx-auto px-6">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4" style="color: #13505bff;">Our Featured Projects</h2>
            <p class="text-xl max-w-2xl mx-auto" style="color: #0c7489ff;">Discover how we've helped businesses transform their digital presence</p>
        </div>

        <!-- Category Filters -->
        <div class="flex flex-wrap justify-center gap-3 mb-12">
            <?php foreach ($categories as $category): ?>
                <button class="px-6 py-3 rounded-full font-medium filter-btn <?= $category === 'All' ? 'active' : '' ?>" 
                        data-filter="<?= htmlspecialchars($category) ?>"
                        style="background: <?= $category === 'All' ? '#119da4ff' : '#d7d9ceff' ?>; color: <?= $category === 'All' ? 'white' : '#040404ff' ?>;">
                    <?= htmlspecialchars($category) ?>
                </button>
            <?php endforeach; ?>
        </div>

        <!-- Projects Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 portfolio-grid">
            <?php foreach ($portfolio_items as $item): ?>
                <div class="portfolio-item rounded-xl overflow-hidden shadow-lg bg-[#DFD7C5] transform transition-all duration-300 hover:scale-105 hover:shadow-2xl" 
                     data-categories="<?= htmlspecialchars(implode(',', !empty($item['tags']) ? explode(',', $item['tags']) : ['Web Design'])) ?>">
                    <div class="relative overflow-hidden">
                        <img src="<?= htmlspecialchars($item['featured_image'] ?? '/assets/images/hero/2.jpg') ?>" 
                             alt="<?= htmlspecialchars($item['title']) ?>" 
                             class="w-full h-60 object-cover transition-transform duration-500 hover:scale-110">
                        <?php if (!empty($item['is_featured'])): ?>
                            <span class="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-bold" style="background: #119da4ff; color: white;">
                                Featured
                            </span>
                        <?php endif; ?>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2" style="color: #13505bff;"><?= htmlspecialchars($item['title']) ?></h3>
                        <p class="mb-4 text-sm" style="color: #0c7489ff;"><?= htmlspecialchars(substr($item['description'], 0, 100)) ?><?= strlen($item['description']) > 100 ? '...' : '' ?></p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <?php 
                            $tags = !empty($item['tags']) ? explode(',', $item['tags']) : ['Web Design'];
                            foreach (array_slice($tags, 0, 3) as $tag): ?>
                                <span class="px-3 py-1 rounded-full text-xs" style="background: #d7d9ceff; color: #040404ff;">
                                    <?= htmlspecialchars(trim($tag)) ?>
                                </span>
                            <?php endforeach; ?>
                        </div>
                        <a href="portfolio-item.php?id=<?= (int)$item['id'] ?>" class="inline-block font-medium px-4 py-2 rounded-lg transition-all duration-300" style="background: #119da4ff; color: white;">
                            View Details →
                        </a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Skills / Tools Section -->
<section class="py-20 bg-[#DFD7C5]">
    <div class="container mx-auto px-6">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4" style="color: #13505bff;">Our Technical Expertise</h2>
            <p class="text-xl max-w-2xl mx-auto" style="color: #0c7489ff;">Tools and technologies we use to build exceptional digital experiences</p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            <!-- Web Development -->
            <div class="text-center p-6 rounded-xl bg-[#d7d9ceff] shadow-md">
                <div class="text-4xl mb-4">💻</div>
                <h3 class="text-xl font-bold mb-4" style="color: #13505bff;">Web Development</h3>
                <div class="flex flex-wrap justify-center gap-2">
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">HTML/CSS</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">JavaScript</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">PHP</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">React</span>
                </div>
            </div>

            <!-- UI/UX Design -->
            <div class="text-center p-6 rounded-xl bg-[#d7d9ceff] shadow-md">
                <div class="text-4xl mb-4">🎨</div>
                <h3 class="text-xl font-bold mb-4" style="color: #13505bff;">UI/UX Design</h3>
                <div class="flex flex-wrap justify-center gap-2">
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">Figma</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">Photoshop</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">Illustrator</span>
                </div>
            </div>

            <!-- Tools & Platforms -->
            <div class="text-center p-6 rounded-xl bg-[#d7d9ceff] shadow-md">
                <div class="text-4xl mb-4">⚙️</div>
                <h3 class="text-xl font-bold mb-4" style="color: #13505bff;">Tools & Platforms</h3>
                <div class="flex flex-wrap justify-center gap-2">
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">GitHub</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">Firebase</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">AWS</span>
                </div>
            </div>

            <!-- Mobile Development -->
            <div class="text-center p-6 rounded-xl bg-[#d7d9ceff] shadow-md">
                <div class="text-4xl mb-4">📱</div>
                <h3 class="text-xl font-bold mb-4" style="color: #13505bff;">Mobile Apps</h3>
                <div class="flex flex-wrap justify-center gap-2">
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">React Native</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">Flutter</span>
                    <span class="px-2 py-1 rounded text-xs" style="background: #DFD7C5;">iOS/Android</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="py-20 bg-gradient-to-r from-[#13505bff] to-[#0c7489ff] text-white">
    <div class="container mx-auto px-6">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
                <div class="text-4xl font-bold mb-2">15+</div>
                <div class="text-lg">Projects Completed</div>
            </div>
            <div>
                <div class="text-4xl font-bold mb-2">5+</div>
                <div class="text-lg">Active Clients</div>
            </div>
            <div>
                <div class="text-4xl font-bold mb-2">100%</div>
                <div class="text-lg">On-time Delivery</div>
            </div>
            <div>
                <div class="text-4xl font-bold mb-2">3</div>
                <div class="text-lg">Design Awards</div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-[#DFD7C5]">
    <div class="container mx-auto px-6">
        <div class="max-w-4xl mx-auto text-center rounded-2xl p-12 shadow-xl" style="background: #d7d9ceff;">
            <h2 class="text-3xl md:text-4xl font-bold mb-6" style="color: #13505bff;">Have a project in mind?</h2>
            <p class="text-xl mb-10 max-w-3xl mx-auto" style="color: #0c7489ff;">Let's build something amazing together.</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="contact.php" class="px-8 py-4 rounded-lg font-bold" style="background: #13505bff; color: white;">Get in Touch</a>
                <a href="services.php" class="px-8 py-4 rounded-lg font-bold" style="background: #0c7489ff; color: white;">View Services</a>
            </div>
        </div>
    </div>
</section>

<script>
// Portfolio filtering functionality
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const portfolioItems = document.querySelectorAll('.portfolio-item');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            
            // Show/hide portfolio items
            portfolioItems.forEach(item => {
                if (filter === 'All') {
                    item.style.display = 'block';
                } else {
                    const categories = item.getAttribute('data-categories').split(',');
                    if (categories.includes(filter)) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                }
            });
        });
    });
});
</script>

<?php include __DIR__ . '/includes/footer.php'; ?>