# 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