React 18 + TypeScript + Vite + Tailwind CSS tech stack
ReactPortfolio
portfolio (Yazan98) — React Portfolio Template
By Yazan98
A personal portfolio website template built with React, TypeScript, Vite, and Tailwind CSS, including home, project list, project detail, and skills pages.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
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-14View source
What stands out
A quick read of the recorded project description.
GSAP animations and React Router routing
React Helmet for SEO
Four page types: home, projects, project detail, and skills
Supports Firebase, Docker, and GitHub Pages deployment
MIT license
Template Details
This template is the source code for Yazan98's personal portfolio website. The README states it is built with React 18 + TypeScript, Vite, and Tailwind CSS, uses GSAP for animations, React Router for routing, React Helmet for SEO, and targets Firebase Hosting for deployment. The page structure includes: home page (hero section, services, core languages, featured projects, articles, contact form), projects page (full project list with 3D card hover animations), project detail page (breakdown of a single project), and skills page (overview of languages and tools). The README records the project history: it started as a Vue.js single page, migrated to Angular 8, was rewritten with React + TypeScript as a PWA, then redesigned with Material UI, and the current version uses Tailwind CSS + Vite + GSAP animations. For local development, use npm install to install dependencies, npm run dev to run on port 3000, npm run build to generate output to the /build directory, and npm run preview to preview the production build. Deployment options include Firebase (firebase login and firebase deploy --only hosting), Docker (docker-compose up --build -d, or pull the yt98/portfolio-website:v3 image and map port 3000), and GitHub Pages. The README does not explain details such as data sources, content management, form backend handling, testing, or accessibility support.
ReactPortfolio
Is it right for your project?
Use Cases
- Build a personal developer portfolio website
- Showcase a project list and individual project details
- Display an overview of skills, languages, and tools
- Use as a starting point for a React + TypeScript + Tailwind project
Suitable For
- Developers who need a personal portfolio website
- Front-end developers familiar with React and TypeScript
- Projects that want to use Tailwind CSS and GSAP
- Static sites that need Firebase or Docker deployment
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Run npm install to install dependencies
- 2
npm run dev starts local development on port 3000
- 3
npm run build generates a production build to the /build directory
- 4
Firebase deployment: firebase login, then firebase deploy --only hosting
- 5
Docker deployment: docker-compose up --build -d, or pull yt98/portfolio-website:v3 and map port 3000
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 this version and does not mean that external services or third-party assets are free.
Must comply with when using
- You are allowed to use, modify, commercially use, and distribute the code of this version for free.
- 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
- The README mentions Firebase integration; before enabling related dynamic features, you need to configure it yourself and check Firebase quotas and charges.
- Demo images, fonts, icons, and other third-party assets need to be checked against 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 separate charges.
- Firebase deployment requires a Firebase account and logging in via firebase login before deployment.
- The Docker deployment method relies on pulling the yt98/portfolio-website:v3 image from Docker Hub and requires access to Docker Hub.
- The online demo in the README points to the author's personal domain yazantarifi.com, which is the author's personal site rather than a generic template address.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
### Firebase
Original README
docker pull yt98/portfolio-website:v3
Original README
https://github.com/Yazan98/portfolio/blob/master/LICENSEhttps://github.com/Yazan98/portfolio/blob/master/README.md**Live:** [yazantarifi.com](https://www.yazantarifi.com)
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-14. 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 · 83 / 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-07-28
- Screenshot last checked
- 2026-10-14
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: codex-user-requested-batch-review-20261015 · 2026-10-15
Inspect the recorded source material
SHA-256: ac7453954b097818b022c3ca84181d72ee7ae8cb400649dd0ecfba879d901256
2026-10-14T07:18:43.371Z
Source file / repository# Portfolio My personal portfolio website - built with React, TypeScript, Vite, and Tailwind CSS.  **Live:** [yazantarifi.com](https://www.yazantarifi.com) ## Tech Stack - React 18 + TypeScript - Vite - Tailwind CSS - GSAP (animations) - React Router - React Helmet (SEO) - Firebase Hosting ## Pages | Page | Description | |------|-------------| | Home | Hero section, services, core languages, featured projects, articles, contact form | | Projects | Full project listing with 3D card hover animations | | Project Details | Individual project breakdown | | Skills | Languages and tools overview | ## Getting Started ```bash # install dependencies npm install # run locally (port 3000) npm run dev # production build (output: /build) npm run build # preview production build npm run preview ``` ## Deployment ### Firebase ```bash firebase login firebase deploy --only hosting ``` ### Docker ```bash docker-compose up --build -d ``` Or pull directly: ```bash docker pull yt98/portfolio-website:v3 docker run --name portfolio -p 3000:3000 -d yt98/portfolio-website:v3 ``` ### GitHub Pages ``` https://yazan98.github.io ``` ## Project History 1. Started as a simple Vue.js page 2. Migrated to Angular 8 3. Rebuilt in React + TypeScript (PWA) 4. Redesigned with Material UI 5. Current version - Tailwind CSS + Vite + GSAP animations ## Screenshots See the [screenshots folder](https://github.com/Yazan98/portfolio/tree/master/screenshots) for page previews. ## License MIT - see [LICENSE](LICENSE) for details.
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