Bentolio (Next.js)

Bentolio is a clean, customizable one-page portfolio template built with Next.js, designed using the popular Bento Grids layout.

This template is based on my popular Figma design that inspired its development.

Installation

Clone the repository and install dependencies:

git clone https://github.com/rauftech/bentolio.git
cd bentolio
npm install
# or
yarn install

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

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

Features

• Next.js 14+ with App Router: Leverage the latest features of Next.js.
• Tailwind CSS: Easily customizable utility-first styling.
• Responsive Design: Optimized for all screen sizes.
• Font Optimization: Automatic Google Fonts loading and optimization using next/font.
• Image Optimization: Built-in image handling for fast performance using next/image.
• GSAP Animations: Smooth, high-performance animations with @gsap/react.

Project Structure

Here’s a quick overview of the key files and folders in this template:

• /src/data.json: Contains the content for different sections of the website, such as navigation, intro, about, and projects. Modify this file to update the site's content.
• /src/config.json: Controls global variables such as whether to disable loading animations and the placeholder image for lazy-loaded content.
• /tailwind.config.js: Manages Tailwind CSS settings like breakpoints, colors, and fonts. You can modify the global design variables here to customize the template’s appearance.
• /src/hooks/useAnimation.js: Contains hooks for handling animations throughout the template, including loading animations and page transitions.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

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

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

Support

If you need help or have any questions about Bentolio, feel free to:

• Join the community on Discord to connect with other users (FASTER).
• Reach out directly at abdul@rauftech.com.