Modern Portfolio Website

This is a modern, responsive portfolio website built with Next.js, TypeScript, Tailwind CSS, and Three.js.

Features

• 🎨 Modern Bento Grid layout
• 🌍 Interactive 3D Globe with GitHub integration
• 📱 Fully responsive design
• ⚡ Built with Next.js 15 and React 19
• 🎭 Smooth animations with Framer Motion
• 🎯 TypeScript for type safety
• 💫 3D effects with Three.js
• 🔗 Social media integration
• 📄 Resume download functionality

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• 3D Graphics: Three.js, @react-three/fiber, @react-three/drei
• Animations: Framer Motion, Lottie React
• Icons: React Icons
• UI Components: Custom components with Aceternity UI

Deployment

Option 1: Vercel (Recommended)

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

1. Push your code to GitHub
2. Connect your GitHub repository to Vercel
3. Vercel will automatically deploy your app

Option 2: Static Export for GitHub Pages

If you prefer GitHub Pages:

1. Update next.config.ts:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true
  },
  basePath: '/your-repo-name' // Only if not using custom domain
}

module.exports = nextConfig

2. Add to package.json:

{
  "scripts": {
    "export": "next build && next export"
  }
}

Troubleshooting

Vercel Build Issues

If you encounter build failures on Vercel:

1. Check Node.js version: Ensure you're using Node.js 18+
2. Clear build cache: In Vercel dashboard, go to Settings → Functions → Clear build cache
3. Check environment variables: Make sure all required env vars are set
4. Dependency conflicts: Run npm ci locally to test clean install

Build Fixes Applied

✅ ESLint errors fixed: Updated next.config.ts with ignoreDuringBuilds: true
✅ Removed unused imports: Cleaned up imports in components to avoid warnings
✅ TypeScript errors: Fixed variable declarations and type issues

Common Fixes

• If Three.js components fail: Add "use client" directive to components using Three.js
• If images don't load: Ensure all images are in the public folder
• If animations don't work: Check that Framer Motion components have proper client-side rendering
• ESLint build failures: Set eslint.ignoreDuringBuilds: true in next.config.ts

Learn More

To learn more about the technologies used:

• Next.js Documentation - learn about Next.js features and API.
• Tailwind CSS - utility-first CSS framework
• Three.js - 3D graphics library
• Framer Motion - animation library

Check out our Next.js deployment documentation for more details.