Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Vault - Ingmar van Rheenen | Development Snippets & Resources</title>
<!--=============== SEO META TAGS ===============-->
<meta name="description" content="Exclusieve code snippets en development resources van Ingmar van Rheenen. Docker environments, PHP CRUD applications en meer development tools.">
<meta name="keywords" content="code snippets, development resources, docker, php crud, web development, programming examples, Ingmar van Rheenen">
<meta name="author" content="Ingmar van Rheenen">
<meta name="robots" content="noindex, nofollow">
<link rel="canonical" href="https://yourdomain.com/secret.html">
<!--=============== OPEN GRAPH TAGS ===============-->
<meta property="og:type" content="website">
<meta property="og:title" content="Code Vault - Development Resources">
<meta property="og:description" content="Exclusieve code snippets en development resources van Ingmar van Rheenen.">
<meta property="og:image" content="https://yourdomain.com/assets/img/code-vault-preview.jpg">
<meta property="og:url" content="https://yourdomain.com/secret.html">
<!--=============== FAVICON ===============-->
<link rel="shortcut icon" href="assets/img/icons8-circled-i-32.png" type="image/x-icon">
<!--=============== REMIXICONS ===============-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
<!--=============== PRISM CSS FOR CODE HIGHLIGHTING ===============-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/secret-page.css">
</head>
<body>
<!--==================== HEADER ====================-->
<div class="cursor"></div>
<div class="cursor2"></div>
<header class="header" id="header">
<nav class="nav container">
<a href="index.html" class="nav__logo">
<span class="nav__logo-circle">I</span>
<span class="nav__logo-name">Ingmar van Rheenen.</span>
</a>
<div class="nav__menu" id="nav-menu">
<span class="nav__title">Menu</span>
<h3 class="nav__name">Ingmar</h3>
<ul class="nav__list">
<li class="nav__item">
<a href="index.html#home" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="index.html#about" class="nav__link">About Me</a>
</li>
<li class="nav__item">
<a href="projects.html" class="nav__link">Projects</a>
</li>
<li class="nav__item">
<a href="index.html#contact" class="nav__link">Contact Me</a>
</li>
<li class="nav__item">
<a id="cvLink" class="nav__link nav__link-button">CV</a>
</li>
</ul>
<!--Close button-->
<div class="nav__close" id="nav-close">
<i class="ri-close-line"></i>
</div>
</div>
<div class="nav__buttons">
<!--Theme button-->
<i class="ri-moon-line change-theme" id="theme-button"></i>
<!--Toggle button-->
<div class="nav__toggle" id="nav-toggle">
<i class="ri-menu-4-line"></i>
</div>
</div>
</nav>
</header>
<!--==================== MAIN ====================-->
<main class="main">
<!--==================== SECRET PAGE ====================-->
<section class="secret section" id="secret">
<div class="secret__bg">
<div class="secret__container container">
<div class="secret__header">
<h2 class="section__title-1">
<span>Code Vault.</span>
</h2>
<p class="secret__description">
<i class="ri-lock-line"></i>
A collection of useful code snippets, templates, and solutions.
Click on any card to reveal the code treasures within.
</p>
</div>
<div class="snippets__grid">
<!-- Docker Environment Setup -->
<article class="snippet__card">
<div class="snippet__preview">
<div class="snippet__icon">
<i class="ri-terminal-box-line"></i>
</div>
<h3 class="snippet__title">Docker Development Environment</h3>
<p class="snippet__description">Complete Docker setup with PHP, MySQL, and Apache for local development</p>
<div class="snippet__tags">
<span class="snippet__tag">Docker</span>
<span class="snippet__tag">PHP</span>
<span class="snippet__tag">MySQL</span>
<span class="snippet__tag">DevOps</span>
</div>
<button class="snippet__toggle">
<i class="ri-eye-line"></i> View Code
</button>
</div>
<div class="snippet__content">
<div class="snippet__files">
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-database-2-line"></i>
<span class="snippet__file-name">init.sql</span>
<button class="snippet__copy" data-code="docker-init-sql">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-sql" id="docker-init-sql">-- Database initialization SQL</code></pre>
</div>
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-terminal-box-line"></i>
<span class="snippet__file-name">Dockerfile</span>
<button class="snippet__copy" data-code="docker-dockerfile">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-dockerfile" id="docker-dockerfile">FROM php:8.1-apache</code></pre>
</div>
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-settings-3-line"></i>
<span class="snippet__file-name">docker-compose.yml</span>
<button class="snippet__copy" data-code="docker-compose">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-yaml" id="docker-compose">services:</code></pre>
</div>
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-key-2-line"></i>
<span class="snippet__file-name">.env</span>
<button class="snippet__copy" data-code="docker-env">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-bash" id="docker-env"># MySQL Database Configuration</code></pre>
</div>
</div>
</div>
</article>
<!-- PHP CRUD Src Folder -->
<article class="snippet__card">
<div class="snippet__preview">
<div class="snippet__icon">
<i class="ri-folder-2-line"></i>
</div>
<h3 class="snippet__title">PHP CRUD Application - Complete Src Folder</h3>
<p class="snippet__description">Complete PHP CRUD application with RESTful API, database models, and test interface</p>
<div class="snippet__tags">
<span class="snippet__tag">PHP</span>
<span class="snippet__tag">CRUD</span>
<span class="snippet__tag">REST API</span>
<span class="snippet__tag">MVC</span>
</div>
<button class="snippet__toggle">
<i class="ri-eye-line"></i> View Code
</button>
</div>
<div class="snippet__content">
<div class="snippet__files">
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-database-2-line"></i>
<span class="snippet__file-name">config/database.php</span>
<button class="snippet__copy" data-code="php-database-config">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-php" id="php-database-config"><?php</code></pre>
</div>
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-user-line"></i>
<span class="snippet__file-name">models/user.php</span>
<button class="snippet__copy" data-code="php-user-model">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-php" id="php-user-model"><?php</code></pre>
</div>
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-code-line"></i>
<span class="snippet__file-name">index.php (REST API)</span>
<button class="snippet__copy" data-code="php-rest-api">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-php" id="php-rest-api"><?php</code></pre>
</div>
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-pages-line"></i>
<span class="snippet__file-name">test.php (Web Interface)</span>
<button class="snippet__copy" data-code="php-test-interface">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-php" id="php-test-interface"><?php</code></pre>
</div>
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-css3-line"></i>
<span class="snippet__file-name">css/style.css</span>
<button class="snippet__copy" data-code="php-crud-css">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-css" id="php-crud-css">/* Simple CRUD PHP Interface Styles */</code></pre>
</div>
<div class="snippet__file">
<div class="snippet__file-header">
<i class="ri-settings-3-line"></i>
<span class="snippet__file-name">.htaccess</span>
<button class="snippet__copy" data-code="php-htaccess">
<i class="ri-file-copy-line"></i>
</button>
</div>
<pre class="snippet__code"><code class="language-apache" id="php-htaccess">RewriteEngine On</code></pre>
</div>
</div>
</div>
</article>
<!-- Placeholder cards for future snippets -->
<article class="snippet__card snippet__card--placeholder">
<div class="snippet__preview">
<div class="snippet__icon">
<i class="ri-add-line"></i>
</div>
<h3 class="snippet__title">More Snippets Coming Soon...</h3>
<p class="snippet__description">Stay tuned for more useful code snippets</p>
<div class="snippet__tags">
<span class="snippet__tag">Future</span>
</div>
</div>
</article>
</div>
<div class="secret__back">
<a href="index.html" class="secret__back-link">
<i class="ri-arrow-left-line"></i> Back to Portfolio
</a>
</div>
</div>
</div>
</section>
</main>
<!--==================== FOOTER ====================-->
<footer class="footer">
<div class="footer__container container grid">
<ul class="footer__links">
<li>
<a href="index.html#about" class="footer__link">About</a>
</li>
<li>
<a href="projects.html" class="footer__link">Projects</a>
</li>
<li>
<a href="index.html#contact" class="footer__link">Contact</a>
</li>
</ul>
<span class="footer__copy">
© All Rights Reserved By
<a href="#">Ingmar van Rheenen.</a>
</span>
</div>
</footer>
<!--========== SCROLL UP ==========-->
<a href="#" class="scrollup" id="scroll-up">
<i class="ri-arrow-up-s-line scrollup__icon"></i>
</a>
<!--=============== PRISM JS FOR CODE HIGHLIGHTING ===============-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-docker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<!--=============== MAIN JS ===============-->
<script src="assets/js/main.js"></script>
<script src="assets/js/gsap.js"></script>
<script src="assets/js/fade.js"></script>
<script src="assets/js/secret.js"></script>
<script src="assets/js/mouse.js"></script>
<!--=============== THEME SCRIPT ===============-->
<script>
// Theme functionality for secret page
const themeButton = document.getElementById('theme-button');
const darkTheme = 'dark-theme';
const iconTheme = 'ri-sun-line';
// Previously selected theme (if user selected)
const selectedTheme = localStorage.getItem('selected-theme');
const selectedIcon = localStorage.getItem('selected-icon');
// We obtain the current theme that the interface has by validating the dark-theme class
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light';
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line';
// We validate if the user previously chose a theme
if (selectedTheme) {
// If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark theme
document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme);
}
// Activate / deactivate the theme manually with the button
themeButton.addEventListener('click', () => {
// Add or remove the dark / icon theme
document.body.classList.toggle(darkTheme);
themeButton.classList.toggle(iconTheme);
// We save the theme and the current icon that the user chose
localStorage.setItem('selected-theme', getCurrentTheme());
localStorage.setItem('selected-icon', getCurrentIcon());
});
</script>
</body>
</html>