Nano Portfolio

💖 A portfolio of developers made full-stackly by Nuxt3 and the official supported libs form it 💖

English · 简体中文 · 日本語

Directory

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

Introduction of Project

The image shown here is a about-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)

How to run this application

Clone this project

$ https://github.com/gaomingzhao666/nano-portfolio.git # clone the project
$ cd nano-portfolio
$ pnpm install # install dependencies that this project needs
$ pnpm dev # run

Use a Dockerfile to Create a Container

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

Utilize this completely open-source project, released under the MIT license, to create your own portfolio. It automatically imports information from your GitHub repositories and your profile using your GitHub account. Let's explore how!

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)