Skip to content

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

License

Notifications You must be signed in to change notification settings

gaomingzhao666/nano-portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Stargazers MIT License Release


Logo

Nano Portfolio

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

English · 简体中文 · 日本語

Directory

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

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.

See this documentation for a complete setup guide.

useHead vs useSeoMeta vs useServerSeoMeta

You probably will be confuse about which SEO composable I should choose when you getting started with the official documentation on nuxt.com.

In this case, you should use the useServerSeoMeta composable to configure SEO information, because this project have no dynamic data that needs to be share with seo meta information, which means the meta does not need to be reactive as robots will only scan the initial load. So we recommend using useServerSeoMeta as a performance-focused utility that will not do anything (or return a head object) on the client.

Contributor

The project developed by gaomingzhao666@Nano

LICENSE

MIT License

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages