Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 66 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,62 +1,93 @@
# Nuxt Portfolio Template
# fmeyer.dev

[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
Personal website and portfolio for [fmeyer.dev](https://fmeyer.dev), built with Nuxt 4, Nuxt UI, and Nuxt Content.

Use this template to create your own portfolio with [Nuxt UI](https://ui.nuxt.com).
## Stack

- [Live demo](https://portfolio-template.nuxt.dev/)
- [Documentation](https://ui.nuxt.com/getting-started/installation)
- Nuxt 4
- `@nuxt/ui`
- `@nuxt/content`
- TypeScript
- pnpm
- GitHub Actions for CI and deployment

<a href="https://portfolio-template.nuxt.dev/" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/nuxt/portfolio-dark.png">
<source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/nuxt/portfolio-light.png">
<img alt="Nuxt Portfolio Template" src="https://ui.nuxt.com/assets/templates/nuxt/portfolio-dark.png">
</picture>
</a>
## Requirements

## Quick Start
- Node.js 22
- pnpm 10

```bash [Terminal]
npm create nuxt@latest -- -t ui/portfolio
```

## Deploy your own
If you use Corepack:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=portfolio&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fportfolio&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fportfolio-dark.png&demo-url=https%3A%2F%2Fportfolio-template.nuxt.dev%2F&demo-title=Nuxt%20Portfolio%20Template&demo-description=A%20sleek%20portfolio%20template%20to%20showcase%20your%20work%2C%20skills%20and%20blog%20powered%20by%20Nuxt%20Content.)
```bash
corepack enable
corepack prepare pnpm@10.30.3 --activate
```

## Setup
## Getting started

Make sure to install the dependencies:
Install dependencies:

```bash
pnpm install
```

## Development Server
Copy the example environment file if you need to override the public site URL for local generation or preview builds:

```bash
cp .env.example .env
```

Start the development server on `http://localhost:3000`:
Start the local development server:

```bash
pnpm dev
```

## Production
The app runs on [http://localhost:3000](http://localhost:3000).

Build the application for production:
## Available scripts

```bash
pnpm build
```
- `pnpm dev` starts the Nuxt development server.
- `pnpm build` creates the production build.
- `pnpm generate` creates the static output used for deployment.
- `pnpm preview` serves the production build locally.
- `pnpm lint` runs ESLint.
- `pnpm lint:fix` fixes lint issues where possible.
- `pnpm typecheck` runs Nuxt type checking.

Locally preview production build:
## Content structure

```bash
pnpm preview
```
Content is defined with Nuxt Content collections in [`content.config.ts`](/Users/fmeyer/Developer/personal/fmeyer.dev/content.config.ts).

- [`content/index.yml`](/Users/fmeyer/Developer/personal/fmeyer.dev/content/index.yml) drives the homepage content.
- [`content/labs.yml`](/Users/fmeyer/Developer/personal/fmeyer.dev/content/labs.yml) defines the overview page for labs.
- [`content/labs/`](/Users/fmeyer/Developer/personal/fmeyer.dev/content/labs) contains individual lab entries.
- [`content/speaking.yml`](/Users/fmeyer/Developer/personal/fmeyer.dev/content/speaking.yml) defines the speaking landing page.
- [`content/speaking/`](/Users/fmeyer/Developer/personal/fmeyer.dev/content/speaking) contains individual talk entries.

Static assets live in [`public/`](/Users/fmeyer/Developer/personal/fmeyer.dev/public), and the Nuxt application code lives in [`app/`](/Users/fmeyer/Developer/personal/fmeyer.dev/app).

## Deployment

CI runs on every push and executes:

- `pnpm install`
- `pnpm lint`
- `pnpm typecheck`

Deployment runs on pushes to `main` via [`.github/workflows/deploy.yml`](/Users/fmeyer/Developer/personal/fmeyer.dev/.github/workflows/deploy.yml). The workflow:

1. installs dependencies,
2. runs `pnpm generate`,
3. deploys the generated `.output/public/` directory via FTP.

The deployment workflow expects these GitHub repository secrets:

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
- `HOST`
- `USERNAME`
- `PASSWORD`

## Renovate integration
## Notes

Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.
- `NUXT_PUBLIC_SITE_URL` is used for the site URL and OG image generation.
- The repository is configured as a static site build, not a long-running Node server deployment.