Customize

Customize Rasuke from the source project. Do not edit generated SCSS maps, compiled bundles, or scattered hex values.

1. Content (JSON)

Section copy, menus, and lists live in src/data/*.json. Each section component imports its own file, so replacing text, images, or link targets never requires touching TSX. Chrome configuration lives in preloader.json, cursor.json, and transition.json; site-wide values in site.json.

2. Design tokens

1. Open tokens/tokens.json.
2. Change the value (colors need both light and dark when they differ).
3. Run npm run tokens — or just npm run dev / npm run build, which run it first.
4. Use the resulting var(--token-name) in SCSS.

See Design Tokens for the pipeline and Colors / Typography for the variable names.

3. Section styles (SCSS)

Visual rules live under src/styles/sections/{group}/_{name}.scss and mirror the React class names in src/components/sections/{group}/{Name}.tsx. Layout chrome is under src/styles/layout, shared components under src/styles/components. New groups must be imported in src/styles/main.scss.

4. Page chrome (SiteShell)

<SiteShell
  pageName="about"
  bodyClass="page-about"
  colorScheme="dark"
  headerName="header-1"
  footerName="footer-1"
  enablePreLoader={false}
  cursorEnabled
  transitionEnabled
>
  {/* sections */}
</SiteShell>

• headerName — header-1 (default), header-2, header-3, header-4, or none
• footerName — footer-1 (default), footer-2, footer-3, or none
• enablePreLoader, cursorEnabled, transitionEnabled — default to their JSON config flags
• pageName / bodyClass — page hooks used by SCSS and effect modules
• colorScheme — pins dark or light (see Dark Mode)

5. Add a page

1. Create a route folder under src/app/{name}/ with a page.tsx.
2. Export metadata (title, description).
3. Render SiteShell and compose section components inside it.
4. Link the page from the navigation JSON (navPrimary.json, navHeader2.json / navHeader4.json, offcanvasMenu.json) if it belongs in navigation.
5. Use Link from next/link and pageHref() from @/lib/assets for internal links.

import type { Metadata } from "next";
import { SiteShell } from "@/components/layout/SiteShell";
import { About2 } from "@/components/sections/about/About2";

export const metadata: Metadata = { title: "About", description: "About Rasuke." };

export default function AboutPage() {
  return (
    <SiteShell pageName="about" bodyClass="page-about" colorScheme="dark">
      <About2 />
    </SiteShell>
  );
}

6. Add a section

1. src/components/sections/{group}/{Name}.tsx — semantic markup with the same BEM classes as the HTML master, reading copy from src/data/{name}.json.
2. src/styles/sections/{group}/_{name}.scss — start with @use "../../abstracts" as *;, then the block class. Token values only.
3. Register the partial in src/styles/sections/{group}/_index.scss (@forward "{name}";) and add the group to src/styles/main.scss if it is new.
4. Optional motion: add src/effects/{name}.js exporting an init{Name}() that no-ops when its markup is absent and returns a cleanup function. Import it in src/components/effects/EffectsBootstrap.tsx and push its teardown.
5. Place the component on a page and check the route.

Layout mixins: @include container;, @include section-space(var(--space-12), var(--space-10));, @include grid-auto(18rem);, @include grid-columns(3);, @include media-up(lg) { … }, @include visually-hidden;.

7. Images and media

• Put assets in public/assets/imgs/{section}/ — never in out/ or .next/.
• Prefer optimized .webp at 2× the displayed frame size.
• Reference them as /assets/imgs/…, or pass JSON paths through asset().
• next/image is unoptimized by design (static export). Provide width and height, and use the helpers in @/lib/assets when CSS controls one axis.

8. Fonts

The root layout links Host Grotesk, DM Sans, and Bonheur Royale from Google Fonts. To swap fonts, update those links in src/app/layout.tsx, the family entries in tokens/tokens.json, then run npm run tokens. BDO Grotesk is licensed — add your own @font-face for full design parity.

9. Global features on / off

• Preloader — src/data/preloader.json (enabled, wordmark, statuses, oncePerSession, sessionKey); per page enablePreLoader={false}.
• Custom cursor — src/data/cursor.json; per page cursorEnabled={false}.
• Page transition — src/data/transition.json (enabled, prefetch); per page transitionEnabled={false}.
• Smooth scroll — created in EffectsBootstrap; disable globally with window.rasukeCore = { smoothScroll: false } before the bootstrap runs, or per user with prefers-reduced-motion.

10. Rebuild

npm run build
npx --yes serve out

Deploy out/ to Cloudflare Pages or any static host. See Local Preview.