Personal Portfolio Website

A modern, responsive portfolio website built with Next.js 13+, TypeScript, and Tailwind CSS. Features include dark mode support, animated sections, skills showcase, and project displays.

Features

• 🌓 Dark/Light mode support
• 🎨 Customizable theme and gradients
• 📱 Fully responsive design
• ⚡ Server-side rendering
• 🔤 Custom font support (Maple Mono)
• 🎯 Animated sections
• 🐍 GitHub contribution snake animation
• 💼 Project showcase
• 📊 Skills visualization

Prerequisites

• Node.js 18.0 or later
• npm, yarn, or pnpm

Getting Started

1. Clone the repository:

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

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Start the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open http://localhost:3000 in your browser.

Configuration

All site configurations are managed through the config.yaml file:

Personal Information

user:
  name: "Your Name"
  title: "Your Title"
  location: "Your Location"
  email: "your.email@example.com"
  bio: "Your bio"

Social Media Links

social:
  github: "https://github.com/yourusername"
  linkedin: "https://linkedin.com/in/yourusername"
  twitter: "https://twitter.com/yourusername"
  instagram: "https://instagram.com/yourusername"

Projects

projects:
  - title: "Project Name"
    description: "Project description"
    tags: ["Tech1", "Tech2"]
    image: "/projects/image.png"
    github: "https://github.com/..."
    demo: "https://demo-url.com"
    featured: true

Skills

skills:
  technical:
    - name: "Skill Name"
      icon: "icon-name"  # Uses Simple Icons naming

Theme Customization

site:
  theme:
    gradients:
      light:
        from: "#4F46E5"
        to: "#06B6D4"
      dark:
        from: "#00DC82"
        to: "#36E4DA"

Feature Toggles

site:
  features:
    darkMode: true
    animations: true
    contactForm: true
    newsletter: false
    blog: false

Deployment

Deploy to Vercel (Recommended)

1. Fork this repository
2. Create a new project on Vercel
3. Import your forked repository
4. Vercel will automatically detect Next.js and configure the build settings
5. Click "Deploy"

Manual Deployment

1. Build the project:

   npm run build
   # or
   yarn build
   # or
   pnpm build

2. Start the production server:

   npm run start
   # or
   yarn start
   # or
   pnpm start

Environment Variables (Optional)

Create a .env.local file in the root directory:

NEXT_PUBLIC_SITE_URL=https://your-domain.com

Project Structure

├── app/                   # Next.js 13+ app directory
│   ├── components/       # React components
│   ├── context/         # React context providers
│   ├── config/         # Configuration utilities
│   └── types.ts        # TypeScript definitions
├── public/              # Static assets
│   ├── assets/         # Images and media
│   └── fonts/          # Custom fonts
└── config.yaml         # Site configuration

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is open source and available under the GPL v3.0 License.