HomePage

A developer-focused personal homepage built with Vue 3. It brings together projects, a GitHub contribution graph, and recent public GitHub activity in a responsive, PWA-enabled interface.

English | 简体中文

This is a secondary development of imsyy/home. The music player, weather, time capsule, Hitokoto, and settings modules from the upstream project have been removed in favor of project and GitHub data presentation.

Features

• Random local wallpapers and a loading animation
• Configurable site identity, social links, and ICP registration
• Combined GitHub pinned repositories and local project links
• GitHub contribution graph for the last year
• Recent public GitHub activity timeline
• Paginated project cards, mouse-wheel navigation, and responsive mobile layouts
• PWA asset caching and update notifications

Stack

• Vue 3 + Vite
• Pinia
• Element Plus
• Swiper
• vite-plugin-pwa
• Cloudflare Workers (optional, for GitHub GraphQL data)

Deployment

Deploy a Full Cloudflare Worker

The button is the shortest route:

1. Click the button.
2. Sign in to Cloudflare and connect GitHub or GitLab.
3. Fill in the Worker name, a GitHub Token (select fine-grained personal access token and Public Repositories (read-only)), and these public site fields:
   • VITE_GITHUB_USERNAME
   • VITE_SITE_AUTHOR
   • VITE_SITE_KEYWORDS
   • VITE_SITE_NAME
   • To configure an ICP record or social links, add these public variables as needed under the form's Advanced settings: VITE_SITE_ICP, VITE_SOCIAL_EMAIL, VITE_SOCIAL_TWITTER, VITE_SOCIAL_TELEGRAM, VITE_SOCIAL_QQ, and VITE_SOCIAL_BILIBILI.
4. Deploy.

You can also deploy from a fork through Git integration, which makes it easy to keep up with updates from this repository:

1. Fork this repository and update wrangler.jsonc in your fork as needed, for example the Worker name and public site variables.
2. Sign in to the Cloudflare Dashboard, create an application under Workers & Pages, select Continue with GitHub, and choose your fork.
3. Enter these commands:
   • Build command: pnpm build:cloudflare
   • Deploy command: pnpm deploy:cloudflare
4. Configure GITHUB_TOKEN as an encrypted variable under the form's Advanced settings.

You can later use GitHub's Sync fork action to pull in updates from this repository; the resulting commit triggers an automatic Cloudflare deployment.

Self-host the Frontend

Copy .env.example to .env, set at least your GitHub username, and adjust the remaining site fields as needed:

VITE_GITHUB_USERNAME="your-github-username"
# Leave empty to use the public GitHub API Worker
VITE_GITHUB_API=""

Install dependencies and build:

pnpm install
pnpm build

The build output is in dist/; upload it to any static hosting provider.

The public GitHub API Worker is used by default. To use your own GitHub Token or API Worker, follow the steps below.

Deploy Your Own API Worker

The Worker uses a GitHub Token to request GraphQL data; the token is never exposed to the browser.

1. Open GitHub token settings, create a fine-grained personal access token, and select Public Repositories (read-only) for repository access.

2. Change the Worker name in workers/wrangler.jsonc if needed.

3. Run the following command and paste the token; it writes the secret to the Worker with that name:

   pnpm exec wrangler secret put GITHUB_TOKEN --config workers/wrangler.jsonc

4. Deploy the Worker:

   pnpm deploy:api

5. Set VITE_GITHUB_API in .env to the deployed Worker URL, then run pnpm build again.

Use .dev.vars and workers/.dev.vars only for local wrangler dev testing. Do not commit them.

Run Locally

Node.js 18 or later is recommended.

# Install dependencies
pnpm install

# Start the development server (port 3000 by default)
pnpm dev

# Create a production build
pnpm build

# Preview the production build
pnpm preview

Configure the Site

For local development or a separately hosted frontend, copy .env.example to .env. Restart the development server or rebuild after changing it.

# Site information
VITE_SITE_NAME="HomePage"
VITE_SITE_AUTHOR="INP146"
VITE_SITE_KEYWORDS="INP146,INP"
VITE_GITHUB_USERNAME="INP146"

# Core social links: email address, Twitter/Telegram usernames, QQ number, and Bilibili user ID
VITE_SOCIAL_EMAIL=""
VITE_SOCIAL_TWITTER=""
VITE_SOCIAL_TELEGRAM=""
VITE_SOCIAL_QQ=""
VITE_SOCIAL_BILIBILI=""
VITE_SITE_LOGO="/images/icon/favicon.ico"
VITE_SITE_MAIN_LOGO="/images/icon/logo.png"
VITE_SITE_APPLE_LOGO="/images/icon/apple-touch-icon.png"

# GitHub data API; leave empty to use the public GitHub API Worker
VITE_GITHUB_API=""

# ICP registration; leave empty to hide it
VITE_SITE_ICP=""

GitHub profile, activity, contributions, and the GitHub social link all use VITE_GITHUB_USERNAME.

Social Links

GitHub, Email, Twitter, Telegram, QQ, and Bilibili links are generated from the environment variables above. Use src/assets/socialLinks.json only for additional social links:

{
  "name": "Github",
  "icon": "/images/icon/github.png",
  "url": "https://github.com/your-account"
}

Project Links

Edit src/assets/siteLinks.json to add projects. The page fetches GitHub pinned repositories first, then merges and de-duplicates these local entries by link.

{
  "icon": "Github",
  "name": "My Project",
  "description": "A short project description.",
  "link": "https://github.com/your-account/my-project"
}

icon may be one of Github, Blog, Cloud, CompactDisc, Compass, Book, Fire, or LaptopCode. You can also select an icon from xicons, import it in src/components/Links.vue, and add it to the siteIcon mapping. Image URLs, data: URLs, and image paths under public/ are also supported.

Wallpapers and Icons

• Put wallpapers in public/images/ as background1.jpg through background4.jpg; the current component selects one at random.
• Site icons live in public/images/icon/. Replace the files or update the paths in .env.

GitHub Data

The page uses the following sources:

Content	Source	Notes
Pinned repositories	Worker at VITE_GITHUB_API	Reads GitHub GraphQL pinned repositories. Local project links remain available when the Worker is unavailable.
Contribution graph	Worker, then a public contribution API fallback	Shows the past 365 days; an empty calendar is shown when no data is available.
Public activity	GitHub REST API	Fetches recent public events directly and displays up to three.

Docker

# Build and run
docker compose up --build -d

The container listens on port 12445: http://localhost:12445.

Or use Docker directly:

docker build -t homepage .
docker run --rm -p 12445:12445 homepage

Acknowledgements, Copyright, and License

This project is a secondary development of imsyy/home. Thanks to the original author, imsyy, for the open-source project and design foundation. This repository is not an official upstream release.

Copyright ownership is declared as follows:

Copyright (c) 2022 imsyy              # Upstream project and retained original content
Copyright (c) 2026 @INP146            # Secondary development in this repository

Redistributions of this project or substantial portions of it must retain both copyright notices and the full MIT License.

Unless otherwise noted, this project and the retained upstream code are released under the MIT License, and are provided "as is" without warranty of any kind.