feat: implement initial fullstack portfolio application including dashboard, CMS, and analytics features.

2026-03-07 16:32:49 +07:00
commit bdd61d11d3
59 changed files with 11107 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,112 @@
+# Portfolio — Senior Fullstack Engineer
+
+A modern, production-grade portfolio website built with Next.js 15, TailwindCSS, Framer Motion, and Prisma.
+
+## Tech Stack
+
+- **Frontend**: Next.js 15 (App Router), React 19, TypeScript
+- **Styling**: TailwindCSS + custom design tokens
+- **Animations**: Framer Motion
+- **ORM**: Prisma (PostgreSQL)
+- **Validation**: Zod + React Hook Form
+- **Icons**: Lucide React + React Icons
+
+## Project Structure
+
+```
+src/
+├── app/
+│   ├── api/
+│   │   └── contact/         # Contact form API route
+│   ├── globals.css
+│   ├── layout.tsx            # Root layout with SEO metadata
+│   └── page.tsx              # Home page (Server Component)
+├── components/
+│   ├── sections/             # Full-page section components
+│   │   ├── Navbar.tsx
+│   │   ├── HeroSection.tsx
+│   │   ├── AboutSection.tsx
+│   │   ├── TechStackSection.tsx
+│   │   ├── ProjectsSection.tsx
+│   │   ├── ExperienceSection.tsx
+│   │   ├── ArchitectureSection.tsx
+│   │   ├── ContactSection.tsx
+│   │   └── Footer.tsx
+│   └── ui/                   # Reusable UI components
+│       └── ProjectCard.tsx
+├── lib/
+│   ├── prisma.ts             # Prisma client singleton
+│   └── utils.ts              # cn() utility
+└── types/
+    └── index.ts              # TypeScript types
+prisma/
+├── schema.prisma             # Database schema
+└── seed.ts                   # Seed data
+```
+
+## Getting Started
+
+### 1. Install dependencies
+```bash
+npm install
+# Also install react-icons for tech stack icons
+npm install react-icons
+```
+
+### 2. Setup environment
+```bash
+cp .env.example .env
+# Edit .env with your DATABASE_URL
+```
+
+### 3. Setup database
+```bash
+npm run db:generate   # Generate Prisma client
+npm run db:push       # Push schema to database
+npx ts-node prisma/seed.ts  # Seed with sample data
+```
+
+### 4. Run development server
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000)
+
+## Customization
+
+### Personal Information
+Update these files with your information:
+- `src/app/layout.tsx` — SEO metadata (name, description, URL)
+- `src/components/sections/HeroSection.tsx` — Hero text & social links
+- `src/components/sections/AboutSection.tsx` — Bio, stats, skills
+- `src/components/sections/Footer.tsx` — Social links, email
+- `src/components/sections/ContactSection.tsx` — Contact info
+
+### Database Content
+After running seed, use Prisma Studio to manage content:
+```bash
+npm run db:studio
+```
+
+Or update `prisma/seed.ts` with your actual projects and experience data.
+
+## Architecture Philosophy
+
+This portfolio demonstrates the same architectural principles I apply in all projects:
+- **Clean folder structure** — scalable and maintainable
+- **Server Components** — data fetching at the server level with graceful fallbacks
+- **Type safety** — full TypeScript throughout
+- **Separation of concerns** — UI components separate from data fetching
+- **Graceful degradation** — fallback data when DB is not connected
+
+## Deployment
+
+Deploy to Vercel (recommended):
+
+1. Push to GitHub
+2. Import to Vercel
+3. Add `DATABASE_URL` environment variable
+4. Deploy
+
+For PostgreSQL, use [Supabase](https://supabase.com) or [Neon](https://neon.tech) for free hosted PostgreSQL.