Personal portfolio website built with Next.js, React, and Tailwind CSS.
- Multi-language support — Turkish, English, German, Japanese
- Admin panel — Manage Works and Blog posts with multi-language content
- Dark / Light theme — Toggle via the bottom dock
- GitHub contribution graph — Live data via GitHub API
- Contact form — Powered by Formspree
- Intro animation — Custom video sequence on first visit
- Responsive design — Optimized for all screen sizes
| Category | Technology |
|---|---|
| Frontend | React, Next.js, Tailwind CSS |
| Database | Firebase Realtime Database |
| Auth | Firebase Authentication |
| Hosting | Vercel |
| Forms | Formspree |
| Icons | Lucide React |
| Animation | Framer Motion |
| Fonts | Geist Sans, Geist Mono (Vercel) |
# Install dependencies
npm install
# Run development server
npm run dev
# Production build
npm run buildOpen http://localhost:3000 to view the site.
Create a .env.local file with the following variables:
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_DATABASE_URL=
GITHUB_TOKEN= # Optional, for contribution graphsrc/
├── app/ # Next.js App Router pages
│ ├── admin/ # Admin dashboard & login
│ ├── api/github/ # GitHub API route
│ ├── blog/ # Blog page
│ ├── credits/ # Credits page
│ └── works/ # Works/Projects page
├── components/
│ ├── home/ # Home page sections
│ ├── motion/ # Animation components
│ └── navigation/ # Bottom dock navigation
├── config/
│ ├── site.ts # Site metadata
│ ├── translations.ts # i18n translations (TR/EN/DE/JA)
│ └── user.ts # User configuration
├── context/
│ └── language-context.tsx # Language provider
└── lib/
├── firebase.ts # Firebase initialization
└── utils.ts # Utility functions
Deploy to Vercel by connecting the GitHub repository. Set all environment variables in the Vercel dashboard.
MIT