A portfolio page for programmer with simple design and centralized configuration, helps you build your own portfolio in short time, integrating with APIs from LeetCode, GitHub, TMDB.
Demo: link
- Dark mode
- Flexible and centralized configuration
- Light animation that no bother to content
- LeetCode API: fetch your LeetCode info from API and load in page
- TMDB API: fetch your TMDB list from API and load in page
- GitHub Activities: fetch data from API and showing your commit activity in a GitHub-styled heat map
- GitHub Projects: fetch all your public repos on GitHub and show them in cards
- Component Lazy load Optimization: boost up first screen rendering
- Error Router handle: built-in error router configuration
- General error handling for API
- General cache for API through LocalStorage with expiration feature
To build your own portfolio based on this project, you need to create your own /src/config.js file.
Please refer to /src/config_template.js to adjust your config.js.
| Purpose | Techniques |
|---|---|
| Core | react |
| Frontend Router | react-router |
| UI and animation | tailwindcss, daisyui, animationcss |
| 3rd-party component | recharts |
| Building tool | vite |
Make sure you have already install NodeJS (version >= 20)
# clone the project to local
git clone https://github.com/MuenYu/portfolio.git
# locate to project folder
cd portfolio
# install dependencies
npm i
# run the project
npm run devSince data fetched from API will be stored in localstorage, if you updated config file, please clean your localstorage to preview.
├───public: public static resources
└───src: source code folder
├───api: all api related staff
├───components: all UI components including related features
├───layout: the layout of the page, containers of all components
├───config_template.js: the configuration template that you should follow
├───global.css: the global style that will be applied to all pages
├───main.jsx: the entrance of the whole application
└───router.jsx: the route object for react-router
Please use the issue feature of GitHub. There are two template for issue report:
- Bug: use it when you find anything works abnormal and know how to reproduce the issue.
- Feature: use it when you want a feature that is not in this project
Please follow the template to raise your issue!