ViteReactPortfolioStarter

folium — Vite Portfolio Template

By farzadasgari

A developer portfolio template built on Vite, React, TypeScript, and Tailwind CSS that presents projects, skills, and contact information through data files and style configuration, with a GitHub Pages deployment example.

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

What stands out

A quick read of the recorded project description.

A portfolio template built with React, TypeScript, Tailwind CSS, and Vite

Content such as projects is maintained in a single data file for easy replacement

Supports light, dark, and custom theme switching, with page transition animations

Provides online demos and actual screenshots for desktop and mobile

The README gives GitHub Pages deployment instructions

Uses the MIT license, allowing free use, modification, commercial use, and distribution

Template Details

folium is a portfolio template for developers, built with React, TypeScript, and Tailwind CSS, using Vite as the build tool. The repository provides an online demo, and the pages cover common portfolio sections such as About, Projects, Skills, and Contact, with actual screenshots for both desktop and mobile available for reference.

The template emphasizes content customization: content such as projects is maintained in a single data file, themes and colors can be adjusted through theme settings or Tailwind classes, and static assets such as the avatar and project thumbnails are placed in the public/ directory for replacement. The README also mentions light, dark, and custom theme switching, page transition animations, and search-engine-oriented structured handling.

Usage requires Node.js 18 or later and npm: after cloning the repository, install dependencies, run npm run dev to start the local development server (default port 5173), and run npm run build to generate the build output. The repository includes an MIT license, permitting free use, modification, commercial use, and distribution, but third-party assets such as demo images, fonts, and icons need separate license verification, and external services such as domains and hosting may also incur costs.

ViteReactPortfolioStarter

Is it right for your project?

Use Cases

Developers building a personal portfolio website to showcase projects, skills, and contact information
A starter project for a personal homepage that needs quick content and theme color replacement
As a practice or secondary development base for React + TypeScript + Tailwind
Deploying to GitHub Pages as an online resume or portfolio display page

Suitable For

Developers who want to quickly launch a personal portfolio using an existing template
Front-end developers familiar with or willing to use React, TypeScript, and Tailwind CSS
Personal sites that need light/dark theme switching and responsive layout
Users planning to host a static portfolio via GitHub Pages

Getting started & customization

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

1
Requires Node.js 18 or later and npm
2
After cloning the repository, run npm install to install dependencies
3
Run npm run dev to start the local development server, accessible by default at http://localhost:5173
4
Run npm run build to generate the build output; the README states the output is in the build/ directory
5
When replacing assets such as the avatar and project thumbnails under public/, you must verify their licenses yourself

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 the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

Allows free use, modification, commercial use, and distribution of this version's code.
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 need to 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.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

https://github.com/farzadasgari/folium/blob/main/LICENSE https://github.com/farzadasgari/folium/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-03. 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 · 86 / 100
Technologies: Vite · React
Website type: Portfolio · Starter

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-09-03
Screenshot last checked: 2026-10-03

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 Vite 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-04

Inspect the recorded source material

SHA-256: 0e5d85a4d36b94d6db9045c68a8ef320366d0f08b958c5236cc02dfbfb08ac10

2026-10-03T18:56:19.231Z

Source file / repository

# A Responsive React-TS + Tailwind Portfolio Template

<div align="center">
  
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://github.com/farzadasgari/folium/blob/main/LICENSE)
[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/TailwindCSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
[![Live Demo](https://img.shields.io/badge/Live%20Demo-Online-crimson?style=for-the-badge)](https://farzadasgari.github.io/folium)

</div>

A modern, responsive portfolio template built with **React**, **TypeScript**, and **Tailwind CSS**. This template helps developers quickly create a professional portfolio to showcase projects, skills, and experience. Fully responsive and customizable, it works seamlessly across desktop, tablet, and mobile devices.

---

## Table of Contents

- [Features](#features)
- [Live Demo](#live-demo)
- [Installation](#installation)
- [Usage](#usage)
- [Customization](#customization)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)

---

## Features

- 🌐 **Responsive Design**: Adapts to all screen sizes for a consistent user experience.
- 🛠️ **Modern Tech Stack**: Built with React, TypeScript, and Tailwind CSS for scalability and maintainability.
- 🎨 **Customizable**: Easily edit themes, colors, and content to match your personal brand.
- ⚡ **Quick Setup**: Start fast with clear instructions and a clean structure.
- 🚀 **GitHub Pages Ready**: Deploy your portfolio in minutes.
- 🌙 **Theme Modes**: Toggle between light, dark, and custom themes for a modern look.
- ✨ **Animated Transitions**: Smooth page transitions for a polished user experience.
- 🔍 **SEO Optimized**: Structured for better discoverability on search engines.
- 📂 **Easy Project Integration**: Add or edit projects via a single data file.

---

## Live Demo

See the template in action:  
🚀 **[View Live Demo](https://farzadasgari.github.io/folium)**

---

## Installation

To get started:

1. **Clone the Repository**  
   ```bash
   git clone https://github.com/farzadasgari/folium.git
   cd folium
   ```

2. **Install Dependencies**  
   Ensure you have Node.js (v18+) and npm.  
   ```bash
   npm install
   ```

---

## Usage

To run locally:

1. **Start Development Server**  
   ```bash
   npm run dev
   ```
   Visit [http://localhost:5173](http://localhost:5173) in your browser.

2. **Build for Production**  
   ```bash
   npm run build
   ```
   The optimized output is in the `build/` folder.

---

## Customization

Make the portfolio your own:

### Content

Edit to update sections like About, Projects, Skills, and Contact.

### Styling

Modify theme settings or directly use Tailwind CSS classes in components.

### Assets

Replace images in `public/` (e.g., profile photo, project thumbnails) with your own.

---

## Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch:
   ```bash
   git checkout -b feature/your-feature
   ```
3. Make your changes and commit:
   ```bash
   git commit -m "Add your feature"
   ```
4. Push to your branch:
   ```bash
   git push origin feature/your-feature
   ```
5. Open a Pull Request.

See full guidline at [CONTRIBUTING](https://github.com/farzadasgari/folium/blob/main/CONTRIBUTING.md)

---

## License

This project is licensed under the MIT License. See the [LICENSE](https://github.com/farzadasgari/folium/blob/main/LICENSE) file for details.

---

## Contact

For any inquiries, please contact:
- [email protected]
- [email protected]

---

## Links

[![Portfolio](https://img.shields.io/badge/Portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://farzadasgari.ir/)

[![Google Scholar](https://img.shields.io/badge/Google%20Scholar-4285F4?style=for-the-badge&logo=googlescholar&logoColor=fff)](https://scholar.google.com/citations?user=Rhue_kkAAAAJ&hl=en)

[![ResearchGate](https://img.shields.io/badge/ResearchGate-0CB?style=for-the-badge&logo=researchgate&logoColor=fff)](https://www.researchgate.net/profile/Farzad-Asgari)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/farzad-asgari/)

[![X](https://img.shields.io/badge/X-000?style=for-the-badge&logo=x&logoColor=white)](https://x.com/farzad_asg)

---

## Support & Donations

If you find this template useful, please consider supporting development:

**💸 Crypto Donations**
- Bitcoin: `bc1qxd8um2jre6xz4je64uhar9eh9uzu9yrvzh08sm`
- Ethereum: `0xCc8693060409263F68e37f75f76d519c19B2bAdE`
- USDT (TRC20): `TLL9ou7PahrNob2GEppV3o4e5B9vYqgsJN`

**🌐 Donate via CoinDrop**

<p align="center">
  <a href="https://coindrop.to/farzadasgari" target="_blank">
    <img src="https://coindrop.to/embed-button.png" style="border-radius: 10px; height: 57px !important;width: 229px !important;" alt="Coindrop.to me">
  </a>
</p>

---

<div align="center">
  <sub>Made with ❤️ by <a href="https://github.com/farzadasgari">FarZad</a></sub>
</div>

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

react-starter-kit

A full-stack SaaS monorepo starter built on Vite and React, with Bun, TypeScript, tRPC, Drizzle ORM, Better Auth, Stripe, and Cloudflare Workers. It includes email OTP, passkey, Google OAuth, organizations, subscription billing, Drizzle migrations, seed scripts, and Terraform infrastructure.

Vite · SaaS

cove

Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.

Vite · SaaS

vite-react-boilerplate

A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.

Vite · Starter

react-vite-admin

A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.

Vite · Admin dashboard

typescript-react_best_practices-vite_template

A Vite + React + TypeScript starter template by CodelyTV, preconfigured with Jest and React Testing Library unit tests, Cypress end-to-end tests, ESLint and Prettier using Codely's shared configuration, GitHub Actions workflows, a Makefile, and Sass.

Vite · Starter

cloudflare-starter-kit

A Cloudflare Workers project scaffolding template maintained by kriasoft, using Vite and TypeScript, with three built-in workspaces: api, app, and edge, and preconfigured local testing, multiple environments, and a GitHub Actions deployment workflow.

Vite · Starter