Available styles
Select your preferred style using the Website Style dropdown on the/website page. The WebsiteStyleSelector component provides a dropdown menu with two options.
Simple style
The Simple style (ResumeCard component) offers a traditional, single-column resume layout.
Design characteristics
- Clean, minimal layout: Single-column design with consistent spacing
- Professional typography: Clear hierarchy with section headings and borders
- Traditional structure: Follows conventional resume formatting
Visual elements
- Header
- Content sections
- Spacing
- Large name in 4xl font with bold tracking
- Professional title in muted foreground color
- Location, phone, and email with corresponding icons (MapPin, Phone, Mail)
- Social links as icon buttons (LinkedIn, GitHub, Twitter/X, Website)
- Profile image positioned in the top-right corner
The Simple style uses semantic color tokens like
text-foreground, text-muted-foreground, and text-primary that adapt to light/dark themes.Bento style
The Bento style (BentoResumeCard component) features a modern, grid-based layout inspired by bento box designs.
Design characteristics
- Dynamic grid layout: Responsive grid with varying card sizes
- Visual hierarchy: Cards span different columns and rows for emphasis
- Modern aesthetics: Rounded corners (3xl), subtle shadows, and hover effects
Grid structure
The Bento layout uses a responsive grid:Color themes
Bento style includes configurable accent colors:Available accent colors
Available accent colors
- Red: red-600/red-400 with red-50 background
- Blue (default): blue-600/blue-400 with blue-50 background
- Violet: violet-600/violet-400 with violet-50 background
- Amber: amber-600/amber-400 with amber-50 background
- Status badges
- Skill tags for programming languages
- Company names in experience section
- Interactive elements on hover
Card components
Hero card
Large card (8 columns, 2 rows) with:
- Availability badge (e.g., “Available for 2026 Internships”)
- Large name display (4xl-6xl font)
- Professional title
- Decorative CPU icon in background
Profile photo card
Square card (4 columns, 2 rows) with:
- Circular profile image
- Hover scale effect
- Accent-colored border
Social & location card
Compact card (4 columns, 1 row) with:
- Location with MapPin icon
- Social media icon buttons (GitHub, LinkedIn, Twitter/X, Email)
About card
Tall card (4 columns, 2 rows) with:
- Scrollable content area
- Custom scrollbar styling
- Italic text formatting
Tech stack card
Wide card (8 columns) displaying:
- Framework and tool badges (neutral background)
- Language badges (accent background)
Experience card
Large card (8 columns, 2 rows) with:
- Timeline design with left border
- Animated timeline dots on hover
- Company and position with date badges
Switching between styles
Changing your style is instant and non-destructive:- Navigate to
/website - Click the Website Style dropdown button
- Select either “Simple Style” or “Bento Style”
- The preview updates immediately
useResumeStore state using the setWebsiteStyle() function.
Style comparison
| Feature | Simple Style | Bento Style |
|---|---|---|
| Layout | Single column | Grid-based |
| Best for | Traditional industries | Creative/tech fields |
| Customization | Theme colors only | Accent color themes |
| Visual impact | Professional, clean | Modern, dynamic |
| Mobile responsive | Linear scroll | Stacked grid |
| Social links | Icon buttons | Rounded squares |
Theme support
Both styles support light and dark themes:- Simple style uses Tailwind’s dark mode utilities automatically
- Bento style includes a dedicated theme toggle component
- Color tokens adjust based on system theme preference
Published website
Your selected style applies to your published website atwrkks.site/username. Visitors see your site with the style you chose—you can change it anytime and republish.