This is a fully customizable portfolio template built with Nuxt.js and Tailwind CSS. Use it to showcase your work, testimonials and other information to your clients.
You can see a live demo at canvas.hrcd.fr.
- Built-in Awesome Component & Layout
- NuxtUI for some UI components
- Tailwind CSS
- Working contact form with Resend
- Article & Project Content Type using Nuxt Content
- Nuxt i18n for multi-language support
- Open Graph Image support with Nuxt OG Image
- Nuxt Robots for auto-generate robots.txt
- ESLint with official Nuxt configuration
- Full typescript support
- Optimized images with Nuxt Image
- Vue Composition Collection (Vueuse)
- Fully responsive on all modern browsers
- Professional and minimal design
- Easy to customize
- Auto generated sitemap
- Clone this repository if you have access or download it from the store
git clone git@github.com:HugoRCD/canvas.git- Install dependencies
bun install- Start development server
bun dev- Generate static project
bun generate- Start production server
bun startThis portfolio uses Nuxt Content 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.
- Navigate to the
content/articlesdirectory. - Here, you'll find Markdown files for each article. To modify an article, simply open its Markdown file and make your changes.
- 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.
- Navigate to the
data/directory. - Here, you'll find a
projects.tsfile. To modify the projects, simply open this file and make your changes. - To add a new project, add a new object to the
projectsarray.
Simply go to the data/ directory and do the exact same thing as above. All content works the same way.
This portfolio uses Resend to handle the contact form. To set it up, follow these steps:
- Get your api key from Resend here your api key
- Add your api key in the
.envfile - change the
fromkey in thesendEmailroute in theserver/api/folder, you can customize everything you want in this route - That's it, you're good to go!
To change the main open graph image, go to the app.config.ts file and change the openGrapImage key.
For the blog open graph image, go to the content/articles directory and change the image key in the Markdown file of the article.