288 lines
16 KiB
PHP
Executable File
288 lines
16 KiB
PHP
Executable File
<?php
|
|
// db.php loads .env and connects to MySQL
|
|
|
|
require_once __DIR__ . '/config/db.php';
|
|
require_once __DIR__ . '/controllers/SettingsController.php';
|
|
|
|
$settings = showSettings($mysqli);
|
|
if (!$settings) {
|
|
$settings = [
|
|
'about_text_1' => 'I am a senior IT student majoring in Software Development. I write code to solve real-world problems.',
|
|
'about_text_2' => 'My primary stack includes PHP, React, Node.js, and MySQL. I enjoy database design, front-end development, and bug fixing.',
|
|
'years_coding' => '3+',
|
|
'projects_count' => '10+',
|
|
'certifications_count' => '6+',
|
|
'tiktok_url' => 'https://www.tiktok.com/@crischarlesgarcia',
|
|
'facebook_url' => 'https://facebook.com/kristyarls345',
|
|
'instagram_url' => 'https://instagram.com/crischarlesgarcia',
|
|
'linkedin_url' => 'https://www.linkedin.com/in/cris-charles-garcia-187415303',
|
|
'github_url' => 'https://github.com/ssbg04'
|
|
];
|
|
}
|
|
|
|
// Prefer $_ENV (always set by loadEnv), fall back to getenv()
|
|
$recaptchaSiteKey = $_ENV['RECAPTCHA_SITE_KEY'] ?? getenv('RECAPTCHA_SITE_KEY') ?? '';
|
|
$contactEmail = $_ENV['CONTACT_EMAIL'] ?? getenv('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="icon" type="image/svg+xml" href="assets/img/favicon.svg">
|
|
<link rel="stylesheet" href="assets/css/style.css?v=2.0.7">
|
|
<link rel="stylesheet" href="assets/css/modules/_assistant.css?v=2.0.7">
|
|
<script src="https://www.google.com/recaptcha/enterprise.js?render=<?php echo htmlspecialchars($recaptchaSiteKey); ?>"></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 ===== -->
|
|
<?php include('views/nav.php'); ?>
|
|
|
|
<!-- ===== HERO ===== -->
|
|
<header class="hero reveal">
|
|
<div class="hero-text">
|
|
<div class="hero-badge">
|
|
<span class="dot"></span>
|
|
Available for work
|
|
</div>
|
|
<span style="display:block; color: var(--text-muted); font-size: 1rem; font-weight: 500; margin-bottom: 10px;">Hi, I am Cris Charles Garcia.</span>
|
|
<h1>Software <span class="highlight">Developer</span>.</h1>
|
|
<p class="subtitle">I am an IT student majoring in Software Development based in Laguna, Philippines. I focus on building reliable web applications.</p>
|
|
<div class="hero-btns">
|
|
<a href="#projects" class="btn primary" id="btn-view-projects">My Projects ↗</a>
|
|
<a href="#contact" class="btn secondary" id="btn-get-in-touch">Contact Me</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-img-container">
|
|
<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">
|
|
<div class="section-header">
|
|
<span class="section-label">About Me</span>
|
|
<h2 class="section-title">About Me</h2>
|
|
</div>
|
|
<div class="about-content">
|
|
<div class="about-text">
|
|
<p><?php echo nl2br(htmlspecialchars($settings['about_text_1'])); ?></p>
|
|
<p><?php echo nl2br(htmlspecialchars($settings['about_text_2'])); ?></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"><?php echo htmlspecialchars($settings['years_coding']); ?></div>
|
|
<div class="stat-label">Years Coding</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number"><?php echo htmlspecialchars($settings['projects_count']); ?></div>
|
|
<div class="stat-label">Projects Built</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number"><?php echo htmlspecialchars($settings['certifications_count']); ?></div>
|
|
<div class="stat-label">Certifications</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- ===== PROJECTS ===== -->
|
|
<section id="projects" class="section-pad reveal">
|
|
<div class="section-header">
|
|
<span class="section-label">Projects</span>
|
|
<h2 class="section-title">Recent Projects</h2>
|
|
</div>
|
|
<div class="project-grid">
|
|
<?php include('views/tprojects.php'); ?>
|
|
</div>
|
|
<div class="view-all-container">
|
|
<a href="projects.php" class="btn secondary" id="btn-all-projects">All Projects →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- ===== CERTIFICATIONS ===== -->
|
|
<section id="certificates" class="section-pad reveal">
|
|
<div class="section-header">
|
|
<span class="section-label">Certifications</span>
|
|
<h2 class="section-title">My Certifications</h2>
|
|
</div>
|
|
<div class="cert-grid">
|
|
<?php include('views/tcertifications.php'); ?>
|
|
</div>
|
|
<div class="view-all-container">
|
|
<a href="certifications.php" class="btn secondary" id="btn-all-certs">All Certifications →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- ===== BLOG ===== -->
|
|
<section id="blog" class="section-pad reveal">
|
|
<div class="section-header">
|
|
<span class="section-label">Articles</span>
|
|
<h2 class="section-title">Latest Articles</h2>
|
|
</div>
|
|
<div class="blog-grid">
|
|
<?php include('views/tarticles.php'); ?>
|
|
</div>
|
|
<div class="view-all-container">
|
|
<a href="blog.php" class="btn secondary" id="btn-all-articles">All Articles →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- ===== CONTACT ===== -->
|
|
<section id="contact" class="section-pad reveal">
|
|
<div class="section-header" style="text-align:center;">
|
|
<span class="section-label">Contact</span>
|
|
<h2 class="section-title">Get in Touch</h2>
|
|
</div>
|
|
<div class="contact-container">
|
|
<p>Feel free to reach out if you have a project idea, a job opportunity, or any questions.</p>
|
|
|
|
<?php if (isset($_GET['status'])): ?>
|
|
<?php if ($_GET['status'] === 'success'): ?>
|
|
<p style="color: #22c55e; font-weight: 500; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); padding: 12px; border-radius: 8px; margin-bottom: 20px; text-align: center;">Your message has been sent successfully!</p>
|
|
<?php elseif ($_GET['status'] === 'error'): ?>
|
|
<p style="color: #ef4444; font-weight: 500; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); padding: 12px; border-radius: 8px; margin-bottom: 20px; text-align: center;"><?php echo htmlspecialchars($_GET['msg'] ?? 'An error occurred. Please try again.'); ?></p>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
|
|
<div class="social-links">
|
|
<?php if (!empty($settings['github_url'])): ?>
|
|
<a href="<?php echo htmlspecialchars($settings['github_url']); ?>" 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>
|
|
<?php endif; ?>
|
|
<?php if (!empty($settings['linkedin_url'])): ?>
|
|
<a href="<?php echo htmlspecialchars($settings['linkedin_url']); ?>" 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>
|
|
<?php endif; ?>
|
|
<?php if (!empty($settings['facebook_url'])): ?>
|
|
<a href="<?php echo htmlspecialchars($settings['facebook_url']); ?>" 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>
|
|
<?php endif; ?>
|
|
<?php if (!empty($settings['instagram_url'])): ?>
|
|
<a href="<?php echo htmlspecialchars($settings['instagram_url']); ?>" 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>
|
|
<?php endif; ?>
|
|
<?php if (!empty($settings['tiktok_url'])): ?>
|
|
<a href="<?php echo htmlspecialchars($settings['tiktok_url']); ?>" target="_blank" class="social-btn" aria-label="TikTok" id="link-tiktok">
|
|
<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 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"></path></svg>
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<form action="send_contact.php" method="POST" class="email-form" id="contact-form">
|
|
<input type="hidden" name="_captcha" value="false">
|
|
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
|
|
<input type="text" name="name" id="form-name" placeholder="Name" required>
|
|
<input type="email" name="email" id="form-email" placeholder="Your Email" required>
|
|
<input type="text" name="subject" id="form-subject" placeholder="Subject" required>
|
|
<textarea name="message" id="form-message" rows="5" placeholder="Message" required></textarea>
|
|
<button type="submit" class="btn primary full-width" id="btn-send-message">Send Message</button>
|
|
</form>
|
|
|
|
<?php if ($recaptchaSiteKey): ?>
|
|
<script>
|
|
const contactForm = document.getElementById('contact-form');
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('btn-send-message');
|
|
btn.textContent = 'Verifying...';
|
|
btn.disabled = true;
|
|
|
|
grecaptcha.enterprise.ready(async () => {
|
|
try {
|
|
const token = await grecaptcha.enterprise.execute('<?php echo htmlspecialchars($recaptchaSiteKey); ?>', {action: 'LOGIN'});
|
|
document.getElementById('g-recaptcha-response').value = token;
|
|
contactForm.submit();
|
|
} catch (err) {
|
|
console.error('reCAPTCHA error:', err);
|
|
alert('reCAPTCHA failed to load. Please try again.');
|
|
btn.textContent = 'Send Message';
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>© <span id="year"></span> Cris Charles Garcia. Based in Laguna, Philippines.</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", () => {
|
|
|
|
// 1. DYNAMIC YEAR
|
|
document.getElementById("year").textContent = new Date().getFullYear();
|
|
|
|
// 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));
|
|
|
|
// 3. BACK TO TOP
|
|
const backToTop = document.getElementById("back-to-top");
|
|
window.addEventListener('scroll', () => {
|
|
backToTop.classList.toggle("show", window.scrollY > 300);
|
|
});
|
|
|
|
});
|
|
|
|
// 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>
|
|
<?php include('views/chatbot.php'); ?>
|
|
</body>
|
|
</html>
|