ReactPortfolio

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.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Uses TypeScript and React, with Next.js and Material UI as frameworks

02

Background effects based on tsParticles (migrated from particles.js since v2.0.0)

03

v1.0.0 is the stable version of the curriculum vitae model

04

README provides steps for deploying to GitHub Pages, with a build-and-deploy.yml example

05

The repository includes prototype screenshots made with Adobe XD and an online preview URL

06

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.

ReactPortfolio

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. 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. 2

    To deploy to GitHub Pages: select GitHub Actions as the Pages source in the repository settings

  3. 3

    Create .github/workflows in the root directory and add a .yml script; after pushing, the Action executes

  4. 4

    The repository provides .github/workflows/build-and-deploy.yml as a reference example

  5. 5

    Third-party assets such as demo images, fonts, and icons need to be checked separately according to their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This 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

## How to deploy into Github Pages

Original README
https://github.com/rithienatan/website-portfolio-template/blob/master/LICENSEhttps://github.com/rithienatan/website-portfolio-template/blob/master/README.md

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: 

![](./docs/prototype-website-curriculum.PNG)

---

## 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.
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

react-portfolio-template

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

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

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

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

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

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