语言：简体中文 🇨🇳 | Language: English 🇺🇸

Jin Li's Homepage

This is a light-weight, elegant and customizable homepage with multi-language (i18n) support.

Live Demo

Features

• Light-weight: The homepage is designed to be simple and easy to use, with minimal dependencies.
• Elegant: The homepage has a clean and modern design, with a focus on readability and usability.
• Customizable: The homepage can be customized with a mounted JSON configuration directory, without rebuilding the image.
• Multi-language support: The homepage supports multiple languages, making it accessible to a wider audience.
• Responsive design: The homepage is designed to be responsive, ensuring that it looks great on all devices, from desktops to mobile phones.
• Technology stack: The homepage is built using React, Vite, and Ant Design with TypeScript, making it fast and elegant.
• Docker Support: The homepage can be easily deployed using Docker or docker-compose, making it easy to deploy in any environment.

Quick Start

Deploy with Docker (recommended)

git clone https://github.com/jin-li/jinli-homepage.git
cd jinli-homepage
cp -R config.example config
docker compose build
docker compose up -d

By default, the homepage will be served at http://localhost:12444. You can change the port by modifying the docker-compose.yml file.

To use a published image directly, create the configuration directory from config.example and mount it into the container:

docker run --rm -p 12444:3000 \
  -v "$(pwd)/config:/app/config:ro" \
  ghcr.io/your-github-user/jinli-home:latest

Serve Locally

git clone https://github.com/jin-li/jinli-homepage.git
yarn install
yarn dev

By default, the homepage will be served at http://localhost:5173. You can change the port by modifying the vite.config.ts file.

Build for Production

git clone https://github.com/jin-li/jinli-homepage.git
yarn install
yarn build

The production build will be generated in the dist directory. You can serve the production build using any static file server, such as serve or http-server.

yarn global add serve
serve -s dist

Customization

The homepage loads personal content at runtime from /config/config.<language>.json. This allows the same Docker image to be used by different people without rebuilding it.

config.example/
├── config.en.json
└── config.zh.json

Copy the example directory, then edit the files without rebuilding the image:

cp -R config.example config

config/ is ignored by Git and by Docker builds. Each language has its own readable JSON file containing site metadata, social links, and homepage links. The language switcher loads the matching file at runtime. Browser locales such as zh-CN use config.zh.json.

You can place custom images in the same directory and reference them as /config/avatar.jpg, /config/background.jpg, and so on. The default image contains generic fallback configurations in /default-config, which are used when a mounted config file is absent.

The icons used in this project are from the React Icons library, specifically from the Font Awesome 6 (fa6) collection:

The social media icons and links are configured in each config/config.<language>.json file. You can search available icon names in the React Icons library and use the corresponding Font Awesome 6 (fa6) icon name.

Issues or Feature Requests

If you encounter any issues or have feature requests, feel free to open an issue on the GitHub repository. When opening an issue, please follow the guidelines in the issue template.

Development

To contribute to the development of the homepage, you can follow these steps:

1. Fork the repository on GitHub.
2. Clone your forked repository to your local machine.
3. Create a new branch for your feature or bug fix.
4. Make your changes and commit them with a descriptive message.
5. Push your changes to your forked repository.
6. Create a pull request to the original repository.

The structure of the main source code is:

./
├── public
│   ├── assets            # background, logo, site favicon
│   └── locales           # site configurations, categorized by locales
└── src
    ├── main.tsx          # React default
    ├── index.css         # React default styles
    ├── App.tsx           # overall page view
    ├── App.module.scss   # overall style
    ├── i18n.ts           # i18n support with i18next
    ├── styles            # CSS styles, site color, font, etc.
    ├── view              # panels, responsive design
    ├── components        # components, including logo, description, social links, time box, links, footer, etc.
    └── hooks             # hooks

Acknowledgements

• This project is inspired by 無名の主页.

• The demo image for the responsive design on multi-devices is generated on Mokkify.

• The icons used in this project are from the React Icons library, specifically from the Font Awesome 6 (fa6) collection.

License

This project is licensed under the MIT License. See the LICENSE file for details.