113 lines
3.3 KiB
Markdown
113 lines
3.3 KiB
Markdown
# 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.
|