🎯 Complete sitemap.php File
This is the complete, functional sitemap.php file with Matrix design, SEO optimization, and interactive features.
📦 Separate the Code into Individual Files
You can split this sitemap into separate files for better organization:
🎨 sitemap.css
Extract all CSS styles from <style> tags
/* Matrix-style CSS */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Courier New', monospace;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
color: #ffffff;
}
/* ... rest of your CSS styles ... */
💡 Link in HTML: <link rel="stylesheet" href="sitemap.css">
⚡ sitemap.js
Extract all JavaScript from <script> tags
// Matrix Animation and Interactive Features
function viewSourceCode() { /* your code */ }
function loadSourceCode() { /* your code */ }
function copySourceCode() { /* your code */ }
// Matrix animation
const canvas = document.getElementById('matrixCanvas');
// ... rest of JavaScript ...
💡 Link in HTML: <script src="sitemap.js"></script>
📊 sitemap-data.php
Extract the $sitemap_data array to separate file
<?php
return [
'main' => [
'title' => 'Main Pages',
'icon' => '🏠',
'links' => [ /* your links */ ]
],
// ... rest of data
];
?>
💡 Include in PHP: $sitemap_data = include 'sitemap-data.php';
⚙️ config.php
Configuration settings and variables
<?php
define('SITE_NAME', 'NicolasP Portfolio');
define('SITE_VERSION', '2.0');
define('AUTHOR_NAME', 'Nicolas P. Acker');
define('AUTHOR_EMAIL', 'mail@nicolasp.online');
?>
💡 Include in PHP: include 'config.php';
📖 How to Use This Code
Complete guide for implementing this sitemap on your website:
🔧 Step 1: Server Requirements
- PHP 7.4+ - Required for PHP functions
- Apache/Nginx - Web server with PHP support
- mod_rewrite - For clean URLs (optional)
📁 Step 2: File Structure
/your-website/
├── sitemap.php (this file)
├── sitemap.xml
├── sitemap-images.xml
├── robots.txt
├── manifest.json
└── assets/
├── css/ (if using separate CSS)
└── js/ (if using separate JS)
✏️ Step 3: Customization Required
- Line 15-20: Update author information (nicolasp@ten3.dev) and contact details
- Line 30-200: Modify $sitemap_data array with your actual pages/tools
- Line 350+: Update meta tags, canonical URLs (www.nicolasp.online), title, and descriptions for your site
- Line 400+: Customize colors, fonts, and Matrix animation speed
- Important: Change all www.nicolasp.online URLs to your domain
🔗 Step 4: Integration
- Navigation: Add link in your main menu: <a href="/sitemap.php">Sitemap</a>
- Footer: Include sitemap link for SEO
- Robots.txt: Add: Sitemap: https://www.nicolasp.online/sitemap.php
🚀 Step 5: SEO Optimization
- Submit sitemap.xml to Google Search Console
- Update meta descriptions for your specific content
- Add structured data markup if needed
- Test mobile responsiveness
🎨 Customization Options
Make this sitemap match your brand and style:
🎨 Colors & Theme
/* Change Matrix green to your brand colors */
:root {
--primary-color: #00ff00; /* Matrix Green */
--secondary-color: #90ff90; /* Light Green */
--accent-color: #ffffff; /* White */
--bg-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}
/* Update these values for your theme */
.header h1 { color: var(--primary-color); }
.nav-links a { border-color: var(--primary-color); }
📝 Content Customization
// Update line 15-20 with your information
$page_title = "Your Site Sitemap";
$author_name = "Your Name";
$author_email = "your@email.com";
$website_url = "https://yoursite.com";
// Modify the sitemap data (line 30+)
$sitemap_data = [
'main' => [
'title' => 'Your Main Pages',
'icon' => '🏠', // Change emoji
'links' => [
// Add your actual pages here
]
]
];
⚡ Animation Settings
// Matrix animation speed (line 600+)
setInterval(drawMatrix, 35); // Change 35 to 50 for slower animation
// Animation characters
const matrixChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()';
// Add your own characters or symbols
// Matrix colors (in drawMatrix function)
ctx.fillStyle = '#00ff00'; // Change color here
📱 Responsive Breakpoints
/* Customize mobile breakpoints */
@media (max-width: 768px) {
.header h1 { font-size: 28px; } /* Smaller on mobile */
.container { padding: 15px; }
.sitemap-section { padding: 20px; }
}
@media (max-width: 480px) {
.links-grid { grid-template-columns: 1fr; } /* Single column */
}