Hi! I'm Pin-Yen. This repository contains the complete source code for my personal website.
If you like the style, feel free to check out ✨pm25/showlit, where I’ve organized my website into a template for anyone to use.
🌐 Live Demo
·
🐞 Report Bug
·
📄 Update Log
Table of Contents
This website is designed and developed by me. It showcases information about my background, including work experience, personal projects, research publications, résumé, articles I've written, and more. Feel free to explore!
I started building my personal website back in 2018 using plain HTML, CSS, and JavaScript. Since then, I’ve migrated it to a React-based version and refreshed the overall design. With the rise of modern web development tools, this latest version uses several popular frameworks and libraries, making it easier to customize and maintain. I also redesigned the UI to look more modern and consistent across different pages.
If you like the style, feel free to check out ✨pm25/showlit, a template where I’ve organized and wrapped the code used in my personal website. You're welcome to use and customize it for your own projects!
Why Showlit?
- ⚡ Quick Setup – Get your site running in minutes.
- 🎨 Customizable – Easily adjust the design (basic react skills required).
- 🔧 Built-in Features – Includes a blog, automatic project fetching, and more.
- 👥 Beginner-Friendly – No advanced coding needed to get started.
Found this project useful? Give it a ⭐ to support the project!
This project is primarily built using the following frameworks and libraries:
See how ✨Showlit looks in both light and dark themes:
There are two ways to use this template:
- 🚀 Quick Setup - no local development required
- 🧑💻 Local Development & Manual Deployment
This option does not require local development. Simply update the configuration files → commit → push. GitHub Actions will handle the build and deployment automatically.
Below is a simplified guide. For detailed instructions with screenshots, see the Quick Setup guide.
1️⃣ Create Your Repository
Click "Use this template" → "Create a new repository".
On the Create a new repository page:
- Enable "Include all branches"
- Enter a repository name
- Set the visibility to Public (default is Public already)
- Click "Create repository"
2️⃣ Enable GitHub Pages
Go to your Repository Settings → Pages, then configure:
- Branch:
gh-pages - Folder:
/(root)
Click Save.
3️⃣ Update Configuration Files
site.yaml— website title, metadata, etc.profile.yaml— your name, email, profile image, etc.sidebar.yaml— sidebar layoutgiscus.yaml— Giscus (article comments) configurationpublications.yaml— (optional) research publications list
4️⃣ Commit and Push Changes
Once your changes are pushed (or merged) to main branch, GitHub Actions will automatically:
- Build the project
- Deploy to GitHub Pages
- Publish your website 🎉
After a few minutes, your website will be available at:
https://<your-github-username>.github.io/<your-repo-name>You can personalize the website by updating the configuration files located in the config folder. Any changes will be automatically applied when the site is built or deployed.
For example, in config/profile.yaml, you can update the information with your owns:
profile:
name: "Pin-Yen Huang"
headline: "Student @ National Taiwan University"
email: "pyhuang97@gmail.com"
profileImage: "https://github.com/pm25.png"
# ...other fieldsOther configurable files include:
- Website Information: config/site.yaml
- Profile Information: config/profile.yaml
- Sidebar Layout: config/sidebar.yaml
- Giscus Comments: config/giscus.yaml
- Publications: config/publications.yaml
To add a article, create a folder and Markdown file inside public/articles following this structure:
# 💡 the folder name and Markdown filename must be the same
/public/articles/{slug}/{slug}.mdYou can use public/articles/template/template.md as a reference.
When the site is built or deployed, any properly structured articles will be automatically included and indexed.
Distributed under the MIT License. See LICENSE for more information.
Pin-Yen Huang - pyhuang97@gmail.com
I am deeply grateful for the following tools and resources that contributed to the development of this project: