Built with HTML, CSS, and Bootstrap 4; simple structure that can be edited directly in source files
HTMLPortfolio
personal-website-template — HTML Portfolio Template
By zhiyichin
An academic personal website template built with HTML, CSS, and Bootstrap 4, including sections for publications, projects, honors, and news. Placeholder content can be replaced to create a researcher homepage.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-03View source
What stands out
A quick read of the recorded project description.
Includes common academic homepage sections such as publications, projects, honors, recent news, and miscellany
Styles are centralized in css/style.css; the default purple theme allows changes to colors and fonts
Provides responsive desktop and mobile layouts; social icons use Font Awesome 6
Released under the MIT license; free to use, modify, use commercially, and distribute
Template Details
This is a personal website template for academic researchers, open-sourced by the author after building their own academic homepage. The template is written in HTML, CSS, and Bootstrap 4, with a page structure organized around academic scenarios. It includes sections for a personal bio, Publications, Projects, Honors, Recent News, and Miscellany, and provides both desktop and mobile layouts.
To use it, create a copy via the repository's Use this template button, then edit the personal information in index.html, replace the avatar at img/profile.png and the site logo at img/site-logo.png, and fill in your own content following the existing card format in each section. Styles are centralized in css/style.css; the default theme color is purple, and colors and fonts can be adjusted in this file. Social icons use Font Awesome 6.
The template is released under the MIT license and may be used, modified, used commercially, and distributed for free, provided the copyright and license notice are retained when distributing. Third-party assets in the repository, such as demo images, fonts, and icons, require separate license verification and cannot be judged solely by the code's MIT license. In the README, the author notes that the design references personal websites by Nelson Liu, Yung-Sung Chuang, Ethan Perez, and others, and suggests retaining the footer attribution.
HTMLPortfolio
Is it right for your project?
Use Cases
- Researchers building a personal academic homepage to showcase publications and projects
- PhD students or research staff organizing publication records, awards, and recent news
- Using the existing template as a starting point to quickly replace content and generate a personal site
Suitable For
- Academic researchers who need to display publication lists and project outcomes
- Users who want to maintain a personal homepage with pure HTML/CSS and without introducing build tools
- Users who accept manually modifying content and styles on an existing template
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Create your own copy via the repository's Use this template button, then clone it locally
- 2
Edit the title, meta information, personal bio, email, and social links in index.html
- 3
Replace the avatar at img/profile.png and the site logo at img/site-logo.png, and swap placeholder images in each section for actual images
- 4
Adjust the theme color and fonts in css/style.css; replace social icons according to the Font Awesome 6 documentation
- 5
Retain the original author's copyright notice and MIT license when distributing the code, and verify the licenses of third-party assets such as demo images
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in a public repository under the MIT license; the free scope applies to that version's code and does not imply that external services or third-party assets are free.
Must comply with when using
- Permits free use, modification, commercial use, and distribution of that version's code.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The author suggests retaining the footer attribution (not a mandatory license term, but an author request).
- The template design references and adapts multiple academic personal websites; users should note their sources and acknowledgments.
- Social icons use Font Awesome 6; verify its license and usage conditions yourself.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Keeping the attribution in the footer
Original README
This template is inspired by and adapted from various academic personal websites.
Original README
https://github.com/zhiyichin/personal-website-template/blob/main/LICENSEhttps://github.com/zhiyichin/personal-website-template/blob/main/README.mdFont Awesome 6 icons are used for social media and other icons
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 83 / 100
- Technologies
- HTML
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-04-07
- Screenshot last checked
- 2026-10-03
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-04
Inspect the recorded source material
SHA-256: 8e5bbee8fffa552afb7638c70e45337880005cb69c3dc6b173ee10b4d9f9614f
2026-10-03T20:14:44.110Z
Source file / repository# Personal Website Template
[](https://opensource.org/licenses/MIT)
[](https://zhiyichin.github.io)
While building my own academic website, I spent countless hours looking at other researchers' websites and learning from their designs. After finally getting mine to a place I was happy with, I thought it might be helpful to share my template with others who might be on the same journey.
This is a simple template built with HTML, CSS, and Bootstrap 4 that I use for my own website. It's designed to be easy to customize and includes sections for the things most academics need - publications, projects, and other work. If you're looking to create your own academic website, feel free to use this as a starting point and modify it to better suit your needs.
## Getting Started
1. Click the **"Use this template"** button at the top of this repository
2. Clone your new repository to your local machine
3. Customize the template with your information:
- Update `index.html` with your personal information
- Replace `img/profile.png` with your profile picture
- Replace `img/site-logo.png` with your website logo
- Modify the content in each section according to your needs -> replace the placeholder image with your actual image
- Update social media links and icons
## Customization Guide
### Basic Information
- Update the `<title>` and meta tags in `<head>` section
- Replace profile information in the header section
- Update email address and social media links
### Sections
- **Publications**: Add your publications following the existing card format
- **Projects**: Showcase your projects using the provided template structure
- **Honors**: List your achievements and awards
- **Recent News**: Keep the section updated with your latest activities
- **Miscellany**: Add personal interests or additional information
### Styling
- Main styling is controlled by `css/style.css`
- the main color theme is in purple, you can change the color in the CSS file
- if you do not like the font, you can change it too
- Bootstrap classes can be modified for layout adjustments
- Font Awesome 6 icons are used for social media and other icons: [[search for icons](https://fontawesome.com/search)] [[style your icon]([text](https://docs.fontawesome.com/))]
## Live Demo
Visit [https://zhiyichin.github.io/](https://zhiyichin.github.io/) to see the template in action.
## Credits
This template is inspired by and adapted from various academic personal websites. Special acknowledgment to:
- Nelson Liu's [personal website](https://nelsonliu.me/) and [source code](https://github.com/nelson-liu/website)
- Yung-Sung Chuang's [personal website](https://people.csail.mit.edu/yungsung/)
- Ethan Perez's [personal website](https://ethanperez.net/)
## Contributing
Feel free to submit issues and enhancement requests! If you find this template useful, please consider:
1. Giving a ⭐ to this repository
2. Keeping the attribution in the footer
3. Sharing it with others who might benefit from it
Explore similar templates
Compare previews and descriptions within the same stack and category.
simplefolio
Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.
HTML · Portfolio
Freelancer
A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.
HTML · Portfolio
Resume
A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.
HTML · Portfolio
Creative
A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.
HTML · Corporate Website
Grayscale
A dark single-page Bootstrap template from Start Bootstrap for photography, events and brand storytelling, with a large hero and clearly separated sections.
HTML · Corporate Website
startbootstrap-stylish-portfolio
A one-page Bootstrap portfolio theme from Start Bootstrap with multiple content sections and an off-canvas navigation menu. Basic use means editing HTML/CSS under dist and opening index.html; advanced use relies on npm with Pug and SCSS build scripts.
HTML · Portfolio