A modern, high-performance website for STD5, a leading post-production studio in Istanbul, Turkey. Built with Next.js 15, TypeScript, and Tailwind CSS.
- Modern Design: Netflix-inspired hero section with dynamic mosaic background
- Performance Optimized: Built with Next.js 15 and optimized for speed
- Responsive: Fully responsive design that works on all devices
- SEO Optimized: Comprehensive metadata and structured data
- Accessibility: WCAG compliant with proper ARIA labels
- Animation: Smooth animations using Framer Motion
- Type Safety: Full TypeScript implementation
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4
- Animations: Framer Motion
- Icons: Lucide React
- Utilities: clsx, tailwind-merge
- Build Tool: Turbopack (development)
- Node.js 18+
- npm or yarn
- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
std5.net/
├── app/ # Next.js App Router
│ ├── components/ # Reusable components
│ ├── constants/ # Application constants
│ ├── utils/ # Utility functions
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── data/ # Static data (JSON files)
├── public/ # Static assets
├── types/ # TypeScript type definitions
└── package.json
A dynamic canvas-based mosaic background that displays project images in a Netflix-style grid. Features:
- Seeded random generation for consistent layouts
- Image loading with fallbacks
- Performance optimized with memoization
- Responsive design
A responsive navigation header with:
- Smooth scroll effects
- Mobile menu with animations
- Active page indicators
- Glass morphism effects
Interactive service cards showcasing STD5's offerings with:
- Hover animations
- Icon integration
- Consistent styling
- Image Optimization: Next.js Image component with proper sizing
- Code Splitting: Automatic route-based code splitting
- Memoization: React.memo for expensive components
- Lazy Loading: Images and components loaded on demand
- Bundle Optimization: Tree shaking and dead code elimination
Create a .env.local file:
NEXT_PUBLIC_BASE_URL=https://your-domain.comThe project uses Tailwind CSS v4 with custom theme colors defined in globals.css:
:root {
--std5-primary: #430086;
--std5-accent: #8b5cf6;
--std5-dark: #0f0f23;
--std5-darker: #0a0a1a;
}The website is fully responsive with breakpoints:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
Smooth animations powered by Framer Motion:
- Page transitions
- Component entrance animations
- Hover effects
- Loading states
- Dynamic metadata generation
- Open Graph tags
- Twitter Card support
- Structured data
- Sitemap generation
- Robots.txt
- Accessible via /admin/login
- JWT-based session management
- Content management panel at /admin/dashboard
- Full CRUD operations for Projects (works) and Crew Members (crew) tabs
- Image upload support (JPEG/PNG) for projects and crew members
- PDF CV upload support for crew members
- Uploaded images and CVs are automatically saved to the appropriate directory
- Automatic placeholder is shown if an image fails to load
- /api/admin/works: Project CRUD operations (GET, POST, PUT, DELETE)
- /api/admin/crew: Crew member CRUD operations (GET, POST, PUT, DELETE)
- /api/admin/upload: Image and file upload (POST)
- /api/auth/login: Admin login (POST)
- Admin panel access requires login
- When uploading images, you can use either a file name or a full path; the system will automatically resolve the correct path
- If an image is missing or broken, a default placeholder icon will be displayed
- Built with Next.js
- Styled with Tailwind CSS
- Animated with Framer Motion
- Icons from Lucide