Portfolio Bento UI

Portfolio Bento UI is an open-source project aimed at providing a sleek, customizable, and responsive UI template for developers to showcase their portfolios. Built with modern web technologies like React and Tailwind CSS, it offers a clean and minimalistic design, making it easy for users to display their skills, projects, and experiences.

🚀 Key Features

• Responsive Design: Fully responsive and mobile-friendly, ensuring an optimal viewing experience on all devices.
• Customizable Layout: Easily customizable components, colors, and fonts to fit your personal branding.
• Project Showcase: A section to display your projects with detailed descriptions, tech stack, and links to repositories.
• Skills Section: Highlight your technical skills and proficiencies.
• Dark Mode: Built-in support for dark mode for users who prefer a darker interface.
• Contact Form: Easy-to-use contact form for visitors to reach out.

📁 Repository Structure

The repository is organized as follows:​

• public/: Contains static assets like images and icons.
• src/: Contains all source code for the app.
  • components/: Houses reusable components like Navbar, Footer, etc.
  • assets/: Stores images, icons, and other assets.
  • pages/: Contains different pages of the portfolio, such as the Home page and Projects page.
  • styles/: Contains global CSS and Tailwind configuration.

Main Files:

• App.js: Entry point of the React application.
• index.css: Global styles and Tailwind setup.
• tailwind.config.js: Tailwind CSS configuration file.
• components/: Reusable UI components for various sections.

🛠️ Getting Started

Prerequisites:

• Node.js (preferably the latest LTS version)
• npm or yarn package manager

Installation:

Clone the repository and install dependencies:

git clone https://github.com/krmahi/portfolio-bento-ui.git
cd portfolio-bento-ui
npm install

Usage:

Run the development server:

npm start

Open your browser and go to http://localhost:3000 to view your portfolio in action.

Customization:

Modify the following files to personalize your portfolio:

• src/data/projects.js: Add your projects and their details.
• src/data/skills.js: Update your skills list.
• src/components/Header.js: Edit the header section with your name, title, and links.
• src/components/Footer.js: Customize the footer with contact details and social media links.

📄 License

This project is licensed under the MIT License.​

🤝 Contributing

Contributions are welcome! Feel free to fork the repository, make your changes, and submit a pull request.

📬 Contact

For questions or collaborations, reach out to Mahesh Kumar at mahesh.kr.2277@gmail.com.