# schreifuchs.ch

Personal portfolio website for Schreifuchs, featuring photography, informatics, music, and video.

The site is built with **Svelte 5** and **SvelteKit**, and it is powered by a dynamic **Nextcloud** backend via WebDAV.

## Features

- **Dynamic Content:** Pages are automatically discovered based on the folder structure in Nextcloud.
- **Hidden Sites:** Folders starting with `_` are excluded from the navigation menu but remain accessible via direct links.
- **Markdown Driven:** Content for each page is fetched from a corresponding Markdown file.
- **Image Optimization:** Automatic image resizing via Nextcloud's Preview API for optimized delivery and `srcset` support.
- **Asset Proxying:** Images and attachments are securely streamed from Nextcloud through a server-side proxy.
- **Performance:** In-memory caching for Nextcloud requests (15-minute TTL).
- **Responsive Design:** Styled with Tailwind CSS, optimized for all screen sizes.

## Tech Stack

- **Framework:** Svelte 5 (Runes) & SvelteKit
- **Styling:** Tailwind CSS
- **Backend:** Node.js (via `@sveltejs/adapter-node`)
- **Integration:** `webdav` library for Nextcloud communication
- **Content:** `@ts-stack/markdown` for rendering

## Configuration

The application requires the following environment variables in a `.env` file:

```env
NEXTCLOUD_URL=https://your-nextcloud-instance.com
NEXTCLOUD_USER=your_username
NEXTCLOUD_PASSWORD=your_app_password
NEXTCLOUD_BASE_DIR=WebsiteContent  # Optional: Root folder for site content
```

## Content Management

To add or update content, manage files in your configured Nextcloud directory:

1.  **Create a Page:** Create a folder (e.g., `Travel`).
    - **Hidden Sites:** To hide a page from the navigation menu, prefix the folder name with an underscore (e.g., `_Secret`). It will still be accessible at `/secret`.
2.  **Add Content:** Inside that folder, create a Markdown file named after the folder (e.g., `Travel.md` or `Secret.md` for `_Secret`).
3.  **Add Header Image:** Upload a file named `cover.webp`, `cover.jpg`, or `cover.png` to the folder. This will be used as the header on the page and the tile on the homepage.
4.  **Add Assets:** Any other images or files uploaded to the folder can be linked in the Markdown.

## Development

Install dependencies:

```bash
pnpm install
```

Start the development server:

```bash
pnpm run dev
```

## Building

Build for production (Node.js):

```bash
pnpm run build
```

The output will be in the `build/` directory, ready to be served by Node.

## Image Processing

To optimize images before uploading to Nextcloud:

```bash
convert input.png -resize 3000 -quality 80 output.webp
```