Quick Start¶

Get familiar with the project structure and start building.

Project Structure¶

/
├── public/               # Static assets
│   ├── cl_*.svg         # Favicons
│   └── robots.txt
├── src/
│   ├── components/      # React components
│   ├── layouts/         # Astro layouts
│   ├── pages/           # File-based routing
│   └── styles/          # Global styles
├── docs/                # Documentation (you are here)
├── astro.config.mjs     # Astro configuration
└── package.json

Development Workflow¶

1. Start the Dev Server¶

npm run dev

2. Make Changes¶

Edit files in the src/ directory. The dev server will hot-reload your changes.

3. Test Your Changes¶

Navigate to http://localhost:4321 to see your changes live.

4. Build for Production¶

npm run build

This creates an optimized build in the dist/ directory.

5. Preview Production Build¶

npm run preview

Creating a New Page¶

Create a new .astro file in src/pages/
Add your content using the Layout component:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="My New Page">
  <h1>Hello World</h1>
  <p>This is my new page!</p>
</Layout>

The page will be automatically available at /your-filename

Adding a React Component¶

Create a new .tsx file in src/components/
Export your component:

import { useState } from 'react';

export default function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Import and use it in an Astro page:

---
import MyComponent from '../components/MyComponent';
---

<MyComponent client:load />

Styling¶

This project uses Tailwind CSS 4.x with predefined utility classes in src/styles/global.css.

Recommended: Use existing utility classes:

<div class="card">
  <h2 class="section-title">Styled with Existing Classes</h2>
  <button class="btn-primary">Click Me</button>
</div>

Available utility classes:

Layout: - .section-container - Wide container (max-w-6xl) - .section-container-narrow - Narrow container (max-w-4xl)

Typography: - .page-title - Large page heading - .section-title - Section heading (centered) - .subsection-title - Subsection heading (2xl) - .feature-title - Feature/card title (lg) - .text-muted - Muted text color - .text-body - Body text color - .text-heading - Heading text color

Components: - .btn-primary, .btn-secondary - Buttons - .card, .card-hover, .card-featured - Cards - .badge, .badge-primary, .badge-secondary - Tags/badges - .icon-box - Icon container with styling - .info-box, .info-box-featured - Info/CTA boxes

Content: - .prose - Formatted text with typography

Alternative: Use Tailwind utility classes directly:

<div class="bg-gray-900 text-white p-4 rounded-lg">
  <h2 class="text-2xl font-bold">Custom Tailwind Styles</h2>
</div>