DKeramik - Ceramics Portfolio Website

A beautiful, static Next.js 14 website showcasing handcrafted ceramic pieces. Built with TypeScript, Tailwind CSS, and MDX for content management.

Website: https://almantask.github.io/dkeramik/

Release notes: CHANGELOG.md

🎨 Features

• Next.js 14 App Router with TypeScript
• Static Export for optimal performance and hosting flexibility
• Tailwind CSS with custom clay color palette
• MDX Support for rich content pages
• Responsive Design with mobile-first approach
• Google Fonts (Playfair Display for headings, Nunito for body)
• Jest + React Testing Library for comprehensive testing
• Accessible and semantic HTML

🎯 Design Philosophy

DKeramik embodies a warm, minimalist aesthetic inspired by artisanal ceramics:

• Color Palette: Soft warm terracotta tones (clay-50 to clay-900)
• Typography: Elegant serif headings (Playfair Display) + humanist sans-serif body (Nunito)
• Layout: Lots of whitespace, editorial left-aligned composition
• Details: Subtle ceramic line-art SVG patterns, understated CTAs

📁 Project Structure

dkeramik/
├── app/                          # Next.js App Router pages
│   ├── about/                    # About page
│   ├── collection/               # Product collection
│   │   └── [slug]/              # Individual product pages
│   ├── craft/                    # Craft process page
│   ├── journal/                  # Blog/journal
│   │   └── [slug]/              # Individual journal entries
│   ├── layout.tsx               # Root layout with Header/Footer
│   ├── page.tsx                 # Home page
│   └── globals.css              # Global styles
├── components/
│   ├── layout/
│   │   ├── Header.tsx           # Main navigation
│   │   └── Footer.tsx           # Site footer
│   └── ui/
│       ├── Button.tsx           # Reusable button component
│       ├── CeramicBackground.tsx # SVG background pattern
│       ├── JournalCard.tsx      # Journal entry card
│       └── ProductCard.tsx      # Product card
├── content/
│   ├── journal/                 # MDX journal entries
│   │   ├── handmade-details.mdx
│   │   ├── home-rituals.mdx
│   │   └── warmth-of-clay.mdx
│   ├── about.mdx               # About page content
│   ├── craft.mdx               # Craft process content
│   └── products.ts             # Product data
├── __tests__/                  # Jest tests
├── jest.config.js              # Jest configuration
├── next.config.mjs             # Next.js config (static export)
├── tailwind.config.ts          # Tailwind with clay palette
└── tsconfig.json               # TypeScript config

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Run tests
npm test

# Build for production (static export)
npm run build

Development

Open http://localhost:3000 to view the site in development mode.

Shop (Cloud Run + GitHub Pages)

Live stock and checkout talk to NEXT_PUBLIC_API_URL (local default http://localhost:8787).

# API (memory store, mock Paysera)
cd backend && cp .env.example .env && npm install && npm run dev
# Fill SMTP_HOST / SMTP_USER / SMTP_PASS in backend/.env to email invoices

# Site
cp .env.example .env.local
npm run dev

Owner guides: docs/shop-management.md · docs/parduotuves-valdymas.md

npm test                 # Jest (Pages)
npm run test:backend     # Vitest API
npm run test:e2e         # Playwright shop + API
npm run typecheck        # Frontend tsc
npm run typecheck:backend

Building

The site builds to a static export in the out/ directory:

npm run build

This generates static HTML files for all pages, ready to deploy to any static hosting service.

🎨 Design System

Color Palette

clay-50:  #fdf8f5  /* warm off-white background */
clay-100: #f5ebe0  /* blush beige */
clay-200: #e8d5c0  /* pale nude */
clay-300: #d4b896  /* dusty peach */
clay-400: #c19572  /* muted terracotta */
clay-500: #a67c52  /* cinnamon clay (primary) */
clay-600: #8b6340  /* deeper clay */
clay-700: #6b4c30  /* text color */
clay-800: #4a3420
clay-900: #2d1f12

Typography

• Headings: Playfair Display (serif)
• Body: Nunito (sans-serif)
• Line height: Generous spacing (leading-relaxed, leading-loose)

📄 Pages

1. Home (/) - Hero with brand philosophy and invitation
2. About (/about) - Founder story and philosophy (from MDX)
3. Collection (/collection) - Product grid with category filtering
4. Product Details (/collection/[slug]) - Individual product pages
5. Craft (/craft) - Process and methodology (from MDX)
6. Journal (/journal) - Blog/journal article listing
7. Journal Entry (/journal/[slug]) - Individual articles (from MDX)

🧪 Testing

The project includes comprehensive tests for:

• Components (Header, Footer, Button, ProductCard)
• Pages (Home page)
• User interactions (clicks, form submissions)
• Accessibility and semantic HTML

All tests use Jest and React Testing Library.

📦 Deployment

The public site is a static export on GitHub Pages: https://almantask.github.io/dkeramik/. Checkout talks to Cloud Run (dkeramik-api).

GitHub Actions

• CI (.github/workflows/ci.yml) — on pull requests and main: frontend typecheck/Jest/build, backend typecheck/Vitest, Playwright.
• Pages (.github/workflows/deploy.yml) — static out/ to GitHub Pages.
• API (.github/workflows/deploy-api.yml) — Docker image to Artifact Registry, Cloud Run in europe-central2, min instances 0.

Repository variables

Variable	Used by	Example
CUSTOM_DOMAIN	Pages (optional)	true to drop /dkeramik basePath
PAYSERA_TEST	Cloud Run (optional)	true until live bank links

Secrets

• GitHub: NEXT_PUBLIC_API_URL (Cloud Run HTTPS URL baked into the Pages shop client).
• GitHub: FRONTEND_ORIGIN (shop URL and CORS, e.g. https://<user>.github.io/dkeramik; a bare https://<user>.github.io still gets /dkeramik on product links), PUBLIC_API_URL (Cloud Run HTTPS URL).
• GitHub: ADMIN_PASSWORD (admin panel login; applied to Cloud Run on each API deploy).
• GitHub: GCP_SA_KEY (service account JSON for Artifact Registry + Cloud Run).
• Secret Manager in dkeramik-fullstack:
  • Required: SESSION_SECRET, WEBHOOK_SECRET.
  • Optional (Paysera): PAYSERA_PROJECT_ID, PAYSERA_PASSWORD (if unset or empty, Paysera online payment links are disabled and orders use manual SEPA bank transfer).

Local: npm run build writes out/. API: cd backend && npm run dev.

🛠️ Technologies

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• MDX - Markdown with JSX for rich content
• Jest - JavaScript testing framework
• React Testing Library - React component testing

📝 Content Management

Content is managed through:

• MDX files in content/ directory for long-form content (About, Craft, Journal)
• TypeScript data file (content/products.ts) for product catalog
• Easy to edit and version control

🎯 Brand Voice

The site embodies a warm, poetic, human voice:

• Focuses on ritual, meaning, and intentionality
• Celebrates imperfection and handmade variation
• Emphasizes slow, mindful living
• Uses emotional, evocative language

Key phrases:

• "Homes become true homes when they are filled with heartfelt details."
• "Homes are created little by little—detail by detail."
• "Take it into your hands and feel the warmth of clay."

📄 License

See LICENSE file for details.

---

Built with ❤️ and Next.js 14