A premium business website project for ChrisStudio, built as a modern, production-ready landing experience. The codebase demonstrates how to combine clean Next.js architecture with polished motion design, responsive layouts, and a maintainable front-end structure suitable for client work.
Add your latest screenshot at
assets/preview-home.pngto keep this section up to date.
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
- Vercel for deployment
- Premium marketing/landing page structure
- Animated UI system powered by Framer Motion
- SVG intro animation support
- Responsive layout across desktop and mobile
- Modular, component-first architecture
- Smooth, intentional motion design
.
├── app/ # Next.js App Router pages and layout entry points
├── components/ # Reusable UI components
├── sections/ # Page-level content sections (hero, services, contact, etc.)
├── hooks/ # Custom React hooks
├── lib/ # Shared utilities and helper functions
├── data/ # Static content/configuration data used by sections/components
├── public/ # Public static assets served by Next.js
├── styles/ # Global styles and design tokens
├── docs/ # Developer-facing architecture, motion, and deployment docs
├── assets/ # Repository assets (README previews, diagrams)
└── scripts/ # Optional developer scripts and automation utilities
npm install
npm run devThe local development server typically runs on http://localhost:3000.
npm run build
npm startThis project is designed for Vercel deployment.
Typical workflow:
- Push to your GitHub repository.
- Import the repository in Vercel.
- Configure environment variables (if required).
- Deploy using the default Next.js build settings.
See docs/deployment.md for a detailed walkthrough.
Environment variables should be defined locally in .env.local and mirrored in your deployment provider.
A starter template is included in .env.example. Keep secrets out of version control.
Design and development by ChrisStudio.