Code Monkey home page Code Monkey logo

canvas's Introduction

Portfolio Social Preview

Canvas template

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.

Demo

You can see a live demo at canvas.hrcd.fr.

Deploy with Vercel

Deploy with Vercel

Features

Quick Setup

  1. Clone this repository if you have access or download it from the store
git clone [email protected]:HugoRCD/canvas.git
  1. Install dependencies
bun install
  1. Start development server
bun dev
  1. Generate static project
bun generate
  1. Start production server
bun 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.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 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. For the blog open graph image, go to the content/articles directory and change the image key in the Markdown file of the article.

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

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. 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.
  7. Wait for the maintainers to review your pull request.
  8. Once approved, the pull request will be merged in the next release !

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


🤖 auto updated with automd (last updated: Thu May 16 2024)

canvas's People

Contributors

hugorcd avatar renovate[bot] avatar nuxt-studio[bot] avatar imgbotapp avatar

Stargazers

 avatar TerrniT avatar K9Ctec avatar Andy Lu avatar sudo@x0.tn avatar Selfet ERSARAÇ avatar Alexis avatar Bruno Panassi avatar Mateus Braga avatar  avatar Mac avatar Justin Ang avatar Pavezi avatar Ronnie Grover avatar Fluttershy avatar Matthias A. avatar Onurcan Sevinc avatar ᴛᴇꜱʜᴀɴᴇ ᴄʀᴀᴡꜰᴏʀᴅ avatar ML avatar Muhammad Ubaid Raza avatar Elia Bieri avatar LiveSource avatar Saeid Zareie avatar Al-Khawarizmi avatar Như Phú avatar Zhazha_JiaYiZhen avatar Alexandre Nédélec avatar Ryan avatar Thomas Marrec avatar Viki Val avatar  avatar naime-hossain avatar Faisal Fajri avatar Meir Roth avatar  avatar Larra Su avatar Mohammed Zeeshan avatar Laurent Egbakou avatar  avatar Christian Rotzoll avatar Oman avatar Manuel Blanco avatar Paul avatar Georges KABBOUCHI avatar Daniel Roe avatar David Tai avatar  avatar  avatar Aditia Dwi Pratomo avatar Sébastien Chopin avatar

Watchers

 avatar K9Ctec avatar  avatar

canvas's Issues

Add social health files

Description

Add release.yml, etc... to improve repo quality

Additional context

No response

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

  • chore(deps): update dependency @vueuse/core to v10
  • chore(deps): update dependency @vueuse/nuxt to v10
  • chore(deps): update dependency node to v20
  • chore(deps): update dependency nuxt-svgo to v4
  • chore(deps): update dependency resend to v3
  • chore(deps): update dependency sitemap to v8
  • 🔐 Create all pending approval PRs at once 🔐

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

  • chore(deps): update all non-major dependencies (@nuxt/devtools, @nuxthq/studio)

Detected dependencies

bun
package.json
  • vue-sonner ^1.1.2
  • @iconify-json/lucide ^1.1.188
  • @nuxt/devtools ^1.3.1
  • @nuxt/eslint-config ^0.3.13
  • @nuxt/fonts ^0.7.0
  • @nuxt/image 1.7.0
  • @nuxt/ui ^2.16.0
  • @nuxthq/studio ^1.1.0
  • @vueuse/core ^9.13.0
  • @vueuse/nuxt ^9.13.0
  • automd ^0.3.7
  • eslint ^9.3.0
  • nuxt ^3.11.2
  • nuxt-og-image ^2.2.4
  • nuxt-svgo ^3.7.0
  • resend ^0.17.2
  • sitemap ^7.1.2
github-actions
.github/workflows/label-pr.yml
  • actions/github-script v7.0.1@60a0d83039c74a4aee543508d2ffcb1c3799cdea
.github/workflows/semantic-pull-request.yml
  • amannn/action-semantic-pull-request v5
  • marocchino/sticky-pull-request-comment v2
  • marocchino/sticky-pull-request-comment v2
nvm
.nvmrc
  • node 18.20.3

  • Check this box to trigger a request for Renovate to run again on this repository

Add Nuxt Fonts

Description

Use nuxt font to install all custom fonts

Additional context

No response

Switch to Nuxt Content Driven Mode

Description

Enhance full support for content-driven to simplify modifications using Nuxt Studio, enhance internationalization support with improved locales switching, and more!

Additional context

No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.