Getting Started with Anti-Gravity

Welcome to Anti-Gravity! This guide will walk you through setting up your first project with our modern, minimal theme.

Prerequisites

Before you begin, make sure you have the following installed:

• Node.js (version 18 or higher)
• npm or pnpm (we recommend pnpm for faster installs)
• A code editor (we recommend VS Code)

Installation

Getting started is easy. Clone the repository and install dependencies:

# Clone the repository
git clone https://github.com/antigravity/theme.git my-project

# Navigate to the project
cd my-project

# Install dependencies
npm install

# Start the development server
npm run dev

Your site should now be running at http://localhost:4321.

Project Structure

Here’s an overview of the project structure:

├── public/           # Static assets
├── src/
│   ├── components/   # UI components
│   │   ├── layout/   # Layout components (Navbar, Footer)
│   │   ├── sections/ # Page sections (Hero, Features, etc.)
│   │   └── ui/       # Base UI components (Button, Card, etc.)
│   ├── config/       # Site configuration
│   ├── content/      # Blog and docs content
│   ├── layouts/      # Page layouts
│   ├── lib/          # Utility functions
│   ├── pages/        # Page routes
│   └── styles/       # Global styles
├── astro.config.mjs  # Astro configuration
├── tailwind.config.mjs # Tailwind configuration
└── package.json

Customization

Changing Colors

Anti-Gravity uses CSS variables for theming. Open src/styles/globals.css and modify the color tokens:

:root {
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  /* ... other colors */
}

.dark {
  --color-primary: #6366f1;
  --color-primary-hover: #818cf8;
  /* ... dark mode colors */
}

Updating Site Information

Edit src/config/site.ts to update your site’s name, description, and navigation:

export const siteConfig = {
  name: 'Your Site Name',
  description: 'Your site description',
  // ... other configuration
};

Adding Content

Blog Posts

Create new blog posts in src/content/blog/. Each post should have frontmatter:

---
title: "Your Post Title"
description: "A brief description"
pubDate: 2024-01-15
author:
  name: "Your Name"
tags: ["tag1", "tag2"]
---

Your content here...

Pages

Add new pages in src/pages/. Astro uses file-based routing, so src/pages/about.astro becomes /about.

Deployment

Anti-Gravity works great with any static hosting provider:

• Vercel: npm run build and deploy
• Netlify: Connect your repository for automatic deploys
• Cloudflare Pages: Similar to Netlify

Next Steps

• Explore the component library
• Learn about theming
• Check out the API reference

Happy building! 🚀