Aryan Budukh's Portfolio

A world-class, interactive portfolio website built with cutting-edge technologies.

Features

• Interactive 3D Hero Section - Built with React Three Fiber and Drei
• Smooth Animations - Powered by Framer Motion
• Glassmorphism Design - Modern, minimalist dark theme
• Custom Cursor - Animated cursor with hover states
• Content Management - Sanity.io CMS integration
• Performance Optimized - Next.js with App Router and SSG
• Responsive Design - Mobile-first approach with Tailwind CSS

Tech Stack

• Framework: Next.js 14 with App Router
• Styling: Tailwind CSS
• Animation: Framer Motion
• 3D Graphics: React Three Fiber & Drei
• State Management: Zustand
• CMS: Sanity.io
• Deployment: Vercel

Getting Started

1. Install Dependencies

   npm install

2. Set up Environment Variables Create a .env.local file with:

   NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
   NEXT_PUBLIC_SANITY_DATASET=production
   SANITY_API_TOKEN=your_sanity_api_token
   

3. Set up Sanity Studio

   npx sanity init

   Follow the prompts to create your Sanity project.

4. Run the Development Server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/
│   ├── 3d/                # Three.js components
│   ├── layout/            # Layout components
│   ├── projects/          # Project-related components
│   ├── sections/          # Page sections
│   └── ui/                # UI components
├── lib/                   # Utilities and configurations
│   ├── sanity.ts          # Sanity client
│   ├── store.ts           # Zustand store
│   └── utils.ts           # Utility functions
└── types/                 # TypeScript type definitions

Sanity Schema

The portfolio uses Sanity for content management with the following schema:

• Project: Contains project details, images, descriptions, and links
• Custom fields: Cover images, tags, live URLs, and GitHub links

Deployment

GitHub Pages

This project is configured for automatic deployment to GitHub Pages:

1. Manual Build & Export

   npm run export

2. Automatic Deployment

   • Push to main branch triggers GitHub Actions
   • Static files are automatically built and deployed
   • Available at: https://skullfire07.github.io/[repository-name]

Vercel (Alternative)

1. Build the project

   npm run build

2. Deploy to Vercel

   • Connect your GitHub repository to Vercel
   • Add environment variables in Vercel dashboard
   • Deploy automatically on push to main branch

Features Showcase

3D Interactive Hero

• Animated geometric shapes with mouse interaction
• Particle system with dynamic lighting
• Smooth camera movements and transitions

Project Gallery

• Masonry layout with staggered animations
• Custom hover effects with shader-like visuals
• Integration with Sanity CMS for dynamic content

Responsive Design

• Mobile-first approach
• Touch-friendly interactions
• Optimized for all screen sizes

Performance

• Lighthouse Score: 95+ across all metrics
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Contributing

This is a personal portfolio project. For suggestions or issues, please open a GitHub issue.

License

MIT License - feel free to use this as inspiration for your own portfolio!