01Project management
AI-supervised project management
Scoping and steering of the entire project via Claude Code: structured prompts, iterations, corrections and real-time decisions. All HTML, CSS and JS files were generated, corrected and optimised under AI supervision over 24 hours.
02Design / UX
Information architecture
Definition of the full site map (~20 pages), internal linking in 3 clicks maximum (projects → tasks, expertise → tasks) and 5 templates with strategic zoning and user journeys.
03Design / UX
Custom design system
Creation of a complete design system: CSS variables (colours, typography, spacing, radius), 5 custom page templates, consistent visual hierarchy, reusable components (buttons, badges, cards, dividers, topbar).
04Development
Scroll-aware AI topbar
Design of a distinctive topbar (dark gradient, AI badge, shimmer animation) injected dynamically via JS without modifying any HTML files. Hide/show behaviour on scroll, with automatic bilingual FR/EN text.
05Development
HTML / CSS / JS integration
Classic folder structure, modular shared CSS (design-system, nav, hero, sections). Smooth animations: fadeUp, role slider, dynamic task filters, image lightbox, scroll-tracked active subnav.
06Development
Bilingual FR / EN site
Creation of the full site in English (~20 additional pages), with a language selector in the navigation, cross-version link management and adapted contact form copy.
07Content / Writing
Content writing & integration
~20 pages of content written and integrated directly via Claude Code in the terminal, with no back-office. Project tasks, service descriptions, education and experience pages — faster than any traditional CMS.
08Content / Writing
Auto-generated content from Asana
Export of Asana project dashboards from past projects, then automated generation of task content (titles, descriptions, categories) via AI from those exports. Significant time saving on content production.
09Content / Writing
AI-generated visuals
Professional portrait and project mockup visuals created via generative AI. Integrated directly into hero templates and project cards.
10Marketing
CTA strategy & lead generation
Strategic placement of call-to-actions on every page: hero, project subnav, mid-page sections and footer. Journey optimised to maximise conversion towards the contact form or phone.
11Marketing
Contact forms & deliverability
Contextual form at the bottom of every project and service page, with a hook tailored to the context. Integration of the Formspree API for reception and deliverability. AJAX handling with no page reload, managing send, success and error states.
12Architecture / IS
Domain, hosting & SSL
Registration of gregoirepuget.com, configuration of high-performance static hosting and SSL certificate setup. Maximum performance: no server processing time, files served directly.
13Project management
Semantic Git versioning
Git versioning with semantic numbering (v1.0 → v1.2 → v2.0) and tags at each milestone. Every major update (EN version, AI topbar, CI/CD) corresponds to a numbered release.
14Architecture / IS
Automated CI/CD pipeline
GitLab CI/CD pipeline configuration: automatic continuous deployment triggered on every push to main. The site is updated in production without manual intervention on each new release.
15Architecture / IS
Automated testing
Automatic HTML/CSS/JS validation and internal link checks (broken links, FR/EN version consistency) built into the pipeline. Every versioning push triggers a full test suite before deployment.
