Portfolio Website

A modern, responsive portfolio website built with Next.js, React, TypeScript, and TailwindCSS.

🚀 Features

• Responsive Design: Looks great on all devices from mobile to desktop
• Modern UI/UX: Built with TailwindCSS and modern design principles
• Type-Safe: Fully typed with TypeScript
• Fast Performance: Optimized with Next.js for quick loading and smooth interactions
• Accessibility: Designed with accessibility in mind
• SEO Friendly: Optimized for search engines

🛠️ Technologies

• Framework: Next.js 15
• Language: TypeScript
• Styling: TailwindCSS 4
• UI Components: Radix UI
• Icons: Lucide React
• Utilities:
  • clsx
  • tailwind-merge
  • class-variance-authority

📋 Prerequisites

• Node.js 18.17 or later
• pnpm (recommended) or npm/yarn

🚀 Getting Started

1. Clone the repository

git clone https://github.com/yourusername/portfolio-website.git
cd portfolio-website

2. Install dependencies

pnpm install
# or
npm install
# or
yarn install

3. Run the development server

pnpm dev
# or
npm run dev
# or
yarn dev

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

📁 Project Structure

portfolio-website/
├── public/             # Static assets
│   ├── app/            # Next.js app router pages
│   ├── assets/         # Project assets (images, etc.)
│   ├── components/     # Reusable UI components
│   ├── hooks/          # Custom React hooks
│   ├── lib/            # Utility functions and configurations
│   └── styles/         # Global styles
├── .eslintrc.js        # ESLint configuration
├── .prettierrc         # Prettier configuration
├── next.config.ts      # Next.js configuration
├── package.json        # Project dependencies and scripts
├── postcss.config.mjs  # PostCSS configuration
├── tailwind.config.js  # TailwindCSS configuration
└── tsconfig.json       # TypeScript configuration

🔧 Customization

1. Personal Information: Update your personal details in src/lib/constants.ts
2. Content: Modify the content in the respective components
3. Styling: Customize the look and feel by editing the TailwindCSS classes or updating the theme in tailwind.config.js
4. Projects: Add or remove projects in the projects section

📱 Responsive Design

The website is designed to be fully responsive across all device sizes:

• Mobile: 320px and up
• Tablet: 768px and up
• Desktop: 1024px and up
• Large Desktop: 1280px and up

🚀 Deployment

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

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact

Your Name - your.email@example.com

Project Link: https://github.com/yourusername/portfolio-website

---

Made with ❤️ by Your Name

This document created by cloude-3.7-sonnet.