commit 2025f270a84b4a0ce0c2dd64c3b4b03af6945c8b
Author: ssbg04 <crischarlesgarcia345@gmail.com>
Date:   Fri Jun 5 08:47:11 2026 +0800

    first commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..33b7f26
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+if0_41132991_portfolio.sql
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..b8445d3
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,755 @@
+/* --- Variables & Configuration --- */
+:root {
+  --bg: #0a0a0a;
+  --card-bg: #161616;
+  --text-main: #ededed;
+  --text-muted: #a1a1a1;
+  --accent: #3b82f6;
+  --border: #2a2a2a;
+  /* NEW: Dark Mode Transparent Background */
+  --glass-bg: rgba(10, 10, 10, 0.8);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  scroll-behavior: smooth;
+}
+/* 1. Set the width of the scrollbar */
+html::-webkit-scrollbar {
+  width: 8px; /* Thin and sleek */
+}
+
+/* 2. The background of the scrollbar (Track) */
+html::-webkit-scrollbar-track {
+  background: var(--bg); /* Matches your dark background */
+}
+
+/* 3. The moving part of the scrollbar (Thumb) */
+html::-webkit-scrollbar-thumb {
+  background-color: #333; /* Dark Grey */
+  border-radius: 4px; /* Rounded edges */
+}
+
+/* 4. Hover effect */
+html::-webkit-scrollbar-thumb:hover {
+  background-color: var(--accent); /* Turns Blue when hovered */
+}
+
+.site-wrapper {
+  background-color: var(--bg);
+  color: var(--text-main);
+  min-height: 100vh;
+  width: 100%;
+  padding: 0 5%;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- Dark/Light Logic --- */
+.toggle-checkbox {
+  display: none;
+}
+
+.toggle-checkbox:not(:checked) ~ .site-wrapper {
+  --bg: #ffffff;
+  --card-bg: #f3f4f6;
+  --text-main: #111827;
+  --text-muted: #4b5563;
+  --accent: #2563eb;
+  --border: #e5e7eb;
+  /* NEW: Light Mode Transparent Background */
+  --glass-bg: rgba(255, 255, 255, 0.8);
+}
+
+.mode-btn {
+  cursor: pointer;
+  margin-left: 20px;
+  font-size: 1.2rem;
+  user-select: none;
+}
+.toggle-checkbox:checked ~ .site-wrapper .icon-sun {
+  display: none;
+}
+.toggle-checkbox:checked ~ .site-wrapper .icon-moon {
+  display: inline;
+}
+.toggle-checkbox:not(:checked) ~ .site-wrapper .icon-moon {
+  display: none;
+}
+.toggle-checkbox:not(:checked) ~ .site-wrapper .icon-sun {
+  display: inline;
+}
+
+/* --- Global Styles --- */
+body {
+  font-family: "Inter", sans-serif;
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* --- UPDATED: Sticky Nav --- */
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 0; /* Slightly reduced for a sleeker sticky bar */
+  max-width: 1000px;
+  width: 100%;
+  margin: 0 auto;
+
+  /* Sticky properties */
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+
+  /* Theme-based Glass Background */
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border); /* Adds a nice separation line when scrolling */
+}
+
+.logo {
+  font-weight: 800;
+  font-size: 1.5rem;
+  letter-spacing: -1px;
+}
+
+/* Desktop: Show links normally */
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.nav-links a {
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: 0.95rem;
+  transition: color 0.2s;
+}
+.nav-links a:hover {
+  color: var(--accent);
+}
+
+/* Hamburger Icon (Hidden on Desktop) */
+.hamburger {
+  display: none;
+  cursor: pointer;
+}
+
+.bar {
+  display: block;
+  width: 25px;
+  height: 3px;
+  margin: 5px auto;
+  transition: all 0.3s ease-in-out;
+  background-color: var(--text-main); /* Matches theme color */
+}
+
+/* --- Mobile Menu (Max-width 768px) --- */
+@media (max-width: 768px) {
+  /* Show Hamburger */
+  .hamburger {
+    display: block;
+  }
+
+  /* Animate Hamburger to X when active */
+  .hamburger.active .bar:nth-child(2) {
+    opacity: 0;
+  }
+  .hamburger.active .bar:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+  }
+  .hamburger.active .bar:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+  }
+
+  /* --- UPDATED: Mobile Dropdown --- */
+  .nav-links {
+    position: absolute; /* Attaches exactly to the sticky nav */
+    left: -100%; /* Hide off-screen */
+    top: 100%; /* Sits exactly below the navbar */
+    flex-direction: column;
+    width: 100%;
+    text-align: center;
+    transition: 0.3s ease-in-out;
+    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid var(--border);
+    padding: 20px 0;
+    gap: 20px;
+
+    /* Theme-Based Transparent Background */
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+  }
+
+  /* Show Links when active */
+  .nav-links.active {
+    left: 0; /* Slide in */
+  }
+
+  .nav-links a {
+    color: var(--text-main); /* Automatically matches dark/light mode */
+    font-size: 1.2rem;
+    display: block;
+    padding: 10px;
+  }
+}
+
+/* --- Hero --- */
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 80px 0;
+  gap: 40px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.hero-text {
+  flex: 1;
+}
+.greeting {
+  color: var(--accent);
+  font-weight: 600;
+  display: block;
+  margin-bottom: 10px;
+}
+h1 {
+  font-size: clamp(2.5rem, 5vw, 3.5rem);
+  line-height: 1.1;
+  font-weight: 800;
+  margin-bottom: 20px;
+  letter-spacing: -1px;
+}
+.subtitle {
+  color: var(--text-muted);
+  font-size: 1.1rem;
+  margin-bottom: 30px;
+}
+.highlight {
+  color: var(--accent);
+}
+
+.hero-btns {
+  display: flex;
+  gap: 15px;
+}
+
+.btn {
+  text-decoration: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-weight: 600;
+  transition: transform 0.2s;
+}
+.btn.primary {
+  background: var(--accent);
+  color: white;
+  border: 1px solid var(--accent);
+}
+.btn.secondary {
+  background: transparent;
+  color: var(--text-main);
+  border: 1px solid var(--border);
+}
+.btn:hover {
+  transform: translateY(-2px);
+}
+
+.hero-img-container {
+  position: relative;
+  width: 250px;
+  height: 250px;
+  flex-shrink: 0;
+}
+
+.profile-pic {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  transition: opacity 0.4s ease-in-out;
+  opacity: 0; /* Hide all images by default */
+}
+/* -----------------------------------
+   DARK MODE (Default State) 
+----------------------------------- */
+.img-night-normal {
+  opacity: 1;
+  z-index: 2;
+  cursor: none;
+} /* Show Night Normal */
+
+/* On Hover: Fade in Night Hover, Fade out Night Normal */
+.hero-img-container:hover .img-night-hover {
+  opacity: 1;
+  z-index: 3;
+  cursor: none;
+}
+.hero-img-container:hover .img-night-normal {
+  opacity: 0;
+  cursor: none;
+}
+
+/* -----------------------------------
+   LIGHT MODE (When Checkbox is unchecked) 
+----------------------------------- */
+/* 1. Hide the Dark Mode images entirely */
+.toggle-checkbox:not(:checked) ~ .site-wrapper .img-night-normal,
+.toggle-checkbox:not(:checked) ~ .site-wrapper .img-night-hover {
+  opacity: 0 !important;
+}
+
+/* 2. Show Day Normal */
+.toggle-checkbox:not(:checked) ~ .site-wrapper .img-day-normal {
+  opacity: 1;
+  z-index: 2;
+  cursor: none;
+}
+
+/* 3. On Hover: Fade in Day Hover, Fade out Day Normal */
+.toggle-checkbox:not(:checked)
+  ~ .site-wrapper
+  .hero-img-container:hover
+  .img-day-hover {
+  opacity: 1;
+  z-index: 3;
+  cursor: none;
+}
+.toggle-checkbox:not(:checked)
+  ~ .site-wrapper
+  .hero-img-container:hover
+  .img-day-normal {
+  opacity: 0;
+  cursor: none;
+}
+
+.glow-effect {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 100%;
+  height: 100%;
+  background: var(--accent);
+  border-radius: 20px;
+  opacity: 0.2;
+  z-index: 1;
+  filter: blur(20px);
+}
+
+/* --- Common Section Styles --- */
+.section-pad {
+  padding: 80px 0;
+  max-width: 1000px;
+  margin: 0 auto;
+  width: 100%;
+}
+.section-title {
+  font-size: 2rem;
+  margin-bottom: 40px;
+}
+
+.about-content {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  gap: 50px;
+}
+.about-text p {
+  margin-bottom: 15px;
+  color: var(--text-muted);
+}
+.tags span {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  padding: 6px 14px;
+  border-radius: 50px;
+  font-size: 0.85rem;
+  display: inline-block;
+  margin: 5px 0;
+}
+
+/* --- Projects (Clickable) --- */
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+/* Wrapper is now an anchor tag */
+a.project-card {
+  text-decoration: none; /* Remove underline */
+  color: inherit; /* Keep text color */
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  display: block;
+  transition:
+    transform 0.3s,
+    border-color 0.3s;
+}
+
+a.project-card:hover {
+  transform: translateY(-5px);
+  border-color: var(--accent);
+}
+
+.card-img img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+.card-content {
+  padding: 25px;
+}
+
+/* Card Header for Arrow Icon */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.arrow-icon {
+  font-size: 1.2rem;
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: 0.3s;
+  color: var(--accent);
+}
+a.project-card:hover .arrow-icon {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.card-content p {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 15px;
+}
+.stack-icons {
+  font-size: 0.8rem;
+  color: var(--accent);
+  font-weight: 600;
+}
+
+/* --- Certificates Section --- */
+.cert-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.cert-card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 25px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  transition: 0.3s;
+}
+
+.cert-card:hover {
+  border-color: var(--accent);
+}
+
+.cert-icon {
+  font-size: 2rem;
+}
+.cert-info h3 {
+  font-size: 1rem;
+  margin-bottom: 5px;
+}
+.issuer {
+  color: var(--accent);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+.date {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 5px;
+}
+
+/* --- Blog Section --- */
+.blog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+.blog-card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  padding: 30px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  transition:
+    transform 0.3s,
+    border-color 0.3s;
+  height: 100%;
+}
+
+.blog-card:hover {
+  transform: translateY(-5px);
+  border-color: var(--accent);
+}
+
+.blog-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-bottom: 15px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.blog-tag {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.blog-title {
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+  line-height: 1.4;
+}
+
+.blog-excerpt {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  margin-bottom: 20px;
+  flex-grow: 1; /* Pushes the link to the bottom */
+}
+
+.read-more {
+  text-decoration: none;
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: opacity 0.2s;
+}
+
+.read-more:hover {
+  opacity: 0.8;
+}
+
+/* --- View All Button Wrapper --- */
+.view-all-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+}
+
+/* --- Social Media Buttons --- */
+.social-links {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.social-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%; /* Makes them round */
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  transition: all 0.3s ease;
+}
+
+.social-btn svg {
+  width: 22px;
+  height: 22px;
+}
+
+/* Hover Effect: Glows with the accent color */
+.social-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px var(--glow);
+}
+
+/* --- Contact & Footer --- */
+.contact-container {
+  max-width: 600px;
+  margin: 0 auto;
+  text-align: center;
+}
+.contact-container p {
+  color: var(--text-muted);
+  margin-bottom: 30px;
+}
+.email-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+input,
+textarea {
+  width: 100%;
+  padding: 15px;
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  color: var(--text-main);
+  border-radius: 8px;
+  font-family: inherit;
+}
+.full-width {
+  width: 100%;
+  cursor: pointer;
+}
+
+footer {
+  padding: 50px 0;
+  text-align: center;
+  color: var(--text-muted); /* Maintained your font fix */
+  font-size: 0.9rem;
+  border-top: 1px solid var(--border);
+  margin-top: auto;
+}
+
+/* --- Back to Top Button --- */
+#back-to-top {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  background-color: var(--accent);
+  color: white; /* Arrow color */
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+
+  /* Hidden state */
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(20px);
+  transition: all 0.3s ease;
+}
+
+/* Visible state (added by JS) */
+#back-to-top.show {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+#back-to-top:hover {
+  background-color: var(--text-main); /* Inverts color on hover */
+  color: var(--bg);
+  transform: translateY(-5px); /* Lift effect */
+}
+
+/* Mobile Adjustment */
+@media (max-width: 600px) {
+  #back-to-top {
+    bottom: 20px;
+    right: 20px;
+    width: 45px;
+    height: 45px;
+  }
+}
+
+/* Mobile Content Layout */
+/* --- Mobile Menu (Max-width 768px) --- */
+@media (max-width: 768px) {
+  /* Show Hamburger */
+  .hamburger {
+    display: block;
+  }
+
+  /* Animate Hamburger to X when active */
+  .hamburger.active .bar:nth-child(2) {
+    opacity: 0;
+  }
+  .hamburger.active .bar:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+  }
+  .hamburger.active .bar:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+  }
+
+  /* --- FIXED: Mobile Dropdown --- */
+  .nav-links {
+    position: absolute;
+    top: 100%; /* Sits exactly below the navbar */
+    left: -120vw; /* Hide completely off-screen to the left */
+    flex-direction: column;
+
+    /* Force it to fill the ENTIRE screen width */
+    width: 100vw;
+
+    text-align: center;
+    transition: left 0.4s ease-in-out; /* Smooth sliding animation */
+    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid var(--border);
+    padding: 30px 0;
+    gap: 20px;
+
+    /* Theme-Based Transparent Background */
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+  }
+
+  /* Show Links when active */
+  .nav-links.active {
+    /* This offsets the 5% padding of your site-wrapper 
+       so the menu perfectly touches the left edge of the phone screen */
+    left: -5vw;
+  }
+
+  .nav-links a {
+    color: var(--text-main);
+    font-size: 1.2rem;
+    display: block;
+    padding: 10px;
+  }
+
+  /* Mobile Content Layout */
+  .hero {
+    flex-direction: column-reverse;
+    text-align: center;
+  }
+  .hero-btns {
+    justify-content: center;
+  }
+  .about-content {
+    grid-template-columns: 1fr;
+  }
+  .cert-card {
+    flex-direction: column;
+    text-align: center;
+  }
+}
diff --git a/assets/img/pp-day-shy.webp b/assets/img/pp-day-shy.webp
new file mode 100644
index 0000000..6cc4cd6
Binary files /dev/null and b/assets/img/pp-day-shy.webp differ
diff --git a/assets/img/pp-day.webp b/assets/img/pp-day.webp
new file mode 100644
index 0000000..27f7283
Binary files /dev/null and b/assets/img/pp-day.webp differ
diff --git a/assets/img/pp-night-shy.webp b/assets/img/pp-night-shy.webp
new file mode 100644
index 0000000..8410c6d
Binary files /dev/null and b/assets/img/pp-night-shy.webp differ
diff --git a/assets/img/pp-night.webp b/assets/img/pp-night.webp
new file mode 100644
index 0000000..47db818
Binary files /dev/null and b/assets/img/pp-night.webp differ
diff --git a/assets/img/profile.png b/assets/img/profile.png
new file mode 100644
index 0000000..686af71
Binary files /dev/null and b/assets/img/profile.png differ
diff --git a/assets/img/profile.webp b/assets/img/profile.webp
new file mode 100644
index 0000000..31c37fc
Binary files /dev/null and b/assets/img/profile.webp differ
diff --git a/assets/img/profile1.png b/assets/img/profile1.png
new file mode 100644
index 0000000..a7ae985
Binary files /dev/null and b/assets/img/profile1.png differ
diff --git a/assets/img/profile2.png b/assets/img/profile2.png
new file mode 100644
index 0000000..e741b66
Binary files /dev/null and b/assets/img/profile2.png differ
diff --git a/blog.php b/blog.php
new file mode 100755
index 0000000..2bd7dbc
--- /dev/null
+++ b/blog.php
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blog | Cris Charles Garcia</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <style>
+        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
+        .reveal.active { opacity: 1; transform: translateY(0); }
+    </style>
+</head>
+<body>
+
+    <input type="checkbox" id="dark-mode-toggle" class="toggle-checkbox" checked>
+
+    <div class="site-wrapper">
+        <nav>
+            <div class="logo">CG.</div>
+            <div class="nav-links">
+                <a href="index.php">← Back Home</a>
+                <label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme">
+                    <span class="icon-moon">🌙</span>
+                    <span class="icon-sun">☀️</span>
+                </label>
+            </div>
+        </nav>
+
+        <header class="hero reveal" style="min-height: auto; padding: 60px 0;">
+            <div class="hero-text">
+                <h1>Writing & Thoughts</h1>
+                <p class="subtitle">Tutorials, tech reviews, and updates from my developer journey.</p>
+            </div>
+        </header>
+
+        <section class="section-pad reveal">
+            <div class="blog-grid">
+                
+                <article class="blog-card">
+                    <div class="blog-meta">
+                        <span class="blog-date">Feb 10, 2026</span>
+                        <span class="blog-tag">React</span>
+                    </div>
+                    <h3 class="blog-title">Understanding Custom Hooks in React</h3>
+                    <p class="blog-excerpt">Why you should stop copying code and start abstracting logic into reusable hooks.</p>
+                    <a href="#" class="read-more">Read Article →</a>
+                </article>
+
+                <article class="blog-card">
+                    <div class="blog-meta">
+                        <span class="blog-date">Jan 22, 2026</span>
+                        <span class="blog-tag">DevOps</span>
+                    </div>
+                    <h3 class="blog-title">Why I Switched from XAMPP to Docker</h3>
+                    <p class="blog-excerpt">Setting up a consistent development environment for PHP and Node.js without the headache.</p>
+                    <a href="#" class="read-more">Read Article →</a>
+                </article>
+
+                <article class="blog-card">
+                    <div class="blog-meta">
+                        <span class="blog-date">Dec 05, 2025</span>
+                        <span class="blog-tag">Career</span>
+                    </div>
+                    <h3 class="blog-title">My Journey as a BSIT Student</h3>
+                    <p class="blog-excerpt">Balancing capstone projects, freelance work, and learning new tech stacks in 2026.</p>
+                    <a href="#" class="read-more">Read Article →</a>
+                </article>
+
+                <article class="blog-card">
+                    <div class="blog-meta">
+                        <span class="blog-date">Nov 15, 2025</span>
+                        <span class="blog-tag">CSS</span>
+                    </div>
+                    <h3 class="blog-title">Dark Mode in 5 Minutes</h3>
+                    <p class="blog-excerpt">How to implement a pure CSS dark mode toggle without flashing content.</p>
+                    <a href="#" class="read-more">Read Article →</a>
+                </article>
+
+            </div>
+        </section>
+
+        <footer>
+            <p>&copy; <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
+        </footer>
+    </div>
+    
+    <a href="#" id="back-to-top" title="Back to Top">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
+    </a>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            // Dynamic Year
+            document.getElementById("year").textContent = new Date().getFullYear();
+
+            // Scroll Animation
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('active');
+                    }
+                });
+            }, { threshold: 0.1 });
+            document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+            // Back to Top
+            const backToTopButton = document.getElementById("back-to-top");
+            window.addEventListener('scroll', () => {
+                if (window.scrollY > 300) backToTopButton.classList.add("show");
+                else backToTopButton.classList.remove("show");
+            });
+
+            // Dark Mode Persistence
+            const themeToggle = document.getElementById("dark-mode-toggle");
+            if (localStorage.getItem("theme") === "light") themeToggle.checked = false;
+            
+            themeToggle.addEventListener("change", () => {
+                localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/certifications.php b/certifications.php
new file mode 100755
index 0000000..6015d95
--- /dev/null
+++ b/certifications.php
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Certifications | Cris Charles Garcia</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <style>
+        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
+        .reveal.active { opacity: 1; transform: translateY(0); }
+    </style>
+</head>
+<body>
+
+    <input type="checkbox" id="dark-mode-toggle" class="toggle-checkbox" checked>
+
+    <div class="site-wrapper">
+        <nav>
+            <div class="logo">CG.</div>
+            <div class="nav-links">
+                <a href="index.php">← Back Home</a>
+                <a href="projects.php">Projects</a>
+                <label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme">
+                    <span class="icon-moon">🌙</span>
+                    <span class="icon-sun">☀️</span>
+                </label>
+            </div>
+        </nav>
+
+        <header class="hero reveal" style="min-height: auto; padding: 60px 0;">
+            <div class="hero-text">
+                <h1>Certifications</h1>
+                <p class="subtitle">Qualifications and courses I have completed.</p>
+            </div>
+        </header>
+
+        <section class="section-pad reveal">
+            <div class="cert-grid">
+                <div class="cert-card">
+                    <div class="cert-icon">🏆</div>
+                    <div class="cert-info">
+                        <h3>Responsive Web Design</h3>
+                        <p class="issuer">FreeCodeCamp</p>
+                        <span class="date">Issued Dec 2024</span>
+                    </div>
+                </div>
+                <div class="cert-card">
+                    <div class="cert-icon">📜</div>
+                    <div class="cert-info">
+                        <h3>JavaScript Algorithms</h3>
+                        <p class="issuer">HackerRank</p>
+                        <span class="date">Issued Nov 2024</span>
+                    </div>
+                </div>
+                <div class="cert-card">
+                    <div class="cert-icon">☁️</div>
+                    <div class="cert-info">
+                        <h3>Cloud Fundamentals</h3>
+                        <p class="issuer">AWS</p>
+                        <span class="date">Issued Oct 2024</span>
+                    </div>
+                </div>
+                <div class="cert-card">
+                    <div class="cert-icon">🐍</div>
+                    <div class="cert-info">
+                        <h3>Python for Data Science</h3>
+                        <p class="issuer">Coursera</p>
+                        <span class="date">Issued Sept 2024</span>
+                    </div>
+                </div>
+                <div class="cert-card">
+                    <div class="cert-icon">🔒</div>
+                    <div class="cert-info">
+                        <h3>Cybersecurity Essentials</h3>
+                        <p class="issuer">Cisco</p>
+                        <span class="date">Issued Aug 2024</span>
+                    </div>
+                </div>
+                 <div class="cert-card">
+                    <div class="cert-icon">⚛️</div>
+                    <div class="cert-info">
+                        <h3>React Advanced Patterns</h3>
+                        <p class="issuer">Udemy</p>
+                        <span class="date">Issued July 2024</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <footer>
+            <p>&copy; <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
+        </footer>
+    </div>
+    
+    <a href="#" id="back-to-top" title="Back to Top">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
+    </a>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            // Dynamic Year
+            document.getElementById("year").textContent = new Date().getFullYear();
+
+            // Scroll Animation
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('active');
+                    }
+                });
+            }, { threshold: 0.1 });
+            document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+            // Back to Top
+            const backToTopButton = document.getElementById("back-to-top");
+            window.addEventListener('scroll', () => {
+                if (window.scrollY > 300) backToTopButton.classList.add("show");
+                else backToTopButton.classList.remove("show");
+            });
+
+            // Dark Mode Persistence
+            const themeToggle = document.getElementById("dark-mode-toggle");
+            if (localStorage.getItem("theme") === "light") themeToggle.checked = false;
+            
+            themeToggle.addEventListener("change", () => {
+                localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/config/db.php b/config/db.php
new file mode 100644
index 0000000..b18d3ec
--- /dev/null
+++ b/config/db.php
@@ -0,0 +1,17 @@
+<?php
+$host = "sql207.infinityfree.com";
+$ngalan = "if0_41132991";
+$sikreto = "j4kklvOrKqiZkG";
+$deytabeys = "if0_41132991_portfolio";
+// $host = "127.0.0.1";
+// $ngalan = "root";
+// $sikreto = "";
+// $deytabeys = "porfoliowai";
+    
+$mysqli = new mysqli($host, $ngalan, $sikreto, $deytabeys);
+
+if ($mysqli->connect_error) {
+	die("Connection failed: " . $mysqli->connect_error);
+}
+echo "<script>console.log('Yung database mo ay gumagana langya ka!');</script>";
+?>
\ No newline at end of file
diff --git a/controllers/ProjectController.php b/controllers/ProjectController.php
new file mode 100644
index 0000000..06843ab
--- /dev/null
+++ b/controllers/ProjectController.php
@@ -0,0 +1,11 @@
+<?php
+require_once __DIR__ . "/../models/projects.php";
+
+function showProjects($mysqli){
+	return getProjects($mysqli);
+}
+
+function showThreeProjects($mysqli){
+	return getThreeProjects($mysqli);
+}
+?>
\ No newline at end of file
diff --git a/controllers/TechStackController.php b/controllers/TechStackController.php
new file mode 100644
index 0000000..a0e6585
--- /dev/null
+++ b/controllers/TechStackController.php
@@ -0,0 +1,7 @@
+<?php
+require_once __DIR__ . "/../models/techstack.php";
+
+function showTechStacks($mysqli){
+	return getTechStack($mysqli);
+}
+?>
\ No newline at end of file
diff --git a/googleebe5318beb846940.html b/googleebe5318beb846940.html
new file mode 100755
index 0000000..53d3617
--- /dev/null
+++ b/googleebe5318beb846940.html
@@ -0,0 +1 @@
+google-site-verification: googleebe5318beb846940.html
\ No newline at end of file
diff --git a/helloworld.php b/helloworld.php
new file mode 100755
index 0000000..fde9e48
--- /dev/null
+++ b/helloworld.php
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hello, World!</title>
+</head>
+<body>
+  <h1>Hello, World!</h1>
+</body>
+</html>
diff --git a/htdocs/.htaccess b/htdocs/.htaccess
new file mode 100644
index 0000000..3d03246
--- /dev/null
+++ b/htdocs/.htaccess
@@ -0,0 +1,48 @@
+# ==============================
+# BASIC SETTINGS
+# ==============================
+
+# Prevent directory listing
+Options -Indexes
+
+# ==============================
+# CACHE CONTROL (No caching)
+# ==============================
+<IfModule mod_headers.c>
+    Header set Cache-Control "no-cache, no-store, must-revalidate"
+    Header set Pragma "no-cache"
+    Header set Expires 0
+</IfModule>
+
+# ==============================
+# FORCE HTTPS
+# ==============================
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    # Redirect HTTP to HTTPS
+    RewriteCond %{HTTPS} !=on
+    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+</IfModule>
+
+# ==============================
+# GZIP / COMPRESSION (Optional)
+# ==============================
+<IfModule mod_deflate.c>
+    AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json
+</IfModule>
+
+# ==============================
+# CLEAN URLS (Optional)
+# ==============================
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    # If request is not a real file, rewrite to .php
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteRule ^([a-zA-Z0-9_-]+)$ $1.php [L]
+</IfModule>
+
+# ==============================
+# CUSTOM 404 PAGE (Optional)
+# ==============================
+ErrorDocument 404 /404.html
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100755
index 0000000..0a45abb
--- /dev/null
+++ b/index.php
@@ -0,0 +1,309 @@
+
+<!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>&copy; <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
+        </footer>
+    </div>
+    
+    <a href="#" id="back-to-top" title="Back to Top">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
+    </a>
+
+ <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            
+            // 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>
\ No newline at end of file
diff --git a/models/projects.php b/models/projects.php
new file mode 100644
index 0000000..9e39f18
--- /dev/null
+++ b/models/projects.php
@@ -0,0 +1,32 @@
+<?php
+require_once __DIR__ . "/../config/db.php";
+
+function getProjects($mysqli){
+	$sql = "SELECT * FROM projects ORDER BY id DESC";
+    $result = $mysqli->query($sql);
+
+    if ($result && $result->num_rows > 0) {
+        // Loop through the database rows and push names into the array
+        while ($row = $result->fetch_assoc()) {
+            $projects[] = $row;
+        }
+    }
+
+    return $projects;
+}
+
+function getThreeProjects($mysqli){
+    $sql = "SELECT * FROM projects ORDER BY id DESC LIMIT 3";
+    $result = $mysqli->query($sql);
+
+    if ($result && $result->num_rows > 0) {
+        // Loop through the database rows and push names into the array
+        while ($row = $result->fetch_assoc()) {
+            $projects[] = $row;
+        }
+    }
+
+    return $projects;
+}
+
+?>
\ No newline at end of file
diff --git a/models/techstack.php b/models/techstack.php
new file mode 100644
index 0000000..8bef37a
--- /dev/null
+++ b/models/techstack.php
@@ -0,0 +1,18 @@
+<?php
+require_once __DIR__ . "/../config/db.php";
+
+function getTechStack($mysqli){
+	$sql = "SELECT tech_name FROM techstack";
+    $result = $mysqli->query($sql);
+
+    $techs = [];
+    if ($result) {
+        // Loop through the database rows and push names into the array
+        while ($row = $result->fetch_assoc()) {
+            $techs[] = $row['tech_name'];
+        }
+    }
+
+    return $techs;
+}
+?>
\ No newline at end of file
diff --git a/projects.php b/projects.php
new file mode 100755
index 0000000..cbe7b11
--- /dev/null
+++ b/projects.php
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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>
+
+    <div class="site-wrapper">
+        <nav>
+            <div class="logo">CG.</div>
+            <div class="nav-links">
+                <a href="index.php">← Back Home</a>
+                <a href="certifications.php">Certs</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>Project Archive</h1>
+                <p class="subtitle">A complete list of apps, websites, and experiments I've built.</p>
+            </div>
+        </header>
+
+        <section class="section-pad reveal">
+            <div class="project-grid">
+                
+               <?php include('views/projects.php'); ?>
+            </div>
+        </section>
+
+        <footer>
+            <p>&copy; <span id="year">2026</span> Cris Charles Garcia. Crafted in Laguna.</p>
+        </footer>
+    </div>
+    
+    <a href="#" id="back-to-top" title="Back to Top">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
+    </a>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            // Dynamic Year
+            document.getElementById("year").textContent = new Date().getFullYear();
+
+            // Scroll Animation
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('active');
+                    }
+                });
+            }, { threshold: 0.1 });
+            document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+            // Back to Top
+            const backToTopButton = document.getElementById("back-to-top");
+            window.addEventListener('scroll', () => {
+                if (window.scrollY > 300) backToTopButton.classList.add("show");
+                else backToTopButton.classList.remove("show");
+            });
+
+            // Dark Mode Persistence
+            const themeToggle = document.getElementById("dark-mode-toggle");
+            if (localStorage.getItem("theme") === "light") themeToggle.checked = false;
+            
+            themeToggle.addEventListener("change", () => {
+                localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100755
index 0000000..a74d78d
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://crischarles.page.gd/</loc>
+  <lastmod>2026-04-02T22:24:23+00:00</lastmod>
+</url>
+
+
+</urlset>
\ No newline at end of file
diff --git a/views/projects.php b/views/projects.php
new file mode 100644
index 0000000..92317b3
--- /dev/null
+++ b/views/projects.php
@@ -0,0 +1,35 @@
+<?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 endif; ?>
\ No newline at end of file
diff --git a/views/techstack.php b/views/techstack.php
new file mode 100644
index 0000000..f994831
--- /dev/null
+++ b/views/techstack.php
@@ -0,0 +1,14 @@
+<?php
+require_once __DIR__ . "/../config/db.php";
+require_once __DIR__ . "/../controllers/TechStackController.php";
+
+$techStack = showTechStacks($mysqli);
+
+// var_dump($techStack);
+?>
+
+<div class="tags">
+	<?php foreach ($techStack as $tech): ?>
+		<span><?php echo $tech; ?></span>
+	<?php endforeach; ?>
+</div>
diff --git a/views/tprojects.php b/views/tprojects.php
new file mode 100644
index 0000000..6557b1d
--- /dev/null
+++ b/views/tprojects.php
@@ -0,0 +1,35 @@
+<?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 endif; ?>
\ No newline at end of file