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

first commit

Browse Source
This commit is contained in:
ssbg04 committed 2026-06-05 08:47:11 +08:00
commit 2025f270a8
26 files changed
+1650
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.gitignore
+1
View File
@@ -0,0 +1 @@
if0_41132991_portfolio.sql
assets/css/style.css
+755
View File
@@ -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;
}
}
assets/img/pp-day-shy.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

assets/img/pp-day.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

assets/img/pp-night-shy.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

assets/img/pp-night.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

assets/img/profile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 963 KiB

assets/img/profile.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

assets/img/profile1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

assets/img/profile2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

blog.php
Executable
+124
View File
@@ -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>
certifications.php
Executable
+132
View File
@@ -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>
config/db.php
+17
View File
@@ -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>";
?>
controllers/ProjectController.php
+11
View File
@@ -0,0 +1,11 @@
<?php
require_once __DIR__ . "/../models/projects.php";
function showProjects($mysqli){
return getProjects($mysqli);
}
function showThreeProjects($mysqli){
return getThreeProjects($mysqli);
}
?>
controllers/TechStackController.php
+7
View File
@@ -0,0 +1,7 @@
<?php
require_once __DIR__ . "/../models/techstack.php";
function showTechStacks($mysqli){
return getTechStack($mysqli);
}
?>
googleebe5318beb846940.html
Executable
+1
View File
@@ -0,0 +1 @@
google-site-verification: googleebe5318beb846940.html
helloworld.php
Executable
+9
View File
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
htdocs/.htaccess
+48
View File
@@ -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
index.php
Executable
+309
View File
@@ -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>
models/projects.php
+32
View File
@@ -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;
}
?>
models/techstack.php
+18
View File
@@ -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;
}
?>
projects.php
Executable
+86
View File
@@ -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>
sitemap.xml
Executable
+16
View File
@@ -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>
views/projects.php
+35
View File
@@ -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; ?>
views/techstack.php
+14
View File
@@ -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>
views/tprojects.php
+35
View File
@@ -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; ?>