875 lines
27 KiB
HTML
875 lines
27 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="Portfolio - Sky Art Shop creative projects and inspiration"
|
|
/>
|
|
<title>Portfolio - Sky Art Shop</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- Icons -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
/>
|
|
|
|
<!-- Modern Theme CSS -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="/assets/css/modern-theme.css?v=20260118drawer"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="/assets/css/mobile-fixes.css?v=20260119touch"
|
|
/>
|
|
|
|
<style>
|
|
.portfolio-filters {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.filter-btn {
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
background: var(--bg-white);
|
|
border: 2px solid var(--border-light);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.filter-btn:hover,
|
|
.filter-btn.active {
|
|
background: var(--primary-pink);
|
|
border-color: var(--primary-pink);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ========================================
|
|
PORTFOLIO BOOK STYLE LAYOUT
|
|
======================================== */
|
|
.portfolio-book-container {
|
|
max-width: 95%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.portfolio-book {
|
|
display: flex;
|
|
background: linear-gradient(135deg, #f8f4e8 0%, #fff9e6 100%);
|
|
border-radius: 8px;
|
|
box-shadow:
|
|
0 20px 60px rgba(0, 0, 0, 0.15),
|
|
0 0 0 1px rgba(139, 90, 43, 0.1),
|
|
inset 0 0 80px rgba(139, 90, 43, 0.05);
|
|
position: relative;
|
|
height: 92vh;
|
|
min-height: 800px;
|
|
max-height: 1200px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Book Pages */
|
|
.portfolio-book-page {
|
|
flex: 1;
|
|
padding: var(--spacing-xl);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.portfolio-book-left {
|
|
background: linear-gradient(to right, #f5f0e1 0%, #faf6eb 100%);
|
|
border-right: none;
|
|
}
|
|
|
|
.portfolio-book-right {
|
|
background: linear-gradient(to left, #f5f0e1 0%, #faf6eb 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portfolio-book-right .book-page-inner {
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(139, 90, 43, 0.4) rgba(139, 90, 43, 0.1);
|
|
}
|
|
|
|
/* Book Spine */
|
|
.portfolio-book-spine {
|
|
width: 30px;
|
|
background: linear-gradient(
|
|
to right,
|
|
#d4c4a8 0%,
|
|
#c9b896 20%,
|
|
#e8dcc6 50%,
|
|
#c9b896 80%,
|
|
#d4c4a8 100%
|
|
);
|
|
box-shadow:
|
|
inset 2px 0 4px rgba(0, 0, 0, 0.1),
|
|
inset -2px 0 4px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.portfolio-book-spine::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 2px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
rgba(139, 90, 43, 0.3) 10%,
|
|
rgba(139, 90, 43, 0.3) 90%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
/* Page Inner Content */
|
|
.book-page-inner {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding-right: var(--spacing-sm);
|
|
}
|
|
|
|
.book-page-inner::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.book-page-inner::-webkit-scrollbar-track {
|
|
background: rgba(139, 90, 43, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.book-page-inner::-webkit-scrollbar-thumb {
|
|
background: rgba(139, 90, 43, 0.4);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.book-page-inner::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(139, 90, 43, 0.6);
|
|
}
|
|
|
|
/* Page Number */
|
|
.book-page-number {
|
|
position: absolute;
|
|
bottom: var(--spacing-md);
|
|
font-family: Georgia, serif;
|
|
font-size: 0.9rem;
|
|
color: rgba(139, 90, 43, 0.5);
|
|
}
|
|
|
|
.portfolio-book-left .book-page-number {
|
|
left: var(--spacing-xl);
|
|
}
|
|
|
|
.portfolio-book-right .book-page-number {
|
|
right: var(--spacing-xl);
|
|
}
|
|
|
|
/* Book Page Headers */
|
|
.book-page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 2px solid rgba(139, 90, 43, 0.2);
|
|
font-family: Georgia, serif;
|
|
font-size: 1.1rem;
|
|
color: rgba(139, 90, 43, 0.7);
|
|
}
|
|
|
|
.book-page-header i {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
/* Stacked Full Images */
|
|
.book-image-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.book-stacked-image {
|
|
width: 100%;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
border: 4px solid rgba(139, 90, 43, 0.2);
|
|
}
|
|
|
|
.book-stacked-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.book-stacked-image:hover img {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* Right Page - Content */
|
|
.book-content-header {
|
|
margin-bottom: var(--spacing-xl);
|
|
padding-bottom: var(--spacing-lg);
|
|
border-bottom: 2px solid rgba(139, 90, 43, 0.2);
|
|
}
|
|
|
|
.book-content-header .portfolio-detail-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-size: 0.9rem;
|
|
color: rgba(139, 90, 43, 0.6);
|
|
margin-bottom: var(--spacing-sm);
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
.book-title {
|
|
font-family: Georgia, serif;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #3d2914;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
}
|
|
|
|
.book-category {
|
|
display: inline-block;
|
|
margin-top: var(--spacing-sm);
|
|
padding: 4px 12px;
|
|
background: rgba(139, 90, 43, 0.1);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.85rem;
|
|
color: #8b5a2b;
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
/* Book Content Body */
|
|
.book-content-body {
|
|
font-family: Georgia, serif;
|
|
font-size: 1.05rem;
|
|
line-height: 1.9;
|
|
color: #4a3728;
|
|
}
|
|
|
|
.book-content-body p {
|
|
margin-bottom: var(--spacing-lg);
|
|
text-indent: 1.5em;
|
|
}
|
|
|
|
.book-content-body p:first-child {
|
|
text-indent: 0;
|
|
}
|
|
|
|
.book-content-body p:first-child::first-letter {
|
|
font-size: 3.5rem;
|
|
float: left;
|
|
line-height: 1;
|
|
padding-right: var(--spacing-sm);
|
|
color: #8b5a2b;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.book-content-body h1,
|
|
.book-content-body h2,
|
|
.book-content-body h3 {
|
|
color: #3d2914;
|
|
margin-top: var(--spacing-xl);
|
|
margin-bottom: var(--spacing-md);
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
.book-content-body ul,
|
|
.book-content-body ol {
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-left: var(--spacing-xl);
|
|
}
|
|
|
|
.book-content-body li {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.book-content-body blockquote {
|
|
margin: var(--spacing-lg) 0;
|
|
padding: var(--spacing-lg);
|
|
background: rgba(139, 90, 43, 0.08);
|
|
border-left: 4px solid #8b5a2b;
|
|
font-style: italic;
|
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
}
|
|
|
|
.book-content-body a {
|
|
color: #8b5a2b;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.book-content-body strong {
|
|
color: #3d2914;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* CTA Below Book */
|
|
.portfolio-book-cta {
|
|
text-align: center;
|
|
margin-top: var(--spacing-2xl);
|
|
padding: var(--spacing-xl);
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.portfolio-book-cta p {
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* Mobile responsive styles are handled by mobile-fixes.css */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<header class="nav-wrapper">
|
|
<nav class="navbar">
|
|
<a href="/home" class="nav-brand">
|
|
<img
|
|
src="/uploads/cat-png-1767324141436-368259437.png"
|
|
alt="Sky Art Shop Logo"
|
|
/>
|
|
<span>Sky Art Shop</span>
|
|
</a>
|
|
|
|
<ul class="nav-menu">
|
|
<li><a href="/home" class="nav-link">Home</a></li>
|
|
<li><a href="/shop" class="nav-link">Shop</a></li>
|
|
<li><a href="/portfolio" class="nav-link active">Portfolio</a></li>
|
|
<li><a href="/blog" class="nav-link">Blog</a></li>
|
|
<li><a href="/about" class="nav-link">About</a></li>
|
|
<li><a href="/contact" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
|
|
<div class="nav-actions">
|
|
<a href="/signin" class="nav-icon-btn" title="Sign In">
|
|
<i class="bi bi-person"></i>
|
|
</a>
|
|
<button class="nav-icon-btn wishlist-btn-nav" title="Wishlist">
|
|
<i class="bi bi-heart"></i>
|
|
<span class="badge wishlist-count" style="display: none">0</span>
|
|
</button>
|
|
<button class="nav-icon-btn cart-btn" title="Cart">
|
|
<i class="bi bi-bag"></i>
|
|
<span class="badge cart-count" style="display: none">0</span>
|
|
</button>
|
|
<button class="nav-mobile-toggle" aria-label="Toggle menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Page Content -->
|
|
<main class="page-content">
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<h1>Our Portfolio</h1>
|
|
<p>
|
|
Explore our creative projects and get inspired for your next
|
|
masterpiece
|
|
</p>
|
|
<div class="breadcrumb">
|
|
<a href="/home">Home</a>
|
|
<span>/</span>
|
|
<span>Portfolio</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Portfolio Gallery -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<!-- Category Filters -->
|
|
<div class="portfolio-filters" id="portfolioFilters">
|
|
<button class="filter-btn active" data-filter="all">
|
|
All Projects
|
|
</button>
|
|
<!-- Categories loaded via JavaScript -->
|
|
</div>
|
|
|
|
<!-- Portfolio Grid -->
|
|
<div class="portfolio-grid" id="portfolioGrid">
|
|
<div
|
|
class="loading-spinner"
|
|
style="grid-column: 1/-1; margin: 40px auto"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section
|
|
class="section"
|
|
style="
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-pink-light) 0%,
|
|
var(--primary-pink) 100%
|
|
);
|
|
"
|
|
>
|
|
<div class="container text-center">
|
|
<h2 class="section-title">Ready to Create?</h2>
|
|
<p class="section-subtitle mb-4">
|
|
Get all the supplies you need to bring your creative vision to life
|
|
</p>
|
|
<a href="/shop" class="btn btn-primary btn-lg">Shop Now</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Portfolio Detail View - Book Style -->
|
|
<div class="portfolio-detail" id="portfolioDetail">
|
|
<header class="portfolio-detail-header">
|
|
<button class="back-btn" id="backToPortfolio">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to Portfolio
|
|
</button>
|
|
<span id="detailCategory" class="portfolio-detail-category"></span>
|
|
</header>
|
|
|
|
<!-- Book Container -->
|
|
<div class="portfolio-book-container">
|
|
<div class="portfolio-book">
|
|
<!-- Left Page - Images -->
|
|
<div class="portfolio-book-page portfolio-book-left">
|
|
<div class="book-page-inner">
|
|
<div class="book-page-header">
|
|
<i class="bi bi-images"></i>
|
|
<span>Gallery</span>
|
|
</div>
|
|
|
|
<!-- Stacked Images -->
|
|
<div class="book-image-stack" id="portfolioImageStack"></div>
|
|
</div>
|
|
<div class="book-page-number">1</div>
|
|
</div>
|
|
|
|
<!-- Book Spine -->
|
|
<div class="portfolio-book-spine"></div>
|
|
|
|
<!-- Right Page - Content -->
|
|
<div class="portfolio-book-page portfolio-book-right">
|
|
<div class="book-page-inner">
|
|
<div class="book-content-header">
|
|
<h1 class="book-title" id="detailTitle"></h1>
|
|
<span class="book-category" id="detailCategoryMeta"></span>
|
|
</div>
|
|
<div class="book-content-body" id="detailDesc">
|
|
<!-- Portfolio description goes here -->
|
|
</div>
|
|
</div>
|
|
<div class="book-page-number">2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Below Book -->
|
|
<div class="portfolio-book-cta">
|
|
<p>Inspired by this project? Get the supplies to create your own!</p>
|
|
<a href="/shop" class="btn btn-primary">Shop Supplies</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-about">
|
|
<div class="footer-brand">
|
|
<img
|
|
src="/uploads/cat-png-1767324141436-368259437.png"
|
|
alt="Sky Art Shop"
|
|
/>
|
|
<span>Sky Art Shop</span>
|
|
</div>
|
|
<p>
|
|
Your one-stop shop for scrapbooking, journaling, cardmaking, and
|
|
collaging stationery. Quality products for all your creative
|
|
needs.
|
|
</p>
|
|
<div class="footer-social">
|
|
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
|
<a href="#" class="social-link"
|
|
><i class="bi bi-instagram"></i
|
|
></a>
|
|
<a href="#" class="social-link"
|
|
><i class="bi bi-pinterest"></i
|
|
></a>
|
|
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h4>Quick Links</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="/home">Home</a></li>
|
|
<li><a href="/shop">Shop</a></li>
|
|
<li><a href="/portfolio">Portfolio</a></li>
|
|
<li><a href="/blog">Blog</a></li>
|
|
<li><a href="/about">About Us</a></li>
|
|
<li><a href="/contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h4>Customer Service</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="/faq">FAQ</a></li>
|
|
<li><a href="/shipping-info">Shipping Info</a></li>
|
|
<li><a href="/returns">Returns & Refunds</a></li>
|
|
<li><a href="/privacy">Privacy Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h4>Contact Us</h4>
|
|
<ul class="footer-links">
|
|
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
|
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
|
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© 2026 Sky Art Shop. All rights reserved.</p>
|
|
<p>
|
|
Made with
|
|
<i class="bi bi-heart-fill" style="color: var(--primary-pink)"></i>
|
|
for creative souls
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Cart Drawer -->
|
|
<div class="cart-overlay"></div>
|
|
<div class="cart-drawer">
|
|
<div class="cart-header">
|
|
<h3>Shopping Cart</h3>
|
|
<button class="cart-close"><i class="bi bi-x"></i></button>
|
|
</div>
|
|
<div class="cart-items"></div>
|
|
<div class="cart-footer">
|
|
<div class="cart-total">
|
|
<span>Total:</span>
|
|
<span class="cart-total-amount">$0.00</span>
|
|
</div>
|
|
<a href="/checkout" class="btn btn-primary cart-checkout-btn"
|
|
>Checkout</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wishlist Drawer -->
|
|
<div class="wishlist-overlay"></div>
|
|
<div class="wishlist-drawer">
|
|
<div class="wishlist-header">
|
|
<h3><i class="bi bi-heart"></i> My Wishlist</h3>
|
|
<button class="wishlist-close"><i class="bi bi-x"></i></button>
|
|
</div>
|
|
<div class="wishlist-items"></div>
|
|
<div class="wishlist-footer">
|
|
<a href="/shop" class="btn btn-outline">Continue Shopping</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/assets/js/mobile-touch-fix.js"></script>
|
|
<script src="/assets/js/modern-theme.js?v=20260119touch"></script>
|
|
<script src="/assets/js/customer-auth.js"></script>
|
|
<script>
|
|
let allProjects = [];
|
|
|
|
// Placeholder images for portfolio projects
|
|
const portfolioPlaceholders = [
|
|
"https://images.unsplash.com/photo-1513519245088-0e12902e35a6?w=600&q=80", // Scrapbook
|
|
"https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=600&q=80", // Journal
|
|
"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80", // Craft supplies
|
|
"https://images.unsplash.com/photo-1456735190827-d1262f71b8a3?w=600&q=80", // Art materials
|
|
"https://images.unsplash.com/photo-1452860606245-08befc0ff44b?w=600&q=80", // Paper craft
|
|
"https://images.unsplash.com/photo-1586075010923-2dd4570fb338?w=600&q=80", // Stationery
|
|
"https://images.unsplash.com/photo-1560421683-6856ea585c78?w=600&q=80", // Craft tools
|
|
"https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=600&q=80", // Workspace
|
|
"https://images.unsplash.com/photo-1488459716781-31db52582fe9?w=600&q=80", // Cards
|
|
"https://images.unsplash.com/photo-1567016526105-22da7c13161a?w=600&q=80", // Stickers
|
|
];
|
|
|
|
const getPlaceholder = (index) =>
|
|
portfolioPlaceholders[index % portfolioPlaceholders.length];
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
// Load portfolio projects
|
|
allProjects = await API.loadPortfolioProjects();
|
|
|
|
// If no projects, show sample projects
|
|
if (allProjects.length === 0) {
|
|
allProjects = [
|
|
{
|
|
id: 1,
|
|
title: "Vintage Travel Journal",
|
|
description:
|
|
"A beautifully crafted travel journal with vintage maps and ephemera.",
|
|
category: "Journaling",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Wedding Scrapbook",
|
|
description:
|
|
"Elegant wedding scrapbook featuring romantic florals and gold accents.",
|
|
category: "Scrapbooking",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Birthday Card Collection",
|
|
description:
|
|
"Custom birthday cards with handmade embellishments and calligraphy.",
|
|
category: "Cardmaking",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Nature Collage Art",
|
|
description:
|
|
"Mixed media collage inspired by botanical illustrations.",
|
|
category: "Collage",
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Bullet Journal Setup",
|
|
description:
|
|
"Complete bullet journal spread with habit trackers and goal pages.",
|
|
category: "Journaling",
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "Baby Memory Book",
|
|
description:
|
|
"Adorable baby milestone scrapbook with pastel colors and cute elements.",
|
|
category: "Scrapbooking",
|
|
},
|
|
{
|
|
id: 7,
|
|
title: "Holiday Greeting Cards",
|
|
description:
|
|
"Festive holiday card set with glitter and embossed details.",
|
|
category: "Cardmaking",
|
|
},
|
|
{
|
|
id: 8,
|
|
title: "Art Journal Pages",
|
|
description:
|
|
"Expressive art journal pages exploring color and texture.",
|
|
category: "Collage",
|
|
},
|
|
];
|
|
}
|
|
|
|
// Get unique categories
|
|
const categories = [
|
|
...new Set(allProjects.map((p) => p.category).filter(Boolean)),
|
|
];
|
|
|
|
// Add category filters
|
|
const filtersContainer = document.getElementById("portfolioFilters");
|
|
categories.forEach((cat) => {
|
|
const btn = document.createElement("button");
|
|
btn.className = "filter-btn";
|
|
btn.dataset.filter = cat;
|
|
btn.textContent = cat;
|
|
filtersContainer.appendChild(btn);
|
|
});
|
|
|
|
// Setup filter buttons
|
|
document.querySelectorAll(".filter-btn").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
document
|
|
.querySelectorAll(".filter-btn")
|
|
.forEach((b) => b.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
filterProjects(btn.dataset.filter);
|
|
});
|
|
});
|
|
|
|
// Render projects
|
|
renderProjects(allProjects);
|
|
|
|
// Setup lightbox
|
|
setupLightbox();
|
|
});
|
|
|
|
function renderProjects(projects) {
|
|
const grid = document.getElementById("portfolioGrid");
|
|
|
|
if (projects.length === 0) {
|
|
grid.innerHTML =
|
|
'<p class="text-center" style="grid-column: 1/-1;">No projects found.</p>';
|
|
return;
|
|
}
|
|
|
|
grid.innerHTML = projects
|
|
.map((project, index) => {
|
|
// Parse images - can be JSON string or array
|
|
let imagesArr = [];
|
|
if (project.images) {
|
|
try {
|
|
imagesArr =
|
|
typeof project.images === "string"
|
|
? JSON.parse(project.images)
|
|
: project.images;
|
|
} catch (e) {
|
|
imagesArr = [];
|
|
}
|
|
}
|
|
// Fall back to imageurl if no images array
|
|
if (imagesArr.length === 0 && project.imageurl) {
|
|
imagesArr = [project.imageurl];
|
|
}
|
|
|
|
return `
|
|
<div class="portfolio-card" data-project='${JSON.stringify({
|
|
title: project.title,
|
|
description: project.description || "",
|
|
image: project.imageurl || getPlaceholder(index),
|
|
images: imagesArr.length > 0 ? imagesArr : [getPlaceholder(index)],
|
|
category: project.category || "Creative Project",
|
|
}).replace(/'/g, "'")}'>
|
|
<div class="portfolio-card-image">
|
|
<img src="${project.imageurl || getPlaceholder(index)}" alt="${
|
|
project.title
|
|
}" loading="lazy">
|
|
<div class="portfolio-overlay">
|
|
<span class="view-project"><i class="bi bi-eye"></i> View Details</span>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-info">
|
|
<span class="portfolio-category">${
|
|
project.category || "Creative"
|
|
}</span>
|
|
<h3>${project.title}</h3>
|
|
<p>${truncateText(stripHtml(project.description || ""), 100)}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
})
|
|
.join("");
|
|
}
|
|
|
|
// Helper function to strip HTML tags from text
|
|
function stripHtml(html) {
|
|
const tmp = document.createElement("div");
|
|
tmp.innerHTML = html;
|
|
return tmp.textContent || tmp.innerText || "";
|
|
}
|
|
|
|
// Helper function to truncate text
|
|
function truncateText(text, maxLength) {
|
|
if (text.length <= maxLength) return text;
|
|
return text.substring(0, maxLength).trim() + "...";
|
|
}
|
|
|
|
function filterProjects(category) {
|
|
if (category === "all") {
|
|
renderProjects(allProjects);
|
|
} else {
|
|
const filtered = allProjects.filter((p) => p.category === category);
|
|
renderProjects(filtered);
|
|
}
|
|
}
|
|
|
|
function setupLightbox() {
|
|
const detail = document.getElementById("portfolioDetail");
|
|
const detailTitle = document.getElementById("detailTitle");
|
|
const detailDesc = document.getElementById("detailDesc");
|
|
const detailCategory = document.getElementById("detailCategory");
|
|
const detailCategoryMeta =
|
|
document.getElementById("detailCategoryMeta");
|
|
const backBtn = document.getElementById("backToPortfolio");
|
|
const portfolioImageStack = document.getElementById(
|
|
"portfolioImageStack",
|
|
);
|
|
|
|
document.addEventListener("click", (e) => {
|
|
const card = e.target.closest(".portfolio-card");
|
|
if (card) {
|
|
const project = JSON.parse(
|
|
card.dataset.project.replace(/'/g, "'"),
|
|
);
|
|
|
|
// Set content
|
|
detailTitle.textContent = project.title;
|
|
detailDesc.innerHTML =
|
|
project.description ||
|
|
"A beautiful creative project crafted with care and attention to detail.";
|
|
detailCategory.textContent = project.category || "Creative Project";
|
|
detailCategoryMeta.textContent =
|
|
project.category || "Creative Project";
|
|
|
|
// Setup stacked images - all images shown full width
|
|
const images = project.images || [project.image];
|
|
portfolioImageStack.innerHTML = images
|
|
.map(
|
|
(img, i) => `
|
|
<div class="book-stacked-image">
|
|
<img src="${img}" alt="${project.title} - Image ${i + 1}" loading="lazy">
|
|
</div>
|
|
`,
|
|
)
|
|
.join("");
|
|
|
|
detail.classList.add("open");
|
|
document.body.style.overflow = "hidden";
|
|
detail.scrollTop = 0;
|
|
}
|
|
});
|
|
|
|
backBtn.addEventListener("click", closeDetail);
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") closeDetail();
|
|
});
|
|
|
|
function closeDetail() {
|
|
detail.classList.remove("open");
|
|
document.body.style.overflow = "";
|
|
}
|
|
}
|
|
</script>
|
|
<script src="/assets/js/accessibility.js"></script>
|
|
</body>
|
|
</html>
|