i need a professional and highly secured prompt for an ai to help me write the logic for my portfolio-mgmt/projects.php. 
call the logic file mgmt/app/projects-mgmt.php .
i want the admin to be able to add project from portfolio-mgmt/projects.php and will show in projects.php. and project-details.php is to show the full details of the project written, that means if any project is clicked on projects.php , that particular project will be redirected to show its project-details.php completely.
when the add new project button is clicked, a popup form that has input that suits the projects.php and project-details.php .
create a database table for projects using sql fmt
make sure the TOTAL PROJECTS, ACTIVE DEPLOYMENTS, PENDING DRAFTS, TOTAL REACH,and  the search filter and table to work effective without error.
on the top nav, let the image fetch from mgmt/app/settings.php
make the page mobile responsive, do not add any sidebar just use inc/sidebar.php
mgmt/app/settings.php
<?php

/**
 * Fetch the single settings row
 */
function getSettings($pdo) {
    $stmt = $pdo->prepare("SELECT * FROM settings WHERE id = 1 LIMIT 1");
    $stmt->execute();
    return $stmt->fetch(PDO::FETCH_ASSOC);
}

/**
 * Main Update Logic
 */
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_settings'])) {
    require_once '../conn/pdo-conn.php';
    
    // 1. Sanitize and Validate
    $full_name = filter_var($_POST['full_name'], FILTER_SANITIZE_SPECIAL_CHARS);
    $email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
    $timezone = filter_var($_POST['timezone'], FILTER_SANITIZE_SPECIAL_CHARS);
    $site_title = filter_var($_POST['site_title'], FILTER_SANITIZE_SPECIAL_CHARS);
    $seo_description = filter_var($_POST['seo_description'], FILTER_SANITIZE_SPECIAL_CHARS);
    $github = filter_var($_POST['github_username'], FILTER_SANITIZE_SPECIAL_CHARS);
    $twitter = filter_var($_POST['twitter_username'], FILTER_SANITIZE_SPECIAL_CHARS);
    $linkedin = filter_var($_POST['linkedin_username'], FILTER_SANITIZE_SPECIAL_CHARS);
    $two_fa = isset($_POST['two_factor_enabled']) ? 1 : 0;

    if (!$email) {
        $_SESSION['error'] = "Invalid email format.";
        header("Location: ../../portfolio-mgmt/settings.php");
        exit;
    }

    // 2. Handle Avatar Upload
    $avatar_name = null;
    if (isset($_FILES['avatar']) && $_FILES['avatar']['error'] === UPLOAD_ERR_OK) {
        $fileTmpPath = $_FILES['avatar']['tmp_name'];
        $fileName = $_FILES['avatar']['name'];
        $fileSize = $_FILES['avatar']['size'];
        $fileNameCmps = explode(".", $fileName);
        $fileExtension = strtolower(end($fileNameCmps));

        $allowedExts = ['jpg', 'jpeg', 'png', 'webp'];
        if (in_array($fileExtension, $allowedExts) && $fileSize <= 2097152) {
            $uploadFileDir = '../../uploads/avatar/';
            if (!is_dir($uploadFileDir)) mkdir($uploadFileDir, 0777, true);
            
            $newFileName = uniqid() . '.' . $fileExtension;
            $dest_path = $uploadFileDir . $newFileName;

            if (move_uploaded_file($fileTmpPath, $dest_path)) {
                $avatar_name = $newFileName;
            }
        }
    }

    // 3. Update Database
    try {
        $sql = "UPDATE settings SET 
                full_name = :fn, email = :em, timezone = :tz, 
                site_title = :st, seo_description = :sd,
                github_username = :gh, twitter_username = :tw, linkedin_username = :li,
                two_factor_enabled = :tfa";
        
        if ($avatar_name) { $sql .= ", avatar = :av"; }
        $sql .= " WHERE id = 1";

        $stmt = $pdo->prepare($sql);
        $params = [
            ':fn' => $full_name, ':em' => $email, ':tz' => $timezone,
            ':st' => $site_title, ':sd' => $seo_description,
            ':gh' => $github, ':tw' => $twitter, ':li' => $linkedin,
            ':tfa' => $two_fa
        ];
        if ($avatar_name) { $params[':av'] = $avatar_name; }

        if ($stmt->execute($params)) {
            $_SESSION['success'] = "Settings updated successfully.";
        }
    } catch (PDOException $e) {
        $_SESSION['error'] = "Database error: " . $e->getMessage();
    }

    header("Location: ../../portfolio-mgmt/settings.php");
    exit;
}
portfolio-mgmt/projects.php
<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "surface-container-lowest": "#0c0f10",
                        "surface-container-high": "#282a2b",
                        "on-tertiary": "#003915",
                        "surface-variant": "#323536",
                        "secondary": "#c0c6db",
                        "on-secondary-container": "#aeb5c9",
                        "primary": "#adc6ff",
                        "on-primary": "#002e6a",
                        "surface-container-low": "#191c1d",
                        "surface-container-highest": "#323536",
                        "on-secondary-fixed": "#141b2b",
                        "secondary-container": "#404758",
                        "error-container": "#93000a",
                        "background": "#111415",
                        "outline": "#8c909f",
                        "on-tertiary-container": "#003111",
                        "on-secondary-fixed-variant": "#404758",
                        "inverse-primary": "#005ac2",
                        "surface": "#111415",
                        "surface-bright": "#373a3b",
                        "on-tertiary-fixed": "#002109",
                        "on-tertiary-fixed-variant": "#005321",
                        "tertiary-fixed": "#6bff8f",
                        "tertiary-container": "#00a74b",
                        "tertiary-fixed-dim": "#4ae176",
                        "primary-container": "#4d8eff",
                        "primary-fixed": "#d8e2ff",
                        "surface-tint": "#adc6ff",
                        "on-surface-variant": "#c2c6d6",
                        "outline-variant": "#424754",
                        "on-secondary": "#293040",
                        "inverse-on-surface": "#2e3132",
                        "inverse-surface": "#e1e3e4",
                        "on-error-container": "#ffdad6",
                        "error": "#ffb4ab",
                        "on-surface": "#e1e3e4",
                        "on-primary-fixed": "#001a42",
                        "on-error": "#690005",
                        "primary-fixed-dim": "#adc6ff",
                        "on-primary-container": "#00285d",
                        "on-primary-fixed-variant": "#004395",
                        "on-background": "#e1e3e4",
                        "tertiary": "#4ae176",
                        "secondary-fixed-dim": "#c0c6db",
                        "secondary-fixed": "#dce2f7",
                        "surface-container": "#1d2021",
                        "surface-dim": "#111415"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "lg": "24px",
                        "xl": "48px",
                        "unit": "4px",
                        "container-padding": "32px",
                        "xs": "4px",
                        "md": "16px",
                        "sm": "8px",
                        "gutter": "24px"
                    },
                    "fontFamily": {
                        "display-xl": ["Inter"],
                        "h2": ["Inter"],
                        "body-md": ["Inter"],
                        "body-lg": ["Inter"],
                        "code-sm": ["monospace"],
                        "label-caps": ["Inter"],
                        "h1": ["Inter"]
                    },
                    "fontSize": {
                        "display-xl": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                        "h2": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
                        "body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}],
                        "body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
                        "code-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}],
                        "label-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "600"}],
                        "h1": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}]
                    }
                }
            }
        }
    </script>
<style>
        .glass-panel {
            background: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid #1F2937;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    </style>
</head>
<body class="bg-surface-dim font-body-md text-on-surface antialiased">
<!-- SideNavBar -->
 <?php include 'inc/sidebar.php'; ?>
<!-- Main Content Shell -->
<div class="ml-[280px]">
<!-- TopAppBar -->
<header class="fixed top-0 right-0 left-[280px] z-40 bg-slate-900/80 backdrop-blur-xl h-16 px-8 border-b border-slate-800/50 flex justify-between items-center shadow-2xl shadow-black/50">
<div class="flex items-center gap-4">
<div class="relative group">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-sm">search</span>
<input class="bg-slate-950/50 border border-slate-800 text-sm rounded-lg pl-9 pr-4 py-1.5 focus:border-blue-500 focus:ring-0 w-64 transition-all" placeholder="Search projects..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<button class="p-2 text-slate-400 hover:bg-slate-800/50 hover:text-white transition-colors rounded-lg active:scale-95 transition-transform">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 text-slate-400 hover:bg-slate-800/50 hover:text-white transition-colors rounded-lg active:scale-95 transition-transform">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="h-8 w-8 rounded-full overflow-hidden border border-slate-700 active:scale-95 transition-transform cursor-pointer">
<img alt="User avatar" data-alt="close-up portrait of a professional developer with neutral expression and soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsCN5NrajB0BpF1z2EBRNxZNkU6RsScLYjgqiYXAstzLEkBv01m0QUnCcMFhYbJMBgpfyJpUmL_aH9pVaZMjkklp-IjhQdwPCnOXcEQyd6fxPpbFmCMMIDKTf7zTbUX8eINACcyROMWK2zerqochb71CViVl3AEOfnfZnZxtNTL7IEQ-79tqSEqWOuSJBAeWjiMANChhLra7eudhc6Wo02tKU04OeYtnK1cbDThA-ta9vuFObosd-1iy52s-rcc4YXG38GpOtDtY4"/>
</div>
</div>
</header>
<!-- Main Canvas -->
<main class="pt-24 px-container-padding pb-12 max-w-[1440px] mx-auto">
<!-- Header Section -->
<div class="flex justify-between items-end mb-8">
<div>
<h2 class="font-h1 text-h1 text-white tracking-tight">Project Manager</h2>
<p class="text-on-surface-variant font-body-md mt-1">Manage and deploy your ecosystem projects from a central hub.</p>
</div>
<button class="bg-primary text-on-primary font-semibold px-6 py-2.5 rounded-lg flex items-center gap-2 hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-lg">add</span>
                    Add New Project
                </button>
</div>
<!-- Dashboard Stats (Technical Summary) -->
<div class="grid grid-cols-4 gap-gutter mb-8">
<div class="glass-panel p-md rounded-xl">
<p class="text-xs font-label-caps text-on-surface-variant mb-2">TOTAL PROJECTS</p>
<p class="text-h2 font-h2 text-white">24</p>
<div class="flex items-center gap-1 mt-1 text-tertiary text-xs">
<span class="material-symbols-outlined text-xs">trending_up</span>
<span>+3 this month</span>
</div>
</div>
<div class="glass-panel p-md rounded-xl">
<p class="text-xs font-label-caps text-on-surface-variant mb-2">ACTIVE DEPLOYMENTS</p>
<p class="text-h2 font-h2 text-white">18</p>
<div class="flex items-center gap-1 mt-1 text-tertiary text-xs">
<span class="material-symbols-outlined text-xs">check_circle</span>
<span>All healthy</span>
</div>
</div>
<div class="glass-panel p-md rounded-xl">
<p class="text-xs font-label-caps text-on-surface-variant mb-2">PENDING DRAFTS</p>
<p class="text-h2 font-h2 text-white">6</p>
<div class="flex items-center gap-1 mt-1 text-on-surface-variant text-xs">
<span class="material-symbols-outlined text-xs">edit_note</span>
<span>Ready for review</span>
</div>
</div>
<div class="glass-panel p-md rounded-xl">
<p class="text-xs font-label-caps text-on-surface-variant mb-2">TOTAL REACH</p>
<p class="text-h2 font-h2 text-white">128.4k</p>
<div class="flex items-center gap-1 mt-1 text-tertiary text-xs">
<span class="material-symbols-outlined text-xs">group</span>
<span>+12% monthly</span>
</div>
</div>
</div>
<!-- Project Table Container -->
<div class="glass-panel rounded-xl overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b border-outline-variant/30">
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest">PROJECT IDENTITY</th>
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest">TECH STACK</th>
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest text-center">STATUS</th>
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest">LAST UPDATED</th>
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest text-right">ACTIONS</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/20">
<!-- Project Row 1 -->
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-lg py-4">
<div class="flex items-center gap-4">
<div class="h-12 w-16 rounded-lg overflow-hidden border border-outline-variant/30 bg-surface-container flex-shrink-0">
<img alt="Project thumbnail" data-alt="clean screenshot of a modern software dashboard with dark mode UI and blue accent highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCKQb_Fgg5n9Ljen02osyp_PO6awm4DAktzc7e8hePYwr9-Md5cKd3QSCAeu4JMFa6btoBLB2Gjqba2GyqdyE5-6d8AjcXQGmWZFXdchhL2EPNnoth5wNsjdvG65Z-lG-DN9jhburj-aCbVvjePZh_2HSbCuI1xyYeta1AdyfRYEbZx0dPTSGuCufiy3hzabXhUSuC04-koxXAgFA5aaaDKAhj93dsQ56WTTg6OlnJpRxwb5Pg2z7p7pYUUsboOCjNo-6ItBWyN6Os"/>
</div>
<div>
<p class="font-semibold text-white">Nebula Core API</p>
<p class="text-xs text-on-surface-variant">Backend microservice cluster</p>
</div>
</div>
</td>
<td class="px-lg py-4">
<div class="flex gap-2">
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">NODE.JS</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">REDIS</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">POSTGRES</span>
</div>
</td>
<td class="px-lg py-4">
<div class="flex justify-center">
<span class="px-3 py-1 rounded-full bg-tertiary/10 text-tertiary text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 border border-tertiary/20">
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
                                            Live
                                        </span>
</div>
</td>
<td class="px-lg py-4">
<p class="text-xs text-on-surface-variant">2 hours ago</p>
</td>
<td class="px-lg py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-white hover:bg-white/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</div>
</td>
</tr>
<!-- Project Row 2 -->
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-lg py-4">
<div class="flex items-center gap-4">
<div class="h-12 w-16 rounded-lg overflow-hidden border border-outline-variant/30 bg-surface-container flex-shrink-0">
<img alt="Project thumbnail" data-alt="vibrant abstract 3d composition with purple and pink glass elements and soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBw1w0_xEfOGu_03Vk4LDBWVtUQTGImU8nCluTrrUokcx1uleNFH9z6G5r1agDh9HMxqjBxH5dTugZCviynvM7igLg8LoNfgXM_S3is3zRuVxn1jNM2oJ66ZH6fC3NTu8OyoHMX7psVsXcsdxtmRdSkvUWadEAFw7ULFHnH03hHGDUckx4-DEoVs31BBeYxsRYV0PQ3vYIP3JEeHQtaw1n4kjixBntklUmUQwIM59Pm_vtC1dFb_TcsVs9LIC21V42u4B9Yupp7NYI"/>
</div>
<div>
<p class="font-semibold text-white">Titan CRM</p>
<p class="text-xs text-on-surface-variant">Customer relationship dashboard</p>
</div>
</div>
</td>
<td class="px-lg py-4">
<div class="flex gap-2">
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">REACT</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">TAILWIND</span>
</div>
</td>
<td class="px-lg py-4">
<div class="flex justify-center">
<span class="px-3 py-1 rounded-full bg-secondary-container/50 text-secondary text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 border border-outline-variant/20">
<span class="w-1.5 h-1.5 rounded-full bg-secondary/50"></span>
                                            Draft
                                        </span>
</div>
</td>
<td class="px-lg py-4">
<p class="text-xs text-on-surface-variant">Yesterday</p>
</td>
<td class="px-lg py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-white hover:bg-white/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</div>
</td>
</tr>
<!-- Project Row 3 -->
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-lg py-4">
<div class="flex items-center gap-4">
<div class="h-12 w-16 rounded-lg overflow-hidden border border-outline-variant/30 bg-surface-container flex-shrink-0">
<img alt="Project thumbnail" data-alt="close-up of a high-performance computer processor on a circuit board with technical blue lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCntf2Np-s6guVRUJ3fCaAIb1vjQs51S9vGP-nZYUOqcBD5TB7mNtcQk9FAiDNlD7H0RubzBlMGmPgstf_wGdfEOVzlr-XOq-xZmYfhdZ__KzG5Q3U93gl4YQOV1zDvVBpkhR5xhdvaaSG_vU3OnlbuEbgsmStfjV9cJ7Go1G54V8vsSFmVEmW7MmgjkwmNzXiklprfk7ely4FjHdBi5V1gIRlV-m0tQpJTxbo3jBUiwchrFayE3yW_ABsfOqHcRHRtKBzvMq-TlvM"/>
</div>
<div>
<p class="font-semibold text-white">Quantum Analytics</p>
<p class="text-xs text-on-surface-variant">Real-time data visualization</p>
</div>
</div>
</td>
<td class="px-lg py-4">
<div class="flex gap-2">
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">PYTHON</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">D3.JS</span>
</div>
</td>
<td class="px-lg py-4">
<div class="flex justify-center">
<span class="px-3 py-1 rounded-full bg-tertiary/10 text-tertiary text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 border border-tertiary/20">
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
                                            Live
                                        </span>
</div>
</td>
<td class="px-lg py-4">
<p class="text-xs text-on-surface-variant">3 days ago</p>
</td>
<td class="px-lg py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-white hover:bg-white/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</div>
</td>
</tr>
<!-- Project Row 4 -->
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-lg py-4">
<div class="flex items-center gap-4">
<div class="h-12 w-16 rounded-lg overflow-hidden border border-outline-variant/30 bg-surface-container flex-shrink-0">
<img alt="Project thumbnail" data-alt="matrix of green code lines streaming across a dark screen with glowing technical aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBO_NZk8X8ocf4-hsjJV166HuA0CJpou4wh3uPXx9gIhs9dWJCll-0Qyrz6Zy_NqIgqqjyXysghn2TR6fk1pnLXwRhHNWQu3efoc4tnM7FBAA7OKzUxXWx7aTxbGcDUQBXRlRvBBWx_Mf7aQzI6I47YpkB9akhAmK_j4-kLcF1R_60_UALF-cSDL4rLK6mBZmuOf78It_zc46e9tUTiSgaGUKo3d-omF48E5A6PuHr38Cxmf5TjI8XLLIDTyKFZDck8bMF8SFC3ytE"/>
</div>
<div>
<p class="font-semibold text-white">Security Patch v4</p>
<p class="text-xs text-on-surface-variant">Infrastructure security layer</p>
</div>
</div>
</td>
<td class="px-lg py-4">
<div class="flex gap-2">
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">RUST</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">GO</span>
</div>
</td>
<td class="px-lg py-4">
<div class="flex justify-center">
<span class="px-3 py-1 rounded-full bg-tertiary/10 text-tertiary text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 border border-tertiary/20">
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
                                            Live
                                        </span>
</div>
</td>
<td class="px-lg py-4">
<p class="text-xs text-on-surface-variant">Oct 24, 2023</p>
</td>
<td class="px-lg py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-white hover:bg-white/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="px-lg py-4 bg-slate-950/30 flex justify-between items-center border-t border-outline-variant/20">
<p class="text-xs text-on-surface-variant">Showing 4 of 24 projects</p>
<div class="flex gap-2">
<button class="px-3 py-1.5 rounded border border-outline-variant/30 text-xs hover:bg-white/5 transition-all text-on-surface-variant">Previous</button>
<button class="px-3 py-1.5 rounded bg-primary-container/20 text-primary text-xs font-semibold border border-primary/20">1</button>
<button class="px-3 py-1.5 rounded border border-outline-variant/30 text-xs hover:bg-white/5 transition-all text-on-surface-variant">2</button>
<button class="px-3 py-1.5 rounded border border-outline-variant/30 text-xs hover:bg-white/5 transition-all text-on-surface-variant">3</button>
<button class="px-3 py-1.5 rounded border border-outline-variant/30 text-xs hover:bg-white/5 transition-all text-on-surface-variant">Next</button>
</div>
</div>
</div>
<!-- Contextual Help / Insights (Asymmetric Layout Element) -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="md:col-span-2 glass-panel p-lg rounded-xl flex items-start gap-4">
<div class="p-3 rounded-lg bg-primary/10 text-primary">
<span class="material-symbols-outlined">auto_awesome</span>
</div>
<div>
<h3 class="font-h2 text-body-lg text-white mb-1">AI Project Insights</h3>
<p class="text-sm text-on-surface-variant leading-relaxed">Based on your activity, we recommend updating the "Nebula Core API" tech stack. A newer version of Node.js is available with significant performance improvements for your specific workload.</p>
<button class="mt-4 text-primary text-xs font-bold uppercase tracking-wider flex items-center gap-1 hover:underline">
                            View Upgrade Guide
                            <span class="material-symbols-outlined text-xs">arrow_forward</span>
</button>
</div>
</div>
<div class="glass-panel p-lg rounded-xl relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-50"></div>
<div class="relative z-10">
<h3 class="font-h2 text-body-lg text-white mb-2">Cloud Storage</h3>
<div class="w-full bg-surface-container-highest h-2 rounded-full mb-2">
<div class="bg-primary h-full w-[72%] rounded-full shadow-[0_0_10px_rgba(59,130,246,0.5)]"></div>
</div>
<p class="text-xs text-on-surface-variant">72.4 GB of 100 GB used</p>
<button class="w-full mt-6 py-2 rounded-lg border border-outline-variant/30 text-xs font-semibold hover:bg-white/5 transition-all">Manage Assets</button>
</div>
</div>
</div>
</main>
</div>
</body></html>
projects.php

<!DOCTYPE html>

<html class="scroll-smooth" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "outline": "#747878",
                    "inverse-primary": "#c9c6c5",
                    "on-tertiary-fixed-variant": "#59430a",
                    "on-secondary-fixed": "#1b1c1c",
                    "secondary": "#5e5e5e",
                    "on-primary-fixed": "#1c1b1b",
                    "surface-bright": "#fdf9f0",
                    "secondary-fixed": "#e4e2e2",
                    "surface-container-highest": "#e6e2d9",
                    "on-surface-variant": "#444748",
                    "background": "#fdf9f0",
                    "primary-fixed": "#e5e2e1",
                    "error": "#ba1a1a",
                    "surface-tint": "#5f5e5e",
                    "primary": "#000000",
                    "on-primary": "#ffffff",
                    "secondary-fixed-dim": "#c7c6c6",
                    "on-surface": "#1c1c16",
                    "surface-container-high": "#ece8df",
                    "on-error": "#ffffff",
                    "tertiary-fixed": "#ffdf9c",
                    "primary-fixed-dim": "#c9c6c5",
                    "on-tertiary-container": "#9c8043",
                    "inverse-on-surface": "#f4f0e7",
                    "tertiary-container": "#251a00",
                    "surface-container-low": "#f7f3ea",
                    "on-tertiary-fixed": "#251a00",
                    "on-secondary-container": "#636262",
                    "inverse-surface": "#31302b",
                    "on-primary-container": "#858383",
                    "on-primary-fixed-variant": "#474646",
                    "surface": "#fdf9f0",
                    "primary-container": "#1c1b1b",
                    "surface-container-lowest": "#ffffff",
                    "on-tertiary": "#ffffff",
                    "secondary-container": "#e1dfdf",
                    "on-background": "#1c1c16",
                    "on-secondary-fixed-variant": "#464747",
                    "surface-variant": "#e6e2d9",
                    "outline-variant": "#c4c7c7",
                    "tertiary-fixed-dim": "#e3c37e",
                    "error-container": "#ffdad6",
                    "surface-dim": "#dddad1",
                    "on-secondary": "#ffffff",
                    "surface-container": "#f1eee5",
                    "on-error-container": "#93000a",
                    "tertiary": "#000000"
            },
            "borderRadius": {
                    "DEFAULT": "0.125rem",
                    "lg": "0.25rem",
                    "xl": "0.5rem",
                    "full": "0.75rem"
            },
            "spacing": {
                    "margin-page": "64px",
                    "section-gap": "160px",
                    "unit": "4px",
                    "gutter": "32px",
                    "container-max": "1280px"
            },
            "fontFamily": {
                    "label-caps": ["Inter"],
                    "h1": ["Inter"],
                    "body-md": ["Inter"],
                    "display": ["Inter"],
                    "body-lg": ["Inter"],
                    "h2": ["Inter"]
            },
            "fontSize": {
                    "label-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.1em", "fontWeight": "600"}],
                    "h1": ["48px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "400"}],
                    "body-md": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
                    "display": ["72px", {"lineHeight": "1.1", "letterSpacing": "-0.04em", "fontWeight": "300"}],
                    "body-lg": ["20px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
                    "h2": ["32px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "400"}]
            }
          },
        },
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .project-card-hover:hover .project-image {
            transform: scale(1.05);
        }
        .custom-bezier {
            transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        }
    </style>
</head>
<body class="bg-background text-on-background font-body-md antialiased min-h-screen">
<!-- TopNavBar Shell -->
<?php include 'inc/header.php'; ?>
<main class="max-w-[1280px] mx-auto px-8 pt-48 pb-20">
<!-- Hero Section -->
<section class="mb-section-gap">
<h1 class="font-display text-display text-primary mb-4">Selected Works</h1>
<p class="font-body-lg text-body-lg text-secondary max-w-2xl">
                A curation of digital products and engineering experiments, ranging from architectural systems to high-fidelity frontend experiences.
            </p>
</section>
<!-- Filters -->
<section class="mb-12 flex flex-wrap gap-4 items-center">
<span class="font-label-caps text-label-caps text-secondary uppercase mr-4">Filter By</span>
<button class="px-6 py-2 rounded-full border border-primary bg-primary text-on-primary font-label-caps text-label-caps hover:scale-105 transition-all custom-bezier">All Projects</button>
<button class="px-6 py-2 rounded-full border border-outline text-on-surface font-label-caps text-label-caps hover:bg-primary hover:text-on-primary transition-all custom-bezier">Frontend</button>
<button class="px-6 py-2 rounded-full border border-outline text-on-surface font-label-caps text-label-caps hover:bg-primary hover:text-on-primary transition-all custom-bezier">Backend</button>
<button class="px-6 py-2 rounded-full border border-outline text-on-surface font-label-caps text-label-caps hover:bg-primary hover:text-on-primary transition-all custom-bezier">Full Stack</button>
</section>
<!-- Projects Grid -->
<section class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<!-- Project Card 1: Asymmetric Layout -->
<div class="group project-card-hover flex flex-col gap-6 custom-bezier transition-all duration-500 opacity-100 translate-y-0">
<div class="relative aspect-video overflow-hidden rounded shadow-2xl shadow-black/5 bg-surface-container">
<img alt="Project One" class="project-image object-cover w-full h-full transition-transform duration-700 custom-bezier" data-alt="Modern clean dashboard UI with minimalist data visualizations, soft shadows, and a neutral color palette on a high-end display" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdEfwT2rqM6xLiMEcAofUBzweo-3k7-a1g_LBCfkLbzTiT8dIW1poQ7nPb58cAMUHcDXWHNZ3Zq-81_pmbI7RZmy4xzMm7rBIncVj5XyiIChuWx6IjY-uKhkU-s-bGOx-rukMAJSr3fePXebzTZVTiLQFR3972MYiJyolXit37H_hTFVxUVDpnk6I5q5F1eus_-QwR-JlT8yZPmJHKo_JVH-eQVerN_o3RS66NPGYWAnki22hf7Le3xBTBNwTZdqdGxSp7UPJ1XMA"/>
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-all duration-500"></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-start">
<div>
<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase tracking-widest">Full Stack</span>
<h2 class="font-h2 text-h2 text-primary mt-1">Ethereal Analytics</h2>
</div>
<div class="flex gap-4">
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">open_in_new</a>
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">code</a>
</div>
</div>
<p class="font-body-md text-body-md text-secondary max-w-lg">
                        A real-time data visualization platform for creative studios, featuring a custom-built processing engine and a fluid React frontend.
                    </p>
<div class="flex gap-2 flex-wrap mt-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">NEXT.JS</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">TYPESCRIPT</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">D3.JS</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">POSTGRESQL</span>
</div>
</div>
</div>
<!-- Project Card 2 -->
<div class="group project-card-hover flex flex-col gap-6 custom-bezier transition-all duration-500 md:mt-24">
<div class="relative aspect-video overflow-hidden rounded shadow-2xl shadow-black/5 bg-surface-container">
<img alt="Project Two" class="project-image object-cover w-full h-full transition-transform duration-700 custom-bezier" data-alt="Architectural code structure visualization with neon lines on dark background representing complex backend infrastructure nodes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3-M1sfvFUD5Wh4-bpocw_F36hiHJ7hKyEzOo-QBzWfgwfY8VRDPFBHwj8SV1bgz1JfzC2BF7C8LxZXmomGlWnASzOl9c_bbCI8mDG7-FpB8cYdu_ZeLe95TPL4tTQ66ORejTnM9k1MrhI0qYour647M-BSwg9FV0UCTjJtgsaJ8zndlyBeScX8rqW-iJ78ZcSY6kOGDvt567tqG7yKl0xigNBfJJm9sJp6YgKneTT6tqAeQAtqfM4OvbOgrrvCYG_MPSsx3LRGzs"/>
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-all duration-500"></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-start">
<div>
<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase tracking-widest">Backend</span>
<h2 class="font-h2 text-h2 text-primary mt-1">Nexus Core</h2>
</div>
<div class="flex gap-4">
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">open_in_new</a>
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">code</a>
</div>
</div>
<p class="font-body-md text-body-md text-secondary max-w-lg">
                        High-performance API gateway and service mesh designed for low-latency financial transactions and microservices orchestration.
                    </p>
<div class="flex gap-2 flex-wrap mt-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">GO</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">REDIS</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">KUBERNETES</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">GRPC</span>
</div>
</div>
</div>
<!-- Project Card 3 -->
<div class="group project-card-hover flex flex-col gap-6 custom-bezier transition-all duration-500">
<div class="relative aspect-video overflow-hidden rounded shadow-2xl shadow-black/5 bg-surface-container">
<img alt="Project Three" class="project-image object-cover w-full h-full transition-transform duration-700 custom-bezier" data-alt="Sleek mobile app interface mockup showing an elegant typography-focused user profile and creative portfolio feed" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9vyrU8uN-EladPyeVCxTG2YTLpOcRKJeWGdnPyFYvnwjMii1m1eh_ABSZUMvCkXnXnkTJMnBw9844wgI5SXYRJha3Dp7HywaQzPaC_7IKGNbQLzWJO9429VtOrQjOuc_A72E1H2vfn7DMcck4Pymn4Qr-YHUew3X2FQ8Ga__wDbrGBNvludrDV-4H7hf_JajyTHFR5G07sXg_wSao1dnU9gnXzEKIXrfHno4OEqh1kmKA0m_R2ea-LwEkXV4RmpplaBQTsi4Lqu4"/>
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-all duration-500"></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-start">
<div>
<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase tracking-widest">Frontend</span>
<h2 class="font-h2 text-h2 text-primary mt-1">Velvet UI Kit</h2>
</div>
<div class="flex gap-4">
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">open_in_new</a>
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">code</a>
</div>
</div>
<p class="font-body-md text-body-md text-secondary max-w-lg">
                        A premium component library focusing on editorial typography and fluid motion patterns for high-end web applications.
                    </p>
<div class="flex gap-2 flex-wrap mt-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">REACT</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">TAILWIND</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">FRAMER MOTION</span>
</div>
</div>
</div>
<!-- Project Card 4 -->
<div class="group project-card-hover flex flex-col gap-6 custom-bezier transition-all duration-500 md:mt-24">
<div class="relative aspect-video overflow-hidden rounded shadow-2xl shadow-black/5 bg-surface-container">
<img alt="Project Four" class="project-image object-cover w-full h-full transition-transform duration-700 custom-bezier" data-alt="Conceptual 3D abstract shapes representing cloud computing and distributed systems, rendered in soft cream and charcoal tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAlbU9gPUYZbwxBpCFgkLFReQZIX-BJgp8qafi6IamPCEClu0YGzQvlm2B06nzMmkHnVgp9AHphMp74fSlDvbeSrK-UsvgxNtRMq8qj4OuRhxZZnt8vjiTqJYKqY4JHIsXUAcqpulEiT3a3GXhz-AMg6WdGrooezUGESSdMgA8whC-E2YcRaH4UnQb96PiqW5QYTTwMOQGowkH-JpT6Rd5KZoiwS2rgBkGvLF8-9JUeNbuDl71rAGMvRoebyqSk3HYifpNsZa8Tqnk"/>
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-all duration-500"></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-start">
<div>
<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase tracking-widest">Full Stack</span>
<h2 class="font-h2 text-h2 text-primary mt-1">Atlas Cloud</h2>
</div>
<div class="flex gap-4">
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">open_in_new</a>
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">code</a>
</div>
</div>
<p class="font-body-md text-body-md text-secondary max-w-lg">
                        A decentralized storage solution leveraging IPFS and custom encryption protocols for secure, peer-to-peer file sharing.
                    </p>
<div class="flex gap-2 flex-wrap mt-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">RUST</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">IPFS</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">SOLIDITY</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">WEB3</span>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="mt-section-gap flex flex-col items-center text-center">
<h2 class="font-h1 text-h1 text-primary mb-8 max-w-xl">Have a concept in mind? Let's build it together.</h2>
<a href="contact-us.php" class="bg-primary text-on-primary px-12 py-4 rounded-lg font-body-md hover:scale-105 shadow-xl transition-all duration-300 custom-bezier">
                Start a Conversation
            </a>
</section>

</main>
    <?php include 'inc/footer.php'; ?>
</body></html>
project-details.php
<?php
require_once '../mgmt/conn/pdo-conn.php';
require_once '../mgmt/app/fetch-project.php';

$slug = $_GET['slug'] ?? '';
$project = getProjectBySlug($pdo, $slug);

if (!$project) {
    die('Project not found');
}
?>

<!DOCTYPE html>

<html class="scroll-smooth" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
        tailwind.config = {
          darkMode: "class",
          theme: {
            extend: {
              "colors": {
                      "error": "#ba1a1a",
                      "primary": "#000000",
                      "on-error": "#ffffff",
                      "inverse-primary": "#c9c6c5",
                      "surface-container-low": "#f7f3ea",
                      "surface-container": "#f1eee5",
                      "surface-bright": "#fdf9f0",
                      "on-secondary-container": "#636262",
                      "primary-fixed-dim": "#c9c6c5",
                      "on-primary-fixed-variant": "#474646",
                      "surface-dim": "#dddad1",
                      "surface-variant": "#e6e2d9",
                      "outline": "#747878",
                      "on-secondary": "#ffffff",
                      "secondary-fixed": "#e4e2e2",
                      "tertiary-fixed-dim": "#e3c37e",
                      "secondary-container": "#e1dfdf",
                      "on-secondary-fixed": "#1b1c1c",
                      "background": "#fdf9f0",
                      "on-tertiary": "#ffffff",
                      "surface-container-lowest": "#ffffff",
                      "surface-container-high": "#ece8df",
                      "secondary": "#5e5e5e",
                      "primary-container": "#1c1b1b",
                      "on-error-container": "#93000a",
                      "on-primary-fixed": "#1c1b1b",
                      "on-primary-container": "#858383",
                      "on-surface": "#1c1c16",
                      "primary-fixed": "#e5e2e1",
                      "inverse-surface": "#31302b",
                      "on-surface-variant": "#444748",
                      "secondary-fixed-dim": "#c7c6c6",
                      "inverse-on-surface": "#f4f0e7",
                      "on-tertiary-fixed-variant": "#59430a",
                      "on-background": "#1c1c16",
                      "on-secondary-fixed-variant": "#464747",
                      "tertiary-container": "#251a00",
                      "tertiary": "#000000",
                      "outline-variant": "#c4c7c7",
                      "surface-tint": "#5f5e5e",
                      "surface": "#fdf9f0",
                      "on-tertiary-container": "#9c8043",
                      "on-tertiary-fixed": "#251a00",
                      "on-primary": "#ffffff",
                      "surface-container-highest": "#e6e2d9",
                      "tertiary-fixed": "#ffdf9c",
                      "error-container": "#ffdad6"
              },
              "borderRadius": {
                      "DEFAULT": "0.125rem",
                      "lg": "0.25rem",
                      "xl": "0.5rem",
                      "full": "0.75rem"
              },
              "spacing": {
                      "container-max": "1280px",
                      "gutter": "32px",
                      "unit": "4px",
                      "section-gap": "160px",
                      "margin-page": "64px"
              },
              "fontFamily": {
                      "label-caps": ["Inter"],
                      "body-lg": ["Inter"],
                      "h2": ["Inter"],
                      "h1": ["Inter"],
                      "display": ["Inter"],
                      "body-md": ["Inter"]
              },
              "fontSize": {
                      "label-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.1em", "fontWeight": "600"}],
                      "body-lg": ["20px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
                      "h2": ["32px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "400"}],
                      "h1": ["48px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "400"}],
                      "display": ["72px", {"lineHeight": "1.1", "letterSpacing": "-0.04em", "fontWeight": "300"}],
                      "body-md": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}]
              }
            },
          },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
        }
        .glass-nav {
            backdrop-filter: blur(12px);
            background-color: rgba(255, 255, 255, 0.4);
        }
        .parallax-container {
            clip-path: inset(0 0 0 0);
        }
    </style>
</head>
<body class="bg-surface font-body-md text-on-surface antialiased">
<!-- TopNavBar from JSON -->
    <?php include 'inc/header.php'; ?>
<main>
<!-- Hero Section -->
<section class="pt-48 pb-20 px-margin-page max-w-container-max mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end gap-8 mb-12">
<div class="max-w-3xl">
<span class="font-label-caps text-label-caps uppercase text-on-secondary-container mb-4 block">Case Study 2024</span>
<h1 class="font-display text-display text-primary mb-6">Ethereal Analytics</h1>
<p class="font-body-lg text-body-lg text-secondary max-w-xl">A real-time data visualization platform designed for high-frequency financial intelligence.</p>
</div>
<div class="flex flex-wrap gap-3">
<span class="px-4 py-2 border border-outline-variant rounded-full font-label-caps text-[10px] uppercase tracking-widest">Next.js</span>
<span class="px-4 py-2 border border-outline-variant rounded-full font-label-caps text-[10px] uppercase tracking-widest">D3.js</span>
<span class="px-4 py-2 border border-outline-variant rounded-full font-label-caps text-[10px] uppercase tracking-widest">Postgres</span>
</div>
</div>
<div class="w-full aspect-[21/9] overflow-hidden rounded-xl relative group">
<img alt="Ethereal Analytics Dashboard" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Modern dark mode data visualization dashboard with glowing neon blue and purple charts on a clean glassmorphism interface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAuX9AND6RRqeuULskWbD7HPD9r8ZWq-vrAwOkPRr0mwuJNqe0otS6tWOxq7ZxtSyGoTz-kks3ZvAW-v2KBPWnWDwXXyILxQMTecwvqOOOUst-EMK5NbgeRUSJi2EdelJR_eyfKpC5B0TR-ndmjGbVDQsAyUHkd-iTXuDxeDlhwiOIesbY2LVFLAIlc6ydroZIraFZRIlS5302s_ojXlGYNR0NTnNUWQ8n2ikOOzuWRPQpYIs5TIK_8RxCI3xsLlcyqZ0hm3TnFI5U"/>
</div>
</section>
<!-- Overview Section -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto grid grid-cols-1 md:grid-cols-12 gap-gutter">
<div class="md:col-span-4">
<h2 class="font-h2 text-h2 text-primary sticky top-32">The Project Context</h2>
</div>
<div class="md:col-span-8 flex flex-col gap-12">
<div class="space-y-6">
<p class="font-body-lg text-body-lg text-primary leading-relaxed">
                        In an era where data latency equals lost opportunity, Ethereal Analytics was born from the need for instantaneous clarity. We reimagined how enterprise users interact with millions of streaming data points, transforming cold numbers into a fluid, cinematic experience.
                    </p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 pt-12 border-t border-surface-variant">
<div>
<h4 class="font-label-caps text-label-caps uppercase text-on-secondary-container mb-4">The Problem</h4>
<p class="font-body-md text-body-md text-secondary">Existing tools suffered from visual clutter and significant rendering delays, causing decision paralysis during high-volatility market events.</p>
</div>
<div>
<h4 class="font-label-caps text-label-caps uppercase text-on-secondary-container mb-4">The Goal</h4>
<p class="font-body-md text-body-md text-secondary">To build a zero-latency visualization engine that scales across devices without sacrificing the aesthetic quality expected by premium users.</p>
</div>
</div>
</div>
</section>
<!-- CTA Action Bar -->
<section class="max-w-container-max mx-auto px-margin-page mb-section-gap">
<div class="bg-primary text-on-primary rounded-xl p-12 flex flex-col md:flex-row justify-between items-center gap-8">
<div class="text-center md:text-left">
<h3 class="font-h2 text-h2 mb-2">Experience the Live Demo</h3>
<p class="text-on-primary-container font-body-md">Interact with the real-time engine in a sandboxed environment.</p>
</div>
<div class="flex gap-4">
<a class="bg-surface text-primary px-8 py-4 rounded-full font-label-caps text-label-caps uppercase hover:bg-surface-container transition-colors flex items-center gap-2" href="#">
                        Live Demo <span class="material-symbols-outlined text-[18px]" data-icon="arrow_outward">arrow_outward</span>
</a>
<a class="border border-surface-variant text-surface px-8 py-4 rounded-full font-label-caps text-label-caps uppercase hover:bg-white/10 transition-colors flex items-center gap-2" href="#">
                        View Code <span class="material-symbols-outlined text-[18px]" data-icon="code">code</span>
</a>
</div>
</div>
</section>
<!-- Solution Deep Dive (Bento Grid Style) -->
<section class="py-section-gap bg-surface-container">
<div class="max-w-container-max mx-auto px-margin-page">
<div class="mb-20">
<h2 class="font-h1 text-h1 text-primary text-center">Architectural Precision</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Feature Card 1 -->
<div class="bg-surface p-10 rounded-xl shadow-[0_20px_40px_rgba(0,0,0,0.02)] border border-white/50 flex flex-col justify-between aspect-square">
<span class="material-symbols-outlined text-4xl" data-icon="layers">layers</span>
<div>
<h3 class="font-h2 text-h2 mb-4">Frontend</h3>
<p class="font-body-md text-secondary">Next.js 14 utilizing Server Components for initial payload speed, paired with a custom D3 wrapper for reactive SVG rendering.</p>
</div>
</div>
<!-- Feature Card 2 (Spans 2 rows/cols on desktop) -->
<div class="bg-primary text-on-primary p-10 rounded-xl flex flex-col justify-between md:row-span-2">
<div>
<span class="material-symbols-outlined text-4xl text-on-primary-container" data-icon="bolt">bolt</span>
<h3 class="font-h1 text-h1 mt-8 mb-6">Real-time Core</h3>
<p class="font-body-lg text-on-primary-container leading-relaxed">The heart of the system is a WebSocket-driven state manager that handles over 50,000 updates per second with sub-10ms latency.</p>
</div>
<div class="mt-8 pt-8 border-t border-on-primary-container/20">
<ul class="space-y-4 font-label-caps text-label-caps uppercase">
<li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-white"></span> Low-Latency Websockets</li>
<li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-white"></span> Multi-threaded Processing</li>
<li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-white"></span> WebGL Offloading</li>
</ul>
</div>
</div>
<!-- Feature Card 3 -->
<div class="bg-surface p-10 rounded-xl shadow-[0_20px_40px_rgba(0,0,0,0.02)] border border-white/50 flex flex-col justify-between aspect-square">
<span class="material-symbols-outlined text-4xl" data-icon="database">database</span>
<div>
<h3 class="font-h2 text-h2 mb-4">Database</h3>
<p class="font-body-md text-secondary">TimescaleDB (Postgres) optimized for time-series data, ensuring lightning-fast aggregations across historical datasets.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<div class="space-y-gutter">
<figure class="group overflow-hidden rounded-xl">
<img alt="Detail View" class="w-full aspect-[4/5] object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Extreme close-up of a high-resolution retina display showing crisp line graphs and complex data nodes in a dark UI" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVN3Np5Sx4rWjNqLILZ-hMUN3KZUJl7vlXymTdHpfcNlwAkpCNMpIgXm5EwAlRvGVNYGabpaTCss09e1KRH6ehHiz9lgcwItxKHsM-lAm4wtjpVSIFhgkOxFCyR9HMWmuTY6h_-W3S3fi2bmxPfT9qMogTSnwJNCWIbAV6wSY7cfwuGn0uOV0aszw1mLU32Sx-Wi6OFArkTY022dDfu-TTmrZkWoYqFWtcAMqg3GzLuc1yofyBP10EF4q8FoqG0XR9la1Crr24nDg"/>
</figure>
<figure class="group overflow-hidden rounded-xl">
<img alt="Mobile Responsive" class="w-full aspect-square object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Premium smartphone lying on a wooden desk displaying the mobile version of the analytics app with fluid gesture controls" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAs8R7TV4sKyDcrNv_sJHZR9kTJPekvPlAP-DUn4lrSwS1BpAvPdBa08K9CeMIAdnv12HndlhAdCK3_2w_2gLNtTueNJb-IFNty7FgVLLWnDtsBawV6hzkbOQXesZ_ZXhtB8lsKYnA-WAJ2-f8xIk9CuMjbRqhIldF__ZS859g9qX8DLFXoTn3gEjvZC_eKSaSzbJZC97qkb3f_eJ2rxC_LAVQUZVQu1vR-cGISPnfAGgc8fmqdH8GJgHt_sJt7iIlut5N4TW1-nkA"/>
</figure>
</div>
<div class="space-y-gutter pt-32">
<figure class="group overflow-hidden rounded-xl">
<img alt="Coding Process" class="w-full aspect-[4/5] object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Blurred background of a software developer's workstation with mechanical keyboard and multiple monitors showing clean React code" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsOsAxl0snUMtIO-Db5lSLnjrPn_pU_TOxx_sov2vIeTpsKPRn-5cC9yIHldxgLWr5zxv3lI65iIr-F2QTXW6-Gb_5LfKx4laSHeX0gDPstBrEkuD8A3aSq-3dbAD-RaHwmN4U7TRyYHIsi_SmsFS5G8O-0741rIc0IeHgrDpnX6q6MrLw63NaEVsMYAs-X8ZG6ioYEkF_afe6nsTDF9Qgm-Ov_MTblNFNFwStCve4njILNUTEo3Javv2g9rQ5glIcQeJaA8wkpYA"/>
</figure>
<figure class="group overflow-hidden rounded-xl">
<img alt="Data Flow" class="w-full aspect-[4/3] object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Abstract visualization of digital data flow using ethereal light streaks and geometric patterns in shades of deep blue and gold" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAslozcZw-UEnvfR4b2cnxZ50OLKukui9qo8GzJtrd-H_tVvEBDYlwiZR33yvxzHcmEjPg1BeBgC-0OMb2bpxn7Uig_2Hise_XXZB0ojGeS0VuCMN5-67_fA2r8dOBngCBzvMJ2NvFJWQYKjKiX3Kx-uajOrDKnuVkZKkRLCky8lqupYfjY8EibjnHaT0kBjPkQnzrKrUYY5UKGAg9eu_8rQ-syPuCg6HTN4cFCB0fvyiDoGvRPpqH9dhGmRc3QMlfyTHCEqthFvK4"/>
</figure>
</div>
</div>
</section>
<!-- Tech Stack Pills -->
<section class="py-20 border-t border-surface-variant px-margin-page max-w-container-max mx-auto text-center">
<h4 class="font-label-caps text-label-caps uppercase text-on-secondary-container mb-12">The Technical Toolkit</h4>
<div class="flex flex-wrap justify-center gap-4 max-w-3xl mx-auto">
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">TypeScript</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">Next.js 14</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">Tailwind CSS</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">D3.js</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">Redis</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">PostgreSQL</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">Docker</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">AWS Fargate</span>
</div>
</section>
<!-- Challenges & Learnings -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto grid grid-cols-1 md:grid-cols-12 gap-gutter">
<div class="md:col-span-4">
<h2 class="font-h2 text-h2 text-primary">Hurdles &amp; Insights</h2>
</div>
<div class="md:col-span-8 space-y-16">
<div class="group border-l-2 border-surface-variant pl-8 hover:border-primary transition-colors">
<h3 class="font-h2 text-h2 mb-4">Memory Leaks in SVG</h3>
<p class="font-body-md text-secondary">Updating thousands of SVG elements every 100ms caused significant memory bloat. We solved this by implementing a hybrid Canvas/SVG approach, where background noise is pre-rendered on canvas while interactive elements remain as SVGs.</p>
</div>
<div class="group border-l-2 border-surface-variant pl-8 hover:border-primary transition-colors">
<h3 class="font-h2 text-h2 mb-4">State Synchronization</h3>
<p class="font-body-md text-secondary">Maintaining consistent state across multiple user sessions required a specialized Reducer pattern combined with optimistic UI updates to mask network jitter.</p>
</div>
</div>
</section>
<!-- Navigation: Prev/Next -->
<section class="border-t border-surface-variant">
<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-surface-variant">
<a class="group py-24 px-margin-page flex flex-col items-start justify-center hover:bg-surface-container transition-colors" href="#">
<span class="font-label-caps text-label-caps uppercase text-secondary mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-sm" data-icon="arrow_back">arrow_back</span> Previous Project
                    </span>
<h3 class="font-display text-[40px] text-primary group-hover:translate-x-4 transition-transform duration-500">Lumina CRM</h3>
</a>
<a class="group py-24 px-margin-page flex flex-col items-end justify-center text-right hover:bg-surface-container transition-colors" href="#">
<span class="font-label-caps text-label-caps uppercase text-secondary mb-4 flex items-center gap-2">
                        Next Project <span class="material-symbols-outlined text-sm" data-icon="arrow_forward">arrow_forward</span>
</span>
<h3 class="font-display text-[40px] text-primary group-hover:-translate-x-4 transition-transform duration-500">Onyx Commerce</h3>
</a>
</div>
</section>
</main>
<!-- Footer from JSON -->
    <?php include 'inc/footer.php'; ?>
</body></html> /




i need a professional and highly secured prompt for an ai to help me write the logic for my portfolio-mgmt/projects.php. 
call the logic file mgmt/app/projects-mgmt.php .
i want the admin to be able to add project from portfolio-mgmt/projects.php and will show in projects.php. and project-details.php is to show the full details of the project written, that means if any project is clicked on projects.php , that particular project will be redirected to show its project-details.php completely.
when the add new project button is clicked, a popup form that has input that suits the projects.php and project-details.php .
create a database table for projects using sql fmt
make sure the TOTAL PROJECTS, ACTIVE DEPLOYMENTS, PENDING DRAFTS, TOTAL REACH,and  the search filter and table to work effective without error.
on the top nav, let the image fetch from mgmt/app/settings.php
make the page mobile responsive, do not add any sidebar just use inc/sidebar.php
portfolio-mgmt/projects.php
<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "surface-container-lowest": "#0c0f10",
                        "surface-container-high": "#282a2b",
                        "on-tertiary": "#003915",
                        "surface-variant": "#323536",
                        "secondary": "#c0c6db",
                        "on-secondary-container": "#aeb5c9",
                        "primary": "#adc6ff",
                        "on-primary": "#002e6a",
                        "surface-container-low": "#191c1d",
                        "surface-container-highest": "#323536",
                        "on-secondary-fixed": "#141b2b",
                        "secondary-container": "#404758",
                        "error-container": "#93000a",
                        "background": "#111415",
                        "outline": "#8c909f",
                        "on-tertiary-container": "#003111",
                        "on-secondary-fixed-variant": "#404758",
                        "inverse-primary": "#005ac2",
                        "surface": "#111415",
                        "surface-bright": "#373a3b",
                        "on-tertiary-fixed": "#002109",
                        "on-tertiary-fixed-variant": "#005321",
                        "tertiary-fixed": "#6bff8f",
                        "tertiary-container": "#00a74b",
                        "tertiary-fixed-dim": "#4ae176",
                        "primary-container": "#4d8eff",
                        "primary-fixed": "#d8e2ff",
                        "surface-tint": "#adc6ff",
                        "on-surface-variant": "#c2c6d6",
                        "outline-variant": "#424754",
                        "on-secondary": "#293040",
                        "inverse-on-surface": "#2e3132",
                        "inverse-surface": "#e1e3e4",
                        "on-error-container": "#ffdad6",
                        "error": "#ffb4ab",
                        "on-surface": "#e1e3e4",
                        "on-primary-fixed": "#001a42",
                        "on-error": "#690005",
                        "primary-fixed-dim": "#adc6ff",
                        "on-primary-container": "#00285d",
                        "on-primary-fixed-variant": "#004395",
                        "on-background": "#e1e3e4",
                        "tertiary": "#4ae176",
                        "secondary-fixed-dim": "#c0c6db",
                        "secondary-fixed": "#dce2f7",
                        "surface-container": "#1d2021",
                        "surface-dim": "#111415"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "lg": "24px",
                        "xl": "48px",
                        "unit": "4px",
                        "container-padding": "32px",
                        "xs": "4px",
                        "md": "16px",
                        "sm": "8px",
                        "gutter": "24px"
                    },
                    "fontFamily": {
                        "display-xl": ["Inter"],
                        "h2": ["Inter"],
                        "body-md": ["Inter"],
                        "body-lg": ["Inter"],
                        "code-sm": ["monospace"],
                        "label-caps": ["Inter"],
                        "h1": ["Inter"]
                    },
                    "fontSize": {
                        "display-xl": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                        "h2": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
                        "body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}],
                        "body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
                        "code-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}],
                        "label-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "600"}],
                        "h1": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}]
                    }
                }
            }
        }
    </script>
<style>
        .glass-panel {
            background: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid #1F2937;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    </style>
</head>
<body class="bg-surface-dim font-body-md text-on-surface antialiased">
<!-- SideNavBar -->
 <?php include 'inc/sidebar.php'; ?>
<!-- Main Content Shell -->
<div class="ml-[280px]">
<!-- TopAppBar -->
<header class="fixed top-0 right-0 left-[280px] z-40 bg-slate-900/80 backdrop-blur-xl h-16 px-8 border-b border-slate-800/50 flex justify-between items-center shadow-2xl shadow-black/50">
<div class="flex items-center gap-4">
<div class="relative group">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-sm">search</span>
<input class="bg-slate-950/50 border border-slate-800 text-sm rounded-lg pl-9 pr-4 py-1.5 focus:border-blue-500 focus:ring-0 w-64 transition-all" placeholder="Search projects..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<button class="p-2 text-slate-400 hover:bg-slate-800/50 hover:text-white transition-colors rounded-lg active:scale-95 transition-transform">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 text-slate-400 hover:bg-slate-800/50 hover:text-white transition-colors rounded-lg active:scale-95 transition-transform">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="h-8 w-8 rounded-full overflow-hidden border border-slate-700 active:scale-95 transition-transform cursor-pointer">
<img alt="User avatar" data-alt="close-up portrait of a professional developer with neutral expression and soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsCN5NrajB0BpF1z2EBRNxZNkU6RsScLYjgqiYXAstzLEkBv01m0QUnCcMFhYbJMBgpfyJpUmL_aH9pVaZMjkklp-IjhQdwPCnOXcEQyd6fxPpbFmCMMIDKTf7zTbUX8eINACcyROMWK2zerqochb71CViVl3AEOfnfZnZxtNTL7IEQ-79tqSEqWOuSJBAeWjiMANChhLra7eudhc6Wo02tKU04OeYtnK1cbDThA-ta9vuFObosd-1iy52s-rcc4YXG38GpOtDtY4"/>
</div>
</div>
</header>
<!-- Main Canvas -->
<main class="pt-24 px-container-padding pb-12 max-w-[1440px] mx-auto">
<!-- Header Section -->
<div class="flex justify-between items-end mb-8">
<div>
<h2 class="font-h1 text-h1 text-white tracking-tight">Project Manager</h2>
<p class="text-on-surface-variant font-body-md mt-1">Manage and deploy your ecosystem projects from a central hub.</p>
</div>
<button class="bg-primary text-on-primary font-semibold px-6 py-2.5 rounded-lg flex items-center gap-2 hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-lg">add</span>
                    Add New Project
                </button>
</div>
<!-- Dashboard Stats (Technical Summary) -->
<div class="grid grid-cols-4 gap-gutter mb-8">
<div class="glass-panel p-md rounded-xl">
<p class="text-xs font-label-caps text-on-surface-variant mb-2">TOTAL PROJECTS</p>
<p class="text-h2 font-h2 text-white">24</p>
<div class="flex items-center gap-1 mt-1 text-tertiary text-xs">
<span class="material-symbols-outlined text-xs">trending_up</span>
<span>+3 this month</span>
</div>
</div>
<div class="glass-panel p-md rounded-xl">
<p class="text-xs font-label-caps text-on-surface-variant mb-2">ACTIVE DEPLOYMENTS</p>
<p class="text-h2 font-h2 text-white">18</p>
<div class="flex items-center gap-1 mt-1 text-tertiary text-xs">
<span class="material-symbols-outlined text-xs">check_circle</span>
<span>All healthy</span>
</div>
</div>
<div class="glass-panel p-md rounded-xl">
<p class="text-xs font-label-caps text-on-surface-variant mb-2">PENDING DRAFTS</p>
<p class="text-h2 font-h2 text-white">6</p>
<div class="flex items-center gap-1 mt-1 text-on-surface-variant text-xs">
<span class="material-symbols-outlined text-xs">edit_note</span>
<span>Ready for review</span>
</div>
</div>
<div class="glass-panel p-md rounded-xl">
<p class="text-xs font-label-caps text-on-surface-variant mb-2">TOTAL REACH</p>
<p class="text-h2 font-h2 text-white">128.4k</p>
<div class="flex items-center gap-1 mt-1 text-tertiary text-xs">
<span class="material-symbols-outlined text-xs">group</span>
<span>+12% monthly</span>
</div>
</div>
</div>
<!-- Project Table Container -->
<div class="glass-panel rounded-xl overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b border-outline-variant/30">
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest">PROJECT IDENTITY</th>
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest">TECH STACK</th>
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest text-center">STATUS</th>
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest">LAST UPDATED</th>
<th class="px-lg py-4 font-label-caps text-on-surface-variant text-[11px] tracking-widest text-right">ACTIONS</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/20">
<!-- Project Row 1 -->
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-lg py-4">
<div class="flex items-center gap-4">
<div class="h-12 w-16 rounded-lg overflow-hidden border border-outline-variant/30 bg-surface-container flex-shrink-0">
<img alt="Project thumbnail" data-alt="clean screenshot of a modern software dashboard with dark mode UI and blue accent highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCKQb_Fgg5n9Ljen02osyp_PO6awm4DAktzc7e8hePYwr9-Md5cKd3QSCAeu4JMFa6btoBLB2Gjqba2GyqdyE5-6d8AjcXQGmWZFXdchhL2EPNnoth5wNsjdvG65Z-lG-DN9jhburj-aCbVvjePZh_2HSbCuI1xyYeta1AdyfRYEbZx0dPTSGuCufiy3hzabXhUSuC04-koxXAgFA5aaaDKAhj93dsQ56WTTg6OlnJpRxwb5Pg2z7p7pYUUsboOCjNo-6ItBWyN6Os"/>
</div>
<div>
<p class="font-semibold text-white">Nebula Core API</p>
<p class="text-xs text-on-surface-variant">Backend microservice cluster</p>
</div>
</div>
</td>
<td class="px-lg py-4">
<div class="flex gap-2">
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">NODE.JS</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">REDIS</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">POSTGRES</span>
</div>
</td>
<td class="px-lg py-4">
<div class="flex justify-center">
<span class="px-3 py-1 rounded-full bg-tertiary/10 text-tertiary text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 border border-tertiary/20">
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
                                            Live
                                        </span>
</div>
</td>
<td class="px-lg py-4">
<p class="text-xs text-on-surface-variant">2 hours ago</p>
</td>
<td class="px-lg py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-white hover:bg-white/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</div>
</td>
</tr>
<!-- Project Row 2 -->
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-lg py-4">
<div class="flex items-center gap-4">
<div class="h-12 w-16 rounded-lg overflow-hidden border border-outline-variant/30 bg-surface-container flex-shrink-0">
<img alt="Project thumbnail" data-alt="vibrant abstract 3d composition with purple and pink glass elements and soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBw1w0_xEfOGu_03Vk4LDBWVtUQTGImU8nCluTrrUokcx1uleNFH9z6G5r1agDh9HMxqjBxH5dTugZCviynvM7igLg8LoNfgXM_S3is3zRuVxn1jNM2oJ66ZH6fC3NTu8OyoHMX7psVsXcsdxtmRdSkvUWadEAFw7ULFHnH03hHGDUckx4-DEoVs31BBeYxsRYV0PQ3vYIP3JEeHQtaw1n4kjixBntklUmUQwIM59Pm_vtC1dFb_TcsVs9LIC21V42u4B9Yupp7NYI"/>
</div>
<div>
<p class="font-semibold text-white">Titan CRM</p>
<p class="text-xs text-on-surface-variant">Customer relationship dashboard</p>
</div>
</div>
</td>
<td class="px-lg py-4">
<div class="flex gap-2">
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">REACT</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">TAILWIND</span>
</div>
</td>
<td class="px-lg py-4">
<div class="flex justify-center">
<span class="px-3 py-1 rounded-full bg-secondary-container/50 text-secondary text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 border border-outline-variant/20">
<span class="w-1.5 h-1.5 rounded-full bg-secondary/50"></span>
                                            Draft
                                        </span>
</div>
</td>
<td class="px-lg py-4">
<p class="text-xs text-on-surface-variant">Yesterday</p>
</td>
<td class="px-lg py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-white hover:bg-white/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</div>
</td>
</tr>
<!-- Project Row 3 -->
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-lg py-4">
<div class="flex items-center gap-4">
<div class="h-12 w-16 rounded-lg overflow-hidden border border-outline-variant/30 bg-surface-container flex-shrink-0">
<img alt="Project thumbnail" data-alt="close-up of a high-performance computer processor on a circuit board with technical blue lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCntf2Np-s6guVRUJ3fCaAIb1vjQs51S9vGP-nZYUOqcBD5TB7mNtcQk9FAiDNlD7H0RubzBlMGmPgstf_wGdfEOVzlr-XOq-xZmYfhdZ__KzG5Q3U93gl4YQOV1zDvVBpkhR5xhdvaaSG_vU3OnlbuEbgsmStfjV9cJ7Go1G54V8vsSFmVEmW7MmgjkwmNzXiklprfk7ely4FjHdBi5V1gIRlV-m0tQpJTxbo3jBUiwchrFayE3yW_ABsfOqHcRHRtKBzvMq-TlvM"/>
</div>
<div>
<p class="font-semibold text-white">Quantum Analytics</p>
<p class="text-xs text-on-surface-variant">Real-time data visualization</p>
</div>
</div>
</td>
<td class="px-lg py-4">
<div class="flex gap-2">
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">PYTHON</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">D3.JS</span>
</div>
</td>
<td class="px-lg py-4">
<div class="flex justify-center">
<span class="px-3 py-1 rounded-full bg-tertiary/10 text-tertiary text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 border border-tertiary/20">
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
                                            Live
                                        </span>
</div>
</td>
<td class="px-lg py-4">
<p class="text-xs text-on-surface-variant">3 days ago</p>
</td>
<td class="px-lg py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-white hover:bg-white/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</div>
</td>
</tr>
<!-- Project Row 4 -->
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-lg py-4">
<div class="flex items-center gap-4">
<div class="h-12 w-16 rounded-lg overflow-hidden border border-outline-variant/30 bg-surface-container flex-shrink-0">
<img alt="Project thumbnail" data-alt="matrix of green code lines streaming across a dark screen with glowing technical aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBO_NZk8X8ocf4-hsjJV166HuA0CJpou4wh3uPXx9gIhs9dWJCll-0Qyrz6Zy_NqIgqqjyXysghn2TR6fk1pnLXwRhHNWQu3efoc4tnM7FBAA7OKzUxXWx7aTxbGcDUQBXRlRvBBWx_Mf7aQzI6I47YpkB9akhAmK_j4-kLcF1R_60_UALF-cSDL4rLK6mBZmuOf78It_zc46e9tUTiSgaGUKo3d-omF48E5A6PuHr38Cxmf5TjI8XLLIDTyKFZDck8bMF8SFC3ytE"/>
</div>
<div>
<p class="font-semibold text-white">Security Patch v4</p>
<p class="text-xs text-on-surface-variant">Infrastructure security layer</p>
</div>
</div>
</td>
<td class="px-lg py-4">
<div class="flex gap-2">
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">RUST</span>
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-[10px] font-bold border border-outline-variant/20">GO</span>
</div>
</td>
<td class="px-lg py-4">
<div class="flex justify-center">
<span class="px-3 py-1 rounded-full bg-tertiary/10 text-tertiary text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 border border-tertiary/20">
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
                                            Live
                                        </span>
</div>
</td>
<td class="px-lg py-4">
<p class="text-xs text-on-surface-variant">Oct 24, 2023</p>
</td>
<td class="px-lg py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-white hover:bg-white/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all">
<span class="material-symbols-outlined text-lg">delete</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="px-lg py-4 bg-slate-950/30 flex justify-between items-center border-t border-outline-variant/20">
<p class="text-xs text-on-surface-variant">Showing 4 of 24 projects</p>
<div class="flex gap-2">
<button class="px-3 py-1.5 rounded border border-outline-variant/30 text-xs hover:bg-white/5 transition-all text-on-surface-variant">Previous</button>
<button class="px-3 py-1.5 rounded bg-primary-container/20 text-primary text-xs font-semibold border border-primary/20">1</button>
<button class="px-3 py-1.5 rounded border border-outline-variant/30 text-xs hover:bg-white/5 transition-all text-on-surface-variant">2</button>
<button class="px-3 py-1.5 rounded border border-outline-variant/30 text-xs hover:bg-white/5 transition-all text-on-surface-variant">3</button>
<button class="px-3 py-1.5 rounded border border-outline-variant/30 text-xs hover:bg-white/5 transition-all text-on-surface-variant">Next</button>
</div>
</div>
</div>
<!-- Contextual Help / Insights (Asymmetric Layout Element) -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="md:col-span-2 glass-panel p-lg rounded-xl flex items-start gap-4">
<div class="p-3 rounded-lg bg-primary/10 text-primary">
<span class="material-symbols-outlined">auto_awesome</span>
</div>
<div>
<h3 class="font-h2 text-body-lg text-white mb-1">AI Project Insights</h3>
<p class="text-sm text-on-surface-variant leading-relaxed">Based on your activity, we recommend updating the "Nebula Core API" tech stack. A newer version of Node.js is available with significant performance improvements for your specific workload.</p>
<button class="mt-4 text-primary text-xs font-bold uppercase tracking-wider flex items-center gap-1 hover:underline">
                            View Upgrade Guide
                            <span class="material-symbols-outlined text-xs">arrow_forward</span>
</button>
</div>
</div>
<div class="glass-panel p-lg rounded-xl relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-50"></div>
<div class="relative z-10">
<h3 class="font-h2 text-body-lg text-white mb-2">Cloud Storage</h3>
<div class="w-full bg-surface-container-highest h-2 rounded-full mb-2">
<div class="bg-primary h-full w-[72%] rounded-full shadow-[0_0_10px_rgba(59,130,246,0.5)]"></div>
</div>
<p class="text-xs text-on-surface-variant">72.4 GB of 100 GB used</p>
<button class="w-full mt-6 py-2 rounded-lg border border-outline-variant/30 text-xs font-semibold hover:bg-white/5 transition-all">Manage Assets</button>
</div>
</div>
</div>
</main>
</div>
</body></html>
projects.php

<!DOCTYPE html>

<html class="scroll-smooth" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "outline": "#747878",
                    "inverse-primary": "#c9c6c5",
                    "on-tertiary-fixed-variant": "#59430a",
                    "on-secondary-fixed": "#1b1c1c",
                    "secondary": "#5e5e5e",
                    "on-primary-fixed": "#1c1b1b",
                    "surface-bright": "#fdf9f0",
                    "secondary-fixed": "#e4e2e2",
                    "surface-container-highest": "#e6e2d9",
                    "on-surface-variant": "#444748",
                    "background": "#fdf9f0",
                    "primary-fixed": "#e5e2e1",
                    "error": "#ba1a1a",
                    "surface-tint": "#5f5e5e",
                    "primary": "#000000",
                    "on-primary": "#ffffff",
                    "secondary-fixed-dim": "#c7c6c6",
                    "on-surface": "#1c1c16",
                    "surface-container-high": "#ece8df",
                    "on-error": "#ffffff",
                    "tertiary-fixed": "#ffdf9c",
                    "primary-fixed-dim": "#c9c6c5",
                    "on-tertiary-container": "#9c8043",
                    "inverse-on-surface": "#f4f0e7",
                    "tertiary-container": "#251a00",
                    "surface-container-low": "#f7f3ea",
                    "on-tertiary-fixed": "#251a00",
                    "on-secondary-container": "#636262",
                    "inverse-surface": "#31302b",
                    "on-primary-container": "#858383",
                    "on-primary-fixed-variant": "#474646",
                    "surface": "#fdf9f0",
                    "primary-container": "#1c1b1b",
                    "surface-container-lowest": "#ffffff",
                    "on-tertiary": "#ffffff",
                    "secondary-container": "#e1dfdf",
                    "on-background": "#1c1c16",
                    "on-secondary-fixed-variant": "#464747",
                    "surface-variant": "#e6e2d9",
                    "outline-variant": "#c4c7c7",
                    "tertiary-fixed-dim": "#e3c37e",
                    "error-container": "#ffdad6",
                    "surface-dim": "#dddad1",
                    "on-secondary": "#ffffff",
                    "surface-container": "#f1eee5",
                    "on-error-container": "#93000a",
                    "tertiary": "#000000"
            },
            "borderRadius": {
                    "DEFAULT": "0.125rem",
                    "lg": "0.25rem",
                    "xl": "0.5rem",
                    "full": "0.75rem"
            },
            "spacing": {
                    "margin-page": "64px",
                    "section-gap": "160px",
                    "unit": "4px",
                    "gutter": "32px",
                    "container-max": "1280px"
            },
            "fontFamily": {
                    "label-caps": ["Inter"],
                    "h1": ["Inter"],
                    "body-md": ["Inter"],
                    "display": ["Inter"],
                    "body-lg": ["Inter"],
                    "h2": ["Inter"]
            },
            "fontSize": {
                    "label-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.1em", "fontWeight": "600"}],
                    "h1": ["48px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "400"}],
                    "body-md": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
                    "display": ["72px", {"lineHeight": "1.1", "letterSpacing": "-0.04em", "fontWeight": "300"}],
                    "body-lg": ["20px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
                    "h2": ["32px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "400"}]
            }
          },
        },
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .project-card-hover:hover .project-image {
            transform: scale(1.05);
        }
        .custom-bezier {
            transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        }
    </style>
</head>
<body class="bg-background text-on-background font-body-md antialiased min-h-screen">
<!-- TopNavBar Shell -->
<?php include 'inc/header.php'; ?>
<main class="max-w-[1280px] mx-auto px-8 pt-48 pb-20">
<!-- Hero Section -->
<section class="mb-section-gap">
<h1 class="font-display text-display text-primary mb-4">Selected Works</h1>
<p class="font-body-lg text-body-lg text-secondary max-w-2xl">
                A curation of digital products and engineering experiments, ranging from architectural systems to high-fidelity frontend experiences.
            </p>
</section>
<!-- Filters -->
<section class="mb-12 flex flex-wrap gap-4 items-center">
<span class="font-label-caps text-label-caps text-secondary uppercase mr-4">Filter By</span>
<button class="px-6 py-2 rounded-full border border-primary bg-primary text-on-primary font-label-caps text-label-caps hover:scale-105 transition-all custom-bezier">All Projects</button>
<button class="px-6 py-2 rounded-full border border-outline text-on-surface font-label-caps text-label-caps hover:bg-primary hover:text-on-primary transition-all custom-bezier">Frontend</button>
<button class="px-6 py-2 rounded-full border border-outline text-on-surface font-label-caps text-label-caps hover:bg-primary hover:text-on-primary transition-all custom-bezier">Backend</button>
<button class="px-6 py-2 rounded-full border border-outline text-on-surface font-label-caps text-label-caps hover:bg-primary hover:text-on-primary transition-all custom-bezier">Full Stack</button>
</section>
<!-- Projects Grid -->
<section class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<!-- Project Card 1: Asymmetric Layout -->
<div class="group project-card-hover flex flex-col gap-6 custom-bezier transition-all duration-500 opacity-100 translate-y-0">
<div class="relative aspect-video overflow-hidden rounded shadow-2xl shadow-black/5 bg-surface-container">
<img alt="Project One" class="project-image object-cover w-full h-full transition-transform duration-700 custom-bezier" data-alt="Modern clean dashboard UI with minimalist data visualizations, soft shadows, and a neutral color palette on a high-end display" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdEfwT2rqM6xLiMEcAofUBzweo-3k7-a1g_LBCfkLbzTiT8dIW1poQ7nPb58cAMUHcDXWHNZ3Zq-81_pmbI7RZmy4xzMm7rBIncVj5XyiIChuWx6IjY-uKhkU-s-bGOx-rukMAJSr3fePXebzTZVTiLQFR3972MYiJyolXit37H_hTFVxUVDpnk6I5q5F1eus_-QwR-JlT8yZPmJHKo_JVH-eQVerN_o3RS66NPGYWAnki22hf7Le3xBTBNwTZdqdGxSp7UPJ1XMA"/>
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-all duration-500"></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-start">
<div>
<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase tracking-widest">Full Stack</span>
<h2 class="font-h2 text-h2 text-primary mt-1">Ethereal Analytics</h2>
</div>
<div class="flex gap-4">
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">open_in_new</a>
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">code</a>
</div>
</div>
<p class="font-body-md text-body-md text-secondary max-w-lg">
                        A real-time data visualization platform for creative studios, featuring a custom-built processing engine and a fluid React frontend.
                    </p>
<div class="flex gap-2 flex-wrap mt-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">NEXT.JS</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">TYPESCRIPT</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">D3.JS</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">POSTGRESQL</span>
</div>
</div>
</div>
<!-- Project Card 2 -->
<div class="group project-card-hover flex flex-col gap-6 custom-bezier transition-all duration-500 md:mt-24">
<div class="relative aspect-video overflow-hidden rounded shadow-2xl shadow-black/5 bg-surface-container">
<img alt="Project Two" class="project-image object-cover w-full h-full transition-transform duration-700 custom-bezier" data-alt="Architectural code structure visualization with neon lines on dark background representing complex backend infrastructure nodes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3-M1sfvFUD5Wh4-bpocw_F36hiHJ7hKyEzOo-QBzWfgwfY8VRDPFBHwj8SV1bgz1JfzC2BF7C8LxZXmomGlWnASzOl9c_bbCI8mDG7-FpB8cYdu_ZeLe95TPL4tTQ66ORejTnM9k1MrhI0qYour647M-BSwg9FV0UCTjJtgsaJ8zndlyBeScX8rqW-iJ78ZcSY6kOGDvt567tqG7yKl0xigNBfJJm9sJp6YgKneTT6tqAeQAtqfM4OvbOgrrvCYG_MPSsx3LRGzs"/>
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-all duration-500"></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-start">
<div>
<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase tracking-widest">Backend</span>
<h2 class="font-h2 text-h2 text-primary mt-1">Nexus Core</h2>
</div>
<div class="flex gap-4">
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">open_in_new</a>
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">code</a>
</div>
</div>
<p class="font-body-md text-body-md text-secondary max-w-lg">
                        High-performance API gateway and service mesh designed for low-latency financial transactions and microservices orchestration.
                    </p>
<div class="flex gap-2 flex-wrap mt-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">GO</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">REDIS</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">KUBERNETES</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">GRPC</span>
</div>
</div>
</div>
<!-- Project Card 3 -->
<div class="group project-card-hover flex flex-col gap-6 custom-bezier transition-all duration-500">
<div class="relative aspect-video overflow-hidden rounded shadow-2xl shadow-black/5 bg-surface-container">
<img alt="Project Three" class="project-image object-cover w-full h-full transition-transform duration-700 custom-bezier" data-alt="Sleek mobile app interface mockup showing an elegant typography-focused user profile and creative portfolio feed" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9vyrU8uN-EladPyeVCxTG2YTLpOcRKJeWGdnPyFYvnwjMii1m1eh_ABSZUMvCkXnXnkTJMnBw9844wgI5SXYRJha3Dp7HywaQzPaC_7IKGNbQLzWJO9429VtOrQjOuc_A72E1H2vfn7DMcck4Pymn4Qr-YHUew3X2FQ8Ga__wDbrGBNvludrDV-4H7hf_JajyTHFR5G07sXg_wSao1dnU9gnXzEKIXrfHno4OEqh1kmKA0m_R2ea-LwEkXV4RmpplaBQTsi4Lqu4"/>
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-all duration-500"></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-start">
<div>
<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase tracking-widest">Frontend</span>
<h2 class="font-h2 text-h2 text-primary mt-1">Velvet UI Kit</h2>
</div>
<div class="flex gap-4">
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">open_in_new</a>
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">code</a>
</div>
</div>
<p class="font-body-md text-body-md text-secondary max-w-lg">
                        A premium component library focusing on editorial typography and fluid motion patterns for high-end web applications.
                    </p>
<div class="flex gap-2 flex-wrap mt-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">REACT</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">TAILWIND</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">FRAMER MOTION</span>
</div>
</div>
</div>
<!-- Project Card 4 -->
<div class="group project-card-hover flex flex-col gap-6 custom-bezier transition-all duration-500 md:mt-24">
<div class="relative aspect-video overflow-hidden rounded shadow-2xl shadow-black/5 bg-surface-container">
<img alt="Project Four" class="project-image object-cover w-full h-full transition-transform duration-700 custom-bezier" data-alt="Conceptual 3D abstract shapes representing cloud computing and distributed systems, rendered in soft cream and charcoal tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAlbU9gPUYZbwxBpCFgkLFReQZIX-BJgp8qafi6IamPCEClu0YGzQvlm2B06nzMmkHnVgp9AHphMp74fSlDvbeSrK-UsvgxNtRMq8qj4OuRhxZZnt8vjiTqJYKqY4JHIsXUAcqpulEiT3a3GXhz-AMg6WdGrooezUGESSdMgA8whC-E2YcRaH4UnQb96PiqW5QYTTwMOQGowkH-JpT6Rd5KZoiwS2rgBkGvLF8-9JUeNbuDl71rAGMvRoebyqSk3HYifpNsZa8Tqnk"/>
<div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-all duration-500"></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-start">
<div>
<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase tracking-widest">Full Stack</span>
<h2 class="font-h2 text-h2 text-primary mt-1">Atlas Cloud</h2>
</div>
<div class="flex gap-4">
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">open_in_new</a>
<a class="material-symbols-outlined text-on-surface hover:text-primary transition-colors" href="#">code</a>
</div>
</div>
<p class="font-body-md text-body-md text-secondary max-w-lg">
                        A decentralized storage solution leveraging IPFS and custom encryption protocols for secure, peer-to-peer file sharing.
                    </p>
<div class="flex gap-2 flex-wrap mt-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">RUST</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">IPFS</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">SOLIDITY</span>
<span class="px-3 py-1 bg-surface-container text-on-surface-variant font-label-caps text-[10px] rounded">WEB3</span>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="mt-section-gap flex flex-col items-center text-center">
<h2 class="font-h1 text-h1 text-primary mb-8 max-w-xl">Have a concept in mind? Let's build it together.</h2>
<a href="contact-us.php" class="bg-primary text-on-primary px-12 py-4 rounded-lg font-body-md hover:scale-105 shadow-xl transition-all duration-300 custom-bezier">
                Start a Conversation
            </a>
</section>

</main>
    <?php include 'inc/footer.php'; ?>
</body></html>
project-details.php
<?php
require_once '../mgmt/conn/pdo-conn.php';
require_once '../mgmt/app/fetch-project.php';

$slug = $_GET['slug'] ?? '';
$project = getProjectBySlug($pdo, $slug);

if (!$project) {
    die('Project not found');
}
?>

<!DOCTYPE html>

<html class="scroll-smooth" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
        tailwind.config = {
          darkMode: "class",
          theme: {
            extend: {
              "colors": {
                      "error": "#ba1a1a",
                      "primary": "#000000",
                      "on-error": "#ffffff",
                      "inverse-primary": "#c9c6c5",
                      "surface-container-low": "#f7f3ea",
                      "surface-container": "#f1eee5",
                      "surface-bright": "#fdf9f0",
                      "on-secondary-container": "#636262",
                      "primary-fixed-dim": "#c9c6c5",
                      "on-primary-fixed-variant": "#474646",
                      "surface-dim": "#dddad1",
                      "surface-variant": "#e6e2d9",
                      "outline": "#747878",
                      "on-secondary": "#ffffff",
                      "secondary-fixed": "#e4e2e2",
                      "tertiary-fixed-dim": "#e3c37e",
                      "secondary-container": "#e1dfdf",
                      "on-secondary-fixed": "#1b1c1c",
                      "background": "#fdf9f0",
                      "on-tertiary": "#ffffff",
                      "surface-container-lowest": "#ffffff",
                      "surface-container-high": "#ece8df",
                      "secondary": "#5e5e5e",
                      "primary-container": "#1c1b1b",
                      "on-error-container": "#93000a",
                      "on-primary-fixed": "#1c1b1b",
                      "on-primary-container": "#858383",
                      "on-surface": "#1c1c16",
                      "primary-fixed": "#e5e2e1",
                      "inverse-surface": "#31302b",
                      "on-surface-variant": "#444748",
                      "secondary-fixed-dim": "#c7c6c6",
                      "inverse-on-surface": "#f4f0e7",
                      "on-tertiary-fixed-variant": "#59430a",
                      "on-background": "#1c1c16",
                      "on-secondary-fixed-variant": "#464747",
                      "tertiary-container": "#251a00",
                      "tertiary": "#000000",
                      "outline-variant": "#c4c7c7",
                      "surface-tint": "#5f5e5e",
                      "surface": "#fdf9f0",
                      "on-tertiary-container": "#9c8043",
                      "on-tertiary-fixed": "#251a00",
                      "on-primary": "#ffffff",
                      "surface-container-highest": "#e6e2d9",
                      "tertiary-fixed": "#ffdf9c",
                      "error-container": "#ffdad6"
              },
              "borderRadius": {
                      "DEFAULT": "0.125rem",
                      "lg": "0.25rem",
                      "xl": "0.5rem",
                      "full": "0.75rem"
              },
              "spacing": {
                      "container-max": "1280px",
                      "gutter": "32px",
                      "unit": "4px",
                      "section-gap": "160px",
                      "margin-page": "64px"
              },
              "fontFamily": {
                      "label-caps": ["Inter"],
                      "body-lg": ["Inter"],
                      "h2": ["Inter"],
                      "h1": ["Inter"],
                      "display": ["Inter"],
                      "body-md": ["Inter"]
              },
              "fontSize": {
                      "label-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.1em", "fontWeight": "600"}],
                      "body-lg": ["20px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
                      "h2": ["32px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "400"}],
                      "h1": ["48px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "400"}],
                      "display": ["72px", {"lineHeight": "1.1", "letterSpacing": "-0.04em", "fontWeight": "300"}],
                      "body-md": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}]
              }
            },
          },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
        }
        .glass-nav {
            backdrop-filter: blur(12px);
            background-color: rgba(255, 255, 255, 0.4);
        }
        .parallax-container {
            clip-path: inset(0 0 0 0);
        }
    </style>
</head>
<body class="bg-surface font-body-md text-on-surface antialiased">
<!-- TopNavBar from JSON -->
    <?php include 'inc/header.php'; ?>
<main>
<!-- Hero Section -->
<section class="pt-48 pb-20 px-margin-page max-w-container-max mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end gap-8 mb-12">
<div class="max-w-3xl">
<span class="font-label-caps text-label-caps uppercase text-on-secondary-container mb-4 block">Case Study 2024</span>
<h1 class="font-display text-display text-primary mb-6">Ethereal Analytics</h1>
<p class="font-body-lg text-body-lg text-secondary max-w-xl">A real-time data visualization platform designed for high-frequency financial intelligence.</p>
</div>
<div class="flex flex-wrap gap-3">
<span class="px-4 py-2 border border-outline-variant rounded-full font-label-caps text-[10px] uppercase tracking-widest">Next.js</span>
<span class="px-4 py-2 border border-outline-variant rounded-full font-label-caps text-[10px] uppercase tracking-widest">D3.js</span>
<span class="px-4 py-2 border border-outline-variant rounded-full font-label-caps text-[10px] uppercase tracking-widest">Postgres</span>
</div>
</div>
<div class="w-full aspect-[21/9] overflow-hidden rounded-xl relative group">
<img alt="Ethereal Analytics Dashboard" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Modern dark mode data visualization dashboard with glowing neon blue and purple charts on a clean glassmorphism interface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAuX9AND6RRqeuULskWbD7HPD9r8ZWq-vrAwOkPRr0mwuJNqe0otS6tWOxq7ZxtSyGoTz-kks3ZvAW-v2KBPWnWDwXXyILxQMTecwvqOOOUst-EMK5NbgeRUSJi2EdelJR_eyfKpC5B0TR-ndmjGbVDQsAyUHkd-iTXuDxeDlhwiOIesbY2LVFLAIlc6ydroZIraFZRIlS5302s_ojXlGYNR0NTnNUWQ8n2ikOOzuWRPQpYIs5TIK_8RxCI3xsLlcyqZ0hm3TnFI5U"/>
</div>
</section>
<!-- Overview Section -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto grid grid-cols-1 md:grid-cols-12 gap-gutter">
<div class="md:col-span-4">
<h2 class="font-h2 text-h2 text-primary sticky top-32">The Project Context</h2>
</div>
<div class="md:col-span-8 flex flex-col gap-12">
<div class="space-y-6">
<p class="font-body-lg text-body-lg text-primary leading-relaxed">
                        In an era where data latency equals lost opportunity, Ethereal Analytics was born from the need for instantaneous clarity. We reimagined how enterprise users interact with millions of streaming data points, transforming cold numbers into a fluid, cinematic experience.
                    </p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 pt-12 border-t border-surface-variant">
<div>
<h4 class="font-label-caps text-label-caps uppercase text-on-secondary-container mb-4">The Problem</h4>
<p class="font-body-md text-body-md text-secondary">Existing tools suffered from visual clutter and significant rendering delays, causing decision paralysis during high-volatility market events.</p>
</div>
<div>
<h4 class="font-label-caps text-label-caps uppercase text-on-secondary-container mb-4">The Goal</h4>
<p class="font-body-md text-body-md text-secondary">To build a zero-latency visualization engine that scales across devices without sacrificing the aesthetic quality expected by premium users.</p>
</div>
</div>
</div>
</section>
<!-- CTA Action Bar -->
<section class="max-w-container-max mx-auto px-margin-page mb-section-gap">
<div class="bg-primary text-on-primary rounded-xl p-12 flex flex-col md:flex-row justify-between items-center gap-8">
<div class="text-center md:text-left">
<h3 class="font-h2 text-h2 mb-2">Experience the Live Demo</h3>
<p class="text-on-primary-container font-body-md">Interact with the real-time engine in a sandboxed environment.</p>
</div>
<div class="flex gap-4">
<a class="bg-surface text-primary px-8 py-4 rounded-full font-label-caps text-label-caps uppercase hover:bg-surface-container transition-colors flex items-center gap-2" href="#">
                        Live Demo <span class="material-symbols-outlined text-[18px]" data-icon="arrow_outward">arrow_outward</span>
</a>
<a class="border border-surface-variant text-surface px-8 py-4 rounded-full font-label-caps text-label-caps uppercase hover:bg-white/10 transition-colors flex items-center gap-2" href="#">
                        View Code <span class="material-symbols-outlined text-[18px]" data-icon="code">code</span>
</a>
</div>
</div>
</section>
<!-- Solution Deep Dive (Bento Grid Style) -->
<section class="py-section-gap bg-surface-container">
<div class="max-w-container-max mx-auto px-margin-page">
<div class="mb-20">
<h2 class="font-h1 text-h1 text-primary text-center">Architectural Precision</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Feature Card 1 -->
<div class="bg-surface p-10 rounded-xl shadow-[0_20px_40px_rgba(0,0,0,0.02)] border border-white/50 flex flex-col justify-between aspect-square">
<span class="material-symbols-outlined text-4xl" data-icon="layers">layers</span>
<div>
<h3 class="font-h2 text-h2 mb-4">Frontend</h3>
<p class="font-body-md text-secondary">Next.js 14 utilizing Server Components for initial payload speed, paired with a custom D3 wrapper for reactive SVG rendering.</p>
</div>
</div>
<!-- Feature Card 2 (Spans 2 rows/cols on desktop) -->
<div class="bg-primary text-on-primary p-10 rounded-xl flex flex-col justify-between md:row-span-2">
<div>
<span class="material-symbols-outlined text-4xl text-on-primary-container" data-icon="bolt">bolt</span>
<h3 class="font-h1 text-h1 mt-8 mb-6">Real-time Core</h3>
<p class="font-body-lg text-on-primary-container leading-relaxed">The heart of the system is a WebSocket-driven state manager that handles over 50,000 updates per second with sub-10ms latency.</p>
</div>
<div class="mt-8 pt-8 border-t border-on-primary-container/20">
<ul class="space-y-4 font-label-caps text-label-caps uppercase">
<li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-white"></span> Low-Latency Websockets</li>
<li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-white"></span> Multi-threaded Processing</li>
<li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-white"></span> WebGL Offloading</li>
</ul>
</div>
</div>
<!-- Feature Card 3 -->
<div class="bg-surface p-10 rounded-xl shadow-[0_20px_40px_rgba(0,0,0,0.02)] border border-white/50 flex flex-col justify-between aspect-square">
<span class="material-symbols-outlined text-4xl" data-icon="database">database</span>
<div>
<h3 class="font-h2 text-h2 mb-4">Database</h3>
<p class="font-body-md text-secondary">TimescaleDB (Postgres) optimized for time-series data, ensuring lightning-fast aggregations across historical datasets.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<div class="space-y-gutter">
<figure class="group overflow-hidden rounded-xl">
<img alt="Detail View" class="w-full aspect-[4/5] object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Extreme close-up of a high-resolution retina display showing crisp line graphs and complex data nodes in a dark UI" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVN3Np5Sx4rWjNqLILZ-hMUN3KZUJl7vlXymTdHpfcNlwAkpCNMpIgXm5EwAlRvGVNYGabpaTCss09e1KRH6ehHiz9lgcwItxKHsM-lAm4wtjpVSIFhgkOxFCyR9HMWmuTY6h_-W3S3fi2bmxPfT9qMogTSnwJNCWIbAV6wSY7cfwuGn0uOV0aszw1mLU32Sx-Wi6OFArkTY022dDfu-TTmrZkWoYqFWtcAMqg3GzLuc1yofyBP10EF4q8FoqG0XR9la1Crr24nDg"/>
</figure>
<figure class="group overflow-hidden rounded-xl">
<img alt="Mobile Responsive" class="w-full aspect-square object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Premium smartphone lying on a wooden desk displaying the mobile version of the analytics app with fluid gesture controls" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAs8R7TV4sKyDcrNv_sJHZR9kTJPekvPlAP-DUn4lrSwS1BpAvPdBa08K9CeMIAdnv12HndlhAdCK3_2w_2gLNtTueNJb-IFNty7FgVLLWnDtsBawV6hzkbOQXesZ_ZXhtB8lsKYnA-WAJ2-f8xIk9CuMjbRqhIldF__ZS859g9qX8DLFXoTn3gEjvZC_eKSaSzbJZC97qkb3f_eJ2rxC_LAVQUZVQu1vR-cGISPnfAGgc8fmqdH8GJgHt_sJt7iIlut5N4TW1-nkA"/>
</figure>
</div>
<div class="space-y-gutter pt-32">
<figure class="group overflow-hidden rounded-xl">
<img alt="Coding Process" class="w-full aspect-[4/5] object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Blurred background of a software developer's workstation with mechanical keyboard and multiple monitors showing clean React code" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsOsAxl0snUMtIO-Db5lSLnjrPn_pU_TOxx_sov2vIeTpsKPRn-5cC9yIHldxgLWr5zxv3lI65iIr-F2QTXW6-Gb_5LfKx4laSHeX0gDPstBrEkuD8A3aSq-3dbAD-RaHwmN4U7TRyYHIsi_SmsFS5G8O-0741rIc0IeHgrDpnX6q6MrLw63NaEVsMYAs-X8ZG6ioYEkF_afe6nsTDF9Qgm-Ov_MTblNFNFwStCve4njILNUTEo3Javv2g9rQ5glIcQeJaA8wkpYA"/>
</figure>
<figure class="group overflow-hidden rounded-xl">
<img alt="Data Flow" class="w-full aspect-[4/3] object-cover transition-transform duration-1000 group-hover:scale-105" data-alt="Abstract visualization of digital data flow using ethereal light streaks and geometric patterns in shades of deep blue and gold" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAslozcZw-UEnvfR4b2cnxZ50OLKukui9qo8GzJtrd-H_tVvEBDYlwiZR33yvxzHcmEjPg1BeBgC-0OMb2bpxn7Uig_2Hise_XXZB0ojGeS0VuCMN5-67_fA2r8dOBngCBzvMJ2NvFJWQYKjKiX3Kx-uajOrDKnuVkZKkRLCky8lqupYfjY8EibjnHaT0kBjPkQnzrKrUYY5UKGAg9eu_8rQ-syPuCg6HTN4cFCB0fvyiDoGvRPpqH9dhGmRc3QMlfyTHCEqthFvK4"/>
</figure>
</div>
</div>
</section>
<!-- Tech Stack Pills -->
<section class="py-20 border-t border-surface-variant px-margin-page max-w-container-max mx-auto text-center">
<h4 class="font-label-caps text-label-caps uppercase text-on-secondary-container mb-12">The Technical Toolkit</h4>
<div class="flex flex-wrap justify-center gap-4 max-w-3xl mx-auto">
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">TypeScript</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">Next.js 14</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">Tailwind CSS</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">D3.js</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">Redis</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">PostgreSQL</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">Docker</span>
<span class="px-6 py-3 bg-surface-container rounded-full font-body-md border border-white/50">AWS Fargate</span>
</div>
</section>
<!-- Challenges & Learnings -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto grid grid-cols-1 md:grid-cols-12 gap-gutter">
<div class="md:col-span-4">
<h2 class="font-h2 text-h2 text-primary">Hurdles &amp; Insights</h2>
</div>
<div class="md:col-span-8 space-y-16">
<div class="group border-l-2 border-surface-variant pl-8 hover:border-primary transition-colors">
<h3 class="font-h2 text-h2 mb-4">Memory Leaks in SVG</h3>
<p class="font-body-md text-secondary">Updating thousands of SVG elements every 100ms caused significant memory bloat. We solved this by implementing a hybrid Canvas/SVG approach, where background noise is pre-rendered on canvas while interactive elements remain as SVGs.</p>
</div>
<div class="group border-l-2 border-surface-variant pl-8 hover:border-primary transition-colors">
<h3 class="font-h2 text-h2 mb-4">State Synchronization</h3>
<p class="font-body-md text-secondary">Maintaining consistent state across multiple user sessions required a specialized Reducer pattern combined with optimistic UI updates to mask network jitter.</p>
</div>
</div>
</section>
<!-- Navigation: Prev/Next -->
<section class="border-t border-surface-variant">
<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-surface-variant">
<a class="group py-24 px-margin-page flex flex-col items-start justify-center hover:bg-surface-container transition-colors" href="#">
<span class="font-label-caps text-label-caps uppercase text-secondary mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-sm" data-icon="arrow_back">arrow_back</span> Previous Project
                    </span>
<h3 class="font-display text-[40px] text-primary group-hover:translate-x-4 transition-transform duration-500">Lumina CRM</h3>
</a>
<a class="group py-24 px-margin-page flex flex-col items-end justify-center text-right hover:bg-surface-container transition-colors" href="#">
<span class="font-label-caps text-label-caps uppercase text-secondary mb-4 flex items-center gap-2">
                        Next Project <span class="material-symbols-outlined text-sm" data-icon="arrow_forward">arrow_forward</span>
</span>
<h3 class="font-display text-[40px] text-primary group-hover:-translate-x-4 transition-transform duration-500">Onyx Commerce</h3>
</a>
</div>
</section>
</main>
<!-- Footer from JSON -->
    <?php include 'inc/footer.php'; ?>
</body></html>