Customization

EnjuFolio is meant to be a small, readable codebase. In principle you can change any part of it, but there is one place that’s intentionally designed for styling tweaks:

src/styles/custom.css

This file controls:

• the main color palette (primary / secondary / accent)
• the fade-up animation used for cards (news, hobbies, research, projects)

Everything else under src/styles/ is utility styling used by the theme. You can read those files, but changing them is more likely to introduce regressions.

1. Colors & animation (custom.css)

In src/styles/custom.css you’ll find a @theme static block:

@theme static {
  /* Primary Colors */
  --color-primary-50: #fff1f3;
  ...
  /* Secondary Colors */
  ...
  /* Accent Colors */
  ...
  /* Animation for news, hobbies, research, project cards fade up */
  --animate-fade-up: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

All components refer to these CSS variables, not hard-coded colors, so:

• To change the palette, update the --color-primary-*, --color-secondary-*, and --color-accent-* values here.
• To change or disable the card animation, adjust --animate-fade-up or the fade-up keyframes.

You don’t need to touch any other styles for basic theming.

2. Generating a Tailwind-style color scale

If you have one brand color and want a full Tailwind-style scale (50 → 950) instead of hand-picking every shade, you can use online tools that generate color steps for you.

A typical workflow:

1. Pick your base color (for example a 500 shade).

2. Paste it into a Tailwind color generator.

3. Copy the resulting scale into custom.css, mapping:

   • lightest → --color-*-50
   • darkest → --color-*-900 / 950

4. Repeat for primary / secondary / accent as needed.

Two kinds of tools are especially helpful:

• Tailwind-focused palette generators Tools that explicitly output 50 / 100 / 200 / … / 900 steps, which you can copy almost directly.

• OKLCH-based pickers If you care about perceptual consistency, OKLCH pickers let you generate lighter/darker variants of the same hue, then convert them to hex and paste into your variables.

You don’t have to get it perfect on the first try — it’s normal to tweak a few shades by hand after seeing them in context.

3. Other customization options

Beyond custom.css, you can customize:

• Configuration & content – via src/enju.config.ts and the files in src/contents/* – see: Configuration and Writing content

• Components & layout – all UI is standard React + Tailwind under src/components and src/app – you can safely refactor or replace components if you’re comfortable with Next.js

4. License & forks

EnjuFolio is licensed under AGPL-3.0, which means:

• You’re free to modify the code for your own site.
• If you run a modified version as a network service, you must keep the license terms and make the corresponding source available.

For details, see the LICENSE file in the repository.