Skip to main content
The WebsiteStyle type defines the available layout styles for user websites.

​
Type definition

export type WebsiteStyle = "simple" | "bento";
Source: /hooks/stores/useResumeStore.ts:9

​
Values

​
simple
string literal
Traditional single-column layout with sections stacked vertically. Best for straightforward, professional presentations.
​
bento
string literal
Modern grid-based layout inspired by bento box design. Features a dynamic card-based layout with visual variety.

​
Usage

The WebsiteStyle type is used throughout the application to manage user website appearance:

​
In the resume store

type ResumeStore = {
  websiteStyle: WebsiteStyle;
  setWebsiteStyle: (style: WebsiteStyle) => void;
  // ... other fields
};

​
In components

import { WebsiteStyle } from "@/hooks/stores/useResumeStore";

const websiteStyle = (data?.style ?? "simple") as WebsiteStyle;
Source: /app/(user)/[slug]/page.tsx:20

​
In the database

The style field in the users table stores the selected website style as a string: 
CREATE TABLE users (
  id uuid PRIMARY KEY,
  style text DEFAULT 'simple',
  -- ... other fields
);

​
Default value

The default website style is "simple", as defined in the store initialization: 
websiteStyle: "simple"
Source: /hooks/stores/useResumeStore.ts:115

​
Changing the style

Users can change their website style through the WebsiteStyleSelector component, which updates both the Zustand store and the database: 
setWebsiteStyle: (style) => {
  set({ websiteStyle: style });
  updateUser({ style: style });
}
Source: /hooks/stores/useResumeStore.ts:116-119

Build docs developers (and LLMs) love

Get started for freeTalk to us