Frame & Light — Complete Project Guide

This file explains how to customize your Next.js photography template safely and quickly. It covers the necessary files and folders in this repository with practical instructions for editing content, layout, routes, styles, and assets.

Next.js 12 React 18 Tailwind CSS 3 Markdown Data

Quick Start

1) Install and run

npm install
npm run dev

2) Build production

npm run build
npm run start

3) Useful scripts from package.json

  • npm run dev — local development server
  • npm run build — production build
  • npm run start — run built site
  • npm run lint — lint checks
  • npm run format — Prettier formatting

File & Folder Map (Necessary Areas)

These are the core folders you will edit most often.

Path Purpose Customize Here
src/pages Routes and page composition Which sections appear on each page
src/components/home-page Home sections Hero, services, about, pricing, testimonial, featured blog, portfolio block
src/components/blogs Blog listing + details UI Cards, grids, sidebar, slider, previous/next navigation
src/components/portfolios Portfolio listing + details UI Portfolio cards, detail sections, form, previous/next navigation
src/components/header Main header + mobile menu Top navigation links and labels
src/components/layout Global layout wrapper Footer structure and site-wide layout behavior
src/components/contact Contact info + form + map Contact cards and form appearance
src/data Markdown content source Posts, projects, services, pricing, testimonials, teams, hero text
src/lib Data loading helpers How markdown is parsed and how categories/tags are generated
src/styles/globals.css Global utility classes Shared visual language (header, buttons, cards, spacing utilities)
tailwind.config.js Theme tokens Colors, breakpoints, container sizes, custom keyframes
public/images Static assets Replace hero, blog, portfolio, team, and brand images

Important component subfolders

  • src/components/blogs/blog-detail — detail banner/content blocks for single blog pages
  • src/components/portfolios/portfolio-detail — detail banner/content blocks for single portfolio pages
  • src/components/common — reusable behaviors (for example split text animation)
  • src/components/page-banner — top hero banners for internal pages

Pages & Routes

URL Page File Main Components
/home src/pages/home.js (re-exports src/pages/index.js) Home sections: hero, services, portfolio preview, about, pricing, testimonial, featured blog
/about src/pages/about.js PageBanner, About, Services, Testimonial, Team
/blog src/pages/blog/index.js Breadcrumb + blog list
/blog/[slug] src/pages/blog/[slug].js Single blog content + previous/next
/portfolio src/pages/portfolio/index.js Breadcrumb + portfolio list
/portfolio/[slug] src/pages/portfolio/[slug].js Single portfolio content + inquiry form + previous/next
/contact src/pages/contact.js Map + contact info card + contact form card
/category/[slug] src/pages/category/[slug].js Blog posts filtered by category
/tag/[slug] src/pages/tag/[slug].js Blog posts filtered by tag

How data is loaded on pages

Most pages use getStaticProps and getStaticPaths with helper functions from src/lib/items-util.js.

Primary navigation now points to /home. The route is provided by src/pages/home.js, which reuses the same homepage implementation from src/pages/index.js.

  • getAllItems(type) reads markdown files from src/data/{type}
  • getItemData(slug, type) reads a single markdown file and returns frontmatter + content
  • Items are sorted by date descending when available

Content Model (Markdown Data)

Content is stored in markdown files under src/data. Keep slug/file names URL-safe (lowercase with hyphens) because detail pages map directly to file names.

1) Blog posts: src/data/posts/*.md

---
title: 'Mastering Golden Hour Photography Tips'
date: '2024-03-15'
image: inspired.jpg
descriptionImg: 'single-image.jpg'
isFeatured: true
category:
  - tips
  - lighting
postTitle: ...
postDesc: ...
postAdditionalDesc: ...
singlePostTitle: ...
singlePostDesc: ...
icon: FaQuoteLeft
blockquoteText: ...
postExcerpt: ...
postTags:
  - outdoor
  - tutorial
---

Optional markdown body content...

2) Portfolio items: src/data/projects/*.md

---
title: 'Seaside Wedding Celebration'
category: 'wedding'
date: '2024-04-10'
image: 'brossia.jpg'
descriptionImg: '1.jpg'
excerpt: 'Wedding Photography'
location: 'Malibu, California'
clientName: 'Rachel & David Thompson'
completedDate: 'April 2024'
architectName: 'Marcus Chen'
squareUnits: '500+ photos'
additionDesc: 'HTML allowed with <br/>'
isFeatured: true
---

3) Services: src/data/services/*.md

---
title: 'Photo Shoot'
icon: 'AiOutlineCamera'
---

Service description text...

4) Pricing: src/data/pricing/*.md

---
id: 'pricing-item-01'
monthlyPlan: 'Mini Session'
annualPlan: 'Mini Package'
monthlyPrice: '$150'
annualPrice: '$350'
icon: 'AiOutlineCheckCircle'
monthlyExcerpt: ...
annualExcerpt: ...
monthlyPricingList:
  - item
annualPricingList:
  - item
---

5) Other data folders

  • src/data/heros — homepage hero slides
  • src/data/contact — contact page text, email, phone
  • src/data/testimonial — testimonials
  • src/data/teams — team cards
  • src/data/brands — brand logos/labels if used in brand section

Important naming note

The UI and routes now use Blog and Portfolio, but data folders are still named posts and projects. This is expected in current code.

Images

  • All static images live in public/images.
  • Subfolders include hero, posts, projects, team, logo, service, and more.
  • When replacing assets, keep expected filenames or update the related markdown/component references.
  • Use optimized sizes to improve performance (especially hero and full-width images).

Where image names are referenced

  • Blog cards/details: from src/data/posts
  • Portfolio cards/details: from src/data/projects
  • Hero: from src/data/heros
  • Logo: header/footer components in src/components/header and src/components/layout/footer.js

Styling & Theme

Tailwind theme

Update design tokens in tailwind.config.js.

  • theme.extend.colors — brand colors such as primary, secondary, sky, etc.
  • theme.screens — responsive breakpoints
  • container — max width and padding behavior

Global utility classes

src/styles/globals.css contains shared component-like utility classes for header, buttons, service cards, project cards, post tags, pricing card behavior, and animation helpers.

Section-level design changes

If you need to redesign a specific section, edit its component directly under src/components/home-page, src/components/blogs, src/components/portfolios, etc.

Common Customization Workflows

Add a new blog post

  1. Create a new markdown file in src/data/posts (for example my-new-post.md).
  2. Add frontmatter fields used by cards/detail UI (title, date, image, category, tags, etc.).
  3. Add image files into public/images/posts/my-new-post/ (or your chosen pattern).
  4. Run npm run dev and open /blog/my-new-post to verify.

Add a new portfolio item

  1. Create src/data/projects/new-portfolio-item.md.
  2. Fill frontmatter (title, category, image, location, client, etc.).
  3. Add portfolio images under public/images/projects/new-portfolio-item/.
  4. Check listing page /portfolio and detail page /portfolio/new-portfolio-item.

Change homepage sections order

Open src/pages/index.js and reorder imported components in JSX. This is the fastest way to alter homepage narrative flow.

Change menu labels/links

  1. Edit desktop links in src/components/header/header-1.js and header-2.js.
  2. Edit mobile links in src/components/header/offcanvas-data.js.
  3. If you add a new route, also create its page file in src/pages.

Update contact details

  1. Edit src/data/contact/contact-info.md.
  2. For footer-specific details, also edit src/components/layout/footer.js.
  3. For map embed/location logic, edit src/components/contact/google-map.js.

Build & Deployment Notes

  • Run npm run lint before production build.
  • Run npm run build and fix any compilation errors before deploy.
  • Static content pages are generated from markdown at build time.
  • next.config.js currently uses image loader settings with akamai and path: '/'.

Troubleshooting

Blog/portfolio page not found (404)

  • Check markdown filename slug in src/data/posts or src/data/projects.
  • Ensure links use /blog/[slug] or /portfolio/[slug].

Images not appearing

  • Confirm files exist in public/images and names match frontmatter values exactly.
  • Check for path typos such as missing folder names or wrong extensions.

Category or tag filters not working

  • Confirm category and postTags arrays in blog frontmatter are populated.
  • Category/tag pages depend on src/lib/getPostCategories.js and src/lib/getPostTags.js.

Styles not updating

  • Restart dev server after major Tailwind config changes.
  • Verify classes are not dynamically constructed in unsupported ways.

Last updated for current Frame & Light code structure (blog/portfolio routes with posts/projects data folders).