site_web/lanro.eu/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is a personal portfolio website for Roman Felden, a French IT security and systems coordinator based in Grenoble. The site is a static website built with plain HTML and inline CSS - no build tools, frameworks, or external dependencies (other than Google Fonts and inline SVG icons).

Site Structure

The website consists of 4 pages:

• index.html - Landing page with hero section, about info, key skills, and project previews
• cv.html - Full resume/CV page with professional experience, education, skills, languages, and interests
• cv-roman-felden.html - Alternate standalone CV version with a different visual style (gradient background, no navbar)
• projets.html - Detailed project pages (Homelab Proxmox, Boidelo Android app, Custom Ore Gen Minecraft mod, GeoRealmCraft modpack)

All pages are self-contained with embedded CSS in <style> tags.

Design System

The site uses a consistent design system with CSS custom properties defined in :root:

• Primary color: #4f46e5 (indigo)
• Secondary color: #0ea5e9 (sky blue)
• Accent color: #f59e0b (amber)
• Typography: Plus Jakarta Sans (Google Fonts), falling back to system fonts
• Border radius: Variable (6px/12px/20px/28px depending on element)
• Shadows: 4 levels (sm/md/lg/xl)

Key visual patterns:

• Gradient backgrounds for hero sections
• Card-based layouts with hover lift effects
• Inline SVG icons (Heroicons style)
• Consistent navbar with brand logo "RF"
• Responsive design with mobile breakpoints at 768px

Common Editing Tasks

When modifying this site:

1. Update content - All content is directly in HTML. Text is in French throughout.
2. Add new projects - Copy an existing .project-section block in projets.html and add a corresponding preview card in index.html
3. Update CV - Edit experience items in cv.html. Each job has an .experience-item with header, company, location, date badge, and description list.
4. Modify colors - Change CSS custom properties in :root of any page
5. Add pages - Follow the existing structure: navbar, main container, footer

Navigation Structure

The navbar is consistent across main pages (index, cv, projets) with:

• Brand link to index.html
• Three menu items: Accueil, CV, Projets
• Active state highlighting for current page

Language & Content

• Primary language: French (fr)
• Target audience: Recruiters and professional contacts in France
• Tone: Professional, showcasing technical skills and projects

File Organization

lanro.eu/
├── index.html              # Homepage
├── cv.html                 # Main CV with navbar
├── cv-roman-felden.html    # Standalone CV (no navbar, different style)
├── projets.html            # Projects detail page
└── CLAUDE.md               # This file

Important Notes

• All CSS is inline in <style> tags - no external stylesheets
• No JavaScript required (site is fully static)
• Icons are inline SVGs from Heroicons
• Font loaded from Google Fonts (Plus Jakarta Sans)
• Site is designed to work without a server - can be opened directly in browser
• cv-roman-felden.html is a standalone version meant to be shared/downloaded separately