📄 JLG Consulting Site Specification
🧭 Site Objective
The site jlg-consulting.com is the showcase site of Jean-Louis Guénégo, IT consultant-trainer. Its purpose is to:
- Present Jean-Louis Guénégo’s expertise.
- Highlight his services to three types of clients: companies, local authorities, and startups.
- Reassure the CIOs and HR of large companies as well as SMEs.
- Encourage potential clients to contact him and work with him.
🏗️ General Architecture
- Main Framework: Astro
- Front-end only (no backend)
- Deployment on GitHub Pages with GitHub Actions
- No database
- All data is static or generated at build time (e.g., translation)
🧩 Technical Stack and Dependencies
| Library / Tool | Role |
|---|
astro | Static, lightweight, fast framework. |
@astrojs/react | Integration of React components into Astro. |
react, react-dom | Dynamic components, used especially for interactive modules. |
tailwindcss, @tailwindcss/vite | Utility CSS framework, used for modern, responsive, and customized styling. |
astro-icon | Easy management of SVG icons. |
@astrojs/sitemap | Automatic sitemap generation for SEO. |
openai | Used to automatically translate pages from /fr to /en during the build. |
sharp | Image optimization (size, format) on the fly or at build time. |
ssh2-sftp-client | Deployment via SFTP to OVH, with deploy-sftp.js. |
dotenv | Management of environment variables, especially for the OpenAI key. |
prettier and its plugins | Automatic code formatting (.astro, tailwindcss, etc.). |
🌍 Internationalization
- The user writes the pages in French in
/fr.
- An automatic generation script produces the equivalent pages in
/en.
- Translation is provided by the OpenAI API at build time.
- The site structure is duplicated, allowing for simple routing between
/fr and /en.
🎨 Design
- Minimalist, clear, and professional design.
- Use of Tailwind CSS 4.x.
- Main color:
green-700 from Tailwind, instead of blue.
- The site is fully responsive, with a mobile-first ergonomic design.
- The
.mdx titles are centered and colored (text-primary-700).
- Lists have margins and a neat presentation.
🗂️ Content
- Home
- Services (via a centralized list
menuItems shared between pages)
- About / Bio
- Contact
- Legal Notices
- Optimized images (WebP)
- SVG icons via
astro-icon
⚙️ Internal Features
- Reuse of React components for future dynamic features.
- Centralized variables (
menuItems) for easier maintenance.
- Shared Tailwind configuration with
.mdx.
- Intelligent build system for generating translated pages.
🌐 SEO
- Sitemap automatically generated via
@astrojs/sitemap.
- Appropriate
meta tags per page.
hreflang present for FR/EN alternation.- Clean URLs (
/fr/prestations, /en/services, etc.)
- Use of SVG icons and optimized images (Sharp + WebP)
🚀 Performance
- Static site: fast loading, excellent Lighthouse score.
- No unnecessary JavaScript.
- Use of Astro Islands: only the dynamic React parts are hydrated.
- Tailwind + CSS purge: ultra-light stylesheets.
- Images optimized with Sharp.
♿ Accessibility
- HTML semantics respected (
main, nav, header, footer, etc.).
- Colors compliant with WCAG AA contrast.
- Keyboard navigation ensured.
- Readable text, adaptable font sizes.
🔐 Security
- No personal data collected on the client side.
- No form submissions.
- Secure deployment via SFTP with a private key.
- Sensitive variables (.env) not committed.
📦 Deployment
- GitHub Pages via GitHub Actions.
deploy-sftp.js script for FTP upload to OVH.- Maintenance of the current OVH structure: site + hidden FTP folders.
- Manual or automated deployment possible.
📘 Possible Roadmap (not yet in place)
| Future Feature | Status |
|---|
| Simple admin interface (markdown) | Not planned |
| Internal search engine | To be discussed |
| Contact form | To be discussed |
| Consultation statistics | Not planned |
| Printable PDF version of pages | Idea to explore |