HR Folio

This is the code for my personal portfolio built with Nuxt and Tailwind CSS.

Live website

You can see it live at hrcd.fr.

Features

• Fully integrated with Nuxt Content v3
• Article & Project Content Type using Nuxt Content
• Hidden notes section for private notes
• Working contact form with Resend
• Auto-Generated Open Graph Image with Nuxt OG Image
• Nuxt Robots for auto-generate robots.txt
• ESLint using my personal configuration
• Full typescript support
• Optimized images with Nuxt Image
• Fully responsive on all browsers
• Easy to customize
• Auto generated sitemap
• Super easy self-hosted setup
• One-click deploy with Vercel or Coolify

Quick Setup

1. Clone this repository if you have access or download it from the store

   git clone [email protected]:HugoRCD/hr-folio.git
   

2. Install dependencies

   pnpm install
   

3. Start development server

   pnpm dev
   

4. Generate static project

   pnpm generate
   

5. Start production server

   pnpm start
   

How to Modify the Portfolio Content

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.

Writing

1. Navigate to the content/2.writing 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 JSON files for each project. To modify an project, simply open its JSON file and make your changes.
3. To add a new project, add a new JSON file in this directory.

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 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 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!

Setup the Open Graph Image

To change the main open graph image, go to the app.config.ts file and change the openGrapImage key.

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 specification.
6. If your changes affect the code, run tests using pnpm run test.
7. Create a pull request following the Pull Request Template.
   • 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 !

Sponsors

Contributors

Published under the APACHE license. Made by @HugoRCD and community 💛

🤖 auto updated with automd (last updated: Wed Jan 01 2025)