❤️ A modern and open-source developers portfolio template that can automatically import Github profile and repository information, made by Nuxt ecosystem ❤️
English
·
简体中文
·
日本語
Directory
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 20+
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
- Clone or download this project.
- Ensure you have
Docker Desktop
installed on your computer. - Install the
Docker extension
in yourVScode
. - Right-click the
Dockerfile
in this project and select theBuild Image
option. - 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 theutils
folder within theserver
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
andContact
pages with appropriate information - Have fun and enjoy customizing your portfolio
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.
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.
The project developed by gaomingzhao666@Nano