Build for Production

npm run build
# or
yarn build

📁 Project Structure

bentofolio/
├── public/
│   ├── fonts/                 # Local Gilroy font files
│   ├── projects/              # Project thumbnail images
│   ├── svgs/                  # SVG icons and graphics
│   └── person2.jpg            # Profile image
├── src/
│   ├── app/
│   │   ├── globals.css        # Global styles and CSS variables
│   │   ├── layout.tsx         # Root layout with metadata
│   │   └── page.tsx           # Home page composition
│   ├── components/
│   │   ├── AboutContactSection.tsx
│   │   ├── ContactModal.tsx
│   │   ├── HamburgerButton.tsx
│   │   ├── HeroSection.tsx
│   │   ├── MobileNav.tsx
│   │   ├── Navbar.tsx
│   │   ├── PersonImageSection.tsx
│   │   └── ProjectsSection.tsx
│   ├── hooks/
│   │   └── useNavigation.ts   # Navigation state management
│   └── lib/
│       ├── animation/         # Motion variants and animations
│       ├── constants/         # Centralized data (contact, projects, etc.)
│       └── utils/             # Utility functions
├── .gitignore
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── README.md
└── tsconfig.json

🔧 Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production with Turbopack
• npm run start - Start production server
• npm run lint - Run ESLint for code quality

🎨 Customization

Content Management

All content is centralized in src/lib/constants/ for easy customization:

• Hero Content: Edit src/lib/constants/siteContent.ts
• Contact Info: Edit src/lib/constants/contact.ts
• Social Links: Edit src/lib/constants/socials.ts
• Projects: Edit src/lib/constants/projects.ts
• Navigation: Edit src/lib/constants/navItems.ts

Styling & Theming

• CSS Variables: Modify src/app/globals.css for colors and spacing
• Fonts: Replace files in public/fonts/ and update src/app/layout.tsx
• Images: Replace public/person2.jpg and project images in public/projects/

SEO & Metadata

Update metadata in src/app/layout.tsx for:

• Page title and description
• Open Graph tags
• Twitter card settings
• Author information

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository

   git clone https://github.com/mkhoirulwafa18/bentofolio.git
   

2. Create a feature branch

   git checkout -b feature/amazing-feature
   

3. Install dependencies

   npm install
   

4. Make your changes

   • Follow the existing code style
   • Add comments for complex logic
   • Test your changes locally

5. Commit your changes

   git commit -m "feat: add amazing feature"
   

6. Push to your branch

   git push origin feature/amazing-feature
   

7. Open a Pull Request

Development Guidelines

• Use TypeScript for type safety
• Follow the existing component structure
• Maintain responsive design principles
• Test on multiple screen sizes
• Ensure accessibility standards

📄 License

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

MIT License Summary

• ✅ Commercial use
• ✅ Modification
• ✅ Distribution
• ✅ Private use
• ❌ Liability
• ❌ Warranty

🙏 Acknowledgments

• Next.js - The React framework for production
• Tailwind CSS - Utility-first CSS framework
• Motion - Animation library
• Lucide React - Beautiful & consistent icons
• Vercel - Deployment platform