Web Server

Dual-User Database Security Architecture

Separate database connections for public (read-only) and admin (read/write) operations.

// PUBLIC PAGES - Read-Only Connection
// File: config.php
define('DB_USER', 'portfolio_viewer');
define('DB_PASS', '[redacted]');
// This user has SELECT-only permissions
// Even if SQL injection occurs, data cannot be modified

// ADMIN PAGES - Write-Capable Connection  
// File: admin_config.php (requires authentication first)
$db_user = $_SESSION['admin_db_user'];
$db_pass = $_SESSION['admin_db_password'];
// This user has full CRUD permissions
// Only accessible after admin_check.php validates session

$conn = new mysqli(DB_HOST, $db_user, $db_pass, DB_NAME);

💡 What Makes This Special

SQL Injection Prevention with Prepared Statements

Always use prepared statements with parameter binding to prevent SQL injection attacks.

// ❌ VULNERABLE - String concatenation (NEVER DO THIS)
$query = "SELECT * FROM projects WHERE id = " . $_GET['id'];
$result = $conn->query($query);
// An attacker can inject: id=1 OR 1=1-- to dump all data

// ✅ SECURE - Prepared statement with parameter binding
$stmt = $conn->prepare("SELECT * FROM projects WHERE id = ?");
$stmt->bind_param("i", $project_id);  // "i" = integer type
$stmt->execute();
$result = $stmt->get_result();
$project = $result->fetch_assoc();
$stmt->close();

// Parameter binding types:
// "i" - Integer
// "s" - String  
// "d" - Double/Float
// "b" - Blob

// Multiple parameters example:
$stmt = $conn->prepare("INSERT INTO projects (title, slug, is_featured) VALUES (?, ?, ?)");
$stmt->bind_param("ssi", $title, $slug, $is_featured);

💡 What Makes This Special

Advanced Rate Limiting with Browser Fingerprinting

Prevent contact form abuse using fingerprint hashing instead of IP addresses (Cloudflare-compatible).

// Generate unique fingerprint from session + headers
// Works behind CDNs like Cloudflare that strip real IPs
$user_agent = $_SERVER['HTTP_USER_AGENT'] ?? '';
$accept_lang = $_SERVER['HTTP_ACCEPT_LANGUAGE'] ?? '';
$accept_enc = $_SERVER['HTTP_ACCEPT_ENCODING'] ?? '';

// Hash combines session ID with browser characteristics  
$fingerprint = hash('sha256', session_id() . '|' . $user_agent . '|' . $accept_lang . '|' . $accept_enc);

// Check rate limit: Max 2 submissions per 5 minutes
$stmt = $conn->prepare("
    SELECT COUNT(*) as count 
    FROM contact_rate_limit 
    WHERE fingerprint = ? 
    AND submitted_at > DATE_SUB(NOW(), INTERVAL 5 MINUTE)
");
$stmt->bind_param("s", $fingerprint);
$stmt->execute();
$result = $stmt->get_result()->fetch_assoc();

if ($result['count'] >= 2) {
    http_response_code(429); // Too Many Requests
    echo json_encode(['success' => false, 'message' => 'Please wait before submitting again.']);
    exit;
}

// Store fingerprint for rate limit tracking
$stmt = $conn->prepare("INSERT INTO contact_rate_limit (fingerprint) VALUES (?)");
$stmt->bind_param("s", $fingerprint);
$stmt->execute();

💡 What Makes This Special

CSS Variables for Maintainable Design Systems

Using CSS custom properties to create a flexible, themeable design system with zero hardcoded values.

:root {
    /* Color System - Layered Background Depth */
    --bg-primary: #0d1117;      /* Main background (darkest) */
    --bg-secondary: #161b22;    /* Cards, sections */
    --bg-tertiary: #21262d;     /* Elevated elements */
    --bg-elevated: #2d333b;     /* Hover states, dropdowns */
    
    /* Text Hierarchy */
    --text-primary: #c9d1d9;    /* Headings, primary content */
    --text-secondary: #8b949e;  /* Body text, labels */
    --text-muted: #6e7681;      /* Metadata, descriptions */
    
    /* Accent Colors */
    --accent-blue: #58a6ff;     /* Primary CTA, links */
    --accent-green: #3fb950;    /* Success states */
    --accent-yellow: #d29922;   /* Warnings */
    --accent-red: #f85149;      /* Errors */
    
    /* Spacing Scale - Consistent Rhythm */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* Typography */
    --font-primary: -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Cascadia Code", "Source Code Pro", monospace;
}

/* Using the variables */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-normal);
}

.btn-primary {
    background: var(--accent-blue);
    color: #000;
    padding: var(--spacing-md) var(--spacing-xl);
}

💡 What Makes This Special

Dynamic Traffic Analytics Dashboard

Custom analytics system tracking page views, sessions, and traffic sources with Chart.js visualization.

// Fetch analytics data via PHP
$stmt = $conn->prepare("
    SELECT 
        DATE(view_time) as date,
        COUNT(*) as views,
        COUNT(DISTINCT session_id) as sessions
    FROM page_views 
    WHERE view_time >= DATE_SUB(NOW(), INTERVAL ? DAY)
    GROUP BY DATE(view_time)
    ORDER BY date ASC
");
$stmt->bind_param("i", $days);
$stmt->execute();
$result = $stmt->get_result();

$dates = [];
$views = [];
$sessions = [];
while ($row = $result->fetch_assoc()) {
    $dates[] = $row['date'];
    $views[] = $row['views'];
    $sessions[] = $row['sessions'];
}

// JavaScript - Render with Chart.js
const ctx = document.getElementById('trafficChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: <?php echo json_encode($dates); ?>,
        datasets: [{
            label: 'Page Views',
            data: <?php echo json_encode($views); ?>,
            borderColor: 'rgb(88, 166, 255)',
            backgroundColor: 'rgba(88, 166, 255, 0.1)',
            tension: 0.4
        }, {
            label: 'Unique Sessions',
            data: <?php echo json_encode($sessions); ?>,
            borderColor: 'rgb(63, 185, 80)',
            backgroundColor: 'rgba(63, 185, 80, 0.1)',
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { beginAtZero: true, ticks: { color: '#8b949e' } }
        },
        plugins: {
            legend: { labels: { color: '#c9d1d9' } }
        }
    }
});

💡 What Makes This Special