ReactPortfolio

personal-website — React Portfolio Template

By loriscatiz

A React-based single-page developer portfolio template with project filtering, a light/dark theme toggle, and a header navigation that responds to scroll direction.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews

Desktop homepage1 / 2

Visit websiteOpens in a new tab

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-13View source

What stands out

A quick read of the recorded project description.

Single-page structure that centralizes projects, skills, and experience

Project filtering supports combining category and language with AND/OR logic

Provides a light/dark theme toggle button

Header navigation dynamically shows or hides based on scroll direction

Responsive layout for both desktop and mobile browsing

Template Details

This is a single-page developer portfolio site built with React to showcase projects, skills, and experience. The layout is responsive and works on both desktop and mobile; the interface design emphasizes accessibility.

Functionally, the project list supports filtering by category and language using combined AND/OR logic; the page provides a light/dark theme toggle button; and the top navigation bar dynamically shows or hides based on the user's scroll direction.

On the technical side, the README lists React, Tailwind CSS, and TypeScript. The repository is under the MIT license, allowing free use, modification, commercial use, and distribution of this version of the code, but third-party assets such as demo images, fonts, and icons require separate license checks, and external services like domains and hosting may incur costs.

ReactPortfolio

Is it right for your project?

Use Cases

Developers building a personal portfolio page to showcase projects and skills
Display scenarios that require filtering a project list by category or language
Sites that want to offer a light/dark theme toggle
As a UI structure reference for a React single-page application

Suitable For

Front-end developers who need a quick start for a personal portfolio
Users familiar with React and Tailwind CSS
Personal sites that prefer a single-page layout and a clean interface

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
After cloning the repository, enter the directory and run npm i to install dependencies
2
Run npm run dev to start the development server, which by default opens on localhost port 5173
3
When using or distributing the code, retain the original author's copyright notice and the MIT license notice
4
Third-party assets such as demo images, fonts, and icons require separate license checks under their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in a public repository; the free scope applies to this version of the code and does not mean external services or third-party assets are free.

Must comply with when using

Free use, modification, commercial use, and distribution of this version of the code are permitted.
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

Demo images, fonts, icons, and other third-party assets require separate license checks 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.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

https://github.com/loriscatiz/personal-website/blob/master/LICENSE https://github.com/loriscatiz/personal-website/blob/master/README.md

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: 2026-08-27
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: 17a52daf041b319f426981b6503bafe926899820fb752a021c1db300c3479848

2026-10-13T01:51:02.574Z

Source file / repository

# Developer Portfolio Website

A modern, single-page portfolio website designed to showcase projects, skills, and experience. Built with React, the site offers a clean and accessible user interface with features like project filtering and a theme toggle button for enhanced user experience.

## Features

- **Responsive Design**: Works seamlessly on all devices.
- **Accessible UI/UX**: Designed with accessibility in mind for all users.
- **Project Filtering**: Filter projects by category and language with intuitive AND/OR logic.
- **Theme Toggle**: Switch between light and dark themes for a personalized experience.
- **Smooth Navigation**: Header visibility dynamically adjusts based on user scroll direction.

## Tech Stack

- **React**: Library for building the UI.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **TypeScript**: For type safety.

## Live Demo

[Live Demo](https://loriscatiz.netlify.app)

## Installation

If you want to test this project on your machine and modify it, you can clone this repo, navigate to it in your favorite terminal and run 'npm i' to install dependencies. After that, you can 'npm run dev' to open it in your browser at url: localhost/:portnumber (usually 5173).

Report a correction

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