Vite Emilia

Vite Emilia is a minimalistic portfolio/photography site featuring a masonry grid, page transitions, and large images. It is built with React 19, Vite+, TanStack Start, and Tailwind CSS 4, optimized for Static Site Generation (SSG).

Features

• SSG Ready: Pre-renders all routes into static HTML for maximum performance and SEO.
• Modern Stack: React 19, Vite+, TanStack Start/Router, Tailwind CSS 4.
• Image Optimization: Automatic BlurHash generation and responsive image handling.
• Minimal Design: Clean typography and masonry layout focusing on photography.
• MDX Support: Author projects using MDX with frontmatter.

Installation

To install and run the starter locally, you can use:

vp install
vp dev

The site will be running at http://localhost:5173.

Building and Checking

To build the static site:

vpr build

To run all checks (linting, formatting, type-checking):

vpr check

The generated static files will be in the dist/client directory.

Quick Start

Adding a New Project

Projects are automatically loaded from src/content.

1. Create a new folder inside src/content.
2. Create an index.mdx file and add the frontmatter.
3. Add images to the folder created in step 1.
4. Reference your desired image as your cover in the frontmatter.

Example index.mdx:

---
slug: "/my-project"
cover: "./cover-image.jpg"
date: "2024-03-20"
title: "My New Project"
areas:
  - Photography
  - Design
---

Configuration

• Site Metadata: Edit src/lib/site.config.ts to update the site title, description, and social handles.
• Styling: Edit src/index.css to change theme colors and variables.

Credits

This project is based on Gatsby Starter Portfolio: Emilia by LekoArts.