CLAUDE.md

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

Project Overview

This is a Quarto-based personal website for Kinelytics, a data science and analytics portfolio site. The site showcases projects, blog posts, and professional information about Michal Kinel. The website is manually deployed to GitHub Pages using quarto publish gh-pages.

Architecture & Structure

Core Technology Stack: - Quarto: Static site generator that combines markdown, R, and other languages - R Project: The site is structured as an R project (kinelytics.Rproj) - SCSS/CSS: Custom styling using Lux theme with custom overrides - GitHub Pages: Deployment target (manual publish)

Key Configuration Files: - _quarto.yml: Main Quarto configuration defining site structure, navigation, and theming - _brand.yml: Brand identity configuration including colors, fonts, and logos - posts/_metadata.yml: Default metadata for blog posts including author, date format, and ToC settings

Content Structure: - Root .qmd files: Main site pages (index, about, contact, blog, projects) - posts/: Blog post directory with individual .qmd files - projects/: Project showcase directory - styles/: Custom SCSS files for theming - logos/ & images/: Static assets

Deployment: - Manual deployment using quarto publish gh-pages - Publishes to gh-pages branch which is served by GitHub Pages - Site URL: https://kinelytics.es/

Development Commands

Build and Preview:

# Render the entire site
quarto render

# Preview site locally with live reload
quarto preview

# Render specific file
quarto render path/to/file.qmd

Project Management:

# Create new blog post
quarto create blog posts/post-title.qmd

# Check Quarto installation and project status
quarto check

Content Development: - Blog posts go in posts/ directory as .qmd files - All posts inherit metadata from posts/_metadata.yml - Projects are documented in the projects/ directory - Images should be stored in images/ or linked externally (Flickr is used for blog images)

Styling and Branding

The site uses a custom theme based on Bootstrap’s Lux theme with extensive customization:

Color Palette (defined in _brand.yml): - Primary: #1f3a3d (blue-green) - Secondary: #2c5e68 (green) - Background: #f0f5ef (white) - Text: #142021 (black)

Typography: - Base font: Exo 2 (Google Fonts) - Monospace: Fira Mono (Google Fonts) - Headings: Exo 2 Bold (weight: 800)

Custom Styling: - Main customizations in styles/kinelytics-lux.scss - Logo variants for different contexts (header, full, icon)

Content Guidelines

Blog Posts: - Use Spanish language for content (site is in Spanish) - Include categories in frontmatter for proper organization - Images are typically hosted on Flickr and embedded - Use descriptive filenames with dates (e.g., post-0001.qmd)

Navigation: - Main navigation defined in _quarto.yml - Includes Home, Proyectos (Projects), Blog, Sobre Mí (About), Contacto (Contact) - Social links to GitHub and LinkedIn in navbar

Deployment Notes

Manual Deployment Process:

Make changes in main branch
Commit and push changes to GitHub: git add . && git commit -m "message" && git push
Run quarto publish gh-pages to render and deploy the site
Site updates will be visible at https://kinelytics.es/ after a few minutes (GitHub Pages cache)

Important: - Deployment is MANUAL, not automatic on push - Always use quarto publish gh-pages to update the live site - The gh-pages branch contains the rendered HTML output - The main branch contains the source .qmd files - Use Ctrl+Shift+R (hard refresh) in browser to see changes immediately