309 lines
15 KiB
PHP
Executable File
309 lines
15 KiB
PHP
Executable File
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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>
|
|
</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="hamburger" id="hamburger">
|
|
<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">
|
|
<span class="icon-moon">🌙</span>
|
|
<span class="icon-sun">☀️</span>
|
|
</label>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero reveal">
|
|
<div class="hero-text">
|
|
<span class="greeting">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>
|
|
<div class="hero-btns">
|
|
<a href="#projects" class="btn primary">View Projects</a>
|
|
<a href="#contact" class="btn secondary">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="glow-effect"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="about" class="section-pad reveal">
|
|
<h2 class="section-title">About Me</h2>
|
|
<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>
|
|
</div>
|
|
<div class="tech-stack">
|
|
<h3>Tech Stack</h3>
|
|
<?php include('views/techstack.php'); ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects" class="section-pad reveal">
|
|
<h2 class="section-title">Featured Work</h2>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="certificates" class="section-pad reveal">
|
|
<h2 class="section-title">Certifications</h2>
|
|
<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>
|
|
|
|
<div class="view-all-container">
|
|
<a href="certifications.php" class="btn secondary">View All Certifications →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="blog" class="section-pad reveal">
|
|
<h2 class="section-title">Latest Articles</h2>
|
|
<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>
|
|
|
|
</div>
|
|
|
|
<div class="view-all-container">
|
|
<a href="blog.php" class="btn secondary">Read All Articles →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="section-pad reveal">
|
|
<h2 class="section-title">Let's Connect</h2>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
|
|
<form action="https://formsubmit.co/crischarlesgarcia345@gmail.com" method="POST" class="email-form">
|
|
<!-- Anti-bot: disable default Formsubmit verification -->
|
|
<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>
|
|
</form>
|
|
|
|
</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", () => {
|
|
|
|
// 1. DYNAMIC YEAR (Auto-updates)
|
|
document.getElementById("year").textContent = new Date().getFullYear();
|
|
|
|
// 2. SCROLL REVEAL ANIMATION
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
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");
|
|
}
|
|
});
|
|
|
|
// 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");
|
|
}
|
|
});
|
|
});
|
|
|
|
// Prevent right-click and drag
|
|
document.addEventListener("contextmenu", e => e.preventDefault());
|
|
document.addEventListener("dragstart", e => e.preventDefault());
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|