JULIA HUANG

Artist Redefining Architecture with AI-Driven Design

Julia Huang is an innovative AI artist, renowned for blending cutting-edge technology with creative expression. Based in LA, she crafts unique digital art experiences accessible globally.

Have some questions?

Contact me

Musea

Elara

Verve

Zephyr

Instagram Twitter LinkedIn

The Bentolio component creates an elegant and animated portfolio layout, perfect for creative professionals, artists, designers, and developers who want to showcase their work with style. It features a modern bento-style grid layout with smooth animations and customizable sections.

Installation

Examples

Default Configuration

import Bentolio from "@/components/bentolio";
 
export default function Example() {
  return (
    <Bentolio
      name={{
        first: "JULIA",
        last: "HUANG"
      }}
      title="Artist Redefining Architecture with AI-Driven Design"
      description="Julia Huang is an innovative AI artist, renowned for blending cutting-edge technology with creative expression. Based in LA, she crafts unique digital art experiences accessible globally."
      projects={[
        {
          name: "Musea",
          image: "https://atomix-ui.vercel.app/bentolio/images/bentolio.png",
          link: "#"
        },
        { name: "Elara", link: "#" },
        { name: "Verve", link: "#" },
        { name: "Zephyr", link: "#" }
      ]}
    />
  );
}

Custom Styling

import Bentolio from "@/components/bentolio";
 
export default function Example() {
  return (
    <Bentolio
      bg="#E8F3FF"
      secondary="#B8DCFF"
      name={{
        first: "ALEX",
        last: "CHEN"
      }}
      title="Developer Creating Digital Experiences"
      curvedText="Digital"
      profileImage="/path/to/custom-profile.jpg"
      socialLinks={[
        { name: "GitHub", url: "https://github.com/alexchen" },
        { name: "LinkedIn", url: "https://linkedin.com/in/alexchen" },
        { name: "Twitter", url: "https://twitter.com/alexchen" }
      ]}
    />
  );
}

Props

Prop	Type	Description	Default
bg	string	Primary background color for component sections	"#FADCD9"
secondary	string	Secondary color for accents and borders	"#F8AFA6"
name	object	Object containing first and last name	`{ first: "JULIA", last: "HUANG" }`
title	string	Professional title or headline	"Artist Redefining Architecture with AI-Driven Design"
curvedText	string	Text to be styled with curved font in title	"Architecture"
description	string	Brief professional description	"Julia Huang is an innovative AI artist..."
projects	Project[]	Array of project objects	See interface below
profileImage	string	URL or path to profile image	"/bentolio/images/bentolio.png"
contactLink	string	URL for contact section	"#"
secondaryText	string	Text color for contact section	"#000"
socialLinks	SocialLink[]	Array of social media links	See interface below
navLinks	string[]	Navigation menu items	["PROJECTS", "ABOUT", "CONTACT"]

Interfaces

interface Project {
  name: string;
  image?: string;
  link?: string;
}
 
interface SocialLink {
  name: string;
  url: string;
}

Features

The Bentolio component includes several key features:

Responsive design that adapts to different screen sizes with a fluid grid layout
Smooth spring animations powered by Framer Motion
Project showcase section with featured project image and additional project links
Customizable social media integration
Flexible color theming with primary and secondary colors
Built-in navigation menu with customizable links
Dedicated contact button with custom linking
Profile image and project image integration
Special curved text styling for emphasis

Notes

Uses Next.js Image component for optimized image loading
Supports both internal routing (Next.js) and external URLs for all links
Implements animations using Framer Motion with spring configuration
Uses CSS Grid for responsive organization of sections
Displays social links in a fixed-width container at the bottom
Includes hover states and click interactions for project sections
Uses custom SVG icons for visual elements (flower, circle, arrow)

Best Practices

Provide appropriately sized images for optimal performance
Use complementary colors for bg and secondary props
Keep description and titles concise for better layout
Ensure all links (projects, social, contact) are valid URLs
Test the component across different screen sizes