Nano Portfolio

❤️ A modern and open-source developers portfolio template that can automatically import Github profile and repository information, made by Nuxt ecosystem ❤️

English · 简体中文

The image shown here is a home page for md-size, click here to see more detailed screenshot for this application.

Nano-portfolio is a developer introduction web application integrated with Github Octokit and Nuxt3 ecosystem that includes Nuxt-UI Nuxt-Mongoose Pinia i18n etc. All of the modules are officially compatible with Nuxt3, and all of the code inside of this project uses composition API and ESM.

• Nuxt3 with composition API
• Pinia
• Vite
• TailwindCSS
• Nuxt-UI
• MongoDB with Mongoose
• Localize with i18n
• Email connection with Resend
• Typescript with ES6+ syntax
• Dockerfile

• NodeJS LTS 22+

Clone this repository and transit to the project folder

$ git clone https://github.com/gaomingzhao666/nano-portfolio.git # clone
$ cd nano-portfolio

Install dependencies and run this project depends on your package manager

# pnpm - recommend
$ pnpm install # install dependencies
$ pnpm dev # run

# npm - Node default package manager
$ npm install # install dependencies
$ pnpm run dev # run

# yarn
$ yarn # install dependencies
$ yarn run dev # run

1. Clone or download this project.
2. Ensure you have Docker Desktop installed on your computer.
3. Install the Docker extension in your VScode.
4. Right-click the Dockerfile in this project and select the Build Image option.
5. Open Docker Desktop and run the container.

You can use this project to create your own portfolio. It automatically imports information from your GitHub repositories and your profile using your GitHub account.

• Generate a GitHub Personal Access Token
• Navigate to the githubInfo.ts file located in the utils folder within the server directory
• Replace the placeholder token with your own Personal Access Token to enable server-side APIs to return your GitHub information
• Update the data on the About and Contact pages with appropriate information
• Have fun and enjoy customizing your portfolio

In step 2, use env variable instead of put plain token on .ts file that can be push to public repository to avoid dangers.

The @nuxtjs/seo module is used to improve SEO performance in this project. You can configure it in the nuxt.config.ts file with some information about your site.

Here is an example of SEO configuration code in nuxt.config.ts:

// see https://nuxtseo.com/
  site: {
    title: 'Nano Portfolio',
    url: 'https://nano-portfolio-ruby.vercel.app',
  },

  schemaOrg: {
    identity: 'Person',
  },

  seo: {
    meta: {
      description:
        'A modern and open-source developers portfolio template that can automatically import Github profile and repository information, made by Vue/Nuxt ecosystem and Octokit APIs',
      themeColor: [
        { content: '#111827', media: '(prefers-color-scheme: dark)' },
        { content: 'white', media: '(prefers-color-scheme: light)' },
      ],

      colorScheme: 'dark light',
    },
  },

  robots: {
    // tell Google.com do not indexing /test and /error pages
    disallow: ['/test', '/error'],
  },
  ogImage: {
    enabled: false,
  },

See this documentation if you want to see a complete guide.

Everything is out of box, you can configure the SEO metadata for each pages from the /src/i18n/seo/ folder, and modify depends on your demand.

The project developed by gaomingzhao666@Nano

MIT License