Templates Documentation

This collection provides responsive, accessible, and customizable templates in Next.js and React with TypeScript support.

Shared Types & Sample Data

Shared TypeScript types are available at lib/template-types.ts. Centralized sample data is available at app/templates/sample-data.ts and can be imported by each template.

import type { WorkItem } from '@/lib/template-types'
import { SAMPLE_WORK } from '@/app/templates/sample-data'

// Example usage in a template page
const filtered = SAMPLE_WORK.filter(w => w.category === 'Web')

Customization

Styling: Use variables in app/globals.css and utility classes to adapt themes.
Accessibility: Labels, roles, and ARIA states are included; verify with your project’s a11y tooling.
Data: Replace imports from sample-data.ts with your own API or CMS integration.
Types: Extend interfaces in template-types.ts to fit your domain.

Template Notes

ChatGPT-like Interface

Simulated streaming responses are dependency-free.
Keyboard accessible send button and textarea.

Music Playlist Slider

Scroll-snap slider with playback controls and progress simulation.
Focus styles and roles applied for accessible interaction.

Professional Resume

Theme customization via accent color and layout options.
Print-to-PDF using browser print styles (File → Print).

E-commerce Product Showcase

Dependency-free drag-to-rotate viewer with gradient frames.
Keyboard navigable variant selection and add-to-cart.

Interactive Data Dashboard

Canvas line chart with axes, grid, and live updates.
Pause/resume control with aria-live updates as needed.

Portfolio Gallery

Responsive grid with smooth CSS hover transitions.
Filter buttons use proper button semantics with ARIA pressed state.