The homepage uses a Matrix-style code rain animated background paired with a terminal-style interface
ReactPortfolio
portfolio-website — React Portfolio Template
By bomdiaola
A React personal portfolio template with a hacker-themed visual style, featuring a Matrix code rain animation and avatar glitch effect on the homepage, with the project list pulled in real time from public repositories via the GitHub API.
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-13View source
What stands out
A quick read of the recorded project description.
The avatar has a custom glitch effect, maintaining overall hacker-theme consistency
The projects section calls the GitHub REST API to display public repositories under the account in real time
In production, the GitHub Personal Access Token is stored via Vercel environment variables
Responsive layout, adapting to different screen sizes such as mobile and desktop
Adapted from Duerme's React template, using the MIT license
Template Details
This is a React-based personal portfolio website. Its author, Joan Garcés, uses it to showcase projects and practical experience in offensive cybersecurity and software development, positioning it as interactive job-application material for recruiters and industry professionals.
Visually, it adopts a consistent "hacker" style: the homepage has a Matrix-style code rain animated background, the avatar has a custom glitch effect, and the interface overall references a terminal style. The projects section directly calls the GitHub REST API to fetch and display public repositories in real time, so the project list automatically changes as the GitHub account is updated. In production, the GitHub Personal Access Token is managed through Vercel environment variables.
The tech stack is React.js, JavaScript (ES6+), HTML5, and CSS3, deployed on Vercel with its CI/CD, and version control uses Git and GitHub. The README states that the project was initially adapted from a React template created by Duerme and declares an MIT license.
Note that the README does not provide specific dependency versions, browser compatibility ranges, or accessibility support details; the project list depends on the GitHub API and access token configuration, and whether that section displays properly without a configured token needs to be verified independently.
ReactPortfolio
Is it right for your project?
Use Cases
- Individual developers building a portfolio page to showcase security or development projects
- Job seekers using an interactive webpage instead of a static resume to present project experience to recruiters
- Display scenarios that require the project list to sync automatically with GitHub repository updates
- A reference project for practicing React animated backgrounds, visual effects, and third-party API integration
Suitable For
- Developers with a React and JavaScript foundation who can configure environment variables themselves
- Individuals who want their portfolio to present a hacker or terminal visual style
- Developers who use GitHub repositories as their main source of project showcases
- Users who deploy frontend projects on Vercel or similar platforms
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, run npm install to install dependencies
- 2
Create a .env file in the project root and write REACT_APP_GITHUB_TOKEN=your token
- 3
Run npm start to launch the local development server
- 4
When deploying to Vercel, configure the same GitHub token in the platform's environment variables
- 5
Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, used commercially, and distributed for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete 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
- Demo images, fonts, icons, and other third-party assets must be checked under 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 additional charges.
- Using the project list feature requires applying for a GitHub Personal Access Token yourself and creating a .env file in the project root to configure REACT_APP_GITHUB_TOKEN; without a configured token, the part that pulls public repositories via the GitHub API may not work properly.
- In production, environment variables must be configured on the Vercel platform to store the GitHub Personal Access Token, and deployment depends on that external platform's environment variable mechanism.
- The project showcase area relies on the GitHub REST API to fetch public repositories in real time, which is an external service dependency; API availability or access restrictions will affect this feature.
- The project is adapted from a template created by Duerme, and when using it, care must be taken to retain attribution and acknowledgment to the original template author.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Create a `.env` file in the project root and add your GitHub API Key: ``` REACT_APP_GITHUB_TOKEN=ghp_YourTokenHere ```
Original README
* **Secure API Key:** Use of environment variables on Vercel to protect the GitHub Personal Access Token in production.
Original README
* **Dynamic Projects:** The portfolio section consumes the GitHub API to automatically display public repositories.
Original README
https://github.com/bomdiaola/portfolio-website/blob/main/LICENSEhttps://github.com/bomdiaola/portfolio-website/blob/main/README.md* This project was built upon the template created by **Duerme**.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. 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 · 80 / 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
- 2025-10-16
- Screenshot last checked
- 2026-10-13
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.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: b15f256561335c3e2e3d11900c0966e79b7557ee04dcb27e257cd464d33f0774
2026-10-13T06:25:01.435Z
Source file / repository# Joan Garcés - Cybersecurity Portfolio
### [View Live Demo](https://portfolio-website-delta-one-98.vercel.app/)
A dynamic and personal web portfolio created to demonstrate skills in offensive cybersecurity, software development, and problem-solving through projects and practical experience.
---
## About This Project
This project started as a React template and has been transformed into a fully functional and stylized personal portfolio with a "hacker" theme. The main goal is to serve as an interactive cover letter for recruiters and industry professionals, showcasing not only completed projects but also frontend development skills.
The homepage features a "Matrix"-style animated background and a profile picture with a "glitch" effect to maintain a cohesive aesthetic. The projects section connects directly to the GitHub API, securely fetching and displaying my public repositories in real-time.
---
## Technologies Used
* **Frontend:** React.js, JavaScript (ES6+), HTML5, CSS3
* **Deployment:** Vercel (with CI/CD)
* **Version Control:** Git & GitHub
* **APIs:** GitHub REST API
---
## Key Features
* **Animated Background:** "Matrix"-style code rain for a complete thematic immersion.
* **Dynamic Projects:** The portfolio section consumes the GitHub API to automatically display public repositories.
* **Secure API Key:** Use of environment variables on Vercel to protect the GitHub Personal Access Token in production.
* **Visual Effects:** Custom "glitch" effect for the profile picture and a terminal-inspired user interface.
* **Responsive Design:** Adaptable to different screen sizes, from mobile to desktop.
---
## Local Setup
To run this project locally, follow these steps:
1. **Clone the repository**
```sh
git clone [https://github.com/bomdiaola/portfolio-website.git](https://github.com/bomdiaola/portfolio-website.git)
```
2. **Install dependencies**
```sh
npm install
```
3. **Set up your environment variables**
Create a `.env` file in the project root and add your GitHub API Key:
```
REACT_APP_GITHUB_TOKEN=ghp_YourTokenHere
```
4. **Start the development server**
```sh
npm start
```
---
## Acknowledgements
* This project was built upon the template created by **Duerme**.
---
## License
Distributed under the MIT License. See `LICENSE` for more information.
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