Customization
Change the brand, colors, type, copy and languages.
Name and contact details
Edit SITE in src/config/site.ts: the site name, the three contact emails and the palette.
Set your production domain as site in astro.config.mjs. It is used for canonical URLs, hreflang, the sitemap, feeds, Open Graph images and JSON-LD.
Colors
SwiftJobs uses one accent color. Pick a preset in src/config/site.ts:
palette: 'signal', // 'signal' | 'cobalt' | 'volt'
Each preset is checked against WCAG AA in light and dark mode. To create your own, copy a preset block in src/styles/global.css and change --sj-accent, --sj-on-accent (text on the accent) and --sj-accent-ink (accent-colored text). Check contrast before you ship: text needs 4.5:1.
The neutral colors (--sj-bg, --sj-ink and friends) are defined once for light and once for dark mode in the same file. Components never use raw hex values, so changing a token changes the whole site.
Social images are rendered at build time and use OG_COLORS in src/lib/og.tsx. Update those too when you rebrand.
Fonts
Fonts are self-hosted through Fontsource:
- Bricolage Grotesque for headings
- Geist for text
- Geist Mono for numbers and pay
To change them, install another Fontsource package, update the imports at the top of src/styles/global.css, and change --font-display, --font-sans and --font-mono.
Copy and languages
Every visible string lives in src/i18n/ui.ts, once for English (en) and once for Indonesian (id). TypeScript checks that both languages have every key.
To add a language:
- Copy the
enobject insrc/i18n/ui.ts, translate it and add it toui. - Register it in
LOCALESinsrc/i18n/index.ts. - Add it to
i18n.localesinastro.config.mjs. - Copy
src/pages/id/tosrc/pages/<code>/.
Job descriptions and company profiles are not translated. They are written by employers.
Photos
The demo uses placeholder photos from Picsum. Replace the cover URLs in src/content/companies/companies.json and the two images in src/views/HomeView.astro. Put your own photos in public/images/ and use paths like /images/office.jpg.
Every photo gets the signature duotone treatment automatically.