My multilingual developer portfolio built with Next.js 15, React 19, and TypeScript. Features full i18n support (EN/DE/FR/IT), contact form API, and modern UI components.
Live URL: danistor.com
Full-stack portfolio showcasing web development services for Swiss and European markets. Includes automatic locale detection, project showcase with case studies, client testimonials, and integrated contact system with email delivery via Resend API.
- 4 languages: English, German, French, Italian
- Automatic locale detection from browser Accept-Language headers
- Cookie-based locale persistence for returning visitors
- Locale-aware routing with Next.js middleware (
/en,/de,/fr,/it) - Fully translated content including services, projects, testimonials, and UI elements
- Hero Section - Value proposition with location-based messaging and key statistics
- Services Section - Business-critical web apps, e-commerce, full-stack development, EU market solutions, performance optimization
- Packages Section - Service offerings with pricing and features
- Process Section - Development workflow and methodology
- Portfolio Section - Showcase of completed projects with case studies (challenge, solution, results)
- Testimonials Section - Client feedback
- About Section - Developer background and expertise
- Contact Section - Integrated contact form with validation
- Newsletter Section - Subscription signup
- Email delivery via Resend API
- Rate limiting (5 requests per hour per IP)
- Spam protection with honeypot field
- Input validation using Zod schemas
- XSS protection with message sanitization
- Reply-to support for direct client responses
- Optional password protection for the entire site (useful for pre-launch or private portfolios)
- Cookie-based authentication with login page (
/[locale]/login) - Rate limiting on API endpoints
- Honeypot spam filtering
- CORS configuration support
- Dark mode support with next-themes
- Responsive design with mobile-first approach
- Smooth animations using Framer Motion
- Accessible components built with Radix UI primitives
- Form handling with react-hook-form and Zod validation
- Toast notifications using Sonner
- Command palette (cmdk) for navigation
- Framework: Next.js 15.3.0 with Turbo mode
- UI Library: React 19.1.0
- Language: TypeScript 5.3
- Styling: Tailwind CSS v4 with PostCSS
- Component Library: Radix UI (Dialog, Dropdown, Select, Tabs, Tooltip, etc.)
- Animations: Framer Motion 12.7
- Icons: Lucide React
- Form Handling: React Hook Form + Zod validation
- Runtime: Node.js 20+
- Email Service: Resend API
- Locale Negotiation: @formatjs/intl-localematcher + Negotiator
- Linting: ESLint 9 with TypeScript support
- Testing: Playwright 1.52
- Type Checking: TypeScript strict mode
/app
/[locale] # Locale-specific routes (en, de, fr, it)
/login # Password-protected login page
/projects # Projects showcase page
page.tsx # Home page with all sections
layout.tsx # Locale layout wrapper
/api
/auth # Authentication API
/config # Configuration endpoints
/contact # Contact form handler
/og # Open Graph image generation
layout.tsx # Root layout
globals.css # Global styles
/components
/dialogs # Modal components
/forms # Form components (contact form)
/layout # Layout components (header, footer, nav)
/projects # Project-related components
/sections # Page sections (hero, about, services, etc.)
/ui # Reusable UI components (button, input, etc.)
/data
projects.ts # Portfolio project data with translation keys
/locales # Translation files
en.ts # English
de.ts # German
fr.ts # French
it.ts # Italian
/hooks # Custom React hooks
/lib # Utility functions
/public # Static assets (images, fonts)
/scripts # Build and deployment scripts
middleware.ts # Next.js middleware for i18n and auth
- Node.js 20+ (recommended: use the version specified in package.json)
- npm or yarn package manager
npm installCreate a .env.local file in the root directory:
# Resend API Key (get from https://resend.com)
RESEND_API_KEY=re_yourkey123456
# Email configuration
FROM_EMAIL=contact@yourdomain.com
TO_EMAIL=your@personal-email.com
# Site URL for CORS and production
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
# Optional: Password protection
PASSWORD_PROTECTED=false
SITE_PASSWORD=your-secure-passwordnpm run devOpen http://localhost:3000 to view the site. The development server includes Turbo mode for faster builds.
npm run type-checknpm run build
npm startnpm run lint- Create a new translation file in
/locales(e.g.,es.tsfor Spanish) - Update the
LOCALESarray inmiddleware.ts - Add the locale to
generateStaticParamsinapp/[locale]/page.tsx - Update the
LocaleKeytype incomponents/i18n-provider.tsx
- Projects: Edit
/data/projects.tsand add corresponding translation keys to locale files - Services: Update the
servicessection in each locale file (/locales/*.ts) - Packages: Modify the
packagessection in locale files - Testimonials: Edit the
testimonialssection in locale files
Set environment variables in .env.local:
PASSWORD_PROTECTED=true
SITE_PASSWORD=your-secure-passwordUsers will need to enter the password at /[locale]/login to access the site.
Submit contact form
Request Body:
{
"name": "John Doe",
"email": "john@example.com",
"message": "Your message here",
"honeypot": ""
}Rate Limit: 5 requests per hour per IP
Response:
{
"success": true
}This project is deployed on Vercel at danistor.com.
For deployment instructions, see DEPLOYMENT.md.
The site can also be deployed to:
- Netlify
- AWS Amplify
- Any Node.js hosting platform with Next.js support
- Uses Next.js 15 App Router with React Server Components
- All translations are co-located in
/localesfor easy management - Middleware handles automatic locale detection and redirects
- Static site generation (SSG) for all locale routes
- Contact form uses server-side validation and rate limiting
- Images are optimized with Next.js Image component (WebP format)
- Modern browsers (Chrome, Firefox, Safari, Edge)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Responsive breakpoints: mobile (< 768px), tablet (768px-1024px), desktop (> 1024px)
Built with Next.js 15, React 19, TypeScript, and Tailwind CSS