Nano Portfolio

Nano Portfolio

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

English · 简体中文 · 日本語

Introduction of Project

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.

Build With

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

Runtime Requirement

• NodeJS LTS 20+

Installation

Clone and Run - recommend

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

Use Docker

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.

How to Use This Project for Your Case

Overview

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.

Quick Start

• 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.

SEO Solution

Custom Configuration

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.

I18n for each pages

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.

Contributor

The project developed by gaomingzhao666@Nano

LICENSE

MIT License