This is the code for my personal portfolio built with Nuxt and Tailwind CSS.
You can see it live at hrcd.fr.
- Fully integrated with Nuxt Content and using the content driven mode.
- Working contact form with Resend
- Article & Project Content Type using Nuxt Content
- Open Graph Image support with Nuxt OG Image
- Nuxt Robots for auto-generate robots.txt
- ESLint using my personal configuration
- Full typescript support
- Optimized images with Nuxt Image
- Vue Composition Collection (Vueuse)
- Fully responsive on all modern browsers
- 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/hr-folio.git
- Install dependencies
bun install
- Start development server
bun dev
- Generate static project
bun generate
- Start production server
bun start
This 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/2.writing
directory. - 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
content/1.works/
directory. - Here, you'll find JSON files for each project. To modify an project, simply open its JSON file and make your changes.
- To add a new project, add a new JSON file in this directory.
Simply go to the content/
directory and edit any of the Markdown or JSON files to modify the content.
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
.env
file - change the
from
key in thesendEmail
route 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.