https://github.com/HugoRCD/canvas
Portfolio template made with Nuxt 3, Nuxt Content v3, NuxtUI v3 and TailwindCSS v4
https://github.com/HugoRCD/canvas
boilerplate nuxt nuxt-content nuxtui portfolio tailwindcss template
Last synced: 3 months ago
JSON representation
Portfolio template made with Nuxt 3, Nuxt Content v3, NuxtUI v3 and TailwindCSS v4
- Host: GitHub
- URL: https://github.com/HugoRCD/canvas
- Owner: HugoRCD
- License: apache-2.0
- Created: 2023-06-13T18:43:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-29T11:47:36.000Z (3 months ago)
- Last Synced: 2025-01-30T07:37:55.706Z (3 months ago)
- Topics: boilerplate, nuxt, nuxt-content, nuxtui, portfolio, tailwindcss, template
- Language: Vue
- Homepage: https://canvas.hrcd.fr
- Size: 10.9 MB
- Stars: 188
- Watchers: 3
- Forks: 38
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/funding.yml
- License: LICENSE
Awesome Lists containing this project
README
# Canvas template
This is a fully customizable portfolio template built with [Nuxt.js](https://nuxtjs.org/) and [Tailwind CSS](https://tailwindcss.com/). Use it to showcase your work, testimonials and other information to your clients.
## Demo
You can see a live demo at [canvas.hrcd.fr](https://canvas.hrcd.fr/).
## Deploy to Nuxthub
[](https://hub.nuxt.com/new?repo=HugoRCD/canvas)
## Deploy to Vercel
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FHugoRCD%2Fcanvas&env=NUXT_PRIVATE_RESEND_API_KEY,NUXT_PUBLIC_SITE_URL&envDescription=You%20will%20require%20an%20API%20key%20for%20Resend%20and%20Nuxt%20Studio%2C%20but%20it%20is%20not%20essential%20for%20the%20portfolio%20to%20work.%20Simply%20add%20%22test%2C%22%20for%20example%2C%20and%20edit%20the%20variable%20later.&project-name=canvas-portfolio&repository-name=canvas-portfolio&demo-title=Canvas&demo-url=canvas.hrcd.fr&demo-image=https%3A%2F%2Fcanvas.hrcd.fr%2Fog.png)
## Features
- [Nuxt Content](https://content.nuxt.com/) for easy content management
- Full and simple [Nuxt Studio](https://nuxt.studio/) editor support
- Built-in Awesome Component & Layout
- [NuxtUI](https://ui3.nuxt.com/) v3 components
- [Tailwind CSS](https://tailwindcss.com/)
- Working contact form with [Resend](https://resend.com/)
- [Nuxt i18n](https://i18n.nuxtjs.org/) for multi-language support
- Open Graph Image support with [Nuxt OG Image](https://nuxtseo.com/og-image/getting-started/installation)
- [Nuxt Robots](https://sitemap.nuxt.com/) for auto-generate robots.txt
- [ESLint](https://eslint.org/) with official Nuxt configuration (ESLint v9 with Flat config)
- Full typescript support
- Optimized images with [Nuxt Image](https://image.nuxt.com/)
- [Vue Composition Collection (Vueuse)](https://vueuse.org/)
- Fully responsive on all modern browsers
- Professional and minimal design
- Easy to customize
- Auto generated sitemap
## Quick Setup
1. Clone this repository if you have access or download it from the store
```bash
git clone [email protected]:HugoRCD/canvas.git
```
2. Install dependencies
```bash
pnpm install
```
3. Copy the `.env.example` file to `.env` and fill in the values
```bash
cp .env.exemple .env
```
4. Start development server
```bash
pnpm dev
```
5. Generate static project
```bash
pnpm generate
```
6. Start production server
```bash
pnpm start
```
## How to Modify the Portfolio Content
This portfolio uses [Nuxt Content](https://content.nuxt.com/) to manage the content. Here's how you can modify it:
First check the `app.config.ts` file to change the global configuration of the portfolio, there is a lot of stuff you can change here.
### Writing
1. Navigate to the `content/2.articles` directory.
2. Here, you'll find Markdown files for each article. To modify an article, simply open its Markdown file and make your changes.
3. To add a new article, create a new Markdown file in this directory. The name of the file will be used as the URL slug for the article.
### Works
1. Navigate to the `content/1.works/` directory.
2. Here, you'll find Markdown files for each article. To modify an article, simply open its Markdown file and make your changes.
3. To add a new project, add a new JSON file in this directory.
#### Featured Works
To change the featured works on the homepage, simply add the `featured: true` key to front matter of the markdown file.
### Other Content
Simply go to the `content/` directory and edit any of the Markdown or JSON files to modify the content.
## Setup the Contact Form
This portfolio uses [Resend](https://resend.com/) to handle the contact form. To set it up, follow these steps:
- Get your api key from [Resend](https://resend.com/) here [your api key](https://resend.com/api-keys)
- Add your api key in the `.env` file
- change the `from` key in the `sendEmail` route in the `server/api/` folder, you can customize everything you want in this route
- That's it, you're good to go!
## Contributing
To start contributing, you can follow these steps:
1. First raise an issue to discuss the changes you would like to make.
2. Fork the repository.
3. Create a branch using conventional commits and the issue number as the branch name. For example, `feat/123` or `fix/456`.
4. Make changes following the local development steps.
5. Commit your changes following the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
6. If your changes affect the code, run tests using `pnpm run test`.
7. Create a pull request following the [Pull Request Template](https://github.com/HugoRCD/markdown/blob/main/src/pull_request_template.md).
- To be merged, the pull request must pass the tests/workflow and have at least one approval.
- If your changes affect the documentation, make sure to update it.
- If your changes affect the code, make sure to update the tests.
8. Wait for the maintainers to review your pull request.
9. Once approved, the pull request will be merged in the next release !
Local development
- Clone this repository
- Install latest LTS version of [Node.js](https://nodejs.org/en/)
- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
- Install dependencies using `pnpm install`
- Start development server using `pnpm dev`
- Open [http://localhost:3000](http://localhost:3000) in your browser
Published under the [APACHE](https://github.com/hugorcd/canvas/blob/main/LICENSE) license.
Made by [@HugoRCD](https://github.com/HugoRCD) and [community](https://github.com/hugorcd/canvas/graphs/contributors) 💛
---
_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Fri Jan 31 2025)_