🌐 Personal Portfolio — Next.js + TypeScript + TailwindCSS

A modern, multilingual personal portfolio built with Next.js App Router, TypeScript, and TailwindCSS v4.
It features smooth animations, theme toggling, and SEO-optimized metadata — designed to showcase your projects and skills in a clean, responsive layout.

🔗 Live Demo: https://www.oguzhantanitmis.com/

---

🚀 Features

• ⚡ Next.js 16 (App Router) with React Compiler
• 🎨 TailwindCSS v4 + PostCSS for utility-first styling
• 🌗 Manual Dark/Light Theme (no next-themes dependency)
• 🌍 i18n Support — bilingual (EN/TR) with cookie-based context
• 🧠 TypeScript & modern React 19 features
• 🧩 Modular structure with reusable UI components
• 🎞️ Smooth Framer Motion animations
• 🧭 Built-in SEO metadata and sitemap/robots support
• 🔒 Optimized for performance and accessibility

---

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	TailwindCSS v4 + PostCSS
Animations	Framer Motion
Fonts	Geist via next/font
Linting	ESLint (core-web-vitals) + Prettier
Deployment	Vercel ready

---

📂 Project Structure

src/
 ├── app/
 │   ├── layout.tsx          → Global layout (metadata, font, theme script)
 │   ├── page.tsx            → Home page
 │   ├── about/page.tsx      → About page
 │   ├── projects/page.tsx   → Projects showcase
 │   ├── contact/page.tsx    → Contact form
 │   ├── globals.css         → Global Tailwind styles
 │   ├── sitemap.ts          → Sitemap metadata route
 │   └── robots.ts           → Robots metadata route
 │
 ├── components/
 │   ├── Hero.tsx
 │   ├── Section.tsx
 │   ├── Navbar.tsx
 │   ├── Footer.tsx
 │   ├── ProjectCard.tsx
 │   ├── AnimatedBackground.tsx
 │   ├── Reveal.tsx
 │   ├── ThemeToggle.tsx
 │   └── LangToggle.tsx
 │
 ├── lib/
 │   ├── content.ts          → Static data (projects, socials)
 │   ├── dict.ts             → Translation dictionary (EN/TR)
 │   ├── i18n.tsx            → i18n context (client)
 │   ├── i18nServer.ts       → Language resolver (server)
 │   └── seo.ts              → Global & page metadata
 │
 └── public/
     ├── avatar.svg
     └── project images...

---

🌓 Theme & i18n

Dark/Light Theme:

• Implemented manually with inline <script> injection to prevent FOUC.
• Uses document.documentElement.classList.toggle('dark', ...) from ThemeToggle.tsx.
• Tailwind’s dark: variant configured via @custom-variant in globals.css.

Localization:

• Lightweight context-based i18n (I18nProvider + useI18n hook).
• Server side language detection through cookies or accept-language.
• Language switcher via LangToggle component.
• Dictionary: src/lib/dict.ts (inline EN/TR pairs).

---

📈 SEO & Metadata

• SEO handled through Next.js Metadata API — no next-seo dependency.
• src/lib/seo.ts defines global siteConfig and baseMetadata.
• Each page exports localized metadata using generateMetadata.
• Auto-generated sitemap and robots.txt routes.

---

⚙️ Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm start	Start production server
npm run lint	Run ESLint
npm run format	Format with Prettier

---

🧠 Developer Notes

• Built with React Compiler enabled for improved performance.
• Clean modular design — reusable components and centralized config.
• Cookie-synced language between client and server.
• Character encoding: ensure all files use UTF-8 (no BOM) to avoid accent issues.

---

📸 Preview

---

📄 License

GPL-3.0 License © 2025 — Developed by SlipBey
Feel free to fork, modify, and deploy your own version.

---

👨‍💻 Author

SlipBey
Website • LinkedIn • Discord