https://github.com/gaomingzhao666/nano-portfolio
A modern and SEO friendly dev portfolio template that can automatically import information from Github, made by Nuxt, Typescript, Nuxt UI, Tailwind, MongoDB and Resend
https://github.com/gaomingzhao666/nano-portfolio
i18n mongodb nuxt nuxtui ocktokit portfolio resend tailwindcss typescript
Last synced: 2 months ago
JSON representation
A modern and SEO friendly dev portfolio template that can automatically import information from Github, made by Nuxt, Typescript, Nuxt UI, Tailwind, MongoDB and Resend
- Host: GitHub
- URL: https://github.com/gaomingzhao666/nano-portfolio
- Owner: gaomingzhao666
- License: mit
- Created: 2024-03-03T06:31:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-10T03:36:54.000Z (2 months ago)
- Last Synced: 2025-08-10T04:16:47.191Z (2 months ago)
- Topics: i18n, mongodb, nuxt, nuxtui, ocktokit, portfolio, resend, tailwindcss, typescript
- Language: Vue
- Homepage: https://nano-portfolio-ruby.vercel.app
- Size: 6.2 MB
- Stars: 27
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README-CN.md
- License: LICENSE
Awesome Lists containing this project
README
[![Stargazers][stars-shield]][stars-url]
[![MIT License][license-shield]][license-url]
[![Release][release-shield]][release-url]
目录
## 项目介绍
> 上方是中等大小的主页截图, [点击此处](https://github.com/gaomingzhao666/nano-portfolio/tree/main/public/SCREENSHOT) 可查看更多详细截图。
Nano-portfolio 是一个与 Github Octokit 和 Nuxt3 生态结合的开发者个人简介网页应用，其使用的大部分依赖被官方所支持和维护，其中包括 `Nuxt-UI` `Nuxt-Mongoose` `Pinia` `i18n` 等。所有模块均与 Nuxt3 所兼容，库内所有代码均使用组合式 API 以及 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 以上版本
## 安装
我们提供了两种方法来安装并运行此项目，请任选其一
### 克隆并运行此项目 - 推荐方法
克隆此代码仓库并移动至项目文件夹
```sh
$ https://github.com/gaomingzhao666/nano-portfolio.git # 克隆
$ cd nano-portfolio
```
根据你设备上安装的包管理器安装依赖并运行此项目
```sh
# pnpm - 推荐
$ pnpm install # 安装依赖
$ pnpm dev # 运行
```
```sh
# npm - Node 默认包管理器
$ npm install # 安装依赖
$ pnpm run dev # 运行
```
```sh
# yarn
$ yarn # 安装依赖
$ yarn run dev # 运行
```
### 使用 docker 制作容器
1. 克隆或者下载此项目.
2. 确保电脑中已安装 `Docker Desktop`.
3. Install the `Docker extension` in your `VScode`.
4. 右击 `Dockerfile` 并选择 `Build Image` 选项.
5. 打开 `Docker Desktop` 启动此容器.
## 如何使用此项目并自定义
### 总览
此项目使用 MIT 开源协议发布， 它可以基于 GitHub 账户自动导入仓库信息和个人资料。
### 步骤
- [生成 GitHub Personal Access Token](https://docs.github.com/en/enterprise-server@3.9/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens).
- 前往 于 `server` 目录下 `utils` 文件夹中的 `githubInfo.ts` 文件
- 使用此前生成的 `Personal Access Token` 替代原有 Token， 这可以使得后端制作的 API 可以正确识别新 Token 下的 Github 账户
- 更新 `About` 和 `Contact` 页面组件的数据
- 大功告成
> 勿将 token 上传至公开仓库，而是使用环境变量替代。
## SEO 解决方案
### 自定义配置
```ts
// 参考 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: {
// 告知Google.com不要索引/test和/error 页面
disallow: ['/test', '/error'],
},
ogImage: {
enabled: false,
},
```
请参阅此[文档](https://nuxtseo.com/docs/nuxt-seo/guides/using-the-modules)以获取完整指南。
### 各页面的 I18n
一切开箱即用，您可以从 `/src/i18n/seo/` 文件夹中配置各个页面的 SEO 元数据，并根据您的需求进行修改。
## 贡献者
此项目由 gaomingzhao666@Nano 所开发
## 开源协议
[MIT License](https://github.com/gaomingzhao666/nano-portfolio/blob/main/LICENSE)
[stars-shield]: https://img.shields.io/github/stars/gaomingzhao666/nano-portfolio?style=for-the-badge
[stars-url]: https://github.com/gaomingzhao666/nano-portfolio/stargazers
[license-shield]: https://img.shields.io/badge/license-MIT-green?style=for-the-badge
[license-url]: https://github.com/gaomingzhao666/nano-portfolio/blob/main/LICENSE
[release-shield]: https://img.shields.io/github/v/release/gaomingzhao666/nano-portfolio?style=for-the-badge
[release-url]: https://github.com/gaomingzhao666/nano-portfolio/releases
```
```