Website Template - Quick Start Guide

This is a clean, ready-to-edit Next.js template based on your original website styling.

What's Included

1. Navigation Bar - Sticky header with active page indicators
2. Home Page - Template structure with hero section and tabs (empty content)
3. Resources Page - Full search/filter functionality connected to Cloudflare R2 bucket

File Structure

export/
├── app/                    # Next.js app directory (pages)
│   ├── layout.tsx         # Main layout wrapper
│   ├── page.tsx           # Home page template
│   ├── globals.css        # Global styles & theme colors
│   └── resources/
│       └── page.tsx       # Resources page with search
├── components/            # React components
│   ├── navigation.tsx     # Top navigation bar
│   ├── footer.tsx         # Footer component
│   ├── resource-card.tsx  # Card for displaying resources
│   ├── sort-dropdown.tsx  # Sort selector
│   ├── type-filter.tsx    # Type filter buttons
│   └── ui/               # Base UI components
├── lib/                   # Utility functions
│   ├── api.ts            # API connection to Cloudflare
│   └── utils.ts          # Helper functions
├── types/                # TypeScript types
│   └── resources.ts      # Resource data types
└── Config files          # Next.js, Tailwind, etc.

## How to Customize

### 1. Colors & Theme
Edit `app/globals.css` - Look for the `:root` section with CSS variables:
- `--background` - Main background color
- `--foreground` - Text color
- `--primary` - Primary buttons/links
- `--accent` - Highlight color

Colors are in HSL format: `hue saturation% lightness%`

### 2. Navigation Links
Edit `components/navigation.tsx` - Find the `links` array:
```typescript
const links = [
  { href: '/', label: 'Home' },
  { href: '/resources', label: 'Resources' },
]

3. Home Page Content

Edit app/page.tsx:

• Replace placeholder text in the hero section
• Add your own tab content
• Change image paths (currently /Stars.jpg and /Tom-semple-pfp.jpg)

4. API Connection (Resources)

Edit lib/api.ts:

• Set NEXT_PUBLIC_API_URL environment variable to your backend URL
• The backend should serve resources from Cloudflare R2

5. Resource Types

Edit components/type-filter.tsx to add/remove filter buttons

Setup Instructions

1. Install dependencies:

npm install

2. Create .env.local file:

NEXT_PUBLIC_API_URL=https://your-backend-url.com

3. Run development server:

npm run dev

4. Open http://localhost:3000

Key Components Explained

Navigation Bar

• Sticky to top of page
• Highlights current page
• Responsive design

Resources Page

• Fetches data from API on load
• Search by title, description, tags, category
• Sort by date or alphabetically
• Filter by type (YouTube, AI, Tool)
• Infinite scroll for pagination
• Loading skeletons while fetching

Home Page Template

• Hero section with background image
• Profile image
• Tab interface for different content sections

Styling System

This template uses Tailwind CSS with custom theme variables. Common patterns:

• container - Centers content with max-width
• text-foreground - Uses theme text color
• bg-background - Uses theme background
• border-accent - Uses theme accent for borders
• hover: prefix - Hover effects
• md: prefix - Applies on medium screens and up

Next Steps

1. Add your content to the home page
2. Create additional pages by adding folders to /app
3. Connect to your backend API
4. Deploy to Vercel or your hosting platform

Need help? Check the inline comments in each file!

project-tracker-website