BlogApril 21, 2025

Styling your portfolio

Dubz

Global style

Magic Portfolio's styling is based on Once UI's customization through data-attributes. You can generate a custom color palette for brand, accent and neutral colors on Once UI where you'll find instructions on how to apply it.

src/app/resources/config.js

theme:       'dark',         // dark | light
neutral:     'gray',         // sand | gray | slate
brand:       'blue',         // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
accent:      'indigo',       // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
solid:       'contrast',     // color | contrast
solidStyle:  'flat',         // flat | plastic
border:      'playful',      // rounded | playful | conservative
surface:     'translucent',  // filled | translucent
transition:  'all',          // all | micro | macro
scaling:     '100',          // 90 | 95 | 100 | 105 | 110

Background effect

There's a pre-configured background in layout.tsx that you can modify in the config file. Set graphic elements such as gradient, dots, lines, and grid and configure their appearance.

src/app/resources/config.js

const effects = {
  mask: {
    cursor: false,
    x: 50,
    y: 0,
    radius: 100
  },
  gradient: {
    display: true,
    x: 50,
    y: -25,
    width: 100,
    height: 100,
    tilt: 0,
    colorStart: 'accent-background-strong',
    colorEnd: 'static-transparent',
    opacity: 50
  },
  dots: {
    display: true,
    size: 2,
    color: 'brand-on-background-weak',
    opacity: 20
  },
  lines: {
    display: false,
    color: 'neutral-alpha-weak',
    opacity: 100
  },
  grid: {
    display: false,
    color: 'neutral-alpha-weak',
    opacity: 100,
    width: 'var(--static-space-32)',
    height: 'var(--static-space-32)'
  }
}

Share this post:

Styling your portfolio

Global style

Background effect

Recent posts