Uses TypeScript and React, with Next.js and Material UI as frameworks
website-portfolio-template — React Portfolio Template
By rithienatan
A website portfolio/resume template based on React, TypeScript, Next.js, and Material UI, using tsParticles for the background, with an Actions configuration for deployment to GitHub Pages.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
Background effects based on tsParticles (migrated from particles.js since v2.0.0)
v1.0.0 is the stable version of the curriculum vitae model
README provides steps for deploying to GitHub Pages, with a build-and-deploy.yml example
The repository includes prototype screenshots made with Adobe XD and an online preview URL
Code is licensed under Apache-2.0
Template Details
This repository is a website portfolio template. The README calls it a "website portfolio model," and v1.0.0 is described as the stable version of a curriculum vitae model. In v2.0.0, the project was refactored from pure ReactJS + JavaScript to Next.js + TypeScript, and the particle background library was switched from particles.js to tsParticles; v2.1.0 updated the documentation and added an Actions configuration for deployment to GitHub Pages.
Regarding the technical composition, the README lists: language as TypeScript, library as React, frameworks as Material UI and Next.js, background using Particle.js (Vincent Garreau) and tsParticles, prototyping with Adobe XD, and version management following semantic versioning. The repository provides an online preview URL and prototype screenshots under the docs directory.
Usage and limitations: The deployment path given in the README is GitHub Pages—select GitHub Actions as the Pages source in the repository settings, create .github/workflows in the root directory and write a .yml script, and after pushing, the Action executes; the repository provides build-and-deploy.yml as an example. The materials do not specify data sources, content management methods, configurable options, or browser compatibility ranges; these need to be confirmed by examining the source code. The code is released under the Apache-2.0 license, and third-party assets such as demo images, fonts, and icons need to be checked separately for their licenses.
Is it right for your project?
Use Cases
- Building a personal resume or portfolio display page
- As a reference project for learning the Next.js + TypeScript + Material UI combination
- A starting template for pages that need particle background effects
- Deploying a static site to GitHub Pages via GitHub Actions
Suitable For
- Individual developers who need a ready-made portfolio/resume page structure
- Front-end learners using the React and TypeScript technology stack
- Users who want to host a personal site on GitHub Pages
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
The README does not provide local installation and startup commands; these need to be confirmed from the repository source code and package.json
- 2
To deploy to GitHub Pages: select GitHub Actions as the Pages source in the repository settings
- 3
Create .github/workflows in the root directory and add a .yml script; after pushing, the Action executes
- 4
The repository provides .github/workflows/build-and-deploy.yml as a reference example
- 5
Third-party assets such as demo images, fonts, and icons need to be checked separately according to their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version of the public repository under the Apache-2.0 license; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution are permitted; when distributing, the Apache-2.0 license must be included.
- Modified files must prominently indicate changes, and relevant copyright, patent, trademark, and attribution notices must be retained.
- If the original project includes a NOTICE file, applicable attribution notices in it must be retained when distributing derivative works.
- The license includes an applicable contributor patent grant; initiating patent litigation as described in the license terminates that patent grant, and no trademark use rights are granted.
- 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 prototype design was made with Adobe XD, which is commercial software from Adobe and requires obtaining a license separately; the prototype screenshots/design files in the repository may be subject to Adobe terms and are unrelated to the code's Apache-2.0 license.
- The background particle effect depends on the third-party libraries particles.js / tsParticles, whose licenses differ from the repository's Apache-2.0 and need to be checked separately for the third-party library's licensing terms.
- The deployment method given in the README relies on GitHub Pages and GitHub Actions services, requiring a GitHub account and compliance with GitHub's terms of service; the deployment process is not a local standalone running method.
- Demo images, fonts, icons, and other third-party assets need to be checked according to their respective licenses and cannot be judged solely by the code's Apache-2.0 license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
no-charge, royalty-free, irrevocable copyright license
Original License Text
Prototype made with: [AdobeXD](https://www.adobe.com/br/products/xd.html)
Original README
- Background: - [Particle.js - by Vincent Garreau](https://vincentgarreau.com/particles.js/) - [Install tsParticles for React](https://particles.js.org/)
Original README
https://github.com/rithienatan/website-portfolio-template/blob/master/LICENSEhttps://github.com/rithienatan/website-portfolio-template/blob/master/README.md## How to deploy into Github Pages
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. 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
- Partly documented · 68 / 100
- Technologies
- React
- 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
- 2023-02-08
- Screenshot last checked
- 2026-10-02
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 React 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.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: c1fdd995867ba2054b1be94853e053fba41f4fc3799040be955b15763ca1789d
2026-10-02T16:28:50.957Z
Source file / repository# website-portfolio-template Target repository for a website portfolio model. > ***Current version: v2.1.0*** --- ## Preview & prototype - If you want to see how it looks: [preview](https://rithienatan.github.io/website-portfolio-template/) - Prototype:  --- ## Resources used and References - Prototype made with: [AdobeXD](https://www.adobe.com/br/products/xd.html) - Language: [TypeScript](https://www.typescriptlang.org/) - Library: [React](https://pt-br.reactjs.org/) - Frameworks: [Material UI](https://mui.com/) and [NextJS](https://nextjs.org/) - Background: - [Particle.js - by Vincent Garreau](https://vincentgarreau.com/particles.js/) - [Install tsParticles for React](https://particles.js.org/) - Versioning Rules: [Semantic Versioning](https://semver.org/) --- ## How to deploy into Github Pages - Goes to repository settings. - Select Pages options on left side. - Choose "source" via Github Actions. - Create folders .github/workflows into root directory. - Create .yml inside ".github/workflows" and create your script. - git add .github/ - git commit - git push origin main-branch - Github Action will run after push. References: [Github Actions quickstart](https://docs.github.com/en/actions/quickstart) .yml example: [build and deploy next app](https://github.com/rithienatan/website-portfolio-template/blob/master/.github/workflows/build-and-deploy.yml) --- ## Patch Notes - v2.1.0: Update documentation. Implements actions in order to deploy into github pages. - v2.0.0: Change project based modules. Refactor pure ReactJS to NextJS and JavaScript to TypeScript. Update particlejs to tsparticles. - v1.0.0: Stable version of curriculum vitae model. --- ## License Copyright 2023 Rithie Natan Carvalhaes Prado Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
Explore similar templates
Compare previews and descriptions within the same stack and category.

react-portfolio-template
A React-based developer portfolio template for showcasing projects, work history, and skills. It offers a multi-component layout, dark and light modes, and responsive mobile adaptation, with text and images editable in src/components.
React · Portfolio

personal-website-react
A single-page developer portfolio template built with React and Material-UI, driven by a JSON Resume-compliant resume.json. It offers light/dark theme switching with localStorage persistence, a clean responsive layout, and Create React App tooling for simple builds and static deployment.
React · Portfolio

karngyan.com
A personal website and blog template for developers, built with TanStack Start, React 19, Tailwind CSS v4, and shadcn/ui. It uses MDX for articles with Shiki highlighting and GFM tables, and automatically generates RSS, sitemap, robots.txt, llms.txt, and OG images.
React · Portfolio

react-portfolio-template
A React portfolio template by Ryan Balieiro with a fixed sidebar and page-turn transitions on desktop, bottom navigation on mobile, multilingual support, light/dark themes, and content components for experience, education, skills, projects, and testimonials.
React · Portfolio

portfolio
A data scientist personal portfolio template built with React and MUI, with content centrally managed through configuration files in the assets directory.
React · Portfolio

react-portfolio
A React 16 and Material-UI developer portfolio template that centralizes personal information in a JSON Resume-compliant resume.json, with light/dark theme switching saved to local storage. It currently provides portfolio display only; resume page templates and structured data enhancements are still planned.
React · Portfolio
