# Static Website Generator Template

A clean, modern template for generating static websites from Markdown files. Perfect for portfolios, business sites, or personal websites.

## Quick Start

1. **Clone this repository:**
   ```bash
   git clone <repository-url>
   cd tf_site_template
   ```

2. **Customize your site:**
   - Edit `build.ps1` and change the site title, header, and footer text (lines 48-50)
   - Add your content in `content/*.md` files
   - Add images to `images/` folder

3. **Build your website:**
   ```powershell
   pwsh -File build.ps1
   ```

4. **View your site:**
   Open `dist/index.html` in your browser, or serve it with a local web server.

## Features

- ✅ **Dynamic Section Detection** - Automatically creates sections from Markdown files
- ✅ **Blog System** - Full blog functionality with front matter support
- ✅ **Scroll-Snap Navigation** - Smooth scrolling with snap-to-section behavior
- ✅ **Responsive Design** - Works on mobile, tablet, and desktop
- ✅ **Modern Styling** - Glassmorphism effects and smooth animations
- ✅ **Image Management** - Automatic image assignment

## Project Structure

```
.
├── build.ps1              # Build script (customize site name here)
├── styles.css              # Website stylesheet
├── content/               # Your Markdown content
│   ├── about.md           # About section
│   ├── services.md        # Services section
│   ├── contact.md         # Contact section
│   └── blog/              # Blog posts
│       └── welcome.md
├── images/                # Your images
│   ├── background.jpg     # Site background (optional)
│   ├── about1.webp        # Section images (numbered)
│   └── ...
└── dist/                  # Generated website (created on build)
```

## Content Format

### Sections

Create a `.md` file in `content/` for each section:

```markdown
# Section Title

First content block.

---

Second content block.

---

Third content block.
```

**Image Naming:**
- Name images: `{sectionId}{number}.{ext}`
- Example: `about1.webp`, `about2.jpg`, `services1.png`
- First block uses `about1.webp`, second uses `about2.webp`, etc.

### Blog Posts

Create `.md` files in `content/blog/` with front matter:

```markdown
---
title: My Blog Post
date: 2024-01-15
author: Your Name
tags: [tag1, tag2]
image: blog1
---

Your blog post content here...

---

More content sections.
```

## Customization

### Site Information

Edit `build.ps1` (around line 48-50):

```powershell
$siteTitle = "My Website"
$siteHeader = "Welcome to My Website"
$footerText = "My Website"
```

### Styling

Edit `styles.css` to customize:
- Colors (CSS variables at the top)
- Fonts
- Layout
- Animations

### Adding Sections

1. Create a new `.md` file in `content/` (e.g., `portfolio.md`)
2. Add content following the section format
3. Add images: `portfolio1.webp`, `portfolio2.jpg`, etc.
4. Run the build script - the section appears automatically!

### Adding Blog Posts

1. Create a new `.md` file in `content/blog/`
2. Add front matter with title, date, author, tags, and image
3. Add your content below
4. Run the build script - the post appears on the blog page!

## Requirements

- **PowerShell 7+** (for UTF-8 support)
- No other dependencies required!

## Building

```powershell
pwsh -File build.ps1
```

The generated website will be in the `dist/` folder.

## Deployment

The `dist/` folder contains a standard static website. Deploy it to:

- **GitHub Pages** - Enable Pages and point to `dist/` folder
- **Netlify** - Deploy `dist/` folder
- **Vercel** - Deploy `dist/` folder
- **Any static host** - Upload `dist/` contents

## Image Guidelines

### Section Images
- **Naming:** `{sectionId}{number}.{ext}`
- **Examples:** `about1.webp`, `services2.jpg`
- **Format:** WebP recommended, JPG/PNG also work

### Blog Images
- **Naming:** Any name (e.g., `blog1.webp`)
- **Reference:** Use base name in front matter `image:` field

### Background Image
- **Naming:** `background.{ext}`
- **Usage:** Automatically used as site background

## Tips

- Use WebP format for smaller file sizes
- Keep image dimensions reasonable (max 2000px width recommended)
- Use descriptive alt text in markdown image syntax: `![Description](path)`
- Test your site locally before deploying

## License

Free to use and modify for your projects!

## Support

For issues or questions, check the main repository documentation or open an issue.