The website for Cloudflare Research, showcasing our work in building a better Internet through research and implementation.
/
βββ content/
β βββ people/ # Team member profiles
β βββ presentations/ # Research presentations
β βββ publications/ # Research papers and publications
β βββ tags/ # Topic tags
βββ public/
β βββ fonts/
β βββ images/
β βββ ...
βββ src/
β βββ components/
β β βββ home/ # Homepage-specific components
β β βββ ui/ # Reusable UI components
β β βββ ...
β βββ layouts/
β β βββ base.astro
β β βββ interior.astro
β βββ pages/
β β βββ focus/ # Focus area pages (Private, Safe, Fast, etc.)
β β βββ people/ # People directory and profiles
β β βββ index.astro # Homepage
β β βββ ...
β βββ styles/
β β βββ global.css
β βββ lib/ # Utility functions and constants
βββ package.json
- Framework: Astro - Static site generator with partial hydration
- UI Components: React components with Radix UI
- Styling: Tailwind CSS v4
- Content: Astro Content Collections for type-safe content management
- Icons: Custom SVG sprite system via lemon-lime-svgs
- Deployment: Cloudflare Workers
All commands are run from the root of the project:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run icons |
Generate SVG sprite from icons in /other/svg-icons |
npm run ui |
Add shadcn/ui components |
Content is managed through Astro's Content Collections located in the /content directory:
- People: Team member profiles with avatars, positions, and bios
- Publications: Research papers with authors, years, and related interests
- Presentations: Conference talks and keynotes
- Tags: Topic categorization for filtering content
The site uses a custom design system with:
- Responsive breakpoints: mobile (< 640px), tablet (640px-1024px), desktop (1024px+)
- Dark mode support via CSS custom properties
- Custom utility classes for headings, subheadings, and layout components
- Focus areas with distinct visual identities
- Focus Areas: Five research pillars (Private, Safe, Fast, Reliable, Measurable)
- Publications Grid: Filterable grid of research papers and blog posts
- People Directory: Team member profiles with publications
- Presentations: Video presentations and keynotes
- Responsive Navigation: Mobile hamburger menu with full-screen overlay
- Featured Research: Highlighted research on homepage
The site is fully responsive with:
- Mobile-first approach
- Hamburger menu for mobile navigation
- Adaptive grids (1, 2, or 3 columns based on screen size)
- Responsive typography and spacing
- Touch-friendly interactive elements
The site is deployed on Cloudflare Workers with automatic deployments (via Workers Builds) from the main branch.