secured privacy
This commit is contained in:
ssbg04 committed
1 parent
bb8a2fe7c9
commit
19fe6d30f4
10 files changed
+1666
-1305
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user