secured privacy

This commit is contained in:
ssbg04 committed 2026-06-05 18:47:00 +08:00
1 parent bb8a2fe7c9
commit 19fe6d30f4
10 files changed
+1666 -1305

No files matched your search

+10 -4
View File
@@ -1,9 +1,15 @@
# Email Configuration
CONTACT_EMAIL=your-email@gmail.com
# Database Configuration
DB_HOST=your-database-host
DB_USER=your-database-username
DB_PASS=your-database-password
DB_NAME=your-database-name
# Google reCAPTCHA
RECAPTCHA_SITE_KEY=your-site-key-here
RECAPTCHA_SECRET_KEY=your-secret-key-here
RECAPTCHA_SITE_KEY=your-recaptcha-site-key-here
RECAPTCHA_SECRET_KEY=your-recaptcha-secret-key-here
# Contact Email (used in FormSubmit action)
CONTACT_EMAIL=your-email@gmail.com
# Rate Limiting (requests per hour)
RATE_LIMIT=10
+1
View File
@@ -1,2 +1,3 @@
if0_41132991_portfolio.sql
googl*
.env
+1063 -755
View File
File diff suppressed because it is too large. Load diff
+116 -123
View File
@@ -1,124 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog | Cris Charles Garcia</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
</style>
</head>
<body>
<input type="checkbox" id="dark-mode-toggle" class="toggle-checkbox" checked>
<div class="site-wrapper">
<nav>
<div class="logo">CG.</div>
<div class="nav-links">
<a href="index.php">← Back Home</a>
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme">
<span class="icon-moon">🌙</span>
<span class="icon-sun">☀️</span>
</label>
</div>
</nav>
<header class="hero reveal" style="min-height: auto; padding: 60px 0;">
<div class="hero-text">
<h1>Writing & Thoughts</h1>
<p class="subtitle">Tutorials, tech reviews, and updates from my developer journey.</p>
</div>
</header>
<section class="section-pad reveal">
<div class="blog-grid">
<article class="blog-card">
<div class="blog-meta">
<span class="blog-date">Feb 10, 2026</span>
<span class="blog-tag">React</span>
</div>
<h3 class="blog-title">Understanding Custom Hooks in React</h3>
<p class="blog-excerpt">Why you should stop copying code and start abstracting logic into reusable hooks.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
<article class="blog-card">
<div class="blog-meta">
<span class="blog-date">Jan 22, 2026</span>
<span class="blog-tag">DevOps</span>
</div>
<h3 class="blog-title">Why I Switched from XAMPP to Docker</h3>
<p class="blog-excerpt">Setting up a consistent development environment for PHP and Node.js without the headache.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
<article class="blog-card">
<div class="blog-meta">
<span class="blog-date">Dec 05, 2025</span>
<span class="blog-tag">Career</span>
</div>
<h3 class="blog-title">My Journey as a BSIT Student</h3>
<p class="blog-excerpt">Balancing capstone projects, freelance work, and learning new tech stacks in 2026.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
<article class="blog-card">
<div class="blog-meta">
<span class="blog-date">Nov 15, 2025</span>
<span class="blog-tag">CSS</span>
</div>
<h3 class="blog-title">Dark Mode in 5 Minutes</h3>
<p class="blog-excerpt">How to implement a pure CSS dark mode toggle without flashing content.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
</div>
</section>
<footer>
<p>&copy; <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
</footer>
</div>
<a href="#" id="back-to-top" title="Back to Top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Dynamic Year
document.getElementById("year").textContent = new Date().getFullYear();
// Scroll Animation
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Back to Top
const backToTopButton = document.getElementById("back-to-top");
window.addEventListener('scroll', () => {
if (window.scrollY > 300) backToTopButton.classList.add("show");
else backToTopButton.classList.remove("show");
});
// Dark Mode Persistence
const themeToggle = document.getElementById("dark-mode-toggle");
if (localStorage.getItem("theme") === "light") themeToggle.checked = false;
themeToggle.addEventListener("change", () => {
localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
});
});
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Blog — Tutorials, tech reviews, and updates from Cris Charles Garcia's developer journey.">
<title>Blog | Cris Charles Garcia</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<input type="checkbox" id="dark-mode-toggle" class="toggle-checkbox" checked>
<!-- Animated Mesh Background -->
<div class="mesh-bg" aria-hidden="true">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="site-wrapper">
<nav>
<div class="logo">CG.</div>
<div class="nav-links">
<a href="index.php">← Home</a>
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme" aria-label="Toggle dark/light mode">
<span class="icon-moon">🌙</span>
<span class="icon-sun">☀️</span>
</label>
</div>
</nav>
<div class="page-hero reveal">
<span class="section-label">Writing</span>
<h1>Writing & Thoughts</h1>
<p class="subtitle">Tutorials, tech reviews, and updates from my developer journey.</p>
</div>
<div class="section-divider"></div>
<section class="section-pad reveal">
<div class="blog-grid">
<article class="blog-card reveal reveal-delay-1">
<div class="blog-meta">
<span class="blog-date">Feb 10, 2026</span>
<span class="blog-tag">React</span>
</div>
<h3 class="blog-title">Understanding Custom Hooks in React</h3>
<p class="blog-excerpt">Why you should stop copying code and start abstracting logic into reusable hooks. A deep dive into the why and how.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
<article class="blog-card reveal reveal-delay-2">
<div class="blog-meta">
<span class="blog-date">Jan 22, 2026</span>
<span class="blog-tag">DevOps</span>
</div>
<h3 class="blog-title">Why I Switched from XAMPP to Docker</h3>
<p class="blog-excerpt">Setting up a consistent development environment for PHP and Node.js without the headache. Containers changed everything.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
<article class="blog-card reveal reveal-delay-3">
<div class="blog-meta">
<span class="blog-date">Dec 05, 2025</span>
<span class="blog-tag">Career</span>
</div>
<h3 class="blog-title">My Journey as a BSIT Student</h3>
<p class="blog-excerpt">Balancing capstone projects, freelance work, and learning new tech stacks in 2026.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
<article class="blog-card reveal reveal-delay-4">
<div class="blog-meta">
<span class="blog-date">Nov 15, 2025</span>
<span class="blog-tag">CSS</span>
</div>
<h3 class="blog-title">Dark Mode in 5 Minutes</h3>
<p class="blog-excerpt">How to implement a pure CSS dark mode toggle without flashing content. The trick most tutorials miss.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
</div>
</section>
<footer>
<p>&copy; <span id="year"></span> Cris Charles Garcia. Crafted in Laguna 🇵🇭</p>
</footer>
</div>
<a href="#" id="back-to-top" title="Back to Top" aria-label="Back to top">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("year").textContent = new Date().getFullYear();
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) { entry.target.classList.add('active'); obs.unobserve(entry.target); }
});
}, { threshold: 0.08 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
const backToTop = document.getElementById("back-to-top");
window.addEventListener('scroll', () => backToTop.classList.toggle("show", window.scrollY > 300));
const themeToggle = document.getElementById("dark-mode-toggle");
themeToggle.checked = localStorage.getItem("theme") !== "light";
themeToggle.addEventListener("change", () => localStorage.setItem("theme", themeToggle.checked ? "dark" : "light"));
});
</script>
</body>
</html>
+131 -131
View File
@@ -1,132 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Certifications | Cris Charles Garcia</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
</style>
</head>
<body>
<input type="checkbox" id="dark-mode-toggle" class="toggle-checkbox" checked>
<div class="site-wrapper">
<nav>
<div class="logo">CG.</div>
<div class="nav-links">
<a href="index.php">← Back Home</a>
<a href="projects.php">Projects</a>
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme">
<span class="icon-moon">🌙</span>
<span class="icon-sun">☀️</span>
</label>
</div>
</nav>
<header class="hero reveal" style="min-height: auto; padding: 60px 0;">
<div class="hero-text">
<h1>Certifications</h1>
<p class="subtitle">Qualifications and courses I have completed.</p>
</div>
</header>
<section class="section-pad reveal">
<div class="cert-grid">
<div class="cert-card">
<div class="cert-icon">🏆</div>
<div class="cert-info">
<h3>Responsive Web Design</h3>
<p class="issuer">FreeCodeCamp</p>
<span class="date">Issued Dec 2024</span>
</div>
</div>
<div class="cert-card">
<div class="cert-icon">📜</div>
<div class="cert-info">
<h3>JavaScript Algorithms</h3>
<p class="issuer">HackerRank</p>
<span class="date">Issued Nov 2024</span>
</div>
</div>
<div class="cert-card">
<div class="cert-icon">☁️</div>
<div class="cert-info">
<h3>Cloud Fundamentals</h3>
<p class="issuer">AWS</p>
<span class="date">Issued Oct 2024</span>
</div>
</div>
<div class="cert-card">
<div class="cert-icon">🐍</div>
<div class="cert-info">
<h3>Python for Data Science</h3>
<p class="issuer">Coursera</p>
<span class="date">Issued Sept 2024</span>
</div>
</div>
<div class="cert-card">
<div class="cert-icon">🔒</div>
<div class="cert-info">
<h3>Cybersecurity Essentials</h3>
<p class="issuer">Cisco</p>
<span class="date">Issued Aug 2024</span>
</div>
</div>
<div class="cert-card">
<div class="cert-icon">⚛️</div>
<div class="cert-info">
<h3>React Advanced Patterns</h3>
<p class="issuer">Udemy</p>
<span class="date">Issued July 2024</span>
</div>
</div>
</div>
</section>
<footer>
<p>&copy; <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
</footer>
</div>
<a href="#" id="back-to-top" title="Back to Top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Dynamic Year
document.getElementById("year").textContent = new Date().getFullYear();
// Scroll Animation
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Back to Top
const backToTopButton = document.getElementById("back-to-top");
window.addEventListener('scroll', () => {
if (window.scrollY > 300) backToTopButton.classList.add("show");
else backToTopButton.classList.remove("show");
});
// Dark Mode Persistence
const themeToggle = document.getElementById("dark-mode-toggle");
if (localStorage.getItem("theme") === "light") themeToggle.checked = false;
themeToggle.addEventListener("change", () => {
localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
});
});
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Certifications — Qualifications and courses completed by Cris Charles Garcia.">
<title>Certifications | Cris Charles Garcia</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<input type="checkbox" id="dark-mode-toggle" class="toggle-checkbox" checked>
<!-- Animated Mesh Background -->
<div class="mesh-bg" aria-hidden="true">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="site-wrapper">
<nav>
<div class="logo">CG.</div>
<div class="nav-links">
<a href="index.php">← Home</a>
<a href="projects.php">Projects</a>
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme" aria-label="Toggle dark/light mode">
<span class="icon-moon">🌙</span>
<span class="icon-sun">☀️</span>
</label>
</div>
</nav>
<div class="page-hero reveal">
<span class="section-label">Credentials</span>
<h1>Certifications</h1>
<p class="subtitle">Qualifications and courses I have completed.</p>
</div>
<div class="section-divider"></div>
<section class="section-pad">
<div class="cert-grid">
<div class="cert-card reveal reveal-delay-1">
<div class="cert-icon">🏆</div>
<div class="cert-info">
<h3>Responsive Web Design</h3>
<p class="issuer">FreeCodeCamp</p>
<span class="date">Issued Dec 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-2">
<div class="cert-icon">📜</div>
<div class="cert-info">
<h3>JavaScript Algorithms</h3>
<p class="issuer">HackerRank</p>
<span class="date">Issued Nov 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-3">
<div class="cert-icon">☁️</div>
<div class="cert-info">
<h3>Cloud Fundamentals</h3>
<p class="issuer">AWS</p>
<span class="date">Issued Oct 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-1">
<div class="cert-icon">🐍</div>
<div class="cert-info">
<h3>Python for Data Science</h3>
<p class="issuer">Coursera</p>
<span class="date">Issued Sept 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-2">
<div class="cert-icon">🔒</div>
<div class="cert-info">
<h3>Cybersecurity Essentials</h3>
<p class="issuer">Cisco</p>
<span class="date">Issued Aug 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-3">
<div class="cert-icon">⚛️</div>
<div class="cert-info">
<h3>React Advanced Patterns</h3>
<p class="issuer">Udemy</p>
<span class="date">Issued July 2024</span>
</div>
</div>
</div>
</section>
<footer>
<p>&copy; <span id="year"></span> Cris Charles Garcia. Crafted in Laguna 🇵🇭</p>
</footer>
</div>
<a href="#" id="back-to-top" title="Back to Top" aria-label="Back to top">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("year").textContent = new Date().getFullYear();
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) { entry.target.classList.add('active'); obs.unobserve(entry.target); }
});
}, { threshold: 0.08 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
const backToTop = document.getElementById("back-to-top");
window.addEventListener('scroll', () => backToTop.classList.toggle("show", window.scrollY > 300));
const themeToggle = document.getElementById("dark-mode-toggle");
themeToggle.checked = localStorage.getItem("theme") !== "light";
themeToggle.addEventListener("change", () => localStorage.setItem("theme", themeToggle.checked ? "dark" : "light"));
});
</script>
</body>
</html>
+40 -11
View File
@@ -1,17 +1,46 @@
<?php
$host = "sql207.infinityfree.com";
$ngalan = "if0_41132991";
$sikreto = "j4kklvOrKqiZkG";
$deytabeys = "if0_41132991_portfolio";
// $host = "127.0.0.1";
// $ngalan = "root";
// $sikreto = "";
// $deytabeys = "porfoliowai";
/**
* Load environment variables from a .env file.
* PHP 7.x compatible — no str_starts_with().
*/
function loadEnv($path) {
if (!file_exists($path)) {
return;
}
$lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
if ($lines === false) return;
foreach ($lines as $line) {
$line = trim($line);
if ($line === '' || $line[0] === '#') {
continue;
}
$parts = explode('=', $line, 2);
if (count($parts) < 2) continue;
$key = trim($parts[0]);
$value = trim($parts[1]);
if (!array_key_exists($key, $_ENV)) {
$_ENV[$key] = $value;
putenv("$key=$value");
}
}
}
// Try project root .env — works both locally and on InfinityFree
$envPath = __DIR__ . '/../.env';
loadEnv($envPath);
$host = getenv('DB_HOST') ?: ($_ENV['DB_HOST'] ?? '');
$ngalan = getenv('DB_USER') ?: ($_ENV['DB_USER'] ?? '');
$sikreto = getenv('DB_PASS') ?: ($_ENV['DB_PASS'] ?? '');
$deytabeys = getenv('DB_NAME') ?: ($_ENV['DB_NAME'] ?? '');
if (empty($host) || empty($ngalan)) {
die('<p style="color:red;font-family:monospace;padding:20px">DB config missing. Please create a .env file from .env.example</p>');
}
$mysqli = new mysqli($host, $ngalan, $sikreto, $deytabeys);
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
die('<p style="color:red;font-family:monospace;padding:20px">Connection failed: ' . htmlspecialchars($mysqli->connect_error) . '</p>');
}
echo "<script>console.log('Yung database mo ay gumagana langya ka!');</script>";
?>
+202 -168
View File
@@ -1,116 +1,155 @@
<?php
// Load environment variables — PHP 7.x compatible
function loadEnv($path) {
if (!file_exists($path)) return;
$lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
if ($lines === false) return;
foreach ($lines as $line) {
$line = trim($line);
if ($line === '' || $line[0] === '#') continue;
$parts = explode('=', $line, 2);
if (count($parts) < 2) continue;
$key = trim($parts[0]); $value = trim($parts[1]);
if (!array_key_exists($key, $_ENV)) { $_ENV[$key] = $value; putenv("$key=$value"); }
}
}
loadEnv(__DIR__ . '/.env');
$recaptchaSiteKey = getenv('RECAPTCHA_SITE_KEY') ?: ($_ENV['RECAPTCHA_SITE_KEY'] ?? '');
$contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL'] ?? '');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Cris Charles Garcia — BSIT Software Development student based in Laguna, Philippines. Building digital products with purpose using MERN Stack and PHP.">
<title>Cris Charles Garcia | Software Developer</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
/* This hides elements initially */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
/* JS adds this class to make them appear */
.reveal.active {
opacity: 1;
transform: translateY(0);
}
#profilePic {
transition: opacity 0.3 ease-out;
}
</style>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<input type="checkbox" id="dark-mode-toggle" class="toggle-checkbox" checked>
<!-- Animated Mesh Background -->
<div class="mesh-bg" aria-hidden="true">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="site-wrapper">
<nav>
<!-- ===== NAV ===== -->
<nav id="main-nav">
<div class="logo">CG.</div>
<div class="hamburger" id="hamburger">
<div class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false" role="button" tabindex="0">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="nav-links" id="nav-links">
<a href="#about" class="nav-item">About</a>
<a href="#projects" class="nav-item">Work</a>
<a href="#certificates" class="nav-item">Certs</a>
<a href="blog.php" class="nav-item">Blog</a>
<a href="#contact" class="nav-item">Contact</a>
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme">
<div class="nav-links" id="nav-links" role="navigation">
<a href="#about" class="nav-item">About</a>
<a href="#projects" class="nav-item">Work</a>
<a href="#certificates" class="nav-item">Certs</a>
<a href="blog.php" class="nav-item">Blog</a>
<a href="#contact" class="nav-item">Contact</a>
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme" aria-label="Toggle dark/light mode">
<span class="icon-moon">🌙</span>
<span class="icon-sun">☀️</span>
</label>
</div>
</nav>
<!-- ===== HERO ===== -->
<header class="hero reveal">
<div class="hero-text">
<span class="greeting">Hi, I'm Cris Charles Garcia</span>
<div class="hero-badge">
<span class="dot"></span>
Available for opportunities
</div>
<span style="display:block; color: var(--text-muted); font-size: 1rem; font-weight: 500; margin-bottom: 10px;">Hi, I'm Cris Charles Garcia</span>
<h1>Building digital products with <span class="highlight">purpose</span>.</h1>
<p class="subtitle">BSIT Software Development Student based in Laguna, Philippines.</p>
<p class="subtitle">BSIT Software Development student based in Laguna, Philippines — turning ideas into scalable, polished web experiences.</p>
<div class="hero-btns">
<a href="#projects" class="btn primary">View Projects</a>
<a href="#contact" class="btn secondary">Get in Touch</a>
<a href="#projects" class="btn primary" id="btn-view-projects">View Projects ↗</a>
<a href="#contact" class="btn secondary" id="btn-get-in-touch">Get in Touch</a>
</div>
</div>
<div class="hero-img-container">
<!-- <img
alt="Cris Charles Garcia"
class="profile-pic"
loading="lazy"
id="profilePic"> -->
<img src="assets/img/pp-night.webp" alt="Cris (Night)" class="profile-pic img-night-normal">
<img src="assets/img/pp-night-shy.webp" alt="Cris (Night Hover)" class="profile-pic img-night-hover">
<img src="assets/img/pp-day.webp" alt="Cris (Day)" class="profile-pic img-day-normal">
<img src="assets/img/pp-day-shy.webp" alt="Cris (Day Hover)" class="profile-pic img-day-hover">
<div class="img-ring"></div>
<img src="assets/img/pp-night.webp" alt="Cris Charles Garcia" class="profile-pic img-night-normal">
<img src="assets/img/pp-night-shy.webp" alt="Cris Charles Garcia" class="profile-pic img-night-hover">
<img src="assets/img/pp-day.webp" alt="Cris Charles Garcia" class="profile-pic img-day-normal">
<img src="assets/img/pp-day-shy.webp" alt="Cris Charles Garcia" class="profile-pic img-day-hover">
<div class="glow-effect"></div>
</div>
</header>
<div class="section-divider"></div>
<!-- ===== ABOUT ===== -->
<section id="about" class="section-pad reveal">
<h2 class="section-title">About Me</h2>
<div class="section-header">
<span class="section-label">About Me</span>
<h2 class="section-title">Passion meets craft.</h2>
</div>
<div class="about-content">
<div class="about-text">
<p>I am a senior <strong>BSIT student majoring in Software Development</strong> with a passion for building scalable web applications.</p>
<p>Currently, I focus on the <strong>MERN Stack</strong> and <strong>PHP</strong> ecosystems. I love solving complex problems, whether it's architecting a database or designing a seamless UI.</p>
<p>I am a senior <strong>BSIT student majoring in Software Development</strong> with a passion for building scalable web applications that solve real-world problems.</p>
<p>Currently focused on the <strong>MERN Stack</strong> and <strong>PHP</strong> ecosystems. I love solving complex challenges — whether it's architecting a database, designing a seamless UI, or squashing that one annoying bug.</p>
</div>
<div class="tech-stack">
<h3>Tech Stack</h3>
<?php include('views/techstack.php'); ?>
</div>
</div>
<div class="stats-row reveal reveal-delay-2">
<div class="stat-item">
<div class="stat-number">3+</div>
<div class="stat-label">Years Coding</div>
</div>
<div class="stat-item">
<div class="stat-number">10+</div>
<div class="stat-label">Projects Built</div>
</div>
<div class="stat-item">
<div class="stat-number">5+</div>
<div class="stat-label">Certifications</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== PROJECTS ===== -->
<section id="projects" class="section-pad reveal">
<h2 class="section-title">Featured Work</h2>
<div class="project-grid">
<?php include('views/tprojects.php'); ?>
<div class="section-header">
<span class="section-label">Featured Work</span>
<h2 class="section-title">Things I've built.</h2>
</div>
<div class="project-grid">
<?php include('views/tprojects.php'); ?>
</div>
<div class="view-all-container">
<a href="projects.php" class="btn secondary">View All Projects →</a>
<a href="projects.php" class="btn secondary" id="btn-all-projects">View All Projects →</a>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== CERTIFICATIONS ===== -->
<section id="certificates" class="section-pad reveal">
<h2 class="section-title">Certifications</h2>
<div class="section-header">
<span class="section-label">Credentials</span>
<h2 class="section-title">Certifications.</h2>
</div>
<div class="cert-grid">
<div class="cert-card">
<div class="cert-card reveal reveal-delay-1">
<div class="cert-icon">🏆</div>
<div class="cert-info">
<h3>Responsive Web Design</h3>
@@ -118,7 +157,7 @@
<span class="date">Issued Dec 2024</span>
</div>
</div>
<div class="cert-card">
<div class="cert-card reveal reveal-delay-2">
<div class="cert-icon">📜</div>
<div class="cert-info">
<h3>JavaScript Algorithms</h3>
@@ -126,7 +165,7 @@
<span class="date">Issued Nov 2024</span>
</div>
</div>
<div class="cert-card">
<div class="cert-card reveal reveal-delay-3">
<div class="cert-icon">☁️</div>
<div class="cert-info">
<h3>Cloud Fundamentals</h3>
@@ -135,17 +174,21 @@
</div>
</div>
</div>
<div class="view-all-container">
<a href="certifications.php" class="btn secondary">View All Certifications →</a>
<a href="certifications.php" class="btn secondary" id="btn-all-certs">View All Certifications →</a>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== BLOG ===== -->
<section id="blog" class="section-pad reveal">
<h2 class="section-title">Latest Articles</h2>
<div class="section-header">
<span class="section-label">Writing</span>
<h2 class="section-title">Latest articles.</h2>
</div>
<div class="blog-grid">
<article class="blog-card">
<article class="blog-card reveal reveal-delay-1">
<div class="blog-meta">
<span class="blog-date">Feb 10, 2026</span>
<span class="blog-tag">React</span>
@@ -154,8 +197,7 @@
<p class="blog-excerpt">Why you should stop copying code and start abstracting logic into reusable hooks.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
<article class="blog-card">
<article class="blog-card reveal reveal-delay-2">
<div class="blog-meta">
<span class="blog-date">Jan 22, 2026</span>
<span class="blog-tag">DevOps</span>
@@ -164,8 +206,7 @@
<p class="blog-excerpt">Setting up a consistent development environment for PHP and Node.js without the headache.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
<article class="blog-card">
<article class="blog-card reveal reveal-delay-3">
<div class="blog-meta">
<span class="blog-date">Dec 05, 2025</span>
<span class="blog-tag">Career</span>
@@ -174,136 +215,129 @@
<p class="blog-excerpt">Balancing capstone projects, freelance work, and learning new tech stacks in 2026.</p>
<a href="#" class="read-more">Read Article →</a>
</article>
</div>
<div class="view-all-container">
<a href="blog.php" class="btn secondary">Read All Articles →</a>
<a href="blog.php" class="btn secondary" id="btn-all-articles">Read All Articles →</a>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== CONTACT ===== -->
<section id="contact" class="section-pad reveal">
<h2 class="section-title">Let's Connect</h2>
<div class="section-header" style="text-align:center;">
<span class="section-label">Let's Connect</span>
<h2 class="section-title">Start a conversation.</h2>
</div>
<div class="contact-container">
<p>Have a project in mind or want to discuss the latest tech trends? Find me on social media or send a message.</p>
<p>Have a project in mind or want to discuss the latest tech trends? Reach out — I'd love to hear from you.</p>
<div class="social-links">
<a href="https://github.com/ssbg04" target="_blank" class="social-btn" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<a href="https://github.com/ssbg04" target="_blank" class="social-btn" aria-label="GitHub" id="link-github">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
</a>
<a href="https://www.linkedin.com/in/cris-charles-garcia-187415303?utm_source=share_via&utm_content=profile&utm_medium=member_android" target="_blank" class="social-btn" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
<a href="https://www.linkedin.com/in/cris-charles-garcia-187415303" target="_blank" class="social-btn" aria-label="LinkedIn" id="link-linkedin">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
<a href="https://facebook.com/kristyarls345" target="_blank" class="social-btn" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
<a href="https://facebook.com/kristyarls345" target="_blank" class="social-btn" aria-label="Facebook" id="link-facebook">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
</a>
<a href="https://instagram.com/crischarlesgarcia" target="_blank" class="social-btn" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
<a href="https://instagram.com/crischarlesgarcia" target="_blank" class="social-btn" aria-label="Instagram" id="link-instagram">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
</a>
</div>
<form action="https://formsubmit.co/crischarlesgarcia345@gmail.com" method="POST" class="email-form">
<!-- Anti-bot: disable default Formsubmit verification -->
<form action="https://formsubmit.co/<?php echo htmlspecialchars($contactEmail); ?>" method="POST" class="email-form" id="contact-form">
<input type="hidden" name="_captcha" value="false">
<input type="text" name="name" placeholder="Your Name" required>
<input type="text" name="subject" placeholder="Subject" required>
<textarea name="message" rows="5" placeholder="How can I help you?" required></textarea>
<!-- Google reCAPTCHA -->
<div class="g-recaptcha" data-sitekey="6LeMz4gsAAAAAEJ0iuyPqilJGXVGSn9XoOEnKgm2"></div>
<button type="submit" class="btn primary full-width">Send Message</button>
<input type="text" name="name" id="form-name" placeholder="Your Name" required>
<input type="text" name="subject" id="form-subject" placeholder="Subject" required>
<textarea name="message" id="form-message" rows="5" placeholder="How can I help you?" required></textarea>
<?php if ($recaptchaSiteKey): ?>
<div class="g-recaptcha" data-sitekey="<?php echo htmlspecialchars($recaptchaSiteKey); ?>"></div>
<?php endif; ?>
<button type="submit" class="btn primary full-width" id="btn-send-message">Send Message ✉️</button>
</form>
</div>
</section>
<footer>
<p>&copy; <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
<p>&copy; <span id="year"></span> Cris Charles Garcia. Crafted in Laguna 🇵🇭</p>
</footer>
</div>
<a href="#" id="back-to-top" title="Back to Top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
<a href="#" id="back-to-top" title="Back to Top" aria-label="Back to top">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
// 1. DYNAMIC YEAR (Auto-updates)
document.getElementById("year").textContent = new Date().getFullYear();
<script>
document.addEventListener("DOMContentLoaded", () => {
// 2. SCROLL REVEAL ANIMATION
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
// 1. DYNAMIC YEAR
document.getElementById("year").textContent = new Date().getFullYear();
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target);
}
});
}, observerOptions);
const revealElements = document.querySelectorAll('.reveal');
revealElements.forEach(el => observer.observe(el));
// 3. BACK TO TOP BUTTON
const backToTopButton = document.getElementById("back-to-top");
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add("show");
} else {
backToTopButton.classList.remove("show");
// 2. SCROLL REVEAL
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
obs.unobserve(entry.target);
}
});
}, { threshold: 0.08 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// 4. PERSISTENT DARK MODE (Simplified since CSS handles the images now)
const themeToggle = document.getElementById("dark-mode-toggle");
const isDark = localStorage.getItem("theme") !== "light";
themeToggle.checked = isDark;
themeToggle.addEventListener("change", () => {
localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
});
// 5. HAMBURGER MENU LOGIC
const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");
const navItems = document.querySelectorAll(".nav-item");
// Toggle Menu on Hamburger Click
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navLinks.classList.toggle("active");
});
// Close Menu when a Link is clicked
navItems.forEach(item => {
item.addEventListener("click", () => {
hamburger.classList.remove("active");
navLinks.classList.remove("active");
});
});
// Close Menu when the user scrolls
window.addEventListener('scroll', () => {
if (navLinks.classList.contains('active')) {
hamburger.classList.remove("active");
navLinks.classList.remove("active");
}
});
// 3. BACK TO TOP
const backToTop = document.getElementById("back-to-top");
window.addEventListener('scroll', () => {
backToTop.classList.toggle("show", window.scrollY > 300);
});
// Prevent right-click and drag
document.addEventListener("contextmenu", e => e.preventDefault());
document.addEventListener("dragstart", e => e.preventDefault());
// 4. PERSISTENT DARK MODE
const themeToggle = document.getElementById("dark-mode-toggle");
themeToggle.checked = localStorage.getItem("theme") !== "light";
themeToggle.addEventListener("change", () => {
localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
});
</script>
// 5. HAMBURGER MENU
const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");
const navItems = document.querySelectorAll(".nav-item");
function closeMenu() {
hamburger.classList.remove("active");
navLinks.classList.remove("active");
hamburger.setAttribute("aria-expanded", "false");
}
hamburger.addEventListener("click", (e) => {
e.stopPropagation();
const isOpen = hamburger.classList.toggle("active");
navLinks.classList.toggle("active");
hamburger.setAttribute("aria-expanded", isOpen);
});
// Close on nav link click
navItems.forEach(item => item.addEventListener("click", closeMenu));
// Close when clicking outside the menu
document.addEventListener("click", (e) => {
if (navLinks.classList.contains("active") && !navLinks.contains(e.target) && !hamburger.contains(e.target)) {
closeMenu();
}
});
// Close on scroll
window.addEventListener('scroll', () => {
if (navLinks.classList.contains('active')) {
closeMenu();
}
});
});
// Prevent right-click & drag on images
document.addEventListener("contextmenu", e => { if (e.target.tagName === 'IMG') e.preventDefault(); });
document.addEventListener("dragstart", e => { if (e.target.tagName === 'IMG') e.preventDefault(); });
</script>
</body>
</html>
+37 -45
View File
@@ -3,84 +3,76 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="All Projects — A complete archive of apps, websites, and experiments built by Cris Charles Garcia.">
<title>All Projects | Cris Charles Garcia</title>
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
</style>
</head>
<body>
<input type="checkbox" id="dark-mode-toggle" class="toggle-checkbox" checked>
<!-- Animated Mesh Background -->
<div class="mesh-bg" aria-hidden="true">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="site-wrapper">
<nav>
<div class="logo">CG.</div>
<div class="nav-links">
<a href="index.php">← Back Home</a>
<a href="index.php">← Home</a>
<a href="certifications.php">Certs</a>
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme">
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme" aria-label="Toggle dark/light mode">
<span class="icon-moon">🌙</span>
<span class="icon-sun">☀️</span>
</label>
</div>
</nav>
<header class="hero reveal" style="min-height: auto; padding: 60px 0;">
<div class="hero-text">
<h1>Project Archive</h1>
<p class="subtitle">A complete list of apps, websites, and experiments I've built.</p>
</div>
</header>
<div class="page-hero reveal">
<span class="section-label">Portfolio</span>
<h1>Project Archive</h1>
<p class="subtitle">A complete list of apps, websites, and experiments I've built.</p>
</div>
<div class="section-divider"></div>
<section class="section-pad reveal">
<div class="project-grid">
<?php include('views/projects.php'); ?>
<?php include('views/projects.php'); ?>
</div>
</section>
<footer>
<p>&copy; <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
<p>&copy; <span id="year"></span> Cris Charles Garcia. Crafted in Laguna 🇵🇭</p>
</footer>
</div>
<a href="#" id="back-to-top" title="Back to Top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
<a href="#" id="back-to-top" title="Back to Top" aria-label="Back to top">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Dynamic Year
document.getElementById("year").textContent = new Date().getFullYear();
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("year").textContent = new Date().getFullYear();
// Scroll Animation
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Back to Top
const backToTopButton = document.getElementById("back-to-top");
window.addEventListener('scroll', () => {
if (window.scrollY > 300) backToTopButton.classList.add("show");
else backToTopButton.classList.remove("show");
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) { entry.target.classList.add('active'); obs.unobserve(entry.target); }
});
}, { threshold: 0.08 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Dark Mode Persistence
const themeToggle = document.getElementById("dark-mode-toggle");
if (localStorage.getItem("theme") === "light") themeToggle.checked = false;
themeToggle.addEventListener("change", () => {
localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
});
});
const backToTop = document.getElementById("back-to-top");
window.addEventListener('scroll', () => backToTop.classList.toggle("show", window.scrollY > 300));
const themeToggle = document.getElementById("dark-mode-toggle");
themeToggle.checked = localStorage.getItem("theme") !== "light";
themeToggle.addEventListener("change", () => localStorage.setItem("theme", themeToggle.checked ? "dark" : "light"));
});
</script>
</body>
</html>
+33 -34
View File
@@ -1,35 +1,34 @@
<?php
require_once __DIR__ . "/../config/db.php";
require_once __DIR__ . "/../controllers/ProjectController.php";
$projects = showProjects($mysqli);
// var_dump($projects);
?>
<?php if (!empty($projects)): ?>
<?php foreach ($projects as $project): ?>
<a href="<?php echo htmlspecialchars($project['url']); ?>" target="_blank" class="project-card">
<div class="card-img">
<img src="<?php echo htmlspecialchars($project['img_url']); ?>" alt="<?php echo htmlspecialchars($project['title']); ?>" loading="lazy">
</div>
<div class="card-content">
<div class="card-header">
<h3><?php echo htmlspecialchars($project['title']); ?></h3>
<span class="arrow-icon">↗</span>
</div>
<p><?php echo htmlspecialchars($project['des']); ?></p>
<div class="stack-icons">
<?php
// If techstack is "React, Node, Firebase", this turns it into "React • Node • Firebase"
$tags = explode(',', $project['techstack']);
echo htmlspecialchars(implode(' • ', array_map('trim', $tags)));
?>
</div>
</div>
</a>
<?php endforeach; ?>
<?php else: ?>
<p>No projects found in the database.</p>
<?php
require_once __DIR__ . "/../config/db.php";
require_once __DIR__ . "/../controllers/ProjectController.php";
$projects = showProjects($mysqli);
?>
<?php if (!empty($projects)): ?>
<?php foreach ($projects as $project): ?>
<a href="<?php echo htmlspecialchars($project['url']); ?>" target="_blank" class="project-card">
<div class="card-img">
<img src="<?php echo htmlspecialchars($project['img_url']); ?>" alt="<?php echo htmlspecialchars($project['title']); ?>" loading="lazy">
<div class="card-img-overlay"></div>
</div>
<div class="card-content">
<div class="card-header">
<h3><?php echo htmlspecialchars($project['title']); ?></h3>
<span class="arrow-icon">↗</span>
</div>
<p><?php echo htmlspecialchars($project['des']); ?></p>
<div class="stack-badges">
<?php
$tags = array_map('trim', explode(',', $project['techstack']));
foreach ($tags as $tag):
?>
<span class="stack-badge"><?php echo htmlspecialchars($tag); ?></span>
<?php endforeach; ?>
</div>
</div>
</a>
<?php endforeach; ?>
<?php else: ?>
<p style="color: var(--text-muted); grid-column: 1/-1; text-align:center; padding: 40px 0;">No projects found in the database.</p>
<?php endif; ?>
+33 -34
View File
@@ -1,35 +1,34 @@
<?php
require_once __DIR__ . "/../config/db.php";
require_once __DIR__ . "/../controllers/ProjectController.php";
$projects = showThreeProjects($mysqli);
// var_dump($projects);
?>
<?php if (!empty($projects)): ?>
<?php foreach ($projects as $project): ?>
<a href="<?php echo htmlspecialchars($project['url']); ?>" target="_blank" class="project-card">
<div class="card-img">
<img src="<?php echo htmlspecialchars($project['img_url']); ?>" alt="<?php echo htmlspecialchars($project['title']); ?>" loading="lazy">
</div>
<div class="card-content">
<div class="card-header">
<h3><?php echo htmlspecialchars($project['title']); ?></h3>
<span class="arrow-icon">↗</span>
</div>
<p><?php echo htmlspecialchars($project['des']); ?></p>
<div class="stack-icons">
<?php
// If techstack is "React, Node, Firebase", this turns it into "React • Node • Firebase"
$tags = explode(',', $project['techstack']);
echo htmlspecialchars(implode(' • ', array_map('trim', $tags)));
?>
</div>
</div>
</a>
<?php endforeach; ?>
<?php else: ?>
<p>No projects found in the database.</p>
<?php
require_once __DIR__ . "/../config/db.php";
require_once __DIR__ . "/../controllers/ProjectController.php";
$projects = showThreeProjects($mysqli);
?>
<?php if (!empty($projects)): ?>
<?php foreach ($projects as $project): ?>
<a href="<?php echo htmlspecialchars($project['url']); ?>" target="_blank" class="project-card">
<div class="card-img">
<img src="<?php echo htmlspecialchars($project['img_url']); ?>" alt="<?php echo htmlspecialchars($project['title']); ?>" loading="lazy">
<div class="card-img-overlay"></div>
</div>
<div class="card-content">
<div class="card-header">
<h3><?php echo htmlspecialchars($project['title']); ?></h3>
<span class="arrow-icon">↗</span>
</div>
<p><?php echo htmlspecialchars($project['des']); ?></p>
<div class="stack-badges">
<?php
$tags = array_map('trim', explode(',', $project['techstack']));
foreach ($tags as $tag):
?>
<span class="stack-badge"><?php echo htmlspecialchars($tag); ?></span>
<?php endforeach; ?>
</div>
</div>
</a>
<?php endforeach; ?>
<?php else: ?>
<p style="color: var(--text-muted); grid-column: 1/-1; text-align:center; padding: 40px 0;">No projects found in the database.</p>
<?php endif; ?>