secured privacy
This commit is contained in:
1 parent
bb8a2fe7c9
commit
19fe6d30f4
10 files changed
+1666
-1305
No files matched your search
+10
-4
@@ -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,2 +1,3 @@
|
||||
if0_41132991_portfolio.sql
|
||||
googl*
|
||||
.env
|
||||
+1063
-755
File diff suppressed because it is too large.
Load diff
@@ -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>© <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>© <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
@@ -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>© <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>© <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
@@ -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>";
|
||||
?>
|
||||
@@ -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>© <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
|
||||
<p>© <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
@@ -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>© <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
|
||||
<p>© <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
@@ -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
@@ -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; ?>
|
||||
Reference in new issue
Block a user