ssbg04/portfoliowai
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: database

Browse Source
This commit is contained in:
ssbg04 committed 2026-06-05 19:19:50 +08:00
1 parent 19fe6d30f4
commit 2d5a7850d5
7 files changed
+147 -149
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/style.css
+62 -70
View File
@@ -11,32 +11,32 @@ html, body { overflow-x: hidden; max-width: 100%; }
/* --- CSS Variables (Dark Mode Default) --- */ /* --- CSS Variables (Dark Mode Default) --- */
:root { :root {
/* Backgrounds */ /* Backgrounds */
--bg: #050814; --bg: #090d16;
--bg-secondary: #0d1225; --bg-secondary: #0f172a;
--card-bg: rgba(255, 255, 255, 0.035); --card-bg: rgba(30, 41, 59, 0.4);
--card-border: rgba(255, 255, 255, 0.08); --card-border: rgba(148, 163, 184, 0.1);
--glass-bg: rgba(5, 8, 20, 0.75); --glass-bg: rgba(9, 13, 22, 0.8);
/* Text */ /* Text */
--text-main: #f0f4ff; --text-main: #f8fafc;
--text-muted: #8892b0; --text-muted: #94a3b8;
--text-subtle: #4a5578; --text-subtle: #64748b;
/* Accents */ /* Accents */
--accent: #7c3aed; --accent: #2563eb;
--accent-2: #6366f1; --accent-2: #3b82f6;
--accent-glow: rgba(124, 58, 237, 0.4); --accent-glow: rgba(37, 99, 235, 0.15);
--grad-1: #7c3aed; --grad-1: #3b82f6;
--grad-2: #6366f1; --grad-2: #2563eb;
--grad-3: #06b6d4; --grad-3: #1d4ed8;
/* Borders */ /* Borders */
--border: rgba(255, 255, 255, 0.08); --border: rgba(148, 163, 184, 0.12);
--border-hover: rgba(124, 58, 237, 0.5); --border-hover: rgba(37, 99, 235, 0.45);
/* Shadows */ /* Shadows */
--shadow-card: 0 4px 32px rgba(0, 0, 0, 0.4); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
--shadow-glow: 0 0 40px rgba(124, 58, 237, 0.25); --shadow-glow: 0 4px 20px rgba(37, 99, 235, 0.08);
/* Transitions */ /* Transitions */
--ease: cubic-bezier(0.4, 0, 0.2, 1); --ease: cubic-bezier(0.4, 0, 0.2, 1);
@@ -44,20 +44,20 @@ html, body { overflow-x: hidden; max-width: 100%; }
/* --- Light Mode Overrides --- */ /* --- Light Mode Overrides --- */
.toggle-checkbox:not(:checked) ~ .site-wrapper { .toggle-checkbox:not(:checked) ~ .site-wrapper {
--bg: #f8f7ff; --bg: #f8fafc;
--bg-secondary: #ede9fe; --bg-secondary: #f1f5f9;
--card-bg: rgba(255, 255, 255, 0.7); --card-bg: #ffffff;
--card-border: rgba(124, 58, 237, 0.15); --card-border: rgba(148, 163, 184, 0.15);
--glass-bg: rgba(248, 247, 255, 0.85); --glass-bg: rgba(248, 250, 252, 0.85);
--text-main: #1e1b4b; --text-main: #0f172a;
--text-muted: #5b5698; --text-muted: #475569;
--text-subtle: #9ca3af; --text-subtle: #94a3b8;
--accent: #7c3aed; --accent: #2563eb;
--accent-glow: rgba(124, 58, 237, 0.2); --accent-glow: rgba(37, 99, 235, 0.1);
--border: rgba(124, 58, 237, 0.12); --border: rgba(148, 163, 184, 0.12);
--border-hover: rgba(124, 58, 237, 0.45); --border-hover: rgba(37, 99, 235, 0.4);
--shadow-card: 0 4px 24px rgba(124, 58, 237, 0.1); --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.05);
--shadow-glow: 0 0 40px rgba(124, 58, 237, 0.15); --shadow-glow: 0 4px 12px rgba(37, 99, 235, 0.05);
} }
/* ===================================================== /* =====================================================
@@ -78,10 +78,10 @@ html {
html::-webkit-scrollbar { width: 6px; } html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--bg); } html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { html::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, var(--grad-1), var(--grad-2)); background: var(--accent);
border-radius: 3px; border-radius: 3px;
} }
html::-webkit-scrollbar-thumb:hover { background: var(--grad-1); } html::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }
body { body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
@@ -95,14 +95,10 @@ body {
.toggle-checkbox { display: none; } .toggle-checkbox { display: none; }
/* ===================================================== /* =====================================================
ANIMATED MESH BACKGROUND ANIMATED MESH BACKGROUND (Disabled for professional look)
===================================================== */ ===================================================== */
.mesh-bg { .mesh-bg {
position: fixed; display: none;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
} }
.orb { .orb {
@@ -215,7 +211,7 @@ nav {
.nav-links a.active-nav { .nav-links a.active-nav {
color: var(--accent); color: var(--accent);
background: rgba(124, 58, 237, 0.1); background: rgba(37, 99, 235, 0.1);
} }
/* Theme Toggle */ /* Theme Toggle */
@@ -299,8 +295,8 @@ nav {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background: rgba(124, 58, 237, 0.1); background: rgba(37, 99, 235, 0.1);
border: 1px solid rgba(124, 58, 237, 0.3); border: 1px solid rgba(37, 99, 235, 0.25);
border-radius: 50px; border-radius: 50px;
padding: 6px 16px; padding: 6px 16px;
font-size: 0.8rem; font-size: 0.8rem;
@@ -374,11 +370,11 @@ h1 {
.btn.primary { .btn.primary {
background: linear-gradient(135deg, var(--grad-1), var(--grad-2)); background: linear-gradient(135deg, var(--grad-1), var(--grad-2));
color: #fff; color: #fff;
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
} }
.btn.primary:hover { .btn.primary:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
} }
.btn.secondary { .btn.secondary {
@@ -390,7 +386,7 @@ h1 {
.btn.secondary:hover { .btn.secondary:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: var(--border-hover); border-color: var(--border-hover);
background: rgba(124, 58, 237, 0.08); background: rgba(37, 99, 235, 0.08);
} }
.btn.full-width { width: 100%; justify-content: center; } .btn.full-width { width: 100%; justify-content: center; }
@@ -407,16 +403,12 @@ h1 {
.img-ring { .img-ring {
position: absolute; position: absolute;
inset: -12px; inset: -8px;
border-radius: 28px; border-radius: 24px;
background: linear-gradient(135deg, var(--grad-1), var(--grad-2), var(--grad-3)); border: 2px solid var(--accent);
background: transparent;
z-index: 0; z-index: 0;
opacity: 0.6; opacity: 0.4;
animation: spin-ring 8s linear infinite;
}
@keyframes spin-ring {
0% { filter: blur(4px) hue-rotate(0deg); }
100% { filter: blur(4px) hue-rotate(360deg); }
} }
.profile-pic { .profile-pic {
@@ -541,7 +533,7 @@ h1 {
.tags span:hover { .tags span:hover {
border-color: var(--border-hover); border-color: var(--border-hover);
color: var(--accent-2); color: var(--accent-2);
background: rgba(124, 58, 237, 0.08); background: rgba(37, 99, 235, 0.08);
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -620,7 +612,7 @@ a.project-card:hover .card-img img { transform: scale(1.05); }
.card-img-overlay { .card-img-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(5, 8, 20, 0.8)); background: linear-gradient(to bottom, transparent 40%, rgba(9, 13, 22, 0.8));
transition: opacity 0.3s; transition: opacity 0.3s;
} }
@@ -671,8 +663,8 @@ a.project-card:hover .arrow-icon {
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.04em; letter-spacing: 0.04em;
background: rgba(99, 102, 241, 0.1); background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(99, 102, 241, 0.25); border: 1px solid rgba(59, 130, 246, 0.25);
color: var(--accent-2); color: var(--accent-2);
} }
@@ -710,13 +702,13 @@ a.project-card:hover .arrow-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(124, 58, 237, 0.1); background: rgba(37, 99, 235, 0.1);
border: 1px solid rgba(124, 58, 237, 0.2); border: 1px solid rgba(37, 99, 235, 0.2);
border-radius: 14px; border-radius: 14px;
flex-shrink: 0; flex-shrink: 0;
transition: background 0.3s; transition: background 0.3s;
} }
.cert-card:hover .cert-icon { background: rgba(124, 58, 237, 0.18); } .cert-card:hover .cert-icon { background: rgba(37, 99, 235, 0.18); }
.cert-info h3 { .cert-info h3 {
font-family: 'Outfit', sans-serif; font-family: 'Outfit', sans-serif;
@@ -775,8 +767,8 @@ a.project-card:hover .arrow-icon {
} }
.blog-tag { .blog-tag {
color: var(--accent-2); color: var(--accent-2);
background: rgba(99, 102, 241, 0.1); background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(99, 102, 241, 0.2); border: 1px solid rgba(59, 130, 246, 0.25);
padding: 3px 10px; padding: 3px 10px;
border-radius: 50px; border-radius: 50px;
} }
@@ -859,8 +851,8 @@ a.project-card:hover .arrow-icon {
border-color: var(--border-hover); border-color: var(--border-hover);
color: var(--accent-2); color: var(--accent-2);
transform: translateY(-3px); transform: translateY(-3px);
background: rgba(124, 58, 237, 0.08); background: rgba(37, 99, 235, 0.08);
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
} }
.email-form { .email-form {
@@ -886,8 +878,8 @@ input, textarea {
input::placeholder, textarea::placeholder { color: var(--text-subtle); } input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:focus, textarea:focus { input:focus, textarea:focus {
border-color: var(--border-hover); border-color: var(--border-hover);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
background: rgba(124, 58, 237, 0.03); background: rgba(37, 99, 235, 0.03);
} }
/* reCAPTCHA centering */ /* reCAPTCHA centering */
@@ -921,7 +913,7 @@ footer {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
z-index: 999; z-index: 999;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@@ -935,7 +927,7 @@ footer {
} }
#back-to-top:hover { #back-to-top:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
} }
/* ===================================================== /* =====================================================
blog.php
+12 -12
View File
@@ -32,9 +32,9 @@
</nav> </nav>
<div class="page-hero reveal"> <div class="page-hero reveal">
<span class="section-label">Writing</span> <span class="section-label">Articles</span>
<h1>Writing & Thoughts</h1> <h1>Articles</h1>
<p class="subtitle">Tutorials, tech reviews, and updates from my developer journey.</p> <p class="subtitle">Articles about web development and programming.</p>
</div> </div>
<div class="section-divider"></div> <div class="section-divider"></div>
@@ -47,8 +47,8 @@
<span class="blog-date">Feb 10, 2026</span> <span class="blog-date">Feb 10, 2026</span>
<span class="blog-tag">React</span> <span class="blog-tag">React</span>
</div> </div>
<h3 class="blog-title">Understanding Custom Hooks in React</h3> <h3 class="blog-title">Guide to React Custom Hooks</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> <p class="blog-excerpt">Learn how to write clean, reusable React components.</p>
<a href="#" class="read-more">Read Article →</a> <a href="#" class="read-more">Read Article →</a>
</article> </article>
@@ -57,8 +57,8 @@
<span class="blog-date">Jan 22, 2026</span> <span class="blog-date">Jan 22, 2026</span>
<span class="blog-tag">DevOps</span> <span class="blog-tag">DevOps</span>
</div> </div>
<h3 class="blog-title">Why I Switched from XAMPP to Docker</h3> <h3 class="blog-title">Using Docker for PHP Development</h3>
<p class="blog-excerpt">Setting up a consistent development environment for PHP and Node.js without the headache. Containers changed everything.</p> <p class="blog-excerpt">How to set up PHP and Node.js projects using Docker.</p>
<a href="#" class="read-more">Read Article →</a> <a href="#" class="read-more">Read Article →</a>
</article> </article>
@@ -67,8 +67,8 @@
<span class="blog-date">Dec 05, 2025</span> <span class="blog-date">Dec 05, 2025</span>
<span class="blog-tag">Career</span> <span class="blog-tag">Career</span>
</div> </div>
<h3 class="blog-title">My Journey as a BSIT Student</h3> <h3 class="blog-title">My Experience as an IT Student</h3>
<p class="blog-excerpt">Balancing capstone projects, freelance work, and learning new tech stacks in 2026.</p> <p class="blog-excerpt">Balancing school projects, freelance work, and learning new skills.</p>
<a href="#" class="read-more">Read Article →</a> <a href="#" class="read-more">Read Article →</a>
</article> </article>
@@ -77,8 +77,8 @@
<span class="blog-date">Nov 15, 2025</span> <span class="blog-date">Nov 15, 2025</span>
<span class="blog-tag">CSS</span> <span class="blog-tag">CSS</span>
</div> </div>
<h3 class="blog-title">Dark Mode in 5 Minutes</h3> <h3 class="blog-title">Implementing Dark Mode with CSS</h3>
<p class="blog-excerpt">How to implement a pure CSS dark mode toggle without flashing content. The trick most tutorials miss.</p> <p class="blog-excerpt">How to build a simple dark mode toggle using pure CSS.</p>
<a href="#" class="read-more">Read Article →</a> <a href="#" class="read-more">Read Article →</a>
</article> </article>
@@ -86,7 +86,7 @@
</section> </section>
<footer> <footer>
<p>&copy; <span id="year"></span> Cris Charles Garcia. Crafted in Laguna 🇵🇭</p> <p>&copy; <span id="year"></span> Cris Charles Garcia. Based in Laguna, Philippines.</p>
</footer> </footer>
</div> </div>
certifications.php
+4 -4
View File
@@ -33,9 +33,9 @@
</nav> </nav>
<div class="page-hero reveal"> <div class="page-hero reveal">
<span class="section-label">Credentials</span> <span class="section-label">Certifications</span>
<h1>Certifications</h1> <h1>My Certifications</h1>
<p class="subtitle">Qualifications and courses I have completed.</p> <p class="subtitle">Certifications and courses I have completed.</p>
</div> </div>
<div class="section-divider"></div> <div class="section-divider"></div>
@@ -101,7 +101,7 @@
</section> </section>
<footer> <footer>
<p>&copy; <span id="year"></span> Cris Charles Garcia. Crafted in Laguna 🇵🇭</p> <p>&copy; <span id="year"></span> Cris Charles Garcia. Based in Laguna, Philippines.</p>
</footer> </footer>
</div> </div>
config/db.php
+19 -17
View File
@@ -3,24 +3,26 @@
* Load environment variables from a .env file. * Load environment variables from a .env file.
* PHP 7.x compatible — no str_starts_with(). * PHP 7.x compatible — no str_starts_with().
*/ */
function loadEnv($path) { if (!function_exists('loadEnv')) {
if (!file_exists($path)) { function loadEnv($path) {
return; if (!file_exists($path)) {
} return;
$lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
if ($lines === false) return;
foreach ($lines as $line) {
$line = trim($line);
if ($line === '' || $line[0] === '#') {
continue;
} }
$parts = explode('=', $line, 2); $lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
if (count($parts) < 2) continue; if ($lines === false) return;
$key = trim($parts[0]); foreach ($lines as $line) {
$value = trim($parts[1]); $line = trim($line);
if (!array_key_exists($key, $_ENV)) { if ($line === '' || $line[0] === '#') {
$_ENV[$key] = $value; continue;
putenv("$key=$value"); }
$parts = explode('=', $line, 2);
if (count($parts) < 2) continue;
$key = trim($parts[0]);
$value = trim($parts[1]);
if (!array_key_exists($key, $_ENV)) {
$_ENV[$key] = $value;
putenv("$key=$value");
}
} }
} }
} }
index.php
+44 -42
View File
@@ -1,16 +1,18 @@
<?php <?php
// Load environment variables — PHP 7.x compatible // Load environment variables — PHP 7.x compatible
function loadEnv($path) { if (!function_exists('loadEnv')) {
if (!file_exists($path)) return; function loadEnv($path) {
$lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); if (!file_exists($path)) return;
if ($lines === false) return; $lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
foreach ($lines as $line) { if ($lines === false) return;
$line = trim($line); foreach ($lines as $line) {
if ($line === '' || $line[0] === '#') continue; $line = trim($line);
$parts = explode('=', $line, 2); if ($line === '' || $line[0] === '#') continue;
if (count($parts) < 2) continue; $parts = explode('=', $line, 2);
$key = trim($parts[0]); $value = trim($parts[1]); if (count($parts) < 2) continue;
if (!array_key_exists($key, $_ENV)) { $_ENV[$key] = $value; putenv("$key=$value"); } $key = trim($parts[0]); $value = trim($parts[1]);
if (!array_key_exists($key, $_ENV)) { $_ENV[$key] = $value; putenv("$key=$value"); }
}
} }
} }
loadEnv(__DIR__ . '/.env'); loadEnv(__DIR__ . '/.env');
@@ -69,14 +71,14 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<div class="hero-text"> <div class="hero-text">
<div class="hero-badge"> <div class="hero-badge">
<span class="dot"></span> <span class="dot"></span>
Available for opportunities Available for work
</div> </div>
<span style="display:block; color: var(--text-muted); font-size: 1rem; font-weight: 500; margin-bottom: 10px;">Hi, I'm Cris Charles Garcia</span> <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>Building digital products with <span class="highlight">purpose</span>.</h1> <h1>Software <span class="highlight">Developer</span>.</h1>
<p class="subtitle">BSIT Software Development student based in Laguna, Philippines — turning ideas into scalable, polished web experiences.</p> <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"> <div class="hero-btns">
<a href="#projects" class="btn primary" id="btn-view-projects">View Projects ↗</a> <a href="#projects" class="btn primary" id="btn-view-projects">My Projects ↗</a>
<a href="#contact" class="btn secondary" id="btn-get-in-touch">Get in Touch</a> <a href="#contact" class="btn secondary" id="btn-get-in-touch">Contact Me</a>
</div> </div>
</div> </div>
<div class="hero-img-container"> <div class="hero-img-container">
@@ -95,12 +97,12 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<section id="about" class="section-pad reveal"> <section id="about" class="section-pad reveal">
<div class="section-header"> <div class="section-header">
<span class="section-label">About Me</span> <span class="section-label">About Me</span>
<h2 class="section-title">Passion meets craft.</h2> <h2 class="section-title">About Me</h2>
</div> </div>
<div class="about-content"> <div class="about-content">
<div class="about-text"> <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 that solve real-world problems.</p> <p>I am a senior <strong>IT student majoring in Software Development</strong>. I write code to solve real-world problems.</p>
<p>Currently focused on the <strong>MERN Stack</strong> and <strong>PHP</strong> ecosystems. I love solving complex challenges — whether it's architecting a database, designing a seamless UI, or squashing that one annoying bug.</p> <p>My primary stack includes <strong>PHP</strong>, <strong>React</strong>, <strong>Node.js</strong>, and <strong>MySQL</strong>. I enjoy database design, front-end development, and bug fixing.</p>
</div> </div>
<div class="tech-stack"> <div class="tech-stack">
<h3>Tech Stack</h3> <h3>Tech Stack</h3>
@@ -129,14 +131,14 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<!-- ===== PROJECTS ===== --> <!-- ===== PROJECTS ===== -->
<section id="projects" class="section-pad reveal"> <section id="projects" class="section-pad reveal">
<div class="section-header"> <div class="section-header">
<span class="section-label">Featured Work</span> <span class="section-label">Projects</span>
<h2 class="section-title">Things I've built.</h2> <h2 class="section-title">Recent Projects</h2>
</div> </div>
<div class="project-grid"> <div class="project-grid">
<?php include('views/tprojects.php'); ?> <?php include('views/tprojects.php'); ?>
</div> </div>
<div class="view-all-container"> <div class="view-all-container">
<a href="projects.php" class="btn secondary" id="btn-all-projects">View All Projects →</a> <a href="projects.php" class="btn secondary" id="btn-all-projects">All Projects →</a>
</div> </div>
</section> </section>
@@ -145,8 +147,8 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<!-- ===== CERTIFICATIONS ===== --> <!-- ===== CERTIFICATIONS ===== -->
<section id="certificates" class="section-pad reveal"> <section id="certificates" class="section-pad reveal">
<div class="section-header"> <div class="section-header">
<span class="section-label">Credentials</span> <span class="section-label">Certifications</span>
<h2 class="section-title">Certifications.</h2> <h2 class="section-title">My Certifications</h2>
</div> </div>
<div class="cert-grid"> <div class="cert-grid">
<div class="cert-card reveal reveal-delay-1"> <div class="cert-card reveal reveal-delay-1">
@@ -175,7 +177,7 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
</div> </div>
</div> </div>
<div class="view-all-container"> <div class="view-all-container">
<a href="certifications.php" class="btn secondary" id="btn-all-certs">View All Certifications →</a> <a href="certifications.php" class="btn secondary" id="btn-all-certs">All Certifications →</a>
</div> </div>
</section> </section>
@@ -184,8 +186,8 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<!-- ===== BLOG ===== --> <!-- ===== BLOG ===== -->
<section id="blog" class="section-pad reveal"> <section id="blog" class="section-pad reveal">
<div class="section-header"> <div class="section-header">
<span class="section-label">Writing</span> <span class="section-label">Articles</span>
<h2 class="section-title">Latest articles.</h2> <h2 class="section-title">Latest Articles</h2>
</div> </div>
<div class="blog-grid"> <div class="blog-grid">
<article class="blog-card reveal reveal-delay-1"> <article class="blog-card reveal reveal-delay-1">
@@ -193,8 +195,8 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<span class="blog-date">Feb 10, 2026</span> <span class="blog-date">Feb 10, 2026</span>
<span class="blog-tag">React</span> <span class="blog-tag">React</span>
</div> </div>
<h3 class="blog-title">Understanding Custom Hooks in React</h3> <h3 class="blog-title">Guide to React Custom Hooks</h3>
<p class="blog-excerpt">Why you should stop copying code and start abstracting logic into reusable hooks.</p> <p class="blog-excerpt">Learn how to write clean, reusable React components.</p>
<a href="#" class="read-more">Read Article →</a> <a href="#" class="read-more">Read Article →</a>
</article> </article>
<article class="blog-card reveal reveal-delay-2"> <article class="blog-card reveal reveal-delay-2">
@@ -202,8 +204,8 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<span class="blog-date">Jan 22, 2026</span> <span class="blog-date">Jan 22, 2026</span>
<span class="blog-tag">DevOps</span> <span class="blog-tag">DevOps</span>
</div> </div>
<h3 class="blog-title">Why I Switched from XAMPP to Docker</h3> <h3 class="blog-title">Using Docker for PHP Development</h3>
<p class="blog-excerpt">Setting up a consistent development environment for PHP and Node.js without the headache.</p> <p class="blog-excerpt">How to set up PHP and Node.js projects using Docker.</p>
<a href="#" class="read-more">Read Article →</a> <a href="#" class="read-more">Read Article →</a>
</article> </article>
<article class="blog-card reveal reveal-delay-3"> <article class="blog-card reveal reveal-delay-3">
@@ -211,13 +213,13 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<span class="blog-date">Dec 05, 2025</span> <span class="blog-date">Dec 05, 2025</span>
<span class="blog-tag">Career</span> <span class="blog-tag">Career</span>
</div> </div>
<h3 class="blog-title">My Journey as a BSIT Student</h3> <h3 class="blog-title">My Experience as an IT Student</h3>
<p class="blog-excerpt">Balancing capstone projects, freelance work, and learning new tech stacks in 2026.</p> <p class="blog-excerpt">Balancing school projects, freelance work, and learning new skills.</p>
<a href="#" class="read-more">Read Article →</a> <a href="#" class="read-more">Read Article →</a>
</article> </article>
</div> </div>
<div class="view-all-container"> <div class="view-all-container">
<a href="blog.php" class="btn secondary" id="btn-all-articles">Read All Articles →</a> <a href="blog.php" class="btn secondary" id="btn-all-articles">All Articles →</a>
</div> </div>
</section> </section>
@@ -226,11 +228,11 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<!-- ===== CONTACT ===== --> <!-- ===== CONTACT ===== -->
<section id="contact" class="section-pad reveal"> <section id="contact" class="section-pad reveal">
<div class="section-header" style="text-align:center;"> <div class="section-header" style="text-align:center;">
<span class="section-label">Let's Connect</span> <span class="section-label">Contact</span>
<h2 class="section-title">Start a conversation.</h2> <h2 class="section-title">Get in Touch</h2>
</div> </div>
<div class="contact-container"> <div class="contact-container">
<p>Have a project in mind or want to discuss the latest tech trends? Reach out — I'd love to hear from you.</p> <p>Feel free to reach out if you have a project idea, a job opportunity, or any questions.</p>
<div class="social-links"> <div class="social-links">
<a href="https://github.com/ssbg04" target="_blank" class="social-btn" aria-label="GitHub" id="link-github"> <a href="https://github.com/ssbg04" target="_blank" class="social-btn" aria-label="GitHub" id="link-github">
@@ -249,19 +251,19 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<form action="https://formsubmit.co/<?php echo htmlspecialchars($contactEmail); ?>" method="POST" class="email-form" id="contact-form"> <form action="https://formsubmit.co/<?php echo htmlspecialchars($contactEmail); ?>" method="POST" class="email-form" id="contact-form">
<input type="hidden" name="_captcha" value="false"> <input type="hidden" name="_captcha" value="false">
<input type="text" name="name" id="form-name" placeholder="Your Name" required> <input type="text" name="name" id="form-name" placeholder="Name" required>
<input type="text" name="subject" id="form-subject" placeholder="Subject" required> <input type="text" name="subject" id="form-subject" placeholder="Subject" required>
<textarea name="message" id="form-message" rows="5" placeholder="How can I help you?" required></textarea> <textarea name="message" id="form-message" rows="5" placeholder="Message" required></textarea>
<?php if ($recaptchaSiteKey): ?> <?php if ($recaptchaSiteKey): ?>
<div class="g-recaptcha" data-sitekey="<?php echo htmlspecialchars($recaptchaSiteKey); ?>"></div> <div class="g-recaptcha" data-sitekey="<?php echo htmlspecialchars($recaptchaSiteKey); ?>"></div>
<?php endif; ?> <?php endif; ?>
<button type="submit" class="btn primary full-width" id="btn-send-message">Send Message ✉️</button> <button type="submit" class="btn primary full-width" id="btn-send-message">Send Message</button>
</form> </form>
</div> </div>
</section> </section>
<footer> <footer>
<p>&copy; <span id="year"></span> Cris Charles Garcia. Crafted in Laguna 🇵🇭</p> <p>&copy; <span id="year"></span> Cris Charles Garcia. Based in Laguna, Philippines.</p>
</footer> </footer>
</div> </div>
models/projects.php
+2
View File
@@ -2,6 +2,7 @@
require_once __DIR__ . "/../config/db.php"; require_once __DIR__ . "/../config/db.php";
function getProjects($mysqli){ function getProjects($mysqli){
$projects = [];
$sql = "SELECT * FROM projects ORDER BY id DESC"; $sql = "SELECT * FROM projects ORDER BY id DESC";
$result = $mysqli->query($sql); $result = $mysqli->query($sql);
@@ -16,6 +17,7 @@ function getProjects($mysqli){
} }
function getThreeProjects($mysqli){ function getThreeProjects($mysqli){
$projects = [];
$sql = "SELECT * FROM projects ORDER BY id DESC LIMIT 3"; $sql = "SELECT * FROM projects ORDER BY id DESC LIMIT 3";
$result = $mysqli->query($sql); $result = $mysqli->query($sql);
projects.php
+4 -4
View File
@@ -33,9 +33,9 @@
</nav> </nav>
<div class="page-hero reveal"> <div class="page-hero reveal">
<span class="section-label">Portfolio</span> <span class="section-label">Projects</span>
<h1>Project Archive</h1> <h1>My Projects</h1>
<p class="subtitle">A complete list of apps, websites, and experiments I've built.</p> <p class="subtitle">A list of websites and software projects I have built.</p>
</div> </div>
<div class="section-divider"></div> <div class="section-divider"></div>
@@ -47,7 +47,7 @@
</section> </section>
<footer> <footer>
<p>&copy; <span id="year"></span> Cris Charles Garcia. Crafted in Laguna 🇵🇭</p> <p>&copy; <span id="year"></span> Cris Charles Garcia. Based in Laguna, Philippines.</p>
</footer> </footer>
</div> </div>