noamblog - Noam Sellam’s Personal Blog & Portfolio

Project Overview

Personal data science blog and portfolio at https://noamsellam.com. Built with Quarto, deployed to Cloudflare Pages via GitHub Actions.

Tech Stack

Framework: Quarto (>= 1.4) — static site generator
Languages: R (>= 4.3), Python (for code execution in posts)
Visualization: ggplot2
Interactive: R Shiny dashboards (deployed separately to ShinyApps.io)
Styling: SCSS (custom.scss) + CSS (styles.css)
Deployment: Cloudflare Pages via GitHub Actions (.github/workflows/deploy.yml)
Secrets: CLOUDFLARE_API_TOKEN, CLOUDFLARE_ACCOUNT_ID

Project Structure

_quarto.yml              # Main Quarto config
index.qmd                # Home page with post listing
about.qmd                # About page
projects.qmd             # Projects page (placeholder)
404.qmd                  # Custom 404 page
custom.scss              # Theme variables and SCSS styles
styles.css               # Additional CSS
posts/                   # Blog posts (one folder per post, each with index.qmd)
shiny-apps/              # Interactive Shiny dashboards
_templates/partials/     # Custom header.html and footer.html
_site/                   # Build output (gitignored)
_freeze/                 # Cached computation outputs

Design System — “Ember & Violet”

Token	Hex	Usage
Deep Forest	#2D3A3A	Headings, primary text
Electric Violet	#7F5AF0	Links, interactive elements
Amber	#E09F3E	Tags, hover states, secondary
Warm Canvas	#FAF8F4	Page background
Muted Stone	#8A8E8B	Secondary text, metadata

Fonts: Inter (body), Playfair Display (headings), JetBrains Mono (code) — all from Google Fonts.

Development Commands

quarto preview          # Dev server with live reload (:4848)
quarto render           # Build static site to _site/

Creating New Posts

Create folder: posts/my-post/
Create posts/my-post/index.qmd with frontmatter:

---
title: "Post Title"
description: "Short description"
author: "Noam Sellam"
date: "YYYY-MM-DD"
categories: [tag1, tag2]
draft: false
---

Key Patterns

Posts use code-fold: true and code-tools: true for interactive code blocks
Shiny apps are embedded via iframe: <iframe src="https://noamsellam.shinyapps.io/app-name/" ...>
execute: freeze: auto caches R code output to speed up builds
External links open in new windows (link-external-newwindow: true)
Deploy uses --commit-dirty=true to handle Quarto render artifacts

R Dependencies

install.packages(c("ggplot2", "rmarkdown", "knitr"))

# noamblog - Noam Sellam's Personal Blog & Portfolio ## Project Overview Personal data science blog and portfolio at **https://noamsellam.com**. Built with Quarto, deployed to Cloudflare Pages via GitHub Actions. ## Tech Stack - **Framework:** Quarto (>= 1.4) — static site generator - **Languages:** R (>= 4.3), Python (for code execution in posts) - **Visualization:** ggplot2 - **Interactive:** R Shiny dashboards (deployed separately to ShinyApps.io) - **Styling:** SCSS (custom.scss) + CSS (styles.css) - **Deployment:** Cloudflare Pages via GitHub Actions (.github/workflows/deploy.yml) - **Secrets:** CLOUDFLARE_API_TOKEN, CLOUDFLARE_ACCOUNT_ID ## Project Structure ``` _quarto.yml # Main Quarto config index.qmd # Home page with post listing about.qmd # About page projects.qmd # Projects page (placeholder) 404.qmd # Custom 404 page custom.scss # Theme variables and SCSS styles styles.css # Additional CSS posts/ # Blog posts (one folder per post, each with index.qmd) shiny-apps/ # Interactive Shiny dashboards _templates/partials/ # Custom header.html and footer.html _site/ # Build output (gitignored) _freeze/ # Cached computation outputs ``` ## Design System — "Ember & Violet" | Token | Hex | Usage | |----------------|-----------|--------------------------------| | Deep Forest | #2D3A3A | Headings, primary text | | Electric Violet| #7F5AF0 | Links, interactive elements | | Amber | #E09F3E | Tags, hover states, secondary | | Warm Canvas | #FAF8F4 | Page background | | Muted Stone | #8A8E8B | Secondary text, metadata | **Fonts:** Inter (body), Playfair Display (headings), JetBrains Mono (code) — all from Google Fonts. ## Development Commands ```bash quarto preview # Dev server with live reload (:4848) quarto render # Build static site to _site/ ``` ## Creating New Posts 1. Create folder: `posts/my-post/` 2. Create `posts/my-post/index.qmd` with frontmatter: ```yaml --- title: "Post Title" description: "Short description" author: "Noam Sellam" date: "YYYY-MM-DD" categories: [tag1, tag2] draft: false --- ``` ## Key Patterns - Posts use `code-fold: true` and `code-tools: true` for interactive code blocks - Shiny apps are embedded via iframe: `<iframe src="https://noamsellam.shinyapps.io/app-name/" ...>` - `execute: freeze: auto` caches R code output to speed up builds - External links open in new windows (`link-external-newwindow: true`) - Deploy uses `--commit-dirty=true` to handle Quarto render artifacts ## R Dependencies ```r install.packages(c("ggplot2", "rmarkdown", "knitr")) ```