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

npm install
# Also install react-icons for tech stack icons
npm install react-icons

2. Setup environment

cp .env.example .env
# Edit .env with your DATABASE_URL

3. Setup database

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

npm run dev

Open 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:

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 or Neon for free hosted PostgreSQL.