Skip to content

CLAUDE.md

Latest commit

 

History

History
43 lines (27 loc) · 2.09 KB

CLAUDE.md

File metadata and controls

43 lines (27 loc) · 2.09 KB

CLAUDE.md

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

Project Overview

Static personal portfolio site for Ferre De Belie, hosted on GitHub Pages at ferredebelie.be. No build tools, frameworks, or dependencies — just plain HTML and CSS.

Development

Open index.html in a browser. No build step, no dev server required.

Architecture

The site is a single-page "skill radar" visualization with three concentric orbiting rings representing skill proficiency levels:

  • Outer ring (orbit-path-700): "TO DO" — technologies to learn
  • Middle ring (orbit-path-500): "IN PROGRESS" — currently learning
  • Inner ring (orbit-path-300): "DONE" — proficient technologies

Each technology is an .orbiting-circle element with a logo image that animates around its ring. The center shows a profile photo.

Key files

  • index.html — Single page with nav bar and nested orbit rings
  • css/main.css — Layout, sizing, nav bar, orbit ring structure. Uses min(vw, vh) units throughout for viewport-responsive sizing
  • css/animation.css — CSS keyframe animations for orbiting circles. Each ring size (300/500/700) has 8 directional animation variants (clockwise/anticlockwise × right/left/up/down). Circles are assigned animations via nth-child(8n+N) selectors
  • logos/ — Technology and social media icons (PNG format)

Adding a new technology

  1. Add the logo image to logos/
  2. Add an <a class="orbiting-circle"> element inside the appropriate orbit-path-* div in index.html
  3. The nth-child CSS selectors in animation.css automatically assign orbit animations — no CSS changes needed unless adjusting animation parameters

Animation system

Orbit radii must match between main.css (ring border width) and animation.css (translateX/Y distances):

  • 300 ring: 20vw/20vh translate distance, 40vw/40vh ring width
  • 500 ring: 32.5vw/32.5vh translate distance, 65vw/65vh ring width
  • 700 ring: 45vw/45vh translate distance, 90vw/90vh ring width

The translate distance is always half the ring width.