Data & AI freelance platform. Corporate site for Ditaik, connecting businesses with specialized freelancers in data engineering and artificial intelligence.
- Stack: Astro v5, Tailwind CSS v3, React (islands), Framer Motion
- Content: French; static generation with View Transitions
- Theme: Class-based dark mode, OS preference, localStorage persistence
git clone https://github.com/josbyb2020/ditaik-website.git
cd ditaik-website
npm install
npm run devOpen http://localhost:4321. Production build:
npm run build
npm run preview| Script | Command | Purpose |
|---|---|---|
dev |
astro dev |
Dev server, hot reload |
build |
astro build |
Output to dist/ |
preview |
astro preview |
Serve dist/ locally |
ditaik-website/
├── public/ # Static assets (copied as-is)
│ └── assets/
│ ├── favicon_io/ # Favicons (ico, 16, 32, 180, 192, 512, manifest)
│ └── favicon.png # Optional fallback
├── src/
│ ├── components/
│ │ ├── react/ # React islands (HeroAnimation, SpotlightCard)
│ │ └── TechTicker.astro
│ ├── layouts/
│ │ └── Layout.astro # Shell: nav, footer, theme toggle, skip link, mobile menu
│ ├── pages/ # File-based routes
│ │ ├── index.astro # /
│ │ ├── services.astro # /services
│ │ ├── freelance.astro # /freelance
│ │ ├── about.astro # /about
│ │ └── contact.astro # /contact
│ └── styles/
│ └── global.css # Tailwind, focus, skip link, reduced motion
├── docs/
│ ├── README.md # Documentation index
│ └── ui-architecture-review.md # Design system and accessibility
├── astro.config.mjs
├── tailwind.config.mjs
└── package.json
- Astro:
astro.config.mjs, React integration, Tailwind, View Transitions - Tailwind:
tailwind.config.mjs,darkMode: 'class', custom colors (electric,slate), Inter Tight font - Environment: No required env vars for build; optional
.envfor future server/API use
Design tokens (brand):
| Token | Value | Usage |
|---|---|---|
| Primary | #FF4400 |
Accent, CTAs, focus |
| Background | slate-100 / slate-950 |
Light / dark |
| Font | Inter Tight | Body, headings |
Dark mode is class-based and applied on <html>:
- Initial load: Inline script in
<head>runs before paint; readslocalStorage.themeorprefers-color-scheme(no flash). - Toggle: Navbar button (desktop + mobile menu) toggles
darkclass and writeslocalStorage.theme. - OS sync:
matchMedia('prefers-color-scheme')updates theme when the user has no stored preference.
All UI uses Tailwind dark: variants; global.css sets CSS variables for body background/foreground.
Build output is static in dist/. Deploy that folder to any static host:
- Vercel / Netlify / Cloudflare Pages: Connect repo; build command
npm run build, outputdist/ - Custom: Upload
dist/to your server; ensure redirects for SPA-like routes if needed (e.g./*→index.htmlfor client-side routing; Astro default is static HTML per route, so no special redirects required)
Detailed project docs live in docs/:
| Document | Description |
|---|---|
| Documentation index | Overview of all docs |
| Design system and accessibility | Design tokens, a11y conventions, component overview |
For version history and release notes, see CHANGELOG.md and VERSIONING.md.
- License: © 2026 Ditaik. All rights reserved.
- Email: contact@ditaik.org
- Location: Paris, France