Nano Portfolio

❤️ A dev portfolio that can automatically import Github profile and repo info, Powered by Nuxt ecosystem and Github APIs ❤️

English · 简体中文 · 日本語

Directory

• Introduction of Project
• Build with
• Runtime Requirement
• Getting Started
• How to use this project for your case
• About cors error
• Contributor
• LICENSE

Introduction of Project

The image shown here is a index-page for laptop-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.

(back to top)

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

(back to top)

Runtime Requirement

• NodeJS LTS 20+

(back to top)

Getting Started

Clone and Run

$ https://github.com/gaomingzhao666/nano-portfolio.git # clone
$ cd nano-portfolio
$ pnpm install # install dependencies
$ pnpm 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.

(back to top)

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

About CORS Error

As an SSR project, we do not need to care about CORS, but if you prefer to set SSR mode as false in the nuxt.config.ts file click here to install a plugin that can solve the CORS problem.

(back to top)

Contributor

The project developed by gaomingzhao666@Nano

(back to top)

LICENSE

MIT License

(back to top)